refactor: use typography styles

new-lamassu-admin/src/components/editableTable/Row.js

@@ -8,7 +8,7 @@ import { DeleteDialog } from 'src/components/DeleteDialog'
 import { Link, IconButton } from 'src/components/buttons'
 import { Td, Tr } from 'src/components/fake-table/Table'
 import { Switch } from 'src/components/inputs'
-import { TL2 } from 'src/components/typography'
+import { Label2 } from 'src/components/typography'
 import { ReactComponent as DisabledDeleteIcon } from 'src/styling/icons/action/delete/disabled.svg'
 import { ReactComponent as DeleteIcon } from 'src/styling/icons/action/delete/enabled.svg'
 import { ReactComponent as DisabledEditIcon } from 'src/styling/icons/action/edit/disabled.svg'
@@ -129,7 +129,7 @@ const ECol = ({ editing, focus, config, extraPaddingRight, extraPadding }) => {
     textAlign,
     editingAlign = textAlign,
     suffix,
-    SuffixComponent = TL2,
+    SuffixComponent = Label2,
     textStyle = it => {},
     view = it => it?.toString(),
     inputProps = {}

new-lamassu-admin/src/components/editableTable/Row.styles.js

@@ -23,8 +23,7 @@ export default {
     }
   },
   suffix: {
-    marginLeft: 7,
-    fontSize: '12px'
+    marginLeft: 7
   },
   size: ({ size }) => bySize(size),
   bold

new-lamassu-admin/src/pages/Cashout/helper.js

@@ -1,6 +1,7 @@
 import * as Yup from 'yup'
 
 import { NumberInput } from 'src/components/inputs/formik'
+import { bold } from 'src/styling/helpers'
 
 const currencyMax = 999999999
 const DenominationsSchema = Yup.object().shape({
@@ -21,12 +22,6 @@ const DenominationsSchema = Yup.object().shape({
     .max(currencyMax)
 })
 
-const boldStyle = () => {
-  return {
-    fontWeight: 'bold'
-  }
-}
-
 const getElements = (machines, { fiatCurrency } = {}) => {
   return [
     {
@@ -48,7 +43,7 @@ const getElements = (machines, { fiatCurrency } = {}) => {
         decimalPlaces: 0
       },
       suffix: fiatCurrency,
-      textStyle: boldStyle
+      bold: bold
     },
     {
       name: 'bottom',
@@ -61,7 +56,7 @@ const getElements = (machines, { fiatCurrency } = {}) => {
         decimalPlaces: 0
       },
       suffix: fiatCurrency,
-      textStyle: boldStyle
+      bold: bold
     },
     {
       name: 'zeroConfLimit',
@@ -74,7 +69,7 @@ const getElements = (machines, { fiatCurrency } = {}) => {
         decimalPlaces: 0
       },
       suffix: fiatCurrency,
-      textStyle: boldStyle
+      bold: bold
     }
   ]
 }

new-lamassu-admin/src/pages/Commissions/helper.js

@@ -6,6 +6,7 @@ import * as Yup from 'yup'
 
 import { NumberInput } from 'src/components/inputs/formik'
 import Autocomplete from 'src/components/inputs/formik/Autocomplete.js'
+import { bold } from 'src/styling/helpers'
 import { ReactComponent as TxInIcon } from 'src/styling/icons/direction/cash-in.svg'
 import { ReactComponent as TxOutIcon } from 'src/styling/icons/direction/cash-out.svg'
 import { primaryColor, secondaryColorDark } from 'src/styling/variables'
@@ -66,12 +67,6 @@ const onCryptoChange = (prev, curr, setValue) => {
   setValue(curr)
 }
 
-const boldStyle = () => {
-  return {
-    fontWeight: 'bold'
-  }
-}
-
 const getOverridesFields = (getData, currency, auxElements) => {
   const machineData = [ALL_MACHINES].concat(getData(['machines']))
   const rawCryptos = getData(['cryptoCurrencies'])
@@ -115,7 +110,7 @@ const getOverridesFields = (getData, currency, auxElements) => {
       input: NumberInput,
       textAlign: 'right',
       suffix: '%',
-      textStyle: boldStyle,
+      bold: bold,
       inputProps: {
         decimalPlaces: 3
       }
@@ -128,7 +123,7 @@ const getOverridesFields = (getData, currency, auxElements) => {
       input: NumberInput,
       textAlign: 'right',
       suffix: '%',
-      textStyle: boldStyle,
+      bold: bold,
       inputProps: {
         decimalPlaces: 3
       }
@@ -141,7 +136,7 @@ const getOverridesFields = (getData, currency, auxElements) => {
       doubleHeader: 'Cash-in only',
       textAlign: 'right',
       suffix: currency,
-      textStyle: boldStyle,
+      bold: bold,
       inputProps: {
         decimalPlaces: 2
       }
@@ -154,7 +149,7 @@ const getOverridesFields = (getData, currency, auxElements) => {
       doubleHeader: 'Cash-in only',
       textAlign: 'right',
       suffix: currency,
-      textStyle: boldStyle,
+      bold: bold,
       inputProps: {
         decimalPlaces: 2
       }
@@ -172,7 +167,7 @@ const mainFields = currency => [
     editingAlign: 'right',
     input: NumberInput,
     suffix: '%',
-    textStyle: boldStyle,
+    bold: bold,
     inputProps: {
       decimalPlaces: 3
     }
@@ -186,7 +181,7 @@ const mainFields = currency => [
     editingAlign: 'right',
     input: NumberInput,
     suffix: '%',
-    textStyle: boldStyle,
+    bold: bold,
     inputProps: {
       decimalPlaces: 3
     }
@@ -201,7 +196,7 @@ const mainFields = currency => [
     editingAlign: 'right',
     input: NumberInput,
     suffix: currency,
-    textStyle: boldStyle,
+    bold: bold,
     inputProps: {
       decimalPlaces: 2
     }
@@ -216,7 +211,7 @@ const mainFields = currency => [
     editingAlign: 'right',
     input: NumberInput,
     suffix: currency,
-    textStyle: boldStyle,
+    bold: bold,
     inputProps: {
       decimalPlaces: 2
     }