Merge pull request #301 from lad-tech/292-mobydick-20-fonts-controls

292 mobydick 20 fonts controls and chat
lad-tech · Jan 17, 2025 · d754ba2 · d754ba2
2 parents 845795a + c9ff332
commit d754ba2
Show file tree

Hide file tree

Showing 8 changed files with 64 additions and 42 deletions.
diff --git a/packages/core/src/chat/components/ChatMessage.tsx b/packages/core/src/chat/components/ChatMessage.tsx
@@ -1,7 +1,7 @@
 import {Image} from 'react-native';
 
 import View from '../../basic/components/View/View';
-import {TypographyLegacy} from '../../typography';
+import {Typography} from '../../typography';
 import {isNumber} from '../../other/functions/isNumber';
 import useStyles from '../../styles/hooks/useStyles';
 import {isValidMessageTime} from '../functions/isValidMessageTime';
@@ -27,19 +27,18 @@ const ChatMessage = (props: IChatMessage) => {
 
         {message && (
           <View style={styles.textArea}>
-            <TypographyLegacy
-              font={isMe ? 'Regular-White-XS' : 'Regular-Secondary-XS'}>
+            <Typography font={isMe ? 'Regular-White-S' : 'Regular-Secondary-S'}>
               {message}
-            </TypographyLegacy>
+            </Typography>
           </View>
         )}
 
         <View style={styles.timeArea}>
           {isValidMessageTime(time) && (
-            <TypographyLegacy
-              font={isMe ? 'Regular-WhiteExtra-XXXS' : 'Regular-Muted-XXXS'}>
+            <Typography
+              font={isMe ? 'Regular-WhiteExtra-XXS' : 'Regular-Muted-XXS'}>
               {time}
-            </TypographyLegacy>
+            </Typography>
           )}
         </View>
       </View>
@@ -54,7 +53,7 @@ const stylesCreate = createStyles(({spaces, colors}, isMe: boolean) => ({
     maxWidth: '90%',
   },
   bubble: {
-    backgroundColor: isMe ? colors.ElementBase : colors.BgPrimary,
+    backgroundColor: isMe ? colors.ElementAccent : colors.BgPrimary,
     borderRadius: spaces.Space10,
     borderBottomLeftRadius: isMe ? spaces.Space10 : 0,
     borderBottomRightRadius: isMe ? 0 : spaces.Space10,

diff --git a/packages/core/src/chat/components/ChatPressableIcon.tsx b/packages/core/src/chat/components/ChatPressableIcon.tsx
@@ -15,7 +15,7 @@ const ChatPressableIcon = (props: IChatPressableIcon) => {
   const {colors} = useTheme();
   const {
     name,
-    color = colors.IconBase,
+    color = colors.IconAccent,
     backgroundColor = colors.BgAccent,
     ...otherProps
   } = props;

diff --git a/packages/core/src/chat/components/__tests__/__snapshots__/ChatMessage.test.tsx.snap b/packages/core/src/chat/components/__tests__/__snapshots__/ChatMessage.test.tsx.snap
@@ -37,9 +37,10 @@ exports[`@lad-tech/mobydick-core/ChatMessage renders correctly  isNotValid time
             {
               "color": "#353A45",
               "fontFamily": "Inter-Regular",
-              "fontSize": 12,
-              "lineHeight": 16,
-              "minHeight": 16,
+              "fontSize": 14,
+              "fontWeight": "400",
+              "lineHeight": 18,
+              "minHeight": 18,
             },
             undefined,
           ]
@@ -98,9 +99,10 @@ exports[`@lad-tech/mobydick-core/ChatMessage renders correctly isMe 1`] = `
             {
               "color": "#FFFFFF",
               "fontFamily": "Inter-Regular",
-              "fontSize": 12,
-              "lineHeight": 16,
-              "minHeight": 16,
+              "fontSize": 14,
+              "fontWeight": "400",
+              "lineHeight": 18,
+              "minHeight": 18,
             },
             undefined,
           ]
@@ -126,6 +128,7 @@ exports[`@lad-tech/mobydick-core/ChatMessage renders correctly isMe 1`] = `
               "color": "rgba(255, 255, 255, 0.8)",
               "fontFamily": "Inter-Regular",
               "fontSize": 10,
+              "fontWeight": "400",
               "lineHeight": 14,
               "minHeight": 14,
             },
@@ -209,6 +212,7 @@ exports[`@lad-tech/mobydick-core/ChatMessage renders correctly isMe image 1`] =
               "color": "rgba(255, 255, 255, 0.8)",
               "fontFamily": "Inter-Regular",
               "fontSize": 10,
+              "fontWeight": "400",
               "lineHeight": 14,
               "minHeight": 14,
             },
@@ -288,6 +292,7 @@ exports[`@lad-tech/mobydick-core/ChatMessage renders correctly isMe image number
               "color": "rgba(255, 255, 255, 0.8)",
               "fontFamily": "Inter-Regular",
               "fontSize": 10,
+              "fontWeight": "400",
               "lineHeight": 14,
               "minHeight": 14,
             },
@@ -339,9 +344,10 @@ exports[`@lad-tech/mobydick-core/ChatMessage renders correctly isNotMe 1`] = `
             {
               "color": "#353A45",
               "fontFamily": "Inter-Regular",
-              "fontSize": 12,
-              "lineHeight": 16,
-              "minHeight": 16,
+              "fontSize": 14,
+              "fontWeight": "400",
+              "lineHeight": 18,
+              "minHeight": 18,
             },
             undefined,
           ]
@@ -367,6 +373,7 @@ exports[`@lad-tech/mobydick-core/ChatMessage renders correctly isNotMe 1`] = `
               "color": "#9BA1B0",
               "fontFamily": "Inter-Regular",
               "fontSize": 10,
+              "fontWeight": "400",
               "lineHeight": 14,
               "minHeight": 14,
             },

diff --git a/packages/core/src/chat/components/__tests__/__snapshots__/ChatMessageAvatar.test.tsx.snap b/packages/core/src/chat/components/__tests__/__snapshots__/ChatMessageAvatar.test.tsx.snap
@@ -122,9 +122,10 @@ exports[`@lad-tech/mobydick-core/ChatMessageAvatar renders correctly isNotMe 1`]
               {
                 "color": "#353A45",
                 "fontFamily": "Inter-Regular",
-                "fontSize": 12,
-                "lineHeight": 16,
-                "minHeight": 16,
+                "fontSize": 14,
+                "fontWeight": "400",
+                "lineHeight": 18,
+                "minHeight": 18,
               },
               undefined,
             ]
@@ -150,6 +151,7 @@ exports[`@lad-tech/mobydick-core/ChatMessageAvatar renders correctly isNotMe 1`]
                 "color": "#9BA1B0",
                 "fontFamily": "Inter-Regular",
                 "fontSize": 10,
+                "fontWeight": "400",
                 "lineHeight": 14,
                 "minHeight": 14,
               },
@@ -287,9 +289,10 @@ exports[`@lad-tech/mobydick-core/ChatMessageAvatar renders correctly onPress 1`]
               {
                 "color": "#FFFFFF",
                 "fontFamily": "Inter-Regular",
-                "fontSize": 12,
-                "lineHeight": 16,
-                "minHeight": 16,
+                "fontSize": 14,
+                "fontWeight": "400",
+                "lineHeight": 18,
+                "minHeight": 18,
               },
               undefined,
             ]
