fix text styling of dropdown options

calblueprint · Dec 30, 2024 · 7906153 · 7906153
1 parent f41df1b
commit 7906153
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 91 deletions.
diff --git a/app/plant-page/my-garden/[userPlantId]/page.tsx b/app/plant-page/my-garden/[userPlantId]/page.tsx
@@ -114,7 +114,6 @@ export default function UserPlantPage() {
 
           <Flex $direction="column" $gap="8px">
             <H4>Planting Timeline</H4>
-            {/*add SeasonalColorKey here */}
             <PlantCalendarRow
               harvestStart={currentPlant.harvest_start}
               harvestEnd={currentPlant.harvest_end}

diff --git a/app/seasonal-planting-guide/styles.ts b/app/seasonal-planting-guide/styles.ts
@@ -52,7 +52,7 @@ export const PageTitle = styled.div`
 `;
 
 export const VerticalSeparator = styled.div`
-  height: inherit;
+  height: 30px;
   width: 1px;
   background-color: ${COLORS.lightgray};
 `;
diff --git a/components/Button.tsx b/components/Button.tsx
diff --git a/components/FilterDropdownMultiple/index.tsx b/components/FilterDropdownMultiple/index.tsx
@@ -8,7 +8,7 @@ import Select, {
 } from 'react-select';
 import { P3 } from '@/styles/text';
 import { DropdownOption } from '@/types/schema';
-import { customSelectStyles, StyledOption } from './styles';
+import { customSelectStyles } from './styles';
 
 interface FilterDropdownProps<T> {
   value: DropdownOption<T>[];
@@ -31,27 +31,23 @@ export default function FilterDropdownMultiple<T>({
 
   // overrides the default MultiValue to display custom text
   // displays first selected value followed by + n if more than 1 selected
-  // StyledMultiValue appears for each selected option, so if more than 1 is selected,
+  // CustomMultiValue appears for each selected option, so if more than 1 is selected,
   // the rest of the selected options are not shown, instead the + n is shown as part of the first option
-  const StyledMultiValue = ({
+  const CustomMultiValue = ({
     ...props
   }: MultiValueProps<
     DropdownOption<T>,
     true,
     GroupBase<DropdownOption<T>>
   >) => {
-    const { selectProps, data } = props;
+    const { selectProps, data, index } = props;
     if (Array.isArray(selectProps.value)) {
-      // find index of the selected option and check if its the first
-      const index = selectProps.value.findIndex(
-        (option: DropdownOption<T>) => option.value === data.value,
-      );
       const isFirst = index === 0;
       // find number of remaining selected options
       const additionalCount = selectProps.value.length - 1;
 
       return (
-        <P3>
+        <P3 $fontWeight={400}>
           {/* display label of first selected option */}
           {isFirst ? (
             <>
@@ -75,15 +71,13 @@ export default function FilterDropdownMultiple<T>({
   ) => {
     return (
       <components.Option {...props}>
-        <StyledOption>
-          <input
-            type="checkbox"
-            checked={props.isSelected}
-            onChange={() => null} //no-op
-            style={{ marginRight: 8 }} // spacing between checkbox and text
-          />
-          {props.label}
-        </StyledOption>
+        <input
+          type="checkbox"
+          checked={props.isSelected}
+          onChange={() => null} //no-op
+          style={{ marginRight: 8 }} // spacing between checkbox and text
+        />
+        {props.label}
       </components.Option>
     );
   };
@@ -101,7 +95,7 @@ export default function FilterDropdownMultiple<T>({
       isSearchable={false}
       hideSelectedOptions={false}
       // use custom styled components instead of default components
-      components={{ MultiValue: StyledMultiValue, Option: CustomOption }}
+      components={{ MultiValue: CustomMultiValue, Option: CustomOption }}
       menuPosition="fixed"
       instanceId="dropdown-multiple"
     />

diff --git a/components/FilterDropdownMultiple/styles.ts b/components/FilterDropdownMultiple/styles.ts
@@ -1,13 +1,7 @@
 import { StylesConfig } from 'react-select';
-import styled from 'styled-components';
 import COLORS from '@/styles/colors';
 import { DropdownOption } from '@/types/schema';
 
-export const StyledOption = styled.div`
-  display: flex;
-  align-items: center;
-`;
-
 // custom styles for react-select component
 // Option type is DropdownOption<T> and isMulti is true
 export const customSelectStyles = <T>(): StylesConfig<
@@ -17,20 +11,23 @@ export const customSelectStyles = <T>(): StylesConfig<
   // container
   control: (baseStyles, state) => ({
     ...baseStyles,
-    borderRadius: '57px',
+    borderRadius: '56px',
+    height: '30px',
     border: `0.5px solid ${COLORS.midgray}`,
     backgroundColor: state.isDisabled ? COLORS.lightgray : '#fff',
     padding: '8px 14px',
     color: COLORS.midgray,
     minWidth: '138px',
+    width: 'max-content', // prevent collapse on scroll
   }),
   // placeholder text
   placeholder: baseStyles => ({
     ...baseStyles,
     color: COLORS.midgray,
     fontSize: '0.75rem',
+    fontWeight: 400,
     padding: '0px',
-    margin: '0px',
+    margin: 'auto',
   }),
   // hide vertical bar between arrow and text
   indicatorSeparator: baseStyles => ({
@@ -49,6 +46,10 @@ export const customSelectStyles = <T>(): StylesConfig<
     marginLeft: '-4px', // move the dropdown indicator to the left, cant override text styles
     color: COLORS.midgray,
   }),
+  menu: baseStyles => ({
+    ...baseStyles,
+    minWidth: 'max-content',
+  }),
   // container for selected multi option
   multiValue: baseStyles => ({
     ...baseStyles,
@@ -57,17 +58,23 @@ export const customSelectStyles = <T>(): StylesConfig<
     padding: '0px',
     margin: '0px',
   }),
+  // The following styles aren't used (see CustomMultiValue)
   // multi option display text
-  multiValueLabel: baseStyles => ({
+  // multiValueLabel: baseStyles => ({
+  //   ...baseStyles,
+  //   fontSize: '0.75rem',
+  //   color: `${COLORS.black}`,
+  //   padding: '0px',
+  // }),
+  // // hide 'x' next to each multi option
+  // multiValueRemove: baseStyles => ({
+  //   ...baseStyles,
+  //   display: 'none',
+  // }),
+  option: baseStyles => ({
     ...baseStyles,
+    // style as a P3 with fontWeight 400
     fontSize: '0.75rem',
-    color: `${COLORS.black} !important`,
-    padding: '0px',
-    paddingLeft: '0px',
-  }),
-  // hide 'x' next to each multi option
-  multiValueRemove: baseStyles => ({
-    ...baseStyles,
-    display: 'none',
+    fontWeight: 400,
   }),
 });
diff --git a/components/FilterDropdownSingle/styles.ts b/components/FilterDropdownSingle/styles.ts
@@ -24,25 +24,26 @@ export const customSelectStyles = <T>(
   // container
   control: (baseStyles, state) => ({
     ...baseStyles,
-    borderRadius: '57px',
+    borderRadius: '56px',
+    height: '30px',
     border: `0.5px solid ${state.hasValue ? COLORS.shrub : COLORS.midgray}`,
     backgroundColor: state.isDisabled
       ? COLORS.lightgray
       : state.hasValue
         ? COLORS.shrub
         : '#fff',
     padding: '8px 14px',
-    color: COLORS.midgray,
     minWidth: $isSmall ? '93px' : '150px',
   }),
   // placeholder text
   placeholder: baseStyles => ({
     ...baseStyles,
+    padding: '0px',
+    margin: 'auto',
+    // style as a P3 with fontWeight 400
     color: COLORS.midgray,
     fontSize: '0.75rem',
-    padding: '0px',
-    margin: '0px',
-    justifySelf: 'center',
+    fontWeight: 400,
   }),
   // hide vertical bar between arrow and text
   indicatorSeparator: baseStyles => ({
@@ -67,8 +68,16 @@ export const customSelectStyles = <T>(
     border: '0px',
     padding: '0px',
     margin: '0px',
-    fontSize: '0.75rem',
-    color: state.hasValue ? `#fff` : `${COLORS.black} !important`,
     paddingLeft: '0px',
+    // style as a P3 with fontWeight 400
+    color: state.hasValue ? `#fff` : `${COLORS.black}`, // replace with `#fff`?
+    fontSize: '0.75rem',
+    fontWeight: 400,
+  }),
+  option: baseStyles => ({
+    ...baseStyles,
+    // style as a P3 with fontWeight 400
+    fontSize: '0.75rem',
+    fontWeight: 400,
   }),
 });