From b8b641f6418d2ac2f36c9fe02953a3b8f1b07e30 Mon Sep 17 00:00:00 2001
From: Federico Luzzi <federico.luzzi@proton.me>
Date: Fri, 13 Oct 2023 16:35:13 +0100
Subject: [PATCH] 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>
---
 .changeset/great-doors-promise.md                     |  5 +++++
 .../src/components/fullscreen-modal/index.tsx         |  6 ++++--
 packages/frontend/src/components/ui/navbar/index.tsx  | 11 +++++++++--
 packages/frontend/src/pages/page/index.tsx            |  5 +++--
 4 files changed, 21 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/great-doors-promise.md

diff --git a/.changeset/great-doors-promise.md b/.changeset/great-doors-promise.md
new file mode 100644
index 000000000..133e85571
--- /dev/null
+++ 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
index 22f449171..5c67d7f3e 100644
--- 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
index 56fc33ed9..0f2b07224 100644
--- 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
index ec57ff727..d8d5eefa2 100644
--- a/packages/frontend/src/pages/page/index.tsx
+++ b/packages/frontend/src/pages/page/index.tsx
@@ -59,6 +59,7 @@ export const Page = ({ closing, onOutAnimationEnd }: PageProps) => {
         return (
             show && (
                 <AnimatedFullscreenModal
+                    bgColor="orange"
                     springStyle={style}
                     onDismiss={handleDismiss}
                 >
@@ -66,12 +67,12 @@ export const Page = ({ closing, onOutAnimationEnd }: PageProps) => {
                         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(