make discard changes red; fix issue with same value radio input

calblueprint · May 21, 2024 · cfcbee2 · cfcbee2
1 parent 48b65f7
commit cfcbee2
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 7 deletions.
diff --git a/src/app/onboarding/legal-credentials/page.tsx b/src/app/onboarding/legal-credentials/page.tsx
@@ -195,7 +195,7 @@ export default function Page() {
                 </FormLabel>
                 <FormControl>
                   <RadioGroup
-                    name="registered"
+                    name="eoirRegistered"
                     defaultValue={formatTruthy(
                       field.value,
                       'Yes',

diff --git a/src/components/Buttons.tsx b/src/components/Buttons.tsx
@@ -45,7 +45,8 @@ interface ButtonProps {
 const ButtonStyles = css<ButtonProps>`
   ${sans.style}
   appearance: none;
-  color: ${({ $primaryColor }) => ($primaryColor ? 'white' : COLORS.blueMid)};
+  color: ${({ $primaryColor, $secondaryColor }) =>
+    $primaryColor ? 'white' : $secondaryColor || COLORS.blueMid};
   background: ${({ $primaryColor }) => $primaryColor || 'white'};
   padding: 10px 20px;
   border-radius: 5px;

diff --git a/src/components/RadioGroup/index.tsx b/src/components/RadioGroup/index.tsx
@@ -54,13 +54,13 @@ export default function RadioGroup({
       )}
       <GroupContainer>
         {options.map(o => (
-          <RadioLabel key={o} htmlFor={o}>
+          <RadioLabel key={o} htmlFor={`${name}${o}`}>
             <RadioInput
               type="radio"
-              id={o}
+              id={`${name}${o}`}
               name={name}
-              value={value}
-              checked={value ? value === o : undefined}
+              value={`${name}${o}`}
+              checked={value ? value === `${name}${o}` : undefined}
               defaultChecked={defaultValue === o}
               onChange={() => handleChange(o)}
             />

diff --git a/src/components/SettingsSection/index.tsx b/src/components/SettingsSection/index.tsx
@@ -1,5 +1,6 @@
 import { createContext, useContext, useMemo } from 'react';
 import { ControllerProps, FieldPath, FieldValues } from 'react-hook-form';
+import COLORS from '@/styles/colors';
 import { Flex } from '@/styles/containers';
 import { Spinner } from '@/styles/spinner';
 import { H2, P } from '@/styles/text';
@@ -54,7 +55,12 @@ export function SettingSection({
 
         {isEditing ? (
           <Flex $gap="1.25rem" $justify="end">
-            <Button type="button" onClick={() => cancelEdit?.()}>
+            <Button
+              type="button"
+              $secondaryColor={COLORS.redDark}
+              $tertiaryColor={COLORS.redDarker}
+              onClick={() => cancelEdit?.()}
+            >
               Discard Changes
             </Button>
             <BlueButton type="submit" disabled={isSubmitting}>