From 4bad3bb484e04425561aa824b1254e37c6ca6ec1 Mon Sep 17 00:00:00 2001
From: Kaja <kaja.osojnik@gmail.com>
Date: Sun, 22 Oct 2023 19:32:10 +0200
Subject: [PATCH 1/2] Use theme to capitalize all outlined buttons

---
 src/app/components/CopyToClipboard/index.tsx          | 8 +-------
 src/app/components/PageLayout/NetworkButton.tsx       | 1 -
 src/app/components/ParaTimePicker/index.tsx           | 8 +-------
 src/app/pages/ParatimeDashboardPage/TestnetFaucet.tsx | 1 -
 src/styles/theme/defaultTheme.ts                      | 3 +++
 5 files changed, 5 insertions(+), 16 deletions(-)

diff --git a/src/app/components/CopyToClipboard/index.tsx b/src/app/components/CopyToClipboard/index.tsx
index 343ef15d0..c1a3ce6ad 100644
--- 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
index 0b21fc1f5..7f0c56f1e 100644
--- 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',
 
diff --git a/src/app/components/ParaTimePicker/index.tsx b/src/app/components/ParaTimePicker/index.tsx
index b767e5a3e..5396f459b 100644
--- a/src/app/components/ParaTimePicker/index.tsx
+++ b/src/app/components/ParaTimePicker/index.tsx
@@ -178,13 +178,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
index fd0e5048c..473d06746 100644
--- 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
index 496250307..766a62bbf 100644
--- a/src/styles/theme/defaultTheme.ts
+++ b/src/styles/theme/defaultTheme.ts
@@ -242,6 +242,9 @@ export const defaultTheme = createTheme({
             borderColor: COLORS.brandExtraDark,
           },
         },
+        outlined: {
+          textTransform: 'capitalize',
+        },
         outlinedSecondary: {
           borderColor: COLORS.brandExtraDark,
           color: COLORS.brandExtraDark,

From 3c25e45afe890e701c2e8cdc638697e91e75f652 Mon Sep 17 00:00:00 2001
From: Kaja <kaja.osojnik@gmail.com>
Date: Sat, 21 Oct 2023 16:33:21 +0200
Subject: [PATCH 2/2] Use theme to capitalize all buttons

---
 .changelog/966.internal.md                      | 1 +
 src/app/components/PageLayout/NetworkButton.tsx | 1 -
 src/app/components/ParaTimePicker/index.tsx     | 1 -
 src/styles/theme/defaultTheme.ts                | 9 +--------
 4 files changed, 2 insertions(+), 10 deletions(-)
 create mode 100644 .changelog/966.internal.md

diff --git a/.changelog/966.internal.md b/.changelog/966.internal.md
new file mode 100644
index 000000000..867424468
--- /dev/null
+++ b/.changelog/966.internal.md
@@ -0,0 +1 @@
+Use theme to capitalize all buttons
diff --git a/src/app/components/PageLayout/NetworkButton.tsx b/src/app/components/PageLayout/NetworkButton.tsx
index 7f0c56f1e..79dc63829 100644
--- a/src/app/components/PageLayout/NetworkButton.tsx
+++ b/src/app/components/PageLayout/NetworkButton.tsx
@@ -103,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
index 5396f459b..2ee7b0e2f 100644
--- 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',
 })
 
diff --git a/src/styles/theme/defaultTheme.ts b/src/styles/theme/defaultTheme.ts
index 766a62bbf..ff993230f 100644
--- 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,
@@ -242,9 +242,6 @@ export const defaultTheme = createTheme({
             borderColor: COLORS.brandExtraDark,
           },
         },
-        outlined: {
-          textTransform: 'capitalize',
-        },
         outlinedSecondary: {
           borderColor: COLORS.brandExtraDark,
           color: COLORS.brandExtraDark,
@@ -263,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',