feat: add new theme colors (#151)

* feat: add new brand colors * refactor: simplify providers and remove object key quotes * feat: another set of brand colors * feat: finalize theme colors
domhhv · Jan 18, 2025 · 55d2c3b · 55d2c3b
1 parent 1dca698
commit 55d2c3b
Show file tree

Hide file tree

Showing 15 changed files with 172 additions and 168 deletions.
diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -23,7 +23,7 @@ const App = () => {
   return (
     <Providers>
       <AppHeader />
-      <main className="flex h-full flex-1 flex-col items-start bg-background">
+      <main className="flex h-full flex-1 flex-col items-start bg-background-50 dark:bg-background-700">
         <Routes>
           <Route
             path="/calendar/month/:year?/:month?/:day?"

diff --git a/src/components/calendar-month/MonthCalendar.tsx b/src/components/calendar-month/MonthCalendar.tsx
@@ -92,8 +92,8 @@ const MonthCalendar = () => {
 
   const handleOccurrenceModalClose = () => {
     window.setTimeout(() => {
-      closeOccurrenceDialog();
       setActiveDate(null);
+      closeOccurrenceDialog();
     }, 0);
   };
 
@@ -102,14 +102,14 @@ const MonthCalendar = () => {
     monthIndex: number,
     fullYear: number
   ) => {
-    openOccurrenceDialog();
     setActiveDate(new Date(fullYear, monthIndex - 1, dateNumber, 12));
+    openOccurrenceDialog();
   };
 
   const handleNoteModalClose = () => {
     window.setTimeout(() => {
-      closeNoteDialog();
       setActiveDate(null);
+      closeNoteDialog();
     }, 0);
   };
 

diff --git a/src/components/calendar-month/MonthCalendarHeader.tsx b/src/components/calendar-month/MonthCalendarHeader.tsx
@@ -168,10 +168,7 @@ const MonthCalendarHeader = ({
             radius="sm"
             variant="light"
             color="secondary"
-            className={clsx(
-              'h-auto dark:text-secondary-600',
-              isMobile && 'w-6 min-w-fit p-0'
-            )}
+            className={clsx('h-auto', isMobile && 'w-6 min-w-fit p-0')}
             role="navigate-back"
           >
             <ArrowFatLeft size={isDesktop ? 20 : 16} />

diff --git a/src/components/calendar-month/NoteDialog.tsx b/src/components/calendar-month/NoteDialog.tsx
@@ -42,10 +42,10 @@ const NoteDialog = ({ open, onClose, date }: NoteDialogProps) => {
   });
 
   React.useEffect(() => {
-    if (existingNote) {
+    if (existingNote?.content && !content) {
       setContent(existingNote.content);
     }
-  }, [existingNote]);
+  }, [existingNote, content]);
 
   const handleSubmit: MouseEventHandler<HTMLButtonElement> = async (event) => {
     event.preventDefault();

diff --git a/src/components/common/Alert/Alert.tsx b/src/components/common/Alert/Alert.tsx
@@ -43,17 +43,17 @@ const Alert = ({
   const alertClassName = clsx(
     'flex items-center gap-2 rounded-md border px-4 py-2',
     color === 'default' &&
-      'border-neutral-300 bg-slate-50 text-slate-700 dark:border-neutral-700 dark:bg-slate-900 dark:text-slate-100',
+      'border-default-300 bg-default-50 text-default-700 dark:border-default-700 dark:bg-default-900 dark:text-default-100',
     color === 'primary' &&
-      'border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-700 dark:bg-blue-900 dark:text-blue-200',
+      'border-primary-200 bg-primary-50 text-primary-700 dark:border-primary-700 dark:bg-primary-900 dark:text-primary-200',
     color === 'secondary' &&
-      'border-purple-200 bg-purple-50 text-purple-700 dark:border-purple-700 dark:bg-purple-900 dark:text-purple-200',
+      'border-secondary-200 bg-secondary-100 text-secondary-700 dark:border-secondary-700 dark:bg-secondary-900 dark:text-secondary-200',
     color === 'success' &&
-      'border-green-200 bg-green-50 text-green-700 dark:border-green-800 dark:bg-green-900 dark:text-green-200',
+      'border-success-500 bg-success-300 text-success-800 dark:border-success-800 dark:bg-success-900 dark:text-success-200',
     color === 'warning' &&
-      'border-orange-200 bg-orange-50 text-orange-700 dark:border-orange-900 dark:bg-orange-950 dark:text-orange-200',
+      'border-warning-600 bg-warning-400 text-warning-800 dark:border-warning-900 dark:bg-warning-800 dark:text-warning-200',
     color === 'danger' &&
-      'border-red-200 bg-red-50 text-red-700 dark:border-red-700 dark:bg-red-900 dark:text-red-200'
+      'border-danger-200 bg-danger-50 text-danger-700 dark:border-danger-700 dark:bg-danger-900 dark:text-danger-200'
   );
 
   const Icon = ICONS_BY_COLOR[color];

diff --git a/src/components/common/ConfirmDialog/ConfirmDialog.tsx b/src/components/common/ConfirmDialog/ConfirmDialog.tsx
@@ -32,8 +32,8 @@ const ConfirmDialog = ({
           {children}
           <div className="mb-4 mt-2 flex flex-row justify-end gap-4">
             <Button
-              color="default"
-              variant="bordered"
+              color="secondary"
+              variant="ghost"
               onClick={onCancel}
               isDisabled={loading}
               role="confirm-dialog-cancel"

diff --git a/src/components/habit/add-habit/AddHabitDialogButton.tsx b/src/components/habit/add-habit/AddHabitDialogButton.tsx
@@ -121,7 +121,7 @@ const AddHabitDialogButton = () => {
               ))}
             </Select>
             <Button
-              variant="bordered"
+              variant="ghost"
               size="sm"
               color="secondary"
               startContent={<Plus />}
@@ -132,7 +132,6 @@ const AddHabitDialogButton = () => {
             <Button
               fullWidth
               as="label"
-              variant="flat"
               size="sm"
               color="secondary"
               startContent={<CloudArrowUp />}

diff --git a/src/components/habit/add-trait/AddCustomTraitModal.tsx b/src/components/habit/add-trait/AddCustomTraitModal.tsx
@@ -71,21 +71,21 @@ const AddCustomTraitModal = ({ open, onClose }: AddCustomTraitModalProps) => {
             You can define a custom trait for your habits (e g. Moderately Bad)
           </p>
           <Input
-            variant="bordered"
+            variant="faded"
             value={label}
             onChange={handleLabelChange}
             isDisabled={addingTrait}
             label="Trait Label"
           />
           <Input
-            variant="bordered"
+            variant="faded"
             value={slug}
             onChange={handleSlugChange}
             isDisabled={addingTrait}
             label="Trait Slug"
           />
           <Textarea
-            variant="bordered"
+            variant="faded"
             value={description}
             onChange={handleDescriptionChange}
             isDisabled={addingTrait}
@@ -95,19 +95,21 @@ const AddCustomTraitModal = ({ open, onClose }: AddCustomTraitModalProps) => {
             <HexColorPicker color={color} onChange={handleTraitColorChange} />
             <div className="flex w-1/2 flex-col gap-2">
               <Input
-                variant="bordered"
+                variant="faded"
                 value={color.slice(1)}
                 onChange={(event) => handleTraitColorChange(event.target.value)}
                 startContent="#"
               />
               <p className="text-sm">
                 This is how habits of this trait will appear on your calendar
               </p>
-              <OccurrenceChip
-                occurrences={[makeTestOccurrence()]}
-                onDelete={() => null}
-                colorOverride={color}
-              />
+              <div className="flex">
+                <OccurrenceChip
+                  interactable={false}
+                  occurrences={[makeTestOccurrence()]}
+                  colorOverride={color}
+                />
+              </div>
             </div>
           </div>
         </ModalBody>

diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx
@@ -3,7 +3,6 @@ import { useScreenWidth, useFetchOnAuth } from '@hooks';
 import { Button, Tooltip, Spinner } from '@nextui-org/react';
 import { GithubLogo } from '@phosphor-icons/react';
 import { useSessionContext } from '@supabase/auth-helpers-react';
-import clsx from 'clsx';
 import React from 'react';
 import { Link } from 'react-router-dom';
 
@@ -17,7 +16,7 @@ const Header = () => {
   return (
     <>
       {session.isLoading && (
-        <div className="absolute bottom-0 left-0 right-0 top-0 z-50 flex h-full flex-1 items-center justify-center bg-slate-50 opacity-90 dark:bg-slate-950">
+        <div className="absolute bottom-0 left-0 right-0 top-0 z-50 flex h-full flex-1 items-center justify-center bg-background-100 opacity-90 dark:bg-background-800">
           <div className="flex -translate-y-[73px] items-center justify-center">
             <Spinner
               color="primary"
@@ -28,11 +27,10 @@ const Header = () => {
           </div>
         </div>
       )}
-      <header className="border-b border-b-slate-300 bg-background brightness-[95%] dark:border-b-slate-800 dark:brightness-[90%]">
+      <header className="border-b border-b-slate-300 bg-background-100 dark:border-b-slate-800 dark:dark:bg-background-900">
         <div className="mx-auto flex w-full items-center justify-between gap-2 px-8 py-2 lg:gap-4 lg:px-16 lg:py-4">
           <div className="flex items-center gap-2">
             <Button
-              variant="flat"
               color="primary"
               as={Link}
               to="/calendar/month"
@@ -43,14 +41,9 @@ const Header = () => {
             </Button>
             <Button
               color="secondary"
-              variant="flat"
               as={Link}
               to="/habits"
               size={isDesktop ? 'md' : 'sm'}
-              className={clsx(
-                'dark:text-secondary-800',
-                screenWidth < 339 && 'min-w-fit px-2'
-              )}
             >
               Habits
             </Button>

diff --git a/src/components/header/ThemeToggle.tsx b/src/components/header/ThemeToggle.tsx
@@ -28,9 +28,7 @@ const ThemeToggle = () => {
       {Object.values(ThemeMode).map((mode) => {
         const isSelected = themeMode === mode;
         const iconClassName = clsx(isSelected && 'text-white');
-        const buttonClassName = clsx(
-          isSelected && 'bg-secondary-500 dark:bg-secondary-600'
-        );
+        const buttonClassName = clsx(isSelected && 'bg-secondary-500');
 
         const Icon = modesToIcons[mode];
 

diff --git a/src/components/user-account/AccountPage.tsx b/src/components/user-account/AccountPage.tsx
@@ -55,6 +55,9 @@ const AccountPage = () => {
     void updateAccount();
   };
 
+  const isSubmitDisabled =
+    name === user?.userMetadata.name && email === user?.email && !password;
+
   return (
     <div className="flex h-lvh w-full flex-col items-start self-start px-8 py-2 lg:px-16 lg:py-4">
       <div className={containerClassName} data-testid="account-page">
@@ -102,8 +105,9 @@ const AccountPage = () => {
                 type="submit"
                 isLoading={loading}
                 color="primary"
+                isDisabled={isSubmitDisabled}
               >
-                Submit
+                Save
               </Button>
             </div>
           </div>

diff --git a/src/components/user-account/AuthModalButton.tsx b/src/components/user-account/AuthModalButton.tsx
@@ -116,22 +116,21 @@ const AuthModalButton = () => {
       {user?.id ? (
         <ButtonGroup size={screenWidth > 1024 ? 'md' : 'sm'}>
           <Button
+            color="secondary"
             isIconOnly={screenWidth < 1024}
             as={Link}
             to="/account"
             data-testid="auth-button"
-            variant="flat"
             startContent={<UserIcon data-testid="user-icon" weight="bold" />}
           >
             {screenWidth > 1024 && 'Account'}
           </Button>
           <Tooltip content="Log out">
             <Button
+              color="secondary"
               onPress={signOut}
               isIconOnly
-              color="secondary"
-              variant="flat"
-              className="border-l dark:border-secondary-400 dark:text-secondary-800"
+              className="border-l border-background-100 dark:border-background-900"
               startContent={
                 <SignOutIcon data-testid="sign-out-icon" weight="bold" />
               }

diff --git a/src/components/user-account/use-account-page/useAccountPage.ts b/src/components/user-account/use-account-page/useAccountPage.ts
@@ -48,7 +48,7 @@ const useAccountPage = () => {
 
   React.useEffect(() => {
     setForbidden(!loading && !user);
-  }, [user, loading, fillInputs]);
+  }, [user, loading]);
 
   const updateAccount = async () => {
     try {

diff --git a/src/services/occurrences.service.ts b/src/services/occurrences.service.ts
@@ -36,6 +36,7 @@ export const listOccurrences = async (
   const { error, data } = await supabaseClient
     .from('occurrences')
     .select('*, habit:habits(name, icon_path, trait:traits(id, name, color))')
+    .order('timestamp')
     .gt('timestamp', range[0])
     .lt('timestamp', range[1]);