Merge pull request #2206 from oasisprotocol/mz/migrationCleanUp

Clean up minor issues introduced during the migration

Author: buberdds

.changelog/2206.trivial.md

@@ -0,0 +1 @@
+Clean up minor issues introduced during the migration

src/app/components/LayerPicker/index.tsx

@@ -1,6 +1,11 @@
 import { FC, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Drawer, DrawerContent } from '@oasisprotocol/ui-library/src/components/ui/drawer'
+import {
+  Drawer,
+  DrawerContent,
+  DrawerTitle,
+  DrawerDescription,
+} from '@oasisprotocol/ui-library/src/components/ui/drawer'
 import { Separator } from '@oasisprotocol/ui-library/src/components/ui/separator'
 import { HomePageLink } from '../PageLayout/Logotype'
 import { Network } from '../../../types/network'
@@ -62,7 +67,10 @@ const LayerPickerContent: FC<LayerPickerContentProps> = ({ isOutOfDate, onClose,
   return (
     <div className="flex flex-col w-full flex-1 lg:block lg:w-auto lg:flex-none">
       <div className="relative mb-0 lg:mb-2 lg:mb-10">
-        <HomePageLink color="#0500e2" showText={!isMobile} />
+        <DrawerTitle>
+          <HomePageLink showText={!isMobile} />
+        </DrawerTitle>
+        <DrawerDescription className="sr-only">{t('layerPicker.description')}</DrawerDescription>
       </div>
       {isTablet && (
         <div className="flex justify-between items-center min-h-12">

src/app/components/PageLayout/Header.tsx

@@ -39,7 +39,7 @@ export const Header: FC = () => {
       <div className="px-4">
         <div className="grid grid-cols-12 pt-3 pb-4 px-0 md:px-[4%]">
           <div className="col-span-6 xl:col-span-3 flex items-center">
-            <HomePageLink showText={!scrollTrigger && !isMobile} color="#0500e2" />
+            <HomePageLink showText={!scrollTrigger && !isMobile} />
           </div>
 
           {withScopeSelector && (

src/app/components/PageLayout/Logotype.tsx

@@ -6,21 +6,20 @@ import { OasisIcon } from '../CustomIcons/OasisIcon'
 import { ExplorerIcon } from '../CustomIcons/ExplorerIcon'
 
 interface LogotypeProps {
-  color?: string
   showText: boolean
 }
 
-export const HomePageLink: FC<LogotypeProps> = ({ color, showText }) => {
+export const HomePageLink: FC<LogotypeProps> = ({ showText }) => {
   const { t } = useTranslation()
 
   return (
     <RouterLink to="/" aria-label={t('home.link')}>
-      <Logotype color={color} showText={showText} />
+      <Logotype showText={showText} />
     </RouterLink>
   )
 }
 
-export const Logotype: FC<LogotypeProps> = ({ color, showText }) => {
+export const Logotype: FC<LogotypeProps> = ({ showText }) => {
   const { isMobile } = useScreenSize()
   const oasisLogoSize = isMobile ? 32 : 40
   const logoSize = !showText ? { height: oasisLogoSize, width: oasisLogoSize } : { height: 40, width: 214 }

src/app/pages/HomePage/index.tsx

@@ -150,7 +150,7 @@ export const HomePage: FC = () => {
       <HomepageLayout>
         <Content>
           <LogotypeBox>
-            <Logotype showText color="#0500e2" />
+            <Logotype showText />
           </LogotypeBox>
           <SearchInputContainer transparent={isGraphZoomedIn && !searchHasFocus}>
             <SearchInputBox>

src/locales/en/translation.json

@@ -642,6 +642,7 @@
     "comingSoonTitle": "Coming soon",
     "comingSoonLabel": "(coming soon)",
     "consensus": "The consensus layer is a scalable, high-throughput, secure, proof-of-stake consensus run by a decentralized set of validator nodes.",
+    "description": "Select the network and layer you want to explore.",
     "goToDashboard": "Go to dashboard",
     "hex": "Hex: {{ id }}",
     "hostedOn": "Hosted on {{ network }}",

src/styles/theme/defaultTheme.ts

@@ -4,7 +4,6 @@ import Fade from '@mui/material/Fade'
 import { outlinedInputClasses } from '@mui/material/OutlinedInput'
 import { inputBaseClasses } from '@mui/material/InputBase'
 import { inputAdornmentClasses } from '@mui/material/InputAdornment'
-import { tabClasses } from '@mui/material/Tab'
 
 declare module '@mui/material/styles' {
   interface Palette {
@@ -149,13 +148,6 @@ export const defaultTheme = createTheme({
     },
   },
   components: {
-    MuiBackdrop: {
-      styleOverrides: {
-        root: {
-          backgroundColor: 'rgba(0, 0, 0, 0.9)',
-        },
-      },
-    },
     MuiButton: {
       defaultProps: {
         disableElevation: true,
@@ -537,92 +529,6 @@ export const defaultTheme = createTheme({
         },
       ],
     },
-    MuiPagination: {
-      variants: [
-        {
-          props: { showFirstButton: true, showLastButton: true },
-          style: {
-            // Swap First and Previous page buttons
-            'li:nth-of-type(2)': {
-              order: -1,
-            },
-            // Swap Last and Next page buttons
-            'li:nth-last-of-type(2)': {
-              order: 1,
-            },
-          },
-        },
-      ],
-    },
-    MuiPaginationItem: {
-      variants: [
-        {
-          props: { selected: false },
-          style: {
-            color: COLORS.brandExtraDark,
-          },
-        },
-        {
-          props: { selected: true },
-          style: {
-            backgroundColor: 'unset !important',
-            color: COLORS.disabledPagination,
-          },
-        },
-        {
-          props: { type: 'page' },
-          style: {
-            minWidth: 0,
-          },
-        },
-      ],
-    },
-    MuiTabs: {
-      styleOverrides: {
-        root: ({ theme }) => ({
-          // neglect the default border radius of sibling element (Card component in most cases)
-          '&& + *': {
-            borderTopLeftRadius: 0,
-            [theme.breakpoints.down('sm')]: {
-              borderTopRightRadius: 0,
-            },
-          },
-        }),
-        indicator: {
-          display: 'none',
-        },
-      },
-    },
-    MuiTab: {
-      styleOverrides: {
-        root: ({ theme }) => ({
-          '&:hover, &:focus-visible': {
-            color: COLORS.brandExtraDark,
-            backgroundColor: COLORS.grayLight,
-          },
-          [`&.${tabClasses.selected}`]: {
-            color: COLORS.brandExtraDark,
-            backgroundColor: COLORS.white,
-          },
-          fontSize: '14px',
-          fontWeight: 700,
-          color: COLORS.brandDark,
-          backgroundColor: COLORS.grayLight,
-          border: `1px solid ${COLORS.grayLight}`,
-          borderBottom: 'none',
-          marginRight: theme.spacing(2),
-          borderTopLeftRadius: 12,
-          borderTopRightRadius: 12,
-          textTransform: 'capitalize',
-          [theme.breakpoints.down('sm')]: {
-            padding: theme.spacing(3, 4),
-          },
-          [theme.breakpoints.up('sm')]: {
-            padding: theme.spacing(4, 5),
-          },
-        }),
-      },
-    },
     MuiMobileStepper: {
       styleOverrides: {
         root: {
@@ -642,12 +548,5 @@ export const defaultTheme = createTheme({
         }),
       },
     },
-    MuiList: {
-      styleOverrides: {
-        padding: {
-          paddingTop: 0,
-        },
-      },
-    },
   },
 })