pay technical debt

fullstacksjs · Sep 14, 2023 · 6daa7a6 · 6daa7a6
1 parent c012da2
commit 6daa7a6
Show file tree

Hide file tree

Showing 53 changed files with 2,031 additions and 1,405 deletions.
diff --git a/@types/mantine.d.ts b/@types/mantine.d.ts
@@ -1,6 +1,6 @@
 import type { Tuple } from '@mantine/core';
 
-import type { colors } from '../libs/design/theme/theme';
+import type { Palette } from '../libs/design/theme/palette';
 
 type DefaultMantineColors =
   | 'blue'
@@ -19,11 +19,9 @@ type DefaultMantineColors =
   | 'violet'
   | 'yellow';
 
-type IndexifyColor<T> = T extends DefaultMantineColors
-  ? T | `${T}.${0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9}`
-  : T;
+type IndexifyColor<T> = T | `${T}.${0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9}`;
 
-type Colors = IndexifyColor<DefaultMantineColors | keyof typeof colors>;
+type Colors = IndexifyColor<Palette | 'transparent'>;
 
 declare module '@mantine/core' {
   export interface MantineThemeColorsOverride {

diff --git a/app/Auth/Login/Login.tsx b/app/Auth/Login/Login.tsx
@@ -1,25 +1,24 @@
 import { useAuth0 } from '@camp/auth';
 import { messages } from '@camp/messages';
-import { Button, Center, Group, Image } from '@mantine/core';
+import { Button, Center, Flex, Image, Text, Title } from '@mantine/core';
 
 export const Login = () => {
   const { loginWithRedirect } = useAuth0();
 
   return (
-    <Group grow spacing={0} sx={{ height: '100%' }}>
-      <Center>
-        <Button size="xl" onClick={() => loginWithRedirect()}>
-          {messages.login.loginFrom.submitButton.text}
-        </Button>
-      </Center>
-      <Center
-        sx={theme => ({
-          backgroundColor: theme.colors.bgCanvas[6],
-          height: '100%',
-        })}
-      >
-        <Image fit="scale-down" alt="login" src="/login-logo.png" />
-      </Center>
-    </Group>
+    <Center sx={{ height: '100%' }}>
+      <Flex direction="column" w={270} sx={{ translate: '0 -8%' }}>
+        <Image fit="scale-down" alt="logo" src="/login-logo.png" />
+        <Flex direction="column" align="center" gap={30}>
+          <Flex direction="column" align="center">
+            <Title order={1}>{messages.login.title}</Title>
+            <Text color="secondary">{messages.login.desc}</Text>
+          </Flex>
+          <Button fullWidth onClick={() => loginWithRedirect()}>
+            {messages.login.button}
+          </Button>
+        </Flex>
+      </Flex>
+    </Center>
   );
 };
diff --git a/app/Dashboard/DashboardLayout.tsx b/app/Dashboard/DashboardLayout.tsx
@@ -18,7 +18,7 @@ const useStyles = createStyles(theme => ({
     paddingTop: 30,
     paddingBottom: 0,
     paddingInline: 40,
-    backgroundColor: theme.colors.bgCanvas[6],
+    backgroundColor: theme.colors.bg[6],
     overflow: 'auto',
   },
 }));

diff --git a/app/Dashboard/Households/HouseholdDetail/HouseholdDetail.tsx b/app/Dashboard/Households/HouseholdDetail/HouseholdDetail.tsx
@@ -46,7 +46,7 @@ const resolver = createResolver<FormSchema>({
 const useStyles = createStyles(theme => ({
   input: {
     label: {
-      color: theme.colors.fgSubtle[6],
+      color: theme.colors.fg[4],
     },
   },
 }));

diff --git a/app/Dashboard/Households/HouseholdDetail/_components/HouseholderForm/HouseholderForm.tsx b/app/Dashboard/Households/HouseholdDetail/_components/HouseholderForm/HouseholderForm.tsx
@@ -65,7 +65,7 @@ const resolver = createResolver<FormSchema>({
 const useStyles = createStyles(theme => ({
   input: {
     label: {
-      color: theme.colors.fgSubtle[6],
+      color: theme.colors.fg[4],
     },
   },
 }));

diff --git a/...d/Households/HouseholdDetail/_components/MemberForm/MemberEmptyState/MemberEmptyState.tsx b/...d/Households/HouseholdDetail/_components/MemberForm/MemberEmptyState/MemberEmptyState.tsx
@@ -1,7 +1,6 @@
 import { EmptyState } from '@camp/design';
 import { UserIcon } from '@camp/icons';
 import { messages } from '@camp/messages';
-import { useMantineTheme } from '@mantine/core';
 
 import { CreateMemberButton } from '../CreateMemberButton';
 
@@ -10,21 +9,10 @@ interface Props {
 }
 
 export const MemberEmptyState = ({ addNewMember }: Props) => {
-  const theme = useMantineTheme();
   const t = messages.member.empty;
 
   return (
-    <EmptyState
-      icon={
-        <UserIcon
-          width="33"
-          height="33"
-          color={theme.colors.primaryEmphasized[6]}
-        />
-      }
-      title={t.title}
-      message={t.description}
-    >
+    <EmptyState Icon={UserIcon} title={t.title} message={t.description}>
       <CreateMemberButton variant="filled" onClick={addNewMember} />
     </EmptyState>
   );