chore: using typography component for radio button options

ximxim · Mar 13, 2021 · 38ad64f · 38ad64f
1 parent c8232f9
commit 38ad64f
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 23 deletions.
diff --git a/src/components/data/RadioButton/RadioButton.style.ts b/src/components/data/RadioButton/RadioButton.style.ts
@@ -46,23 +46,3 @@ export const IconPulse = styled(Animated.View)`
   position: absolute;
   background-color: ${({ theme }) => theme.colors.brandSecondary};
 `;
-
-export const Label = styled.Text<{ hasError: boolean }>`
-  margin: 8px;
-  color: ${({ theme, hasError }) =>
-    hasError ? theme.colors.brandDanger : theme.colors.brandSecondary};
-`;
-
-export const OptionLabel = styled.Text`
-  font-size: 16px;
-  text-align: center;
-  margin-left: 10px;
-  color: ${({ theme }) => theme.colors.brandSecondary};
-`;
-
-export const Error = styled.Text`
-  margin: 8px;
-  font-size: 14px;
-  font-weight: 400;
-  color: ${({ theme }) => theme.colors.brandDanger};
-`;
diff --git a/src/components/data/RadioButton/RadioButton.tsx b/src/components/data/RadioButton/RadioButton.tsx
@@ -9,6 +9,8 @@ import {
 import * as Styled from './RadioButton.style';
 import type { IRadioButtonPickerProps, IOption } from './RadioButton.types';
 
+import { Typography } from '../../ui';
+
 export const RadioButton: FunctionComponent<IRadioButtonPickerProps> = ({
   label,
   error,
@@ -88,14 +90,26 @@ export const RadioButton: FunctionComponent<IRadioButtonPickerProps> = ({
             />
           )}
         </Styled.IconWrapper>
-        <Styled.OptionLabel>{val}</Styled.OptionLabel>
+        <Typography
+          mb={0}
+          ml={10}
+          variant="body1"
+          textAlign="center"
+          color="brandSecondary"
+        >
+          {val}
+        </Typography>
       </Styled.OptionWrapper>
     );
   };
 
   return (
     <Styled.Wrapper {...otherViewProps}>
-      {hasLabel && <Styled.Label {...{ hasError }}>{label}</Styled.Label>}
+      {hasLabel && (
+        <Typography color={hasError ? 'brandDanger' : 'brandSecondary'} m={8}>
+          {label}
+        </Typography>
+      )}
       <Styled.OptionsList>
         <FlatList
           data={options}
@@ -104,7 +118,11 @@ export const RadioButton: FunctionComponent<IRadioButtonPickerProps> = ({
           keyExtractor={(item) => item.key}
         />
       </Styled.OptionsList>
-      {hasError && <Styled.Error>{error}</Styled.Error>}
+      {hasError && (
+        <Typography color="brandDanger" m={8} variant="body2">
+          {error}
+        </Typography>
+      )}
     </Styled.Wrapper>
   );
 };