From cf9656d91eedc73224e9cfc8871c977988994425 Mon Sep 17 00:00:00 2001
From: Meier Lukas <meierschlumpf@gmail.com>
Date: Sat, 14 Dec 2024 15:19:18 +0100
Subject: [PATCH] fix: styles for light mode (#1645)

---
 .../manage/_components/hero-banner.module.css | 22 ++++++++++++++-----
 .../manage/_components/hero-banner.tsx        |  2 +-
 .../src/app/[locale]/manage/apps/page.tsx     |  2 +-
 .../src/app/[locale]/manage/boards/page.tsx   |  2 +-
 .../secrets/integration-secret-card.tsx       |  2 +-
 .../[locale]/manage/search-engines/page.tsx   |  2 +-
 .../tools/tasks/_components/jobs-list.tsx     |  2 +-
 .../_components/create-user-stepper.tsx       | 10 ++++-----
 .../components/icons/picker/icon-picker.tsx   |  1 +
 9 files changed, 28 insertions(+), 17 deletions(-)

diff --git a/apps/nextjs/src/app/[locale]/manage/_components/hero-banner.module.css b/apps/nextjs/src/app/[locale]/manage/_components/hero-banner.module.css
index 0805459ef..f3b4141aa 100644
--- a/apps/nextjs/src/app/[locale]/manage/_components/hero-banner.module.css
+++ b/apps/nextjs/src/app/[locale]/manage/_components/hero-banner.module.css
@@ -1,12 +1,22 @@
 .bannerContainer {
   border-radius: 8px;
   overflow: hidden;
-  background: linear-gradient(
-    130deg,
-    #fa52521f 0%,
-    var(--mantine-color-dark-6) 35%,
-    var(--mantine-color-dark-6) 100%
-  ) !important;
+  @mixin dark {
+    background: linear-gradient(
+      130deg,
+      #fa52521f 0%,
+      var(--mantine-color-dark-6) 35%,
+      var(--mantine-color-dark-6) 100%
+    ) !important;
+  }
+  @mixin light {
+    background: linear-gradient(
+      130deg,
+      #fa52521f 0%,
+      var(--mantine-color-gray-3) 35%,
+      var(--mantine-color-gray-3) 100%
+    ) !important;
+  }
 }
 
 .scrollContainer {
diff --git a/apps/nextjs/src/app/[locale]/manage/_components/hero-banner.tsx b/apps/nextjs/src/app/[locale]/manage/_components/hero-banner.tsx
index cb1a3094a..575c5afe2 100644
--- a/apps/nextjs/src/app/[locale]/manage/_components/hero-banner.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/_components/hero-banner.tsx
@@ -32,9 +32,9 @@ const icons = [
 
 const countIconGroups = 3;
 const animationDurationInSeconds = 12;
+const arrayInChunks = splitToNChunks(icons, countIconGroups);
 
 export const HeroBanner = () => {
-  const arrayInChunks = splitToNChunks(icons, countIconGroups);
   const gridSpan = 12 / countIconGroups;
 
   return (
diff --git a/apps/nextjs/src/app/[locale]/manage/apps/page.tsx b/apps/nextjs/src/app/[locale]/manage/apps/page.tsx
index 8dd13774b..78a3474a4 100644
--- a/apps/nextjs/src/app/[locale]/manage/apps/page.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/apps/page.tsx
@@ -59,7 +59,7 @@ const AppCard = async ({ app }: AppCardProps) => {
   const session = await auth();
 
   return (
-    <Card>
+    <Card withBorder>
       <Group justify="space-between" wrap="nowrap">
         <Group align="top" justify="start" wrap="nowrap">
           <Avatar
diff --git a/apps/nextjs/src/app/[locale]/manage/boards/page.tsx b/apps/nextjs/src/app/[locale]/manage/boards/page.tsx
index 58b234d24..2b1529894 100644
--- a/apps/nextjs/src/app/[locale]/manage/boards/page.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/boards/page.tsx
@@ -67,7 +67,7 @@ const BoardCard = async ({ board }: BoardCardProps) => {
   const VisibilityIcon = board.isPublic ? IconWorld : IconLock;
 
   return (
-    <Card>
+    <Card withBorder>
       <CardSection p="sm" withBorder>
         <Group justify="space-between" align="center">
           <Group gap="sm">
diff --git a/apps/nextjs/src/app/[locale]/manage/integrations/_components/secrets/integration-secret-card.tsx b/apps/nextjs/src/app/[locale]/manage/integrations/_components/secrets/integration-secret-card.tsx
index 6962390f4..38ac5ec52 100644
--- a/apps/nextjs/src/app/[locale]/manage/integrations/_components/secrets/integration-secret-card.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/integrations/_components/secrets/integration-secret-card.tsx
@@ -30,7 +30,7 @@ export const SecretCard = ({ secret, children, onCancel }: SecretCardProps) => {
   const KindIcon = integrationSecretIcons[secret.kind];
 
   return (
-    <Card>
+    <Card withBorder>
       <Stack>
         <Group justify="space-between">
           <Group>
diff --git a/apps/nextjs/src/app/[locale]/manage/search-engines/page.tsx b/apps/nextjs/src/app/[locale]/manage/search-engines/page.tsx
index 5d56fe17c..8fe7254ec 100644
--- a/apps/nextjs/src/app/[locale]/manage/search-engines/page.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/search-engines/page.tsx
@@ -81,7 +81,7 @@ const SearchEngineCard = async ({ searchEngine }: SearchEngineCardProps) => {
   const session = await auth();
 
   return (
-    <Card>
+    <Card withBorder>
       <Group justify="space-between" wrap="nowrap">
         <Group align="top" justify="start" wrap="nowrap" style={{ flex: 1 }}>
           <Avatar
diff --git a/apps/nextjs/src/app/[locale]/manage/tools/tasks/_components/jobs-list.tsx b/apps/nextjs/src/app/[locale]/manage/tools/tasks/_components/jobs-list.tsx
index cab75ef95..c1150622c 100644
--- a/apps/nextjs/src/app/[locale]/manage/tools/tasks/_components/jobs-list.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/tools/tasks/_components/jobs-list.tsx
@@ -54,7 +54,7 @@ export const JobsList = ({ initialJobs }: JobsListProps) => {
   return (
     <Stack>
       {jobs.map((job) => (
-        <Card key={job.job.name}>
+        <Card key={job.job.name} withBorder>
           <Group justify={"space-between"} gap={"md"}>
             <Stack gap={0}>
               <Group>
diff --git a/apps/nextjs/src/app/[locale]/manage/users/create/_components/create-user-stepper.tsx b/apps/nextjs/src/app/[locale]/manage/users/create/_components/create-user-stepper.tsx
index ecf9397ef..1f2960dbb 100644
--- a/apps/nextjs/src/app/[locale]/manage/users/create/_components/create-user-stepper.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/users/create/_components/create-user-stepper.tsx
@@ -149,7 +149,7 @@ export const UserCreateStepperComponent = ({ initialGroups }: UserCreateStepperC
           color={!generalForm.isValid() ? "red" : undefined}
         >
           <form>
-            <Card p="xl">
+            <Card p="xl" shadow="md" withBorder>
               <Stack gap="md">
                 <TextInput
                   label={tUserField("username.label")}
@@ -165,7 +165,7 @@ export const UserCreateStepperComponent = ({ initialGroups }: UserCreateStepperC
         </Stepper.Step>
         <Stepper.Step label={t("step.security.label")} allowStepSelect={false} allowStepClick={false}>
           <form>
-            <Card p="xl">
+            <Card p="xl" shadow="md" withBorder>
               <Stack gap="md">
                 <CustomPasswordInput
                   withPasswordRequirements
@@ -185,7 +185,7 @@ export const UserCreateStepperComponent = ({ initialGroups }: UserCreateStepperC
           </form>
         </Stepper.Step>
         <Stepper.Step label={t("step.groups.label")} allowStepSelect={false} allowStepClick={false}>
-          <Card p="xl">
+          <Card p="xl" shadow="md" withBorder>
             <GroupsForm
               initialGroups={initialGroups}
               addGroup={(groupId) =>
@@ -198,7 +198,7 @@ export const UserCreateStepperComponent = ({ initialGroups }: UserCreateStepperC
           </Card>
         </Stepper.Step>
         <Stepper.Step label={t("step.review.label")} allowStepSelect={false} allowStepClick={false}>
-          <Card p="xl">
+          <Card p="xl" shadow="md" withBorder>
             <Stack maw={300} align="center" mx="auto">
               <UserAvatar size="xl" user={{ name: generalForm.values.username, image: null }} />
               <Text tt="uppercase" fw="bolder" size="xl">
@@ -208,7 +208,7 @@ export const UserCreateStepperComponent = ({ initialGroups }: UserCreateStepperC
           </Card>
         </Stepper.Step>
         <Stepper.Completed>
-          <Card p="xl">
+          <Card p="xl" shadow="md" withBorder>
             <Stack align="center" maw={300} mx="auto">
               <IconUserCheck size="3rem" />
               <Title order={2}>{t("step.completed.title")}</Title>
diff --git a/apps/nextjs/src/components/icons/picker/icon-picker.tsx b/apps/nextjs/src/components/icons/picker/icon-picker.tsx
index 8a514f8a5..16797c5aa 100644
--- a/apps/nextjs/src/components/icons/picker/icon-picker.tsx
+++ b/apps/nextjs/src/components/icons/picker/icon-picker.tsx
@@ -70,6 +70,7 @@ export const IconPicker = ({ initialValue, onChange, error, onFocus, onBlur }: I
               overflow: "visible",
               cursor: "pointer",
             }}
+            withBorder
           >
             <Box w={25} h={25}>
               <Image src={item.url} w={25} h={25} radius="md" />