style: adjust styling to match the suite application

src/app/Layout/MainLayout/index.tsx

@@ -1,13 +1,16 @@
+import { Box, CircularProgress, Container, Typography } from '@mui/material'
 import React, { useContext, useEffect } from 'react'
+import { getActiveNetwork, selectAllChains, selectNetworkStatus } from 'store/app-config'
+import { useAppDispatch, useAppSelector } from 'store/configureStore'
+
+import { ColorModeContext } from '../../../styles/theme/ThemeProvider'
+import Icon from '@mdi/react'
 import { NavBar } from 'app/components/NavBar'
 import { Outlet } from 'react-router-dom'
-import { useAppDispatch, useAppSelector } from 'store/configureStore'
-import { Typography, Box, CircularProgress, Container } from '@mui/material'
-import { getActiveNetwork, selectAllChains, selectNetworkStatus } from 'store/app-config'
+import PageContainer from 'app/components/PageContainer'
 import { Status } from 'types'
 import { getChains } from 'api'
-import PageContainer from 'app/components/PageContainer'
-import { ColorModeContext } from '../../../styles/theme/ThemeProvider'
+import { mdiAccessPointNetworkOff } from '@mdi/js'
 import { selectedTheme } from '../../../store/app-config'
 
 const Content: React.FC = () => {
@@ -36,14 +39,32 @@ const Content: React.FC = () => {
                     gap: '20px',
                 }}
             >
-                <Typography
-                    variant="h4"
-                    component="span"
-                    fontWeight="fontWeightBold"
-                    sx={{ color: 'error.light' }}
+                <Box
+                    sx={{
+                        display: 'flex',
+                        flexDirection: 'column',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        maxWidth: '500px',
+                        gap: '1rem',
+                    }}
                 >
-                    Something went wrong, Please Try Again!
-                </Typography>
+                    <Icon path={mdiAccessPointNetworkOff} size={3} color="#94A2B8" />
+                    <Typography variant="h4" component="span" fontWeight="fontWeightBold">
+                        Something went wrong
+                    </Typography>
+                    <Typography
+                        variant="body1"
+                        component="span"
+                        sx={{
+                            textAlign: 'center',
+                            color: theme => (theme.palette.mode === 'dark' ? '#CBD4E2' : '#64748B'),
+                        }}
+                    >
+                        We have encountered an unexpected issue with our current system. For
+                        uninterrupted service, switch over to the Camino Network.
+                    </Typography>
+                </Box>
             </Box>
         </PageContainer>
     )

src/app/components/CamAmount.tsx

@@ -1,16 +1,18 @@
 import * as React from 'react'
-import { Typography, Tooltip, Box } from '@mui/material'
-import { ReactComponent as GasStationOutline } from './assets/gas-station-outline.svg'
-import { ReactComponent as ACamIcon } from './assets/a-cam.svg'
-import { ReactComponent as NCamIcon } from './assets/n-cam.svg'
-import { ReactComponent as CamIcon } from './assets/cam.svg'
+
+import { Box, Tooltip, Typography } from '@mui/material'
 import {
-    getDisplayAmount,
-    getACamAmount,
     customToLocaleString,
+    getACamAmount,
+    getDisplayAmount,
     roundedToLocaleString,
 } from '../../utils/currency-utils'
+
+import { ReactComponent as ACamIcon } from './assets/a-cam.svg'
+import { ReactComponent as CamIcon } from './assets/cam.svg'
+import { ReactComponent as GasStationOutline } from './assets/gas-station-outline.svg'
 import { ICamAmount } from 'types/filesInComponents'
