diff --git a/frontend/src/app/vsr/page.tsx b/frontend/src/app/vsr/page.tsx index 2d48bf9..17d0eed 100644 --- a/frontend/src/app/vsr/page.tsx +++ b/frontend/src/app/vsr/page.tsx @@ -9,7 +9,7 @@ import HeaderBar from "@/components/shared/HeaderBar"; import PageNumber from "@/components/VSRForm/PageNumber"; import { createVSR, CreateVSRRequest, FurnitureInput } from "@/api/VSRs"; import { FurnitureItem, getFurnitureItems } from "@/api/FurnitureItems"; -import BinaryChoice from "@/components/BinaryChoice"; +import BinaryChoice from "@/components/shared/input/BinaryChoice"; import { FurnitureItemSelection } from "@/components/VeteranForm/FurnitureItemSelection"; interface IFormInput { diff --git a/frontend/src/components/BinaryChoice.tsx b/frontend/src/components/shared/input/BinaryChoice/index.tsx similarity index 94% rename from frontend/src/components/BinaryChoice.tsx rename to frontend/src/components/shared/input/BinaryChoice/index.tsx index 040af74..a459430 100644 --- a/frontend/src/components/BinaryChoice.tsx +++ b/frontend/src/components/shared/input/BinaryChoice/index.tsx @@ -1,6 +1,6 @@ import { useState } from "react"; import Chip from "@mui/material/Chip"; -import styles from "@/components/shared/input/MultipleChoice/styles.module.css"; +import styles from "@/components/shared/input/BinaryChoice/styles.module.css"; export interface BinaryChoiceProps { label: string; diff --git a/frontend/src/components/shared/input/BinaryChoice/styles.module.css b/frontend/src/components/shared/input/BinaryChoice/styles.module.css new file mode 100644 index 0000000..2f69852 --- /dev/null +++ b/frontend/src/components/shared/input/BinaryChoice/styles.module.css @@ -0,0 +1,64 @@ +/* BinaryChoice.module.css */ + +.wrapperClass { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 16px; + flex: 1 0 0; + font-size: 16px; + color: var(--Light-Gray, #818181); + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + line-height: normal; +} + +.chip { + border-width: 1px; + border-style: solid; + text-align: center; + font-family: "Open Sans"; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: normal; + border-radius: 64px; + border: 1px solid var(--Secondary-1, #102d5f); +} + +.chipSelected { + color: white; + background: #102d5f; +} + +.chipSelected:hover { + background: #102d5f; +} + +.chipContainer { + display: flex; + flex-direction: row; + gap: 16px; + flex-wrap: wrap; +} + +.chipUnselected { + color: var(--Accent-Blue-1, #102d5f); + background: rgba(255, 255, 255, 0); +} + +/*Need exact color for this*/ +.chipUnselected:hover { + background: rgb(213, 232, 239); +} + +.requiredAsterisk { + color: var(--Secondary-2, #be2d46); + text-align: left; +} + +.helperText { + color: var(--Secondary-2, #be2d46); + font-size: 12px; +}