Merge pull request #966 from oasisprotocol/kaja/change-outline-button…

…-capitalization-in-theme Use theme to capitalize all buttons
oasisprotocol · Jan 5, 2024 · 14c1281 · 14c1281
2 parents b831300 + 3c25e45
commit 14c1281
Show file tree

Hide file tree

Showing 6 changed files with 4 additions and 23 deletions.
diff --git a/.changelog/966.internal.md b/.changelog/966.internal.md
@@ -0,0 +1 @@
+Use theme to capitalize all buttons
diff --git a/src/app/components/CopyToClipboard/index.tsx b/src/app/components/CopyToClipboard/index.tsx
@@ -54,13 +54,7 @@ export const CopyToClipboard: FC<CopyToClipboardProps> = ({ value, label }) => {
   return (
     <Tooltip arrow onOpen={hideTooltip} open={isCopied} placement="right" title={t('clipboard.success')}>
       {label ? (
-        <Button
-          variant="outlined"
-          color="secondary"
-          sx={{ textTransform: 'capitalize' }}
-          onClick={handleCopyToClipboard}
-          aria-label={ariaLabel}
-        >
+        <Button variant="outlined" color="secondary" onClick={handleCopyToClipboard} aria-label={ariaLabel}>
           {label}
         </Button>
       ) : (

diff --git a/src/app/components/PageLayout/NetworkButton.tsx b/src/app/components/PageLayout/NetworkButton.tsx
@@ -21,7 +21,6 @@ export const StyledNetworkButton = styled(Button)(({ theme }) => ({
   borderWidth: theme.spacing(1),
   backgroundColor: COLORS.white,
   color: COLORS.brandDark,
-  textTransform: 'capitalize',
   textAlign: 'left',
   overflow: 'hidden',
 
@@ -104,7 +103,6 @@ export const StyledMobileNetworkButton = styled(Button)(({ theme }) => ({
   border: `solid 1px ${COLORS.brandExtraDark}`,
   fontSize: '14px',
   fontWeight: 500,
-  textTransform: 'capitalize',
   color: COLORS.brandDark,
   gap: theme.spacing(3),
   height: '30px',

diff --git a/src/app/components/ParaTimePicker/index.tsx b/src/app/components/ParaTimePicker/index.tsx
@@ -53,7 +53,6 @@ const StyledContent = styled(Box)(({ theme }) => ({
 const TabletBackButton = styled(Button)({
   color: COLORS.brandDark,
   width: 'fit-content',
-  textTransform: 'capitalize',
   textDecoration: 'none',
 })
 
@@ -178,13 +177,7 @@ const ParaTimePickerContent: FC<ParaTimePickerContentProps> = ({ onClose, onConf
         </Grid>
 
         <ActionBar>
-          <Button
-            onClick={onClose}
-            color="secondary"
-            variant="outlined"
-            sx={{ textTransform: 'capitalize' }}
-            size="large"
-          >
+          <Button onClick={onClose} color="secondary" variant="outlined" size="large">
             {t('common.cancel')}
           </Button>
 

diff --git a/src/app/pages/ParatimeDashboardPage/TestnetFaucet.tsx b/src/app/pages/ParatimeDashboardPage/TestnetFaucet.tsx
@@ -42,7 +42,6 @@ export const TestnetFaucet: FC<TestnetFaucetProps> = ({ layer }) => {
           rel="noopener noreferrer"
           color="secondary"
           variant="outlined"
-          sx={{ textTransform: 'capitalize', textAlign: 'center' }}
         >
           {t('testnetFaucet.request')}
         </Button>

diff --git a/src/styles/theme/defaultTheme.ts b/src/styles/theme/defaultTheme.ts
@@ -218,6 +218,7 @@ export const defaultTheme = createTheme({
           lineHeight: '23px',
           height: '47px',
           borderRadius: 47,
+          textTransform: 'capitalize',
           '&:disabled': {
             backgroundColor: COLORS.lavenderGray,
             color: COLORS.white,
@@ -227,7 +228,6 @@ export const defaultTheme = createTheme({
           borderWidth: '1px',
           borderStyle: 'solid',
           borderColor: COLORS.grayMediumLight,
-          textTransform: 'capitalize',
           ':disabled': {
             backgroundColor: COLORS.disabledPrimaryBackground,
             color: COLORS.disabledPrimaryText,
@@ -260,12 +260,8 @@ export const defaultTheme = createTheme({
             borderColor: COLORS.brandExtraDark,
           },
         },
-        containedSecondary: {
-          textTransform: 'capitalize',
-        },
         textPrimary: {
           color: COLORS.brandDark,
-          textTransform: 'capitalize',
           '&&:hover, &&:focus-visible, &&:active': {
             color: COLORS.brandExtraDark,
             backgroundColor: 'transparent',