+import { ReactComponent as NCamIcon } from './assets/n-cam.svg'
 import { useLocation } from 'react-router-dom'
 
 export function AmountIcon({ currency }: { currency: string }) {

src/app/components/CopyTitleCard.tsx

@@ -1,8 +1,8 @@
-import React from 'react'
+import DetailsField from 'app/components/DetailsField'
 import Icon from '@mdi/react'
 import OutlinedContainer from 'app/components/OutlinedContainer'
 import OutlinedFilledContainer from 'app/components/OutlinedFilledContainer'
-import DetailsField from 'app/components/DetailsField'
+import React from 'react'
 
 export default function CopyTitleCard({
     label,

src/app/components/DetailsField.tsx

@@ -1,14 +1,15 @@
-import { mdiInformationOutline, mdiOpenInNew } from '@mdi/js'
-import Icon from '@mdi/react'
 import { Box, Button, Chip, Grid, Tooltip, Typography } from '@mui/material'
-import React from 'react'
-import { Link } from 'react-router-dom'
 import { IDetailsField, IField } from 'types/filesInComponents'
-import { roundedToLocaleString } from '../../utils/currency-utils'
+import { mdiInformationOutline, mdiOpenInNew } from '@mdi/js'
 import moment, { currentDateFormat } from '../../utils/helpers/moment'
-import useWidth from '../hooks/useWidth'
+
 import { CamAmount } from './CamAmount'
 import CopyToClipboardButton from './CopyToClipboardButton'
+import Icon from '@mdi/react'
+import { Link } from 'react-router-dom'
+import React from 'react'
+import { roundedToLocaleString } from '../../utils/currency-utils'
+import useWidth from '../hooks/useWidth'
 
 function DetailsField({
     field,
@@ -47,7 +48,7 @@ function DetailsField({
                 {!isMobile && (
                     <>
                         {tooltip?.toLowerCase() || getTooltip(field?.toLowerCase()) ? (
-                            <Grid item xs={2}>
+                            <Grid item xs={2} sx={{ display: 'grid', alignItems: 'center' }}>
                                 <Tooltip title={getTooltip(field?.toLowerCase()) as string}>
                                     {icon || (
                                         <Icon
@@ -58,7 +59,7 @@ function DetailsField({
                                 </Tooltip>
                             </Grid>
                         ) : (
-                            <Grid item xs={2}>
+                            <Grid item xs={2} sx={{ display: 'grid', alignItems: 'center' }}>
                                 {icon}
                             </Grid>
                         )}

src/app/components/FilledCard.tsx

@@ -1,4 +1,5 @@
 import React, { FC } from 'react'
+
 import { Paper } from '@mui/material'
 
 interface BlockCardProps {
@@ -18,7 +19,6 @@ const FilledCard: FC<BlockCardProps> = React.forwardRef((props, ref) => {
                 gap: '10px',
                 display: 'flex',
                 flexDirection: 'column',
-                backgroundColor: 'primary.light',
                 backgroundImage: 'none',
             }}
             ref={ref}

src/app/components/MainButton.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react'
+
 import { Button } from '@mui/material'
 
 function MainButton({
@@ -17,13 +18,15 @@ function MainButton({
             variant={variant}
             onClick={onClick}
             sx={{
-                borderRadius: '12px',
-                padding: '.55rem 2rem',
+                borderRadius: '8px',
+                padding: '0.55rem 2rem',
                 backgroundColor: variant === 'outlined' ? 'transparent' : 'secondary.main',
                 color: variant === 'outlined' ? 'secondary.main' : 'white',
                 borderColor: variant === 'outlined' ? 'secondary.main' : '',
                 boxShadow: 'none',
                 borderWidth: '1.5px',
+                textTransform: 'capitalize',
+                fontWeight: 600,
                 '&:hover': {
                     boxShadow: 'none',
                     backgroundColor: variant === 'outlined' ? 'transparent' : 'secondary.main',

src/app/components/NavBar/SearchInput.tsx

@@ -1,36 +1,37 @@
-import React, { useEffect, useState } from 'react'
-import OutlinedInput from '@mui/material/OutlinedInput'
-import InputAdornment from '@mui/material/InputAdornment'
-import SearchIcon from '@mui/icons-material/Search'
-import Box from '@mui/material/Box'
-import Typography from '@mui/material/Typography'
-import Modal from '@mui/material/Modal'
-import useWidth from 'app/hooks/useWidth'
-import axios, { AxiosError, AxiosResponse } from 'axios'
-import { MenuItem, MenuList, ListItemIcon, Avatar, ClickAwayListener } from '@mui/material'
-import { useTheme } from '@mui/material'
+import { Avatar, ClickAwayListener, ListItemIcon, MenuItem, MenuList } from '@mui/material'
+import {
+    GetAddressDetailsPath,
+    GetBlockDetailsPath,
+    GetTransactionDetailsPath,
+} from 'utils/route-utils'
 import { ISearchMenu, SearchMenuItem } from 'types/search-menu'
-import { debounce } from './utils/debounce'
-import { useNavigate } from 'react-router-dom'
-import { useAppSelector } from 'store/configureStore'
-import { selectMagellanAddress } from 'store/app-config'
-import { searchApi } from 'utils/magellan-api-utils'
 import {
+    MagellanAddressResponse,
+    MagellanAddressSearchResult,
+    MagellanCBlockSearchResult,
+    MagellanCTransactionSearchResult,
     MagellanSearchResultElementType,
     MagellanXPTransactionSearchResult,
-    MagellanCTransactionSearchResult,
-    MagellanCBlockSearchResult,
-    MagellanAddressSearchResult,
-    MagellanAddressResponse,
 } from 'types/magellan-types'
-import {
-    GetBlockDetailsPath,
-    GetAddressDetailsPath,
-    GetTransactionDetailsPath,
-} from 'utils/route-utils'
+import React, { useEffect, useState } from 'react'
+import axios, { AxiosError, AxiosResponse } from 'axios'
+
+import Box from '@mui/material/Box'
 import { ChainType } from 'utils/types/chain-type'
-import { getChainID } from 'api/utils'
+import InputAdornment from '@mui/material/InputAdornment'
+import Modal from '@mui/material/Modal'
+import OutlinedInput from '@mui/material/OutlinedInput'
 import { RoutesConfig } from 'utils/route-paths'
+import SearchIcon from '@mui/icons-material/Search'
+import Typography from '@mui/material/Typography'
+import { debounce } from './utils/debounce'
+import { getChainID } from 'api/utils'
+import { searchApi } from 'utils/magellan-api-utils'
+import { selectMagellanAddress } from 'store/app-config'
+import { useAppSelector } from 'store/configureStore'
+import { useNavigate } from 'react-router-dom'
+import { useTheme } from '@mui/material'
+import useWidth from 'app/hooks/useWidth'
 
 function OutlinedSearchInput() {
     const routesConfig = RoutesConfig()
@@ -241,9 +242,13 @@ function OutlinedSearchInput() {
                             height: '100%',
                             borderRadius: '8px',
                             p: '8px 16px',
-                            backgroundColor: 'primary.light',
+                            backgroundColor: 'card.background',
+                            boxShadow: 0,
+                            backgroundImage: 'none',
+                            borderWidth: '1px',
+                            borderColor: 'card.border',
+                            borderStyle: 'solid',
                             color: 'primary.contrastText',
-                            borderWidth: '0px',
                             fontSize: '15px',
                             lineHeight: '24px',
                             fontWeight: 500,

src/app/components/OutlinedContainer.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react'
+
 import { Box } from '@mui/material'
 
 export default function OutlinedContainer({

src/app/components/OverviewCards/OverviewCard.tsx

@@ -1,7 +1,8 @@
+import { Box, Card, CardContent, Typography } from '@mui/material'
 import React, { FC } from 'react'
-import { Card, CardContent, Box, Typography } from '@mui/material'
-import { Status } from 'types'
+
 import LoadingWrapper from 'app/components/LoadingWrapper'
+import { Status } from 'types'
 
 type OverviewCardProps = {
     title: string
@@ -32,6 +33,7 @@ const OverviewCard: FC<OverviewCardProps> = ({
                 p: '1rem 2rem',
                 borderRadius: '12px',
                 cursor: onClick ? 'pointer' : 'default',
+                borderColor: 'card.border',
             }}
             onClick={onClick}
         >