fix(frontend): minor ui fixes (#435)

* fix(frontend): minor ui fixes * chore: add changeset * fix(frontend): remove orange bg from campaign page loader --------- Co-authored-by: luzzifoss <fedeluzzi00@gmail.com>
carrot-kpi · Oct 13, 2023 · b8b641f · b8b641f
1 parent 820dfc9
commit b8b641f
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 6 deletions.
diff --git a/.changeset/great-doors-promise.md b/.changeset/great-doors-promise.md
@@ -0,0 +1,5 @@
+---
+"@carrot-kpi/host-frontend": minor
+---
+
+Fix UI in campaign page and creation form
diff --git a/packages/frontend/src/components/fullscreen-modal/index.tsx b/packages/frontend/src/components/fullscreen-modal/index.tsx
@@ -54,10 +54,12 @@ export const AnimatedFullscreenModal = ({
 
     return (
         <animated.div style={springStyle} className={rootStyles({ bgColor })}>
-            <div className="flex flex-col w-full h-full bg-grid-light">
+            <div className="flex flex-col w-full h-full">
                 {stagingMode && <StagingModeBanner />}
                 <Navbar mode="modal" onDismiss={onDismiss} />
-                <div className="flex-grow">{children}</div>
+                <div className="flex-grow bg-grid-light bg-left-top">
+                    {children}
+                </div>
             </div>
         </animated.div>
     );

diff --git a/packages/frontend/src/components/ui/navbar/index.tsx b/packages/frontend/src/components/ui/navbar/index.tsx
@@ -13,7 +13,14 @@ import type { NavbarLink } from "../../../constants";
 import { cva } from "class-variance-authority";
 
 const rootStyles = cva(
-    ["flex", "justify-center", "px-4", "xl:px-32", "bg-grid-light"],
+    [
+        "flex",
+        "justify-center",
+        "px-4",
+        "xl:px-32",
+        "bg-grid-light",
+        "bg-left-top",
+    ],
     {
         variants: {
             bgColor: {
@@ -74,7 +81,7 @@ export const Navbar = ({
                 onNavbarClose={() => setOpen(false)}
             />
             <div className={rootStyles({ bgColor })}>
-                <div className="w-full max-w-screen-2xl relative flex items-center justify-between py-5 md:py-8 xl:py-11">
+                <div className="w-full h-24 md:h-32 max-w-screen-2xl relative flex items-center justify-between">
                     <div className="flex gap-4 items-center">
                         <div className="flex items-center">
                             {mode !== "modal" && (

diff --git a/packages/frontend/src/pages/page/index.tsx b/packages/frontend/src/pages/page/index.tsx
@@ -59,19 +59,20 @@ export const Page = ({ closing, onOutAnimationEnd }: PageProps) => {
         return (
             show && (
                 <AnimatedFullscreenModal
+                    bgColor="orange"
                     springStyle={style}
                     onDismiss={handleDismiss}
                 >
                     <KPITokenPage
                         kpiToken={watchedKPITokenWithData}
                         i18n={i18n}
                         fallback={
-                            <div className="bg-orange py-10 text-black flex justify-center">
+                            <div className="py-10 text-black flex justify-center">
                                 <Loader />
                             </div>
                         }
                         error={
-                            <div className="bg-orange bg-grid-light py-10 flex justify-center">
+                            <div className="bg-grid-light py-10 flex justify-center">
                                 <ErrorFeedback
                                     messages={{
                                         title: t(