style: checkbox styling

calblueprint · Nov 19, 2024 · 5478965 · 5478965
1 parent afcc1c2
commit 5478965
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 10 deletions.
diff --git a/app/(auth)/forgotpassword/page.tsx b/app/(auth)/forgotpassword/page.tsx
@@ -33,7 +33,7 @@ export default function SignIn() {
       <Logo src={BRLogo} alt="An example image" />
       <Card>
         <Form>
-          <Link href="/onboarding/general">
+          <Link href="/signin">
             <Image src={Back} alt="Back icon" />
           </Link>
           <H5>Forgot Password?</H5>

diff --git a/app/discover/[event_id]/page.tsx b/app/discover/[event_id]/page.tsx
@@ -15,6 +15,7 @@ import {
   BackButton,
   Body,
   Bullet,
+  Checkbox,
   Container,
   FacilityName,
   HostWarningTitle,
@@ -23,7 +24,6 @@ import {
   InterestBlock,
   InterestTitle,
   Location,
-  Select,
   ShowInterest,
   SignUp,
   TagDiv,
@@ -36,7 +36,7 @@ function InterestBlockGen(title: string, about: string, icon: string) {
   return (
     <InterestBlock>
       {' '}
-      <Select />
+      <Checkbox type="checkbox" />
       <TextWithIcon>
         <div>
           <InterestTitle $fontWeight="500"> {title}</InterestTitle>

diff --git a/app/discover/[event_id]/styles.ts b/app/discover/[event_id]/styles.ts
@@ -107,12 +107,19 @@ export const InterestBlock = styled.div`
   margin-bottom: 0.75rem;
 `;
 
-export const Select = styled.div`
-  border-radius: 4px;
+export const Checkbox = styled.input.attrs({ type: 'checkbox' })`
+  width: 20px;
+  height: 20px;
   border: 2px solid ${COLORS.rose10};
-  width: 0.875rem;
-  height: 0.875rem;
-  line-height: 4.5rem;
+  border-radius: 4px;
+  appearance: none;
+  outline: none;
+  cursor: pointer;
+
+  &:checked {
+    background-color: ${COLORS.rose10}; /* Optional: Red background when checked */
+    border-color: ${COLORS.rose10}; /* Border stays red when checked */
+  }
 `;
 
 export const InterestTitle = styled(P)`

diff --git a/app/onboarding/general/page.tsx b/app/onboarding/general/page.tsx
@@ -86,7 +86,6 @@ export default function Onboarding() {
           />
           <UpdateContainer>
             <Checkbox
-              type="checkbox"
               name="notifications"
               checked={generalInfo.notifications}
               onChange={handleChange}

diff --git a/app/onboarding/general/styles.ts b/app/onboarding/general/styles.ts
@@ -10,10 +10,19 @@ export const UpdateContainer = styled.main`
   margin-top: 1.75rem;
 `;
 
-export const Checkbox = styled.input`
+export const Checkbox = styled.input.attrs({ type: 'checkbox' })`
   width: 20px;
   height: 20px;
   border: 2px solid ${COLORS.rose10};
+  border-radius: 4px;
+  appearance: none;
+  outline: none;
+  cursor: pointer;
+
+  &:checked {
+    background-color: ${COLORS.rose10}; /* Optional: Red background when checked */
+    border-color: ${COLORS.rose10}; /* Border stays red when checked */
+  }
 `;
 
 export const UpdateText = styled.text`