feat: refactoring theme styles (#1137)

Signed-off-by: Sophia Sales <[email protected]> Co-authored-by: Sophia Sales <[email protected]>
openwallet-foundation · May 16, 2024 · 9b8c48c · 9b8c48c
1 parent b809b6a
commit 9b8c48c
Show file tree

Hide file tree

Showing 14 changed files with 20 additions and 34 deletions.
diff --git a/packages/legacy/core/App/components/modals/ProofCancelModal.tsx b/packages/legacy/core/App/components/modals/ProofCancelModal.tsx
@@ -34,7 +34,7 @@ const ProofCancelModal: React.FC<ProofCancelModalProps> = ({ visible, onDone })
       justifyContent: 'space-around',
     },
     heading: {
-      ...TextTheme.modalHeadingOne,
+      ...TextTheme.modalTitle,
       marginTop: 60,
       marginBottom: 30,
       textAlign: 'center',
@@ -45,7 +45,6 @@ const ProofCancelModal: React.FC<ProofCancelModalProps> = ({ visible, onDone })
     },
     subtext: {
       ...TextTheme.modalNormal,
-      fontSize: 22,
       textAlign: 'center',
     },
   })

diff --git a/packages/legacy/core/App/components/views/FauxNavigationBar.tsx b/packages/legacy/core/App/components/views/FauxNavigationBar.tsx
@@ -34,8 +34,6 @@ const FauxNavigationBar: React.FC<FauxNavigationBarProps> = ({ title, onHomeTouc
     },
     label: {
       ...TextTheme.bold,
-      color: ColorPallet.brand.headerText,
-      fontSize: 17,
       flexGrow: 1,
       textAlign: 'center',
       paddingBottom: 12,

diff --git a/packages/legacy/core/App/screens/ListProofRequests.tsx b/packages/legacy/core/App/screens/ListProofRequests.tsx
@@ -39,24 +39,20 @@ const ProofRequestsCard: React.FC<ProofRequestsCardProps> = ({ navigation, templ
     },
     templateTitle: {
       ...ListItems.requestTemplateTitle,
-      fontSize: 16,
       marginBottom: 4,
     },
     templateDetails: {
       ...ListItems.requestTemplateDetails,
-      fontSize: 16,
       marginBottom: 4,
     },
     templateZkpLabel: {
       ...ListItems.requestTemplateZkpLabel,
-      fontSize: 12,
     },
     iconContainer: {
       alignSelf: 'center',
     },
     icon: {
       ...ListItems.requestTemplateIcon,
-      fontSize: 36,
     },
   })
 

diff --git a/packages/legacy/core/App/screens/OnboardingPages.tsx b/packages/legacy/core/App/screens/OnboardingPages.tsx
@@ -97,7 +97,7 @@ const customPages = (onTutorialCompleted: GenericFn, OnboardingTheme: any) => {
           <SecureImage {...imageDisplayOptions} />
         </View>
         <View style={{ marginBottom: 20 }}>
-          <Text style={[styles.headerText, { fontSize: 18 }]} testID={testIdWithKey('HeaderText')}>
+          <Text style={[styles.headerText]} testID={testIdWithKey('HeaderText')}>
             Ornare suspendisse sed nisi lacus
           </Text>
           <Text style={[styles.bodyText, { marginTop: 25 }]} testID={testIdWithKey('BodyText')}>
@@ -144,7 +144,7 @@ export const createPageWith = (
   const styles = createStyles(OnboardingTheme)
   const imageDisplayOptions = createImageDisplayOptions(OnboardingTheme)
   const titleElement = (
-    <Text style={[styles.headerText, { fontSize: 18 }]} testID={testIdWithKey('HeaderText')}>
+    <Text style={[styles.headerText]} testID={testIdWithKey('HeaderText')}>
       {title}
     </Text>
   )

diff --git a/packages/legacy/core/App/screens/ProofDetails.tsx b/packages/legacy/core/App/screens/ProofDetails.tsx
@@ -85,8 +85,7 @@ const VerifiedProof: React.FC<VerifiedProofProps> = ({
       marginVertical: 30,
     },
     descriptionText: {
-      fontSize: 18,
-      color: TextTheme.normal.color,
+      ...TextTheme.normal,
     },
     label: {
       fontWeight: TextTheme.bold.fontWeight,

diff --git a/packages/legacy/core/App/screens/ProofRequestDetails.tsx b/packages/legacy/core/App/screens/ProofRequestDetails.tsx
@@ -109,9 +109,7 @@ const ProofRequestDetails: React.FC<ProofRequestDetailsProps> = ({ route, naviga
       marginBottom: 36,
     },
     title: {
-      color: TextTheme.title.color,
-      fontSize: 28,
-      fontWeight: TextTheme.bold.fontWeight,
+      ...TextTheme.headerTitle,
     },
     description: {
       marginTop: 10,

diff --git a/packages/legacy/core/App/screens/ProofRequestUsageHistory.tsx b/packages/legacy/core/App/screens/ProofRequestUsageHistory.tsx
@@ -70,7 +70,6 @@ const ProofRequestUsageHistoryRecord: React.FC<ProofRequestUsageHistoryRecordPro
     },
     valueText: {
       ...ListItems.requestTemplateTitle,
-      fontSize: 16,
       marginLeft: 4,
     },
     rightContainer: {
@@ -81,11 +80,9 @@ const ProofRequestUsageHistoryRecord: React.FC<ProofRequestUsageHistoryRecordPro
     },
     icon: {
       ...ListItems.requestTemplateIcon,
-      fontSize: 36,
     },
     date: {
       ...ListItems.requestTemplateDate,
-      fontSize: 10,
     },
   })
 

diff --git a/packages/legacy/core/App/screens/ProofRequesting.tsx b/packages/legacy/core/App/screens/ProofRequesting.tsx
@@ -90,8 +90,7 @@ const ProofRequesting: React.FC<ProofRequestingProps> = ({ route, navigation })
       color: ColorPallet.grayscale.black,
     },
     secondaryHeaderText: {
-      fontWeight: TextTheme.normal.fontWeight,
-      fontSize: 20,
+      ...TextTheme.normal,
       textAlign: 'center',
       marginTop: 8,
       color: ColorPallet.grayscale.black,

diff --git a/packages/legacy/core/App/theme.ts b/packages/legacy/core/App/theme.ts
@@ -539,19 +539,24 @@ export const ListItems = StyleSheet.create({
   requestTemplateTitle: {
     color: ColorPallet.grayscale.black,
     fontWeight: 'bold',
+    fontSize: 16,
   },
   requestTemplateDetails: {
     color: ColorPallet.grayscale.black,
     fontWeight: 'normal',
+    fontSize: 16,
   },
   requestTemplateZkpLabel: {
     color: ColorPallet.grayscale.mediumGrey,
+    fontSize: 12,
   },
   requestTemplateIcon: {
     color: ColorPallet.grayscale.black,
+    fontSize: 36,
   },
   requestTemplateDate: {
     color: ColorPallet.grayscale.mediumGrey,
+    fontSize: 10,
   },
 })
 
@@ -757,7 +762,7 @@ export const OnboardingTheme = {
   },
   headerTintColor: ColorPallet.grayscale.white,
   headerText: {
-    ...TextTheme.headingTwo,
+    ...TextTheme.bold,
   },
   bodyText: {
     ...TextTheme.normal,

diff --git a/packages/legacy/core/__tests__/components/__snapshots__/FauxNavigationBar.test.tsx.snap b/packages/legacy/core/__tests__/components/__snapshots__/FauxNavigationBar.test.tsx.snap
@@ -37,7 +37,7 @@ Array [
           Object {
             "color": "#FFFFFF",
             "flexGrow": 1,
-            "fontSize": 17,
+            "fontSize": 18,
             "fontWeight": "bold",
             "paddingBottom": 12,
             "textAlign": "center",
@@ -147,7 +147,7 @@ Array [
           Object {
             "color": "#FFFFFF",
             "flexGrow": 1,
-            "fontSize": 17,
+            "fontSize": 18,
             "fontWeight": "bold",
             "paddingBottom": 12,
             "textAlign": "center",

diff --git a/packages/legacy/core/__tests__/components/__snapshots__/ProofCancelModal.test.tsx.snap b/packages/legacy/core/__tests__/components/__snapshots__/ProofCancelModal.test.tsx.snap
@@ -34,7 +34,7 @@ exports[`ProofCancelModal Component Rerenders correctly when not visible 1`] = `
             style={
               Object {
                 "color": "#FFFFFF",
-                "fontSize": 38,
+                "fontSize": 24,
                 "fontWeight": "bold",
                 "marginBottom": 30,
                 "marginTop": 60,
@@ -57,7 +57,7 @@ exports[`ProofCancelModal Component Rerenders correctly when not visible 1`] = `
             style={
               Object {
                 "color": "#FFFFFF",
-                "fontSize": 22,
+                "fontSize": 18,
                 "fontWeight": "normal",
                 "textAlign": "center",
               }

diff --git a/packages/legacy/core/__tests__/screens/__snapshots__/Onboarding.test.tsx.snap b/packages/legacy/core/__tests__/screens/__snapshots__/Onboarding.test.tsx.snap
@@ -58,9 +58,6 @@ exports[`Onboarding Onboarding Developer mode 1`] = `
                 style={
                   Array [
                     Object {},
-                    Object {
-                      "fontSize": 18,
-                    },
                   ]
                 }
                 testID="com.ariesbifold:id/HeaderText"
@@ -207,9 +204,6 @@ exports[`Onboarding Onboarding Developer mode 1`] = `
                   style={
                     Array [
                       Object {},
-                      Object {
-                        "fontSize": 18,
-                      },
                     ]
                   }
                   testID="com.ariesbifold:id/DeveloperModeTouch"

diff --git a/packages/legacy/core/__tests__/screens/__snapshots__/ProofDetails.test.tsx.snap b/packages/legacy/core/__tests__/screens/__snapshots__/ProofDetails.test.tsx.snap
@@ -847,6 +847,7 @@ exports[`ProofDetails Component with a verified proof record renders correctly w
               Object {
                 "color": "#FFFFFF",
                 "fontSize": 18,
+                "fontWeight": "normal",
               }
             }
           >

diff --git a/packages/legacy/core/__tests__/screens/__snapshots__/ProofRequesting.test.tsx.snap b/packages/legacy/core/__tests__/screens/__snapshots__/ProofRequesting.test.tsx.snap
@@ -99,7 +99,7 @@ exports[`ProofRequesting Component generate new qr works correctly 1`] = `
           style={
             Object {
               "color": "#000000",
-              "fontSize": 20,
+              "fontSize": 18,
               "fontWeight": "normal",
               "marginTop": 8,
               "textAlign": "center",
@@ -296,7 +296,7 @@ exports[`ProofRequesting Component renders correctly 1`] = `
           style={
             Object {
               "color": "#000000",
-              "fontSize": 20,
+              "fontSize": 18,
               "fontWeight": "normal",
               "marginTop": 8,
               "textAlign": "center",
@@ -449,7 +449,7 @@ exports[`ProofRequesting Component renders correctly 2`] = `
           style={
             Object {
               "color": "#000000",
-              "fontSize": 20,
+              "fontSize": 18,
               "fontWeight": "normal",
               "marginTop": 8,
               "textAlign": "center",