Merge pull request #1031 from ambrosus/AMB-5356

refactor(ui): update stake info components with inline styling and consistent typography
ambrosus · Jan 28, 2025 · 4bd040d · 4bd040d
2 parents fd6df30 + 5f2e6e2
commit 4bd040d
Show file tree

Hide file tree

Showing 5 changed files with 84 additions and 36 deletions.
diff --git a/src/features/harbor/components/base/stake-info-container/index.tsx b/src/features/harbor/components/base/stake-info-container/index.tsx
@@ -72,23 +72,51 @@ export const StakeInfoContainer = ({
           <Spacer value={scale(15)} />
           <View style={styles.infoMain}>
             <Row justifyContent={'space-between'}>
-              <Text style={styles.infoTitleText}>{t('harbor.apr')}</Text>
-              <Text style={styles.aprText}>{harborAPR} %</Text>
+              <Text
+                fontSize={14}
+                fontFamily="Inter_500Medium"
+                color={COLORS.neutral600}
+              >
+                {t('harbor.apr')}
+              </Text>
+              <Text
+                fontSize={14}
+                fontFamily="Inter_500Medium"
+                color={COLORS.success500}
+              >
+                {harborAPR} %
+              </Text>
             </Row>
-            <Spacer value={scale(8)} />
             <Row justifyContent={'space-between'}>
-              <Text style={styles.infoTitleText}>
+              <Text
+                fontSize={14}
+                fontFamily="Inter_500Medium"
+                color={COLORS.neutral600}
+              >
                 {t('harbor.total.staked')}
               </Text>
-              <Text style={styles.intoText}>{totalAMBStaked} AMB</Text>
+              <Text
+                fontSize={14}
+                fontFamily="Inter_500Medium"
+                color={COLORS.neutral900}
+              >
+                {totalAMBStaked} AMB
+              </Text>
             </Row>
-            <Spacer value={scale(8)} />
             <Row justifyContent={'space-between'}>
-              <Text style={styles.infoTitleText}>
+              <Text
+                fontSize={14}
+                fontFamily="Inter_500Medium"
+                color={COLORS.neutral600}
+              >
                 {t('harbor.total.staked.value')}
               </Text>
-              <Text style={styles.intoText}>
-                $ {NumberUtils.minimiseAmount(+totalStakedOnHarbor.usd)}
+              <Text
+                fontSize={14}
+                fontFamily="Inter_500Medium"
+                color={COLORS.neutral900}
+              >
+                ${NumberUtils.minimiseAmount(+totalStakedOnHarbor.usd)}
               </Text>
             </Row>
           </View>

diff --git a/src/features/harbor/components/base/stake-info-container/styles.ts b/src/features/harbor/components/base/stake-info-container/styles.ts
@@ -18,17 +18,7 @@ export const styles = StyleSheet.create({
   infoMain: {
     backgroundColor: COLORS.neutral100,
     borderRadius: 16,
-    padding: scale(10)
-  },
-  infoTitleText: {
-    color: COLORS.neutral600,
-    fontSize: scale(14)
-  },
-  intoText: {
-    color: COLORS.neutral900,
-    fontSize: scale(14)
-  },
-  aprText: {
-    color: COLORS.success500
+    padding: scale(10),
+    rowGap: 12
   }
 });
diff --git a/src/features/products/components/templates/products-list/index.tsx b/src/features/products/components/templates/products-list/index.tsx
@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 import {
   SectionList,
   SectionListData,
@@ -41,11 +41,22 @@ export const ProductsList = () => {
     []
   );
 
+  const devSupportedProducts = useMemo(
+    () =>
+      PRODUCTS(t).map((section) => ({
+        ...section,
+        data: section.data.filter(
+          (item) => !(!__DEV__ && item.route === 'BrowserScreen')
+        )
+      })),
+    [t]
+  );
+
   return (
     <SectionList<Product, SectionizedProducts>
       bounces={false}
       keyExtractor={(item) => item.id.toString()}
-      sections={PRODUCTS(t)}
+      sections={devSupportedProducts}
       renderSectionHeader={renderSectionHeader}
       renderItem={renderProductItem}
       style={styles.container}

diff --git a/src/screens/Harbor/ProcessStake/components/RateInfo/RateInfo.tsx b/src/screens/Harbor/ProcessStake/components/RateInfo/RateInfo.tsx
@@ -15,18 +15,44 @@ export const RateInfo = ({ availableToStake, rate = 1 }: RateInfoModel) => {
   return (
     <View style={styles.main}>
       <Row justifyContent="space-between">
-        <Text style={styles.title}>{t('harbor.exchange.rate')}</Text>
-        <Text style={styles.text}>
+        <Text
+          fontSize={14}
+          fontFamily="Inter_500Medium"
+          color={COLORS.neutral600}
+        >
+          {t('harbor.exchange.rate')}
+        </Text>
+        <Text
+          fontSize={14}
+          fontFamily="Inter_500Medium"
+          color={COLORS.neutral900}
+        >
           1 AMB = {rate}
           {CryptoCurrencyCode.stAMB}
         </Text>
       </Row>
       <Spacer value={scale(16)} />
       <Row justifyContent="space-between">
-        <Text style={styles.title}>{t('harbor.stake.available')}</Text>
-        <Text style={styles.text}>
+        <Text
+          fontSize={14}
+          fontFamily="Inter_500Medium"
+          color={COLORS.neutral600}
+        >
+          {t('harbor.stake.available')}
+        </Text>
+        <Text
+          fontSize={14}
+          fontFamily="Inter_500Medium"
+          color={COLORS.neutral900}
+        >
           {NumberUtils.minimiseAmount(+availableToStake)}{' '}
-          <Text color={COLORS.neutral600}>AMB</Text>
+          <Text
+            fontSize={14}
+            fontFamily="Inter_500Medium"
+            color={COLORS.neutral600}
+          >
+            AMB
+          </Text>
         </Text>
       </Row>
     </View>

diff --git a/src/screens/Harbor/ProcessStake/components/RateInfo/styles.ts b/src/screens/Harbor/ProcessStake/components/RateInfo/styles.ts
@@ -6,14 +6,7 @@ import { scale } from '@utils';
 export const styles = StyleSheet.create({
   main: {
     ...contentBox,
+    padding: scale(16),
     backgroundColor: COLORS.neutral100
-  },
-  title: {
-    fontSize: scale(14),
-    color: COLORS.neutral600
-  },
-  text: {
-    fontSize: scale(12),
-    color: COLORS.neutral900
   }
 });