feat(dropdown): updated fonts in dropdown option

ZopaPublic · Jul 26, 2024 · b24a0c0 · b24a0c0
1 parent 3eed236
commit b24a0c0
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 6 deletions.
diff --git a/src/components/molecules/DropdownFiltered/Option.ts b/src/components/molecules/DropdownFiltered/Option.ts
@@ -1,24 +1,25 @@
 import { colors, typography } from '../../../constants';
 import styled, { css } from 'styled-components';
-import { AppTheme } from '../../styles/Theme';
+import { AppThemeProps } from '../../styles/Theme';
 
 interface OptionProps extends React.HTMLAttributes<HTMLDivElement> {
   highLighted?: boolean;
   selected?: boolean;
 }
+interface OptionThemeProps extends AppThemeProps, OptionProps {}
 
-const Option = styled.div<OptionProps & { theme: AppTheme }>`
+const Option = styled.div<OptionThemeProps>`
   cursor: pointer;
   padding: 8px;
-  line-height: 32px;
-  font-family: ${({ theme }) => theme.typography.primary};
+  line-height: ${({ theme }: OptionThemeProps) => theme.typography.lineHeight.body ?? '32px'};
+  font-family: ${({ theme }: OptionThemeProps) => theme.typography.primary};
   font-size: ${typography.sizes.text.body};
-  font-weight: 600;
+  font-weight: ${({ theme }: OptionThemeProps) => theme.typography.weights.regular ?? '600'};
   color: ${colors.greyDarkest};
   ${({ selected, highLighted }) =>
     (selected || highLighted) &&
     css`
-      color: ${({ theme }) => theme.input.searchInput.options.hover.color};
+      color: ${({ theme }: OptionThemeProps) => theme.input.searchInput.options.hover.color};
       background-color: ${({ theme }) => theme.input.searchInput.options.hover.backgroundColor};
     `};
 `;

diff --git a/src/components/styles/Theme/ThemeProvider.tsx b/src/components/styles/Theme/ThemeProvider.tsx
@@ -104,6 +104,10 @@ export interface LabelTheme {
   margin: string;
 }
 
+export interface OptionTheme {
+  margin: string;
+}
+
 export interface LegendTheme {
   className?: string;
   lineHeightClassName?: string;
@@ -208,6 +212,7 @@ export interface NavbarTheme {
 export interface ProgressBarTheme {
   color: string;
 }
+
 export interface ScrollableAreaTheme {
   scrollBarThumb: {
     borderRadius: string;
@@ -336,6 +341,7 @@ export interface AppTheme {
   spinner: SpinnerTheme;
   productTemplate?: ProductTemplate;
   radio: RadioTheme;
+  option?: OptionTheme;
 }
 
 export interface AppThemeProps {