fix(uat): minors styling issues

Emurgo · Feb 20, 2024 · cc1b576 · cc1b576
1 parent dddb20e
commit cc1b576
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 7 deletions.
diff --git a/apps/wallet-mobile/src/components/ExpandableInfoCard/ExpandableInfoCard.tsx b/apps/wallet-mobile/src/components/ExpandableInfoCard/ExpandableInfoCard.tsx
@@ -209,7 +209,7 @@ const useStyles = () => {
     flexBetween: {
       flexDirection: 'row',
       justifyContent: 'space-between',
-      alignItems: 'center',
+      alignItems: 'flex-start',
     },
     flex: {
       flexDirection: 'row',

diff --git a/apps/wallet-mobile/src/features/Swap/common/strings.ts b/apps/wallet-mobile/src/features/Swap/common/strings.ts
@@ -37,7 +37,8 @@ export const useStrings = () => {
     swapFeesTitle: intl.formatMessage(messages.swapFeesTitle),
     swapLiquidityFee: intl.formatMessage(messages.swapLiquidityFee),
     swapLiqProvFee: intl.formatMessage(messages.swapLiqProvFee),
-    swapLiquidityFeeInfo: (fee: string) => intl.formatMessage(messages.swapLiquidityFeeInfo, {fee}),
+    swapLiquidityFeeInfo: (fee: string, options: {b: (content: React.ReactNode[]) => React.ReactNode}) =>
+      intl.formatMessage(messages.swapLiquidityFeeInfo, {fee, ...options}),
     swapFees: intl.formatMessage(messages.swapFees),
     poolVerification: (pool: string) => intl.formatMessage(messages.poolVerification, {pool}),
     poolVerificationInfo: (pool: string) => intl.formatMessage(messages.poolVerificationInfo, {pool}),
@@ -283,7 +284,7 @@ export const messages = defineMessages({
   swapLiquidityFeeInfo: {
     id: 'swap.swapScreen.swapLiquidityFeeInfo',
     defaultMessage:
-      '!!!Liquidity provider fee is a fixed {fee}% operational fee from the whole transaction volume, that is taken to support DEX “liquidity” allowing traders to buy and sell assets on the decentralized Cardano network.',
+      '!!!Liquidity provider fee is a fixed <b>{fee}%</b> operational fee from the whole transaction volume, that is taken to support DEX “liquidity” allowing traders to buy and sell assets on the decentralized Cardano network.',
   },
   swapMinReceived: {
     id: 'swap.swapScreen.swapMinReceived',

diff --git a/...obile/src/features/Swap/useCases/StartSwapScreen/CreateOrder/EditPool/ShowPoolActions.tsx b/...obile/src/features/Swap/useCases/StartSwapScreen/CreateOrder/EditPool/ShowPoolActions.tsx
@@ -137,7 +137,7 @@ const ShowLimitOrderFeeBreakdown = ({totalFees}: {totalFees: string}) => {
       {feeStructure.map((fee) => {
         const modalContent = (
           <View style={styles.modalContent}>
-            <Text style={styles.text}>{fee.info}</Text>
+            <Text style={styles.modalText}>{fee.info}</Text>
 
             <Spacer fill />
 
@@ -170,6 +170,7 @@ const ShowMarketOrderFeeBreakdown = ({totalFees}: {totalFees: string}) => {
   const styles = useStyles()
   const wallet = useSelectedWallet()
   const {openModal} = useModal()
+  const bold = useBold()
 
   const {orderData} = useSwap()
   const {selectedPoolCalculation: calculation, amounts} = orderData
@@ -193,7 +194,7 @@ const ShowMarketOrderFeeBreakdown = ({totalFees}: {totalFees: string}) => {
   const totalFeesFormatted = `${totalFees} ${wallet.primaryTokenInfo.ticker}`
   const minReceivedFormatted = `${minReceived} ${buyTokenName}`
   const liqFeeQuantityFormatted = `${liqFeeQuantity} ${sellTokenName}`
-  const liqFeePercFormatted = strings.swapLiquidityFeeInfo(liqFeePerc)
+  const liqFeePercFormatted = strings.swapLiquidityFeeInfo(liqFeePerc, bold)
 
   const feeStructure = [
     {
@@ -224,7 +225,7 @@ const ShowMarketOrderFeeBreakdown = ({totalFees}: {totalFees: string}) => {
       {feeStructure.map((fee) => {
         const modalContent = (
           <View style={styles.modalContent}>
-            <Text style={styles.text}>{fee.info}</Text>
+            <Text style={styles.modalText}>{fee.info}</Text>
 
             <Spacer fill />
 
@@ -252,12 +253,25 @@ const ShowMarketOrderFeeBreakdown = ({totalFees}: {totalFees: string}) => {
   )
 }
 
+const useBold = () => {
+  const styles = useStyles()
+
+  return {
+    b: (text: React.ReactNode) => <Text style={styles.bolder}>{text}</Text>,
+  }
+}
+
 const useStyles = () => {
   const {theme} = useTheme()
   const {color, typography} = theme
   const styles = StyleSheet.create({
     flex: {flexDirection: 'row', alignItems: 'center'},
     between: {justifyContent: 'space-between'},
+    modalText: {
+      textAlign: 'left',
+      ...typography['body-1-l-regular'],
+      color: color.gray[900],
+    },
     text: {
       textAlign: 'right',
       ...typography['body-1-l-regular'],

diff --git a/apps/wallet-mobile/src/i18n/locales/en-US.json b/apps/wallet-mobile/src/i18n/locales/en-US.json
@@ -875,7 +875,7 @@
   "swap.swapScreen.swapFrom": "Swap from",
   "swap.swapScreen.swapLiqProvFee": "Liq. prov. fee",
   "swap.swapScreen.swapLiquidityFee": "Liquidity provider fee",
-  "swap.swapScreen.swapLiquidityFeeInfo": "Liquidity provider fee is a fixed {fee}% operational fee from the whole transaction volume, that is taken to support DEX “liquidity” allowing traders to buy and sell assets on the decentralized Cardano network.",
+  "swap.swapScreen.swapLiquidityFeeInfo": "Liquidity provider fee is a fixed <b>{fee}%<b> operational fee from the whole transaction volume, that is taken to support DEX “liquidity” allowing traders to buy and sell assets on the decentralized Cardano network.",
   "swap.swapScreen.swapMinAda": "Min-ADA is the minimum ADA amount required to be contained when holding or sending Cardano native assets.",
   "swap.swapScreen.swapMinAdaTitle": "Min ADA",
   "swap.swapScreen.swapMinReceived": "Minimum amount of assets you can get because of the slippage tolerance.",