Fix: large scale styling (#206)

src/components/AccountEarnings/AccountEarning.tsx

@@ -45,7 +45,7 @@ const AccountEarning = () => {
 
   return (
     <EarningsLayout>
-      <div className='p-4 bg-primary200 w-28 text-center absolute z-50 top-0 right-10'>
+      <div className='p-4 bg-primary200 w-28 text-center absolute z-30 md:z-50 top-0 right-10'>
         <Tooltip
           className='cursor-pointer flex justify-center space-x-2'
           id='balanceInfo'
@@ -63,7 +63,7 @@ const AccountEarning = () => {
         <div className='w-full p-4'>
           <Typography
             fontWeight='font-light'
-            className='primary-gradient-text'
+            className='primary-gradient-text pointer-events-none'
             color='text-transparent'
             type='text-subtitle1'
             darkMode='dark:text-white'
@@ -130,9 +130,9 @@ const AccountEarning = () => {
               ))}
             </div>
           </div>
-          <div className='flex justify-between space-x-2 md:space-x-0 mt-2 p-4'>
+          <div className='flex justify-between space-x-2 md:space-x-0 mt-6 md:mt-2 md:p-4'>
             <div className='flex space-x-4'>
-              <EthLogo className='h-10 w-10' />
+              <EthLogo className='h-10 w-10 hidden md:block' />
               <Tooltip
                 className='cursor-pointer'
                 id='ethInfo'
@@ -162,7 +162,7 @@ const AccountEarning = () => {
               </Tooltip>
             </div>
             <div className='flex space-x-4'>
-              <UsdcLogo className='h-10 w-10' />
+              <UsdcLogo className='h-10 w-10 hidden md:block' />
               <Tooltip
                 className='cursor-pointer'
                 id='fiatInfo'

src/components/AlertCard/AlertCard.tsx

@@ -10,7 +10,7 @@ export interface AlertCardProps extends StatusBarProps {
 
 const AlertCard: FC<AlertCardProps> = ({ text, subText, onClick, ...props }) => {
   return (
-    <div className='w-full h-14 @1540:h-22 group border-b-style500 flex justify-between items-center space-x-2 @1540:space-x-4 p-2'>
+    <div className='w-full @1540:h-22 group border-b-style500 flex justify-between items-center space-x-2 @1540:space-x-4 p-2'>
       <StatusBar {...props} />
       <div className='w-full max-w-tiny @1540:max-w-full'>
         <Typography type='text-caption2'>{text}</Typography>

src/components/AlertFilterSettings/AlertFilterSettings.tsx

@@ -32,7 +32,7 @@ const AlertFilterSettings: FC<AlertFilterSettingsProps> = ({ onChange, value })
   ]
 
   return (
-    <div ref={ref} className='relative'>
+    <div ref={ref} className='relative z-50'>
       <i onClick={openDrop} className='bi-sliders2 text-dark400 cursor-pointer' />
       <DropDown isScroll={false} width='w-42' position='right-0' isOpen={isOpen}>
         {filterOptions.map((option, index) => (

src/components/DiagnosticTable/AlertInfo.tsx

@@ -7,6 +7,7 @@ import { useEffect, useMemo, useState } from 'react'
 import sortAlertMessagesBySeverity from '../../utilities/sortAlerts'
 import { StatusColor } from '../../types'
 import AlertFilterSettings, { FilterValue } from '../AlertFilterSettings/AlertFilterSettings'
+import useMediaQuery from '../../hooks/useMediaQuery'
 
 const AlertInfo = () => {
   const { t } = useTranslation()
@@ -15,6 +16,7 @@ const AlertInfo = () => {
   const [filter, setFilter] = useState('all')
 
   const setFilterValue = (value: FilterValue) => setFilter(value)
+  const isMobile = useMediaQuery('(max-width: 425px)')
 
   const formattedAlerts = useMemo(() => {
     let baseAlerts = alerts
@@ -37,16 +39,16 @@ const AlertInfo = () => {
   }, [])
 
   return (
-    <div ref={ref} className='h-full w-full flex flex-col border-l-0 border-t-0 border-style500'>
-      <div className='w-full h-12 flex items-center justify-between px-4 md:border-l-0 border-r-0 border-style500'>
+    <div ref={ref} className='h-full w-full flex flex-col md:border-l-0 border-t-0 border-style500'>
+      <div className='w-full h-12 flex items-center justify-between px-4 border-l-0 border-r-0 border-style500'>
         <Typography type='text-caption1' color='text-primary' darkMode='dark:text-white' isBold>
           {t('alertInfo.alerts')}
         </Typography>
         <AlertFilterSettings value={filter as FilterValue} onChange={setFilterValue} />
       </div>
       {dimensions && (
         <div
-          style={{ maxHeight: `${dimensions.height - 48}px` }}
+          style={isMobile ? undefined : { maxHeight: `${dimensions.height}px` }}
           className='h-full w-full flex flex-col'
         >
           {formattedAlerts.length > 0 && (

src/components/DiagnosticTable/LogsInfo.tsx

@@ -35,7 +35,11 @@ const LogsInfo = () => {
           {t('logInfo.logs')}
         </Typography>
         <div onClick={viewAllLogs} className='cursor-pointer'>
-          <Typography type='text-tiny' className='uppercase' color='text-dark400'>
+          <Typography
+            type='text-tiny'
+            className='uppercase @1600:text-caption1'
+            color='text-dark400'
+          >
             {t('viewAll')}
           </Typography>
         </div>

src/components/FootBar/HealthMetric.tsx

@@ -25,6 +25,7 @@ const HealthMetric = () => {
       subTitle={`${t(healthCondition.toLowerCase()).toUpperCase()}, ${t('nodes')} ${
         isSyncing ? t('syncing') : t('synced')
       }...`}
+      maxWidth='w-fit'
       size='sm'
     />
   )

src/components/InfoBox/InfoBox.tsx

@@ -19,13 +19,12 @@ const InfoBox: FC<InfoBoxProps> = ({ type, children, text }) => {
   const isInfo = type === InfoBoxType.INFO
   const isError = type === InfoBoxType.ERROR
 
-  const warningClasses = addClassString('w-full flex items-center p-6 rounded', [
-    isInfo && 'bg-dark500',
-    isError && 'bg-lightError',
-    isWarning && 'bg-warning200',
-  ])
+  const warningClasses = addClassString(
+    'w-full flex flex-col md:flex-row space-y-4 md:space-y-0 items-center p-6 rounded',
+    [isInfo && 'bg-dark500', isError && 'bg-lightError', isWarning && 'bg-warning200'],
+  )
   const warningIconBackgroundClasses = addClassString(
-    'rounded-full mr-14 flex-shrink-0 flex items-center justify-center h-12 w-12',
+    'rounded-full md:mr-14 flex-shrink-0 flex items-center justify-center h-12 w-12',
     [isInfo && 'bg-dark400', isError && 'bg-lightError200', isWarning && 'bg-warning'],
   )
   const warningIconClasses = addClassString('text-2xl', [

src/components/NetworkStats/NetworkStats.tsx

@@ -35,7 +35,7 @@ const NetworkStats = () => {
   const participationClasses = addClassString('border-none', [!hasParticipation && 'opacity-20'])
 
   return (
-    <div className='w-full z-50 h-18 lg:h-16 xl:h-14 dark:border dark:border-dark500 shadow flex flex-col md:flex-row'>
+    <div className='w-full z-50 md:h-18 lg:h-16 xl:h-14 dark:border dark:border-dark500 shadow flex flex-col md:flex-row'>
       <NetworkStatBlock
         toolTipId='vcTime'
         toolTipText={t('networkStats.toolTips.vcTime')}

src/components/SideBar/SideBar.tsx

@@ -115,8 +115,8 @@ const SideBar = () => {
               />
             ))}
             <div onClick={toggleUi} className='w-full flex items-center'>
-              <SideBarText className='w-auto mr-4' text={t('sidebar.theme')} />
-              <UiModeIcon className='md:hidden' mode={mode} />
+              <SideBarText className='w-auto md:mr-4' text={t('sidebar.theme')} />
+              <UiModeIcon className='md:hidden mr-4' mode={mode} />
             </div>
           </ul>
         </div>

src/components/SideBar/SideItem.tsx

@@ -25,7 +25,7 @@ const SideItem: FC<SideItemProps> = ({ children, isActive, className, onClick, i
           [!isActive && 'group-hover:block hidden'],
         )}
       />
-      <div className='w-4 h-4'>{children}</div>
+      <div className='w-4 h-4 @1600:w-5 @1600:h-5'>{children}</div>
     </li>
   )
   return isDisabled ? (

src/components/SyncMetric/SyncMetric.tsx

@@ -33,7 +33,7 @@ const SyncMetric: FC<SyncMetricProps> = ({
   ...props
 }) => {
   const classes = addClassString(
-    'flex h-14 max-h-full bg-white dark:bg-dark750 border-borderLight dark:border-dark900',
+    'flex max-h-full bg-white dark:bg-dark750 border-borderLight dark:border-dark900',
     [borderStyle, className],
   )
   return (

src/components/TopBar/BeaconMetric.tsx

@@ -31,7 +31,7 @@ const BeaconMetric = () => {
       id='beaconChain'
       borderStyle='border-r'
       title='BEACON CHAIN'
-      className='ml-4'
+      className='md:ml-4'
       subTitle={`${isSyncing ? t('syncing') : slotDistance ? t('synced') : ''} —`}
       percent={beaconPercentage}
       amount={headSlot}

src/components/TopBar/TopBar.tsx

@@ -20,7 +20,7 @@ const TopBar = () => {
   const openSideBar = () => toggleSideBar(true)
 
   return (
-    <div className='w-full h-14 @1540:h-18 border-b bg-white dark:bg-dark750 border-borderLight dark:border-dark800 flex justify-between'>
+    <div className='w-full lg:h-14 @1540:h-18 border-b bg-white dark:bg-dark750 border-borderLight dark:border-dark800 flex justify-between'>
       <div className='flex h-full'>
         <div className='flex items-center md:w-42 border-r border-borderLight dark:border-borderDark px-4'>
           <div

src/components/ValidatorGraffitiInput/ValidatorGraffitiInput.tsx

@@ -25,12 +25,12 @@ const ValidatorGraffitiInput: FC<ValidatorGraffitiInputProps> = ({
 
   return (
     <div className='w-full border-t flex'>
-      <div className='border-r py-2 px-6 w-42'>
+      <div className='border-r py-2 px-2 md:px-6 md:w-42'>
         <Typography type='text-caption1' className='w-1/2'>
           {t('validatorGraffiti')}
         </Typography>
       </div>
-      <div className='flex-1 flex justify-between items-center px-8 py-3'>
+      <div className='flex-1 flex justify-between items-center px-2 md:px-8 py-3'>
         <Input
           value={input}
           onChange={onChange}

src/components/ValidatorInfoCard/ValidatorInfoCard.tsx

@@ -16,7 +16,7 @@ const ValidatorInfoCard: FC<ValidatorInfoCardProps> = ({ validator, className, o
   const { t } = useTranslation()
   const { index, balance, pubKey, name } = validator
   const classes = addClassString(
-    'w-full lg:w-80 h-60 border-r-style100 px-8 lg:px-6 py-4 relative',
+    'w-full lg:w-80 h-60 lg:border-r-style100 px-8 lg:px-6 py-4 relative',
     [className],
   )
 

src/components/ValidatorModal/ValidatorActions.tsx

@@ -43,7 +43,7 @@ const ValidatorActions: FC<ValidatorActionsProps> = ({
             </Typography>
           ) : (
             <div>
-              <Typography className='mr-12' type='text-caption1' darkMode='text-dark900'>
+              <Typography className='md:mr-12' type='text-caption1' darkMode='text-dark900'>
                 {t('blsExecution.warning.text')}
                 <span className='text-blue-500'>
                   <a href={WithdrawalInfoLink} target='_blank' rel='noreferrer'>

src/components/ValidatorModal/ValidatorModal.tsx

@@ -1,4 +1,4 @@
-import { createContext, useState } from 'react'
+import { createContext, useEffect, useState } from 'react'
 import ValidatorDetails from './views/ValidatorDetails'
 import { useRecoilValue, useSetRecoilState } from 'recoil'
 import Spinner from '../Spinner/Spinner'
@@ -21,13 +21,19 @@ export const ValidatorModalContext = createContext<ValidatorModalContextProps>({
 })
 
 const ValidatorModal = () => {
+  const [isReady, setReady] = useState(false)
   const setValidatorIndex = useSetRecoilState(validatorIndex)
   const validator = useRecoilValue(selectValidatorDetail)
   const [activeIndex, setIndex] = useState(0)
   const [view, setView] = useState<ValidatorModalView>(ValidatorModalView.EXIT)
-  const isTablet = useMediaQuery('(max-width: 1024px)')
+  const isMobile = useMediaQuery('(max-width: 425px)')
+  const isTablet = useMediaQuery('(max-width: 768px)')
   const isLargeScreen = useMediaQuery('(min-width: 1540px)')
 
+  useEffect(() => {
+    setReady(true)
+  }, [])
+
   const closeModal = () => {
     setValidatorIndex(undefined)
     setTimeout(() => {
@@ -63,17 +69,17 @@ const ValidatorModal = () => {
 
   return (
     <RodalModal
-      isVisible={!!validator}
+      isVisible={!!validator && isReady}
       styles={{
         width: 'fit-content',
-        maxWidth: isTablet ? '448px' : isLargeScreen ? '1200px' : '900px',
+        maxWidth: isMobile ? '99%' : isTablet ? '448px' : isLargeScreen ? '1200px' : '900px',
         height: isTablet ? '540px' : 'max-content',
       }}
       onClose={closeModal}
     >
       {validator ? (
         <ValidatorModalContext.Provider value={{ moveToView, closeModal }}>
-          <Carousel slideIndex={activeIndex} dragging={false} withoutControls>
+          <Carousel swiping={false} slideIndex={activeIndex} dragging={false} withoutControls>
             <ValidatorDetails />
             {renderContent()}
           </Carousel>

src/views/DashBoard/Content/Settings.tsx

@@ -65,7 +65,7 @@ const Settings = () => {
     <div className='relative w-full max-w-1440 px-5 py-8'>
       <LighthouseSvg className={svgClasses} />
       <div className='relative z-10 w-full pb-20 lg:pb-0'>
-        <div className='w-full flex items-center justify-between pr-12'>
+        <div className='w-full flex flex-col md:flex-row md:items-center space-y-4 md:space-y-0 justify-between pr-12'>
           <Typography type='text-subtitle1' className='capitalize' fontWeight='font-light'>
             {t('sidebar.settings')}
           </Typography>
@@ -76,8 +76,8 @@ const Settings = () => {
         </div>
         <div className='w-full flex flex-col lg:flex-row pt-8'>
           <div className='flex-1'>
-            <div className='w-full flex max-w-xl justify-between'>
-              <div>
+            <div className='w-full flex flex-col md:flex-row max-w-xl justify-between'>
+              <div className='order-2 md:order-1'>
                 <Typography
                   type='text-subtitle2'
                   color='text-transparent'
@@ -87,7 +87,7 @@ const Settings = () => {
                   {t('settings.currentVersion')}
                 </Typography>
               </div>
-              <div className='flex items-center space-x-2'>
+              <div className='flex order-1 md:order-2 mb-8 md:mb-0 items-center space-x-2'>
                 <Typography
                   type='text-caption1'
                   isBold
@@ -153,7 +153,7 @@ const Settings = () => {
             </div>
           </div>
         </div>
-        <div className='w-full mt-6 lg:mt-0 px-4 md:px-0'>
+        <div className='w-full mt-6 lg:mt-0 px-0'>
           <Typography
             color='text-transparent'
             className='primary-gradient-text'