fix: add dark mode to signup form

Mentor-Cycle · Jul 7, 2023 · 0472ded · 0472ded
1 parent c689f3f
commit 0472ded
Show file tree

Hide file tree

Showing 16 changed files with 166 additions and 167 deletions.
diff --git a/src/SIGNUP_SRC/components/Form/TextToggle/Label.tsx b/src/SIGNUP_SRC/components/Form/TextToggle/Label.tsx
@@ -18,9 +18,7 @@ export function Label({ text, ...props }: LabelProps) {
         props.className
       )}
       style={{
-        color: isLightMode
-          ? "#7c7c7c" // gray-03
-          : "#CECECE", // gray-01
+        color: "var(--fore-subtle)",
       }}
     >
       {text}

diff --git a/src/SIGNUP_SRC/components/Input/InputCheckbox.tsx b/src/SIGNUP_SRC/components/Input/InputCheckbox.tsx
@@ -39,20 +39,19 @@ export const InputCheckbox = React.forwardRef<HTMLButtonElement, InputCheckboxPr
           onBlur={onBlur}
           id={id}
           className={twMerge(
-            "shrink-0 h-[22px] basis-[22px] grid place-items-center my-0.5 appearance-none rounded bg-neutral-05 border border-gray-02 outline-none focus:outline-1 focus:outline-gray-03 focus:outline-offset-2 data-[state=checked]:bg-secondary-03 data-[state=checked]:border-secondary-03",
-            rest.className,
-            "dark:bg-neutral-05"
+            "shrink-0 h-[22px] basis-[22px] grid place-items-center my-0.5 appearance-none rounded outline-none focus:outline-1 focus:outline-ring-strong focus:outline-offset-2 data-[state=checked]:bg-back-shadow  data-[state=checked]:border-ring-base bg-back-ground border border-ring-base ",
+            rest.className
           )}
         >
-          <Checkbox.Indicator className="text-gray-01">
+          <Checkbox.Indicator className="text-fore-ground-base">
             <CheckIcon size={12} />
           </Checkbox.Indicator>
         </Checkbox.Root>
         <label
           className="flex-1 text-sm"
           htmlFor={id}
           style={{
-            color: "#7c7c7c", // gray-03
+            color: "var(--fore-subtle)",
           }}
         >
           {label}