@@ -315,6 +318,7 @@ exports[`@lad-tech/mobydick-core/ChatMessageAvatar renders correctly onPress 1`]
                 "color": "rgba(255, 255, 255, 0.8)",
                 "fontFamily": "Inter-Regular",
                 "fontSize": 10,
+                "fontWeight": "400",
                 "lineHeight": 14,
                 "minHeight": 14,
               },

diff --git a/packages/core/src/controls/ControlsLists/__tests__/ControlsList.tsx b/packages/core/src/controls/ControlsLists/__tests__/ControlsList.tsx
@@ -3,17 +3,17 @@ import {render} from '@testing-library/react-native';
 import {ControlsList} from '../index';
 import {CheckBox} from '../../CheckBox';
 import {Radio} from '../../Radio';
-import {TypographyLegacy} from '../../../typography/components/TypographyLegacy/TypographyLegacy';
+import {Typography} from '../../../typography';
 
 describe('ControlsList', () => {
   it('should renders correctly with checkbox type', function () {
     const {toJSON} = render(
       <ControlsList single={false} onChange={jest.fn} values={[]}>
         <CheckBox value={'1'}>
-          <TypographyLegacy font={'Regular-Primary-M'}>1</TypographyLegacy>
+          <Typography font={'Regular-Primary-M'}>1</Typography>
         </CheckBox>
         <CheckBox value={'2'}>
-          <TypographyLegacy font={'Regular-Primary-M'}>2</TypographyLegacy>
+          <Typography font={'Regular-Primary-M'}>2</Typography>
         </CheckBox>
       </ControlsList>,
     );
@@ -24,10 +24,10 @@ describe('ControlsList', () => {
     const {toJSON} = render(
       <ControlsList single onChange={jest.fn} values={[]}>
         <CheckBox value={'1'}>
-          <TypographyLegacy font={'Regular-Primary-M'}>1</TypographyLegacy>
+          <Typography font={'Regular-Primary-M'}>1</Typography>
         </CheckBox>
         <CheckBox value={'2'}>
-          <TypographyLegacy font={'Regular-Primary-M'}>2</TypographyLegacy>
+          <Typography font={'Regular-Primary-M'}>2</Typography>
         </CheckBox>
       </ControlsList>,
     );
@@ -38,10 +38,10 @@ describe('ControlsList', () => {
     const {toJSON} = render(
       <ControlsList single onChange={jest.fn} horizontal values={[]}>
         <CheckBox value={'1'}>
-          <TypographyLegacy font={'Regular-Primary-M'}>1</TypographyLegacy>
+          <Typography font={'Regular-Primary-M'}>1</Typography>
         </CheckBox>
         <CheckBox value={'2'}>
-          <TypographyLegacy font={'Regular-Primary-M'}>2</TypographyLegacy>
+          <Typography font={'Regular-Primary-M'}>2</Typography>
         </CheckBox>
       </ControlsList>,
     );
@@ -52,10 +52,10 @@ describe('ControlsList', () => {
     const {toJSON} = render(
       <ControlsList single onChange={jest.fn} values={['1']}>
         <Radio value={'1'}>
-          <TypographyLegacy font={'Regular-Primary-M'}>1</TypographyLegacy>
+          <Typography font={'Regular-Primary-M'}>1</Typography>
         </Radio>
         <Radio value={'2'}>
-          <TypographyLegacy font={'Regular-Primary-M'}>2</TypographyLegacy>
+          <Typography font={'Regular-Primary-M'}>2</Typography>
         </Radio>
       </ControlsList>,
     );
@@ -66,10 +66,10 @@ describe('ControlsList', () => {
     const {toJSON} = render(
       <ControlsList single onChange={jest.fn} values={[]}>
         <Radio value={'1'}>
-          <TypographyLegacy font={'Regular-Primary-M'}>1</TypographyLegacy>
+          <Typography font={'Regular-Primary-M'}>1</Typography>
         </Radio>
         <Radio value={'2'}>
-          <TypographyLegacy font={'Regular-Primary-M'}>2</TypographyLegacy>
+          <Typography font={'Regular-Primary-M'}>2</Typography>
         </Radio>
       </ControlsList>,
     );
@@ -80,10 +80,10 @@ describe('ControlsList', () => {
     const {toJSON} = render(
       <ControlsList onChange={jest.fn} horizontal values={[]}>
         <Radio value={'1'}>
-          <TypographyLegacy font={'Regular-Primary-M'}>1</TypographyLegacy>
+          <Typography font={'Regular-Primary-M'}>1</Typography>
         </Radio>
         <Radio value={'2'}>
-          <TypographyLegacy font={'Regular-Primary-M'}>2</TypographyLegacy>
+          <Typography font={'Regular-Primary-M'}>2</Typography>
         </Radio>
       </ControlsList>,
     );

diff --git a/packages/core/src/controls/ControlsLists/__tests__/__snapshots__/ControlsList.tsx.snap b/packages/core/src/controls/ControlsLists/__tests__/__snapshots__/ControlsList.tsx.snap
@@ -106,6 +106,7 @@ exports[`ControlsList should renders correctly with checkbox type 1`] = `
             "color": "#20242D",
             "fontFamily": "Inter-Regular",
             "fontSize": 16,
+            "fontWeight": "400",
             "lineHeight": 20,
             "minHeight": 20,
           },
@@ -211,6 +212,7 @@ exports[`ControlsList should renders correctly with checkbox type 1`] = `
             "color": "#20242D",
             "fontFamily": "Inter-Regular",
             "fontSize": 16,
+            "fontWeight": "400",
             "lineHeight": 20,
             "minHeight": 20,
           },
@@ -330,6 +332,7 @@ exports[`ControlsList should renders correctly with checkbox type and horizontal
             "color": "#20242D",
             "fontFamily": "Inter-Regular",
             "fontSize": 16,
+            "fontWeight": "400",
             "lineHeight": 20,
             "minHeight": 20,
           },
@@ -435,6 +438,7 @@ exports[`ControlsList should renders correctly with checkbox type and horizontal
             "color": "#20242D",
             "fontFamily": "Inter-Regular",
             "fontSize": 16,
+            "fontWeight": "400",
             "lineHeight": 20,
             "minHeight": 20,
           },
@@ -554,6 +558,7 @@ exports[`ControlsList should renders correctly with checkbox type and single 1`]
             "color": "#20242D",
             "fontFamily": "Inter-Regular",
             "fontSize": 16,
+            "fontWeight": "400",
             "lineHeight": 20,
             "minHeight": 20,
           },
@@ -659,6 +664,7 @@ exports[`ControlsList should renders correctly with checkbox type and single 1`]
             "color": "#20242D",
             "fontFamily": "Inter-Regular",
             "fontSize": 16,
+            "fontWeight": "400",
             "lineHeight": 20,
             "minHeight": 20,
           },
@@ -790,6 +796,7 @@ exports[`ControlsList should renders correctly with radio type 1`] = `
             "color": "#20242D",
             "fontFamily": "Inter-Regular",
             "fontSize": 16,
+            "fontWeight": "400",
             "lineHeight": 20,
             "minHeight": 20,
           },
@@ -895,6 +902,7 @@ exports[`ControlsList should renders correctly with radio type 1`] = `
             "color": "#20242D",
             "fontFamily": "Inter-Regular",
             "fontSize": 16,
+            "fontWeight": "400",
             "lineHeight": 20,
             "minHeight": 20,
           },
@@ -1014,6 +1022,7 @@ exports[`ControlsList should renders correctly with radio type and horizontal 1`
             "color": "#20242D",
             "fontFamily": "Inter-Regular",
             "fontSize": 16,
+            "fontWeight": "400",
             "lineHeight": 20,
             "minHeight": 20,
           },
@@ -1119,6 +1128,7 @@ exports[`ControlsList should renders correctly with radio type and horizontal 1`
             "color": "#20242D",
             "fontFamily": "Inter-Regular",
             "fontSize": 16,
+            "fontWeight": "400",
             "lineHeight": 20,
             "minHeight": 20,
           },
@@ -1238,6 +1248,7 @@ exports[`ControlsList should renders correctly with radio type and single 1`] =
             "color": "#20242D",
             "fontFamily": "Inter-Regular",
             "fontSize": 16,
+            "fontWeight": "400",
             "lineHeight": 20,
             "minHeight": 20,
           },
@@ -1343,6 +1354,7 @@ exports[`ControlsList should renders correctly with radio type and single 1`] =
             "color": "#20242D",
             "fontFamily": "Inter-Regular",
             "fontSize": 16,
+            "fontWeight": "400",
             "lineHeight": 20,
             "minHeight": 20,
           },

diff --git a/packages/core/src/controls/ControlsLists/__tests__/useCloneControls.tsx b/packages/core/src/controls/ControlsLists/__tests__/useCloneControls.tsx
@@ -5,15 +5,15 @@ import {ReactTestInstance} from 'react-test-renderer';
 import {Radio} from '../../Radio';
 import useCloneControls from '../useCloneControls';
 import {ControlsList} from '../index';
-import {TypographyLegacy} from '../../../typography/components/TypographyLegacy/TypographyLegacy';
+import {Typography} from '../../../typography';
 
 const list = (single: boolean) => (
   <ControlsList single={single} onChange={jest.fn} values={[]}>
     <Radio value={'1'}>
-      <TypographyLegacy font={'Regular-Primary-M'}>1</TypographyLegacy>
+      <Typography font={'Regular-Primary-M'}>1</Typography>
     </Radio>
     <Radio value={'2'}>
-      <TypographyLegacy font={'Regular-Primary-M'}>2</TypographyLegacy>
+      <Typography font={'Regular-Primary-M'}>2</Typography>
     </Radio>
   </ControlsList>
 );

diff --git a/packages/core/src/controls/Radio/stylesCreate.ts b/packages/core/src/controls/Radio/stylesCreate.ts
@@ -13,8 +13,8 @@ const stylesCreate = createStyles(
       width: px(22),
       aspectRatio: 1,
       borderRadius: px(11),
-      backgroundColor: selected ? colors.ElementBase : 'transparent',
-      borderColor: selected ? colors.ElementBase : colors.BorderNormal,
+      backgroundColor: selected ? colors.ElementAccent : 'transparent',
+      borderColor: selected ? colors.ElementAccent : colors.BorderNormal,
       borderWidth: spaces.Space2,
       justifyContent: 'center',
       alignItems: 'center',