fix: styles for light mode (#1645)

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 {

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 (

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

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">

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>

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

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>

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>

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" />