From fa0e76e58cf2d0f57facf6761029a70f4d1d5f97 Mon Sep 17 00:00:00 2001
From: Michal Zielenkiewicz <michal@oasisprotocol.org>
Date: Tue, 18 Jul 2023 21:42:14 +0200
Subject: [PATCH] Update typography in various places

---
 .changelog/756.bugfix.md                      |  1 +
 .../components/Account/ShowMoreTokensLink.tsx |  2 +-
 .../components/ParaTimePicker/NetworkMenu.tsx | 20 ++++++++++++-------
 .../ParatimeDashboardPage/LatestBlocks.tsx    |  2 +-
 .../LatestTransactions.tsx                    |  2 +-
 .../LearningMaterials.tsx                     |  7 +------
 .../pages/ParatimeDashboardPage/TopTokens.tsx |  2 +-
 7 files changed, 19 insertions(+), 17 deletions(-)
 create mode 100644 .changelog/756.bugfix.md

diff --git a/.changelog/756.bugfix.md b/.changelog/756.bugfix.md
new file mode 100644
index 000000000..0f204639d
--- /dev/null
+++ b/.changelog/756.bugfix.md
@@ -0,0 +1 @@
+Update typography in various places
diff --git a/src/app/components/Account/ShowMoreTokensLink.tsx b/src/app/components/Account/ShowMoreTokensLink.tsx
index f0ee00221..2e6337f19 100644
--- a/src/app/components/Account/ShowMoreTokensLink.tsx
+++ b/src/app/components/Account/ShowMoreTokensLink.tsx
@@ -9,7 +9,7 @@ import { accountTokenContainerId } from '../../pages/AccountDetailsPage/AccountT
 
 export const StyledLink = styled(RouterLink)(({ theme }) => ({
   color: COLORS.brandDark,
-  fontWeight: 600,
+  fontWeight: 700,
   textDecoration: 'none',
   whiteSpace: 'nowrap',
   marginLeft: theme.spacing(4),
diff --git a/src/app/components/ParaTimePicker/NetworkMenu.tsx b/src/app/components/ParaTimePicker/NetworkMenu.tsx
index 8d609ec84..33367e4e2 100644
--- a/src/app/components/ParaTimePicker/NetworkMenu.tsx
+++ b/src/app/components/ParaTimePicker/NetworkMenu.tsx
@@ -12,6 +12,17 @@ import { COLORS } from '../../../styles/theme/colors'
 import { Network, getNetworkNames } from '../../../types/network'
 import { RouteUtils } from '../../utils/route-utils'
 import { getNetworkIcons } from '../../utils/content'
+import { styled } from '@mui/material/styles'
+
+const StyledButton = styled(Button)(({ theme }) => ({
+  marginLeft: '48px',
+  color: COLORS.brandDark,
+  fontWeight: 700,
+  '&&:hover': {
+    textDecoration: 'none',
+    color: COLORS.brandDark,
+  },
+}))
 
 type NetworkMenuItemProps = Omit<NetworkMenuProps, 'options'> & {
   divider: boolean
@@ -114,14 +125,9 @@ export const NetworkMenu: FC<NetworkMenuProps> = ({ activeNetwork, selectedNetwo
         </Collapse>
       </MenuList>
       {!!filteredOptions.length && (
-        <Button
-          onClick={() => setExpandNetworkMenu(!expandNetworkMenu)}
-          size="small"
-          variant="text"
-          sx={{ ml: '48px' }}
-        >
+        <StyledButton onClick={() => setExpandNetworkMenu(!expandNetworkMenu)} size="small" variant="text">
           {expandNetworkMenu ? t('paraTimePicker.less') : t('paraTimePicker.more')}
-        </Button>
+        </StyledButton>
       )}
     </>
   )
diff --git a/src/app/pages/ParatimeDashboardPage/LatestBlocks.tsx b/src/app/pages/ParatimeDashboardPage/LatestBlocks.tsx
index c677499d2..743a5d5fe 100644
--- a/src/app/pages/ParatimeDashboardPage/LatestBlocks.tsx
+++ b/src/app/pages/ParatimeDashboardPage/LatestBlocks.tsx
@@ -46,7 +46,7 @@ export const LatestBlocks: FC<{ scope: SearchScope }> = ({ scope }) => {
           <Link
             component={RouterLink}
             to={RouteUtils.getLatestBlocksRoute(scope)}
-            sx={{ color: COLORS.brandExtraDark }}
+            sx={{ color: COLORS.brandDark }}
           >
             {t('common.viewAll')}
           </Link>
diff --git a/src/app/pages/ParatimeDashboardPage/LatestTransactions.tsx b/src/app/pages/ParatimeDashboardPage/LatestTransactions.tsx
index edd930c73..a190e9e38 100644
--- a/src/app/pages/ParatimeDashboardPage/LatestTransactions.tsx
+++ b/src/app/pages/ParatimeDashboardPage/LatestTransactions.tsx
@@ -46,7 +46,7 @@ export const LatestTransactions: FC<{ scope: SearchScope }> = ({ scope }) => {
           <Link
             component={RouterLink}
             to={RouteUtils.getLatestTransactionsRoute(scope)}
-            sx={{ color: COLORS.brandExtraDark }}
+            sx={{ color: COLORS.brandDark }}
           >
             {t('common.viewAll')}
           </Link>
diff --git a/src/app/pages/ParatimeDashboardPage/LearningMaterials.tsx b/src/app/pages/ParatimeDashboardPage/LearningMaterials.tsx
index d46e118b3..b95f74e0a 100644
--- a/src/app/pages/ParatimeDashboardPage/LearningMaterials.tsx
+++ b/src/app/pages/ParatimeDashboardPage/LearningMaterials.tsx
@@ -146,12 +146,7 @@ export const LearningMaterials: FC<{ scope: SearchScope }> = ({ scope }) => {
         component="h3"
         title={t('learningMaterials.header')}
         action={
-          <Link
-            href={docs.home}
-            rel="noopener noreferrer"
-            target="_blank"
-            sx={{ color: COLORS.brandExtraDark }}
-          >
+          <Link href={docs.home} rel="noopener noreferrer" target="_blank" sx={{ color: COLORS.brandDark }}>
             {t('common.viewAll')}
           </Link>
         }
diff --git a/src/app/pages/ParatimeDashboardPage/TopTokens.tsx b/src/app/pages/ParatimeDashboardPage/TopTokens.tsx
index 2b65378df..e6508c321 100644
--- a/src/app/pages/ParatimeDashboardPage/TopTokens.tsx
+++ b/src/app/pages/ParatimeDashboardPage/TopTokens.tsx
@@ -35,7 +35,7 @@ export const TopTokens: FC<{ scope: SearchScope }> = ({ scope }) => {
           <Link
             component={RouterLink}
             to={RouteUtils.getTopTokensRoute(scope)}
-            sx={{ color: COLORS.brandExtraDark }}
+            sx={{ color: COLORS.brandDark }}
           >
             {t('common.viewAll')}
           </Link>