diff --git a/src/SIGNUP_SRC/components/Input/InputErrorMessage.tsx b/src/SIGNUP_SRC/components/Input/InputErrorMessage.tsx
@@ -28,7 +28,7 @@ export function InputErrorMessage({
           className={twMerge(
             "mt-2 relative text-sm border border-primary-01 text-primary-02 font-medium p-2 rounded-lg",
             rest.className,
-            "dark:bg-primary-01 dark:border-none font-normal"
+            "dark:bg-error dark:border-none font-normal"
           )}
           style={{
             color: "#E43D3D", // primary-02

diff --git a/src/SIGNUP_SRC/components/Input/InputLabel.tsx b/src/SIGNUP_SRC/components/Input/InputLabel.tsx
@@ -14,9 +14,10 @@ export function InputLabel({ required, disabled, label, ...rest }: InputLabelPro
       data-disabled={disabled}
       data-required={required}
       className={twMerge(
-        "relative mb-1 text-sm text-gray-03 data-[disabled=true]:text-gray-02 data-[disabled=true]:cursor-not-allowed w-fit data-[required=true]:after:text-primary-03 data-[required=true]:after:content-['*'] data-[required=true]:after:font-bold data-[required=true]:after:absolute data-[required=true]:after:-right-2.5",
+        "relative mb-1 text-sm text-gray-03 data-[disabled=true]:cursor-not-allowed w-fit data-[required=true]:after:text-primary-03 data-[required=true]:after:content-['*'] data-[required=true]:after:font-bold data-[required=true]:after:absolute data-[required=true]:after:-right-2.5",
         rest.className
       )}
+      style={{ color: "var(--fore-accent)" }}
     >
       {label}
     </label>

diff --git a/src/SIGNUP_SRC/components/Input/InputSkeleton.tsx b/src/SIGNUP_SRC/components/Input/InputSkeleton.tsx
@@ -21,7 +21,7 @@ export function InputSkeleton({ children, animation, ...rest }: InputSkeletonPro
         <p
           className={twMerge("text-sm", rest.textClasses, "leading-6")}
           style={{
-            color: "#7c7c7c", // gray-03
+            color: "var(--fore-subtle)",
           }}
         >
           {children ?? "Carregando..."}

diff --git a/src/SIGNUP_SRC/components/Input/InputStringAction.tsx b/src/SIGNUP_SRC/components/Input/InputStringAction.tsx
@@ -58,15 +58,15 @@ export const InputStringAction = React.forwardRef<
           type={type}
           id={inputId}
           className={twMerge(
-            "placeholder:text-gray-03 outline-none grow min-w-0 text-secondary-03 bg-transparent",
+            "placeholder:text-fore-subtle outline-none grow min-w-0 text-fore-ground-base bg-transparent",
             rest.className
           )}
           ref={asChild ? null : ref}
         >
           {children}
         </Component>
-        <div className="basis-6 h-6 rounded-lg hover:bg-gray-01 grid place-items-center cursor-pointer">
-          <ActionIcon onClick={onAction} className="text-gray-03 w-5 h-5" />
+        <div className="basis-6 h-6 rounded-lg hover:bg-back-shadow grid place-items-center cursor-pointer">
+          <ActionIcon onClick={onAction} className="text-symbol w-5 h-5" />
         </div>
       </div>
       <Input.Error errorMessage={errorMessage} />

diff --git a/src/SIGNUP_SRC/components/SelectControlled/Select.tsx b/src/SIGNUP_SRC/components/SelectControlled/Select.tsx
@@ -46,9 +46,6 @@ export const Select = React.forwardRef<HTMLDivElement, ISelect>(function SelectC
   const showingOptions = options?.filter((opt) => !value.includes(opt)) ?? null;
   const hasSelectedAll = showingOptions?.length === 0;
 
-  const { theme } = useTheme();
-  const isLightMode = theme === "light";
-
   const handleClickSelect = () => {
     if (!hasSelectedAll) setIsShowingOptionsModal((isOpen) => !isOpen);
   };
@@ -76,11 +73,7 @@ export const Select = React.forwardRef<HTMLDivElement, ISelect>(function SelectC
   }
 
   return (
-    <div
-      className="relative font-normal text-secondary-03 focus:outline-red-500"
-      onBlur={onBlur}
-      ref={SelectRef}
-    >
+    <div className="relative font-normal" onBlur={onBlur} ref={SelectRef}>
       <input type="hidden" ref={fieldRef} />
       <SelectInput
         className={twMerge("", rest.className)}
@@ -93,37 +86,35 @@ export const Select = React.forwardRef<HTMLDivElement, ISelect>(function SelectC
           value.map((selectedOption) => (
             <SelectedOption
               key={selectedOption}
-              className="py-[5px] px-4 bg-gray-01 text-xs"
+              className="py-[5px] px-4 bg-middle-ground text-xs"
             >
               <span className="select-none">{selectedOption}</span>
               <ButtonRemoveSelectedOption
                 onClick={handleRemoveTag(selectedOption)}
-                className="hover:bg-gray-02"
+                className="hover:bg-middle-shadow"
               >
-                <IconX size={12} className="text-secondary-03" />
+                <IconX size={12} className="text-symbol" />
               </ButtonRemoveSelectedOption>
             </SelectedOption>
           ))
         ) : (
           <TextPlaceholderSelect
             className="leading-none"
-            style={{
-              color: isLightMode ? "#7C7C7C" : "#7C7C7C", // gray-03
-            }}
+            style={{ color: "var(--fore-subtle)" }}
           >
             Selecione uma especialização
           </TextPlaceholderSelect>
         )}
         <ButtonClearAllOptions
           onClick={handleClearAllOptions}
-          className="hover:bg-gray-01"
+          className="hover:bg-back-shadow"
           tabIndex={tabIndex + 1}
         >
-          <IconTrash size={18} className="text-secondary-03" />
+          <IconTrash size={18} className="text-symbol" />
         </ButtonClearAllOptions>
       </SelectInput>
       {isShowingOptionsModal ? (
-        <ModalSelectOptions className="p-4 bg-neutral-05 border border-gray-02 border-t-0 z-10">
+        <ModalSelectOptions className="p-4 bg-back-ground border border-ring-base border-t-0 z-10">
           <div className="max-h-[11rem] overflow-y-auto flex flex-col">
             <SelectModalContent
               handleChooseOption={handleChooseOption}

diff --git a/src/SIGNUP_SRC/components/SelectControlled/SelectModalContent.tsx b/src/SIGNUP_SRC/components/SelectControlled/SelectModalContent.tsx
@@ -17,7 +17,7 @@ export default function SelectModalContent(props: SelectModalContentProps) {
     return (
       <ModalTextAllOptionsSelected
         className="pr-2 pl-4 italic text-sm"
-        style={{ color: "#CECECE" }} // gray-01
+        style={{ color: "var(--fore-subtle)" }} // gray-01
       >
         Carregando...
       </ModalTextAllOptionsSelected>
@@ -28,7 +28,7 @@ export default function SelectModalContent(props: SelectModalContentProps) {
     return (
       <ModalTextAllOptionsSelected
         className="pr-2 pl-4 italic text-sm"
-        style={{ color: "#CECECE" }} // gray-01
+        style={{ color: "var(--fore-subtle)" }} // gray-01
       >
         {props.textAllOptionsSelected ?? "Todas opções foram selecionadas."}
       </ModalTextAllOptionsSelected>
@@ -42,8 +42,7 @@ export default function SelectModalContent(props: SelectModalContentProps) {
           key={option}
           onClick={props.handleChooseOption(option)}
           className={twMerge(
-            "py-2 px-4 hover:bg-gray-01 rounded-lg",
-            "dark:hover:bg-gray-03"
+            "py-2 px-4 hover:bg-back-shadow rounded-lg text-fore-ground-base"
           )}
         >
           <span className="select-none">{option}</span>

diff --git a/src/SIGNUP_SRC/components/sign/ButtonSecondary.tsx b/src/SIGNUP_SRC/components/sign/ButtonSecondary.tsx
@@ -12,7 +12,8 @@ export function ButtonSecondary(props: ButtonSecondaryProps) {
     <Form.Button
       {...props}
       className={twMerge(
-        "sm:order-none order-1 focus:outline-gray-02 bg-neutral-05 border border-gray-02 hover:border-primary-01 transition-colors duration-100 hover:text-primary-02 text-secondary-03",
+        "sm:order-none order-1 focus:outline-ring-strong bg-back-block border border-ring-strong hover:border-primary-01 transition-colors duration-100 hover:text-primary-02 text-fore-ground-base",
+        "hover:border-ring-strong hover:text-fore-ground-base hover:bg-back-shadow",
         props.className
       )}
       tabIndex={props.tabIndex ?? 30}

diff --git a/src/SIGNUP_SRC/steps/components/FormSelect/component.tsx b/src/SIGNUP_SRC/steps/components/FormSelect/component.tsx
@@ -28,14 +28,11 @@ export function FormSelect<T extends FieldPath<IFormValues>>(props: IFormSelect<
   // falsy ativa o placeholder, string vazia não é falsy
   const value = hasValidValue ? selectValue : null;
 
-  if (props.isLoading) {
-    return <Input.Skeleton />;
-  }
-
   return (
     <Select
       id={props.id}
       options={props.options ?? []}
+      isLoading={props.isLoading}
       autoFocus
       unstyled
       tabIndex={props.tabIndex}
@@ -72,16 +69,13 @@ export function FormSelect<T extends FieldPath<IFormValues>>(props: IFormSelect<
         container: ({ isDisabled }) =>
           twMerge(
             stSignInput,
-            `focus-within:outline-1 focus-within:outline-gray-03 focus-within:outline-offset-2`,
-            isDisabled ? "bg-gray-01 dark:bg-gray-03" : ""
+            `focus-within:outline-1 focus-within:outline-ring-strong focus-within:outline-offset-2`,
+            isDisabled ? "bg-back-block" : ""
           ),
         menu: () => stSignInput,
         option: () =>
-          twMerge(
-            "py-2 px-4 hover:bg-gray-01 rounded-lg hover:cursor-pointer",
-            "dark:hover:bg-gray-03"
-          ),
-        placeholder: () => "text-gray-03",
+          twMerge("py-2 px-4 hover:bg-back-shadow rounded-lg hover:cursor-pointer"),
+        placeholder: () => "text-fore-subtle",
       }}
     />
   );

diff --git a/src/SIGNUP_SRC/steps/components/default-animations/Skeleton.ts b/src/SIGNUP_SRC/steps/components/default-animations/Skeleton.ts
@@ -5,10 +5,7 @@ export const skeletonDefaultAnimation = (props?: { duration: number }): MotionPr
 
   return {
     animate: {
-      backgroundColor: [
-        "#171818", // secondary 03
-        "#343434", // secondary 01
-      ],
+      backgroundColor: ["var(--back-ground)", "var(--back-shadow)"],
     },
     transition: {
       repeat: Infinity,

diff --git a/src/components/_Layout/PlanPage.tsx b/src/components/_Layout/PlanPage.tsx
@@ -1,4 +1,5 @@
 import Button from "@components/Button";
+import { CenteredContainer } from "@components/CenteredContainer";
 import ProfileCardToggle from "@components/ProfileCardToggle";
 import { Form } from "SIGNUP_SRC/components/Form";
 import { Sign } from "SIGNUP_SRC/components/sign";
@@ -14,7 +15,7 @@ export const PlanPage = () => {
   };
 
   return (
-    <main className=" min-h-screen flex flex-col items-center">
+    <CenteredContainer className="min-h-screen flex flex-col items-center px-8">
       <section className="max-w-2xl mt-20">
         <div>
           <h1 className="text-primary-05 dark:text-neutral-01 text-2xl sm:text-5xl text-center">
@@ -27,13 +28,13 @@ export const PlanPage = () => {
         <div className="mb-32">
           <ProfileCardToggle />
         </div>
-        <Form.MultipleInRow className="mb-32">
+        <Form.MultipleInRow className="is-form mb-32">
           <Sign.ButtonSecondary asChild>
             <Link href="/signin">Voltar</Link>
           </Sign.ButtonSecondary>
           <Sign.ButtonPrimary onClick={handleNext} text="Próximo" />
         </Form.MultipleInRow>
       </section>
-    </main>
+    </CenteredContainer>
   );
 };
diff --git a/src/components/_Layout/RegisterPage.tsx b/src/components/_Layout/RegisterPage.tsx
@@ -130,7 +130,7 @@ export const RegisterPage = () => {
           </aside>
           <form
             onSubmit={handleSubmit(submitHandler)}
-            className="relative w-full m-auto pt-12 lg:m-0 mb-24 max-w-[43rem]"
+            className="is-form relative form w-full m-auto pt-12 lg:m-0 mb-24 max-w-[43rem]"
           >
             <Controller
               name="isMentor"
@@ -140,30 +140,19 @@ export const RegisterPage = () => {
                   <input type="hidden" ref={ref} />
                   <TextToggle.Label
                     className={twMerge(
-                      "bg-neutral-05 text-gray-03 border border-gray-03 whitespace-nowrap",
-                      "dark:bg-gray-03 dark:text-gray-01 dark:border-gray-03"
+                      "bg-back-ground text-fore-subtle border border-ring-base whitespace-nowrap"
+                      // "dark:bg-gray-03 dark:text-gray-01 dark:border-gray-03"
                     )}
-                    color={isLightMode ? "#7c7c7c" : "#CECECE"}
                     text="Deseja participar como"
                   />
                   <TextToggle.OptionsContainer
                     className={twMerge(
-                      "text-secondary-02 bg-neutral-05 border border-gray-03 flex-col xs:flex-row rounded-xl xs:rounded-full",
-                      "dark:border-gray-02 dark:text-secondary-01"
+                      "bg-back-ground border border-ring-base flex-col xs:flex-row rounded-xl xs:rounded-full"
+                      // "dark:border-gray-02 dark:text-secondary-01"
                     )}
-                    optionsColor={
-                      isLightMode
-                        ? "#212324" // secondary-02
-                        : "#CECECE" // gray-01
-                    }
-                    optionsHoverBackgroundColor={
-                      isLightMode
-                        ? "#cecece" //gray-01
-                        : "#343434" // secondary-01
-                    }
-                    optionSelected={
-                      isLightMode ? "#bcbcbc" : "#3E3E3E" // gray-05
-                    }
+                    optionsColor="var(--fore-accent)"
+                    optionsHoverBackgroundColor="var(--back-shadow)"
+                    optionSelected="var(--middle-ground)"
                   >
                     <TextToggle.Option
                       {...field}