From 16d1ebd2a1aa66a8eb98426eed6c617eff6335fb Mon Sep 17 00:00:00 2001
From: kyleleow <40191153+kyleleow@users.noreply.github.com>
Date: Mon, 9 Aug 2021 14:48:18 +0800
Subject: [PATCH] Add background color to SectionLabel (#503)

* fix(ui): add bg color to SectionTitle

Fix: #497

* test: update unit test snap shot
---
 app/components/SectionTitle.tsx                      |  2 +-
 .../__snapshots__/BalancesScreen.test.tsx.snap       |  4 ++--
 .../__snapshots__/TokenDetailScreen.test.tsx.snap    | 12 ++++++------
 .../screens/__snapshots__/AboutScreen.test.tsx.snap  |  4 ++--
 .../__snapshots__/CommunityScreen.test.tsx.snap      |  4 ++--
 5 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/app/components/SectionTitle.tsx b/app/components/SectionTitle.tsx
index 3a908d49c4..d82b6436c1 100644
--- a/app/components/SectionTitle.tsx
+++ b/app/components/SectionTitle.tsx
@@ -6,7 +6,7 @@ export function SectionTitle ({ text, testID }: { text: string, testID: string }
   return (
     <Text
       testID={testID}
-      style={[tailwind('p-4 text-xs text-gray-500 mt-2 font-medium')]}
+      style={[tailwind('p-4 pt-6 text-xs text-gray-500 font-medium bg-gray-100')]}
     >
       {
         text
diff --git a/app/screens/AppNavigator/screens/Balances/__snapshots__/BalancesScreen.test.tsx.snap b/app/screens/AppNavigator/screens/Balances/__snapshots__/BalancesScreen.test.tsx.snap
index 859c32eff1..f0bd66f85b 100644
--- a/app/screens/AppNavigator/screens/Balances/__snapshots__/BalancesScreen.test.tsx.snap
+++ b/app/screens/AppNavigator/screens/Balances/__snapshots__/BalancesScreen.test.tsx.snap
@@ -92,16 +92,16 @@ exports[`balances page should match snapshot 1`] = `
             },
             Array [
               Object {
+                "backgroundColor": "rgba(243, 244, 246, 1)",
                 "color": "rgba(107, 114, 128, 1)",
                 "fontFamily": "MediumFont",
                 "fontSize": 12,
                 "fontWeight": "500",
                 "lineHeight": 16,
-                "marginTop": 8,
                 "paddingBottom": 16,
                 "paddingLeft": 16,
                 "paddingRight": 16,
-                "paddingTop": 16,
+                "paddingTop": 24,
               },
             ],
           ]
diff --git a/app/screens/AppNavigator/screens/Balances/screens/__snapshots__/TokenDetailScreen.test.tsx.snap b/app/screens/AppNavigator/screens/Balances/screens/__snapshots__/TokenDetailScreen.test.tsx.snap
index cbf97374ae..aced66d087 100644
--- a/app/screens/AppNavigator/screens/Balances/screens/__snapshots__/TokenDetailScreen.test.tsx.snap
+++ b/app/screens/AppNavigator/screens/Balances/screens/__snapshots__/TokenDetailScreen.test.tsx.snap
@@ -81,16 +81,16 @@ exports[`token detail screen should accept DST 1`] = `
           },
           Array [
             Object {
+              "backgroundColor": "rgba(243, 244, 246, 1)",
               "color": "rgba(107, 114, 128, 1)",
               "fontFamily": "MediumFont",
               "fontSize": 12,
               "fontWeight": "500",
               "lineHeight": 16,
-              "marginTop": 8,
               "paddingBottom": 16,
               "paddingLeft": 16,
               "paddingRight": 16,
-              "paddingTop": 16,
+              "paddingTop": 24,
             },
           ],
         ]
@@ -362,16 +362,16 @@ exports[`token detail screen should accept Token DFI 1`] = `
           },
           Array [
             Object {
+              "backgroundColor": "rgba(243, 244, 246, 1)",
               "color": "rgba(107, 114, 128, 1)",
               "fontFamily": "MediumFont",
               "fontSize": 12,
               "fontWeight": "500",
               "lineHeight": 16,
-              "marginTop": 8,
               "paddingBottom": 16,
               "paddingLeft": 16,
               "paddingRight": 16,
-              "paddingTop": 16,
+              "paddingTop": 24,
             },
           ],
         ]
@@ -554,16 +554,16 @@ exports[`token detail screen should accept UTXO DFI 1`] = `
           },
           Array [
             Object {
+              "backgroundColor": "rgba(243, 244, 246, 1)",
               "color": "rgba(107, 114, 128, 1)",
               "fontFamily": "MediumFont",
               "fontSize": 12,
               "fontWeight": "500",
               "lineHeight": 16,
-              "marginTop": 8,
               "paddingBottom": 16,
               "paddingLeft": 16,
               "paddingRight": 16,
-              "paddingTop": 16,
+              "paddingTop": 24,
             },
           ],
         ]
diff --git a/app/screens/AppNavigator/screens/Settings/screens/__snapshots__/AboutScreen.test.tsx.snap b/app/screens/AppNavigator/screens/Settings/screens/__snapshots__/AboutScreen.test.tsx.snap
index d66017e8ae..73d5ca9f49 100644
--- a/app/screens/AppNavigator/screens/Settings/screens/__snapshots__/AboutScreen.test.tsx.snap
+++ b/app/screens/AppNavigator/screens/Settings/screens/__snapshots__/AboutScreen.test.tsx.snap
@@ -148,16 +148,16 @@ exports[`<AboutScreen /> should match snapshot 1`] = `
           },
           Array [
             Object {
+              "backgroundColor": "rgba(243, 244, 246, 1)",
               "color": "rgba(107, 114, 128, 1)",
               "fontFamily": "MediumFont",
               "fontSize": 12,
               "fontWeight": "500",
               "lineHeight": 16,
-              "marginTop": 8,
               "paddingBottom": 16,
               "paddingLeft": 16,
               "paddingRight": 16,
-              "paddingTop": 16,
+              "paddingTop": 24,
             },
           ],
         ]
diff --git a/app/screens/AppNavigator/screens/Settings/screens/__snapshots__/CommunityScreen.test.tsx.snap b/app/screens/AppNavigator/screens/Settings/screens/__snapshots__/CommunityScreen.test.tsx.snap
index ffa31fb52b..f893ed5707 100644
--- a/app/screens/AppNavigator/screens/Settings/screens/__snapshots__/CommunityScreen.test.tsx.snap
+++ b/app/screens/AppNavigator/screens/Settings/screens/__snapshots__/CommunityScreen.test.tsx.snap
@@ -138,16 +138,16 @@ exports[`<CommunityScreen /> should match snapshot 1`] = `
             },
             Array [
               Object {
+                "backgroundColor": "rgba(243, 244, 246, 1)",
                 "color": "rgba(107, 114, 128, 1)",
                 "fontFamily": "MediumFont",
                 "fontSize": 12,
                 "fontWeight": "500",
                 "lineHeight": 16,
-                "marginTop": 8,
                 "paddingBottom": 16,
                 "paddingLeft": 16,
                 "paddingRight": 16,
-                "paddingTop": 16,
+                "paddingTop": 24,
               },
             ],
           ]