From 2b721ca32f530ab4c32ee626ceba8fc96380ef53 Mon Sep 17 00:00:00 2001 From: Ricki Moore Date: Mon, 21 Aug 2023 19:15:19 +0200 Subject: [PATCH] Fix: large scale styling (#206) --- .../AccountEarnings/AccountEarning.tsx | 10 +++++----- src/components/AlertCard/AlertCard.tsx | 2 +- .../AlertFilterSettings/AlertFilterSettings.tsx | 2 +- src/components/DiagnosticTable/AlertInfo.tsx | 8 +++++--- src/components/DiagnosticTable/LogsInfo.tsx | 6 +++++- src/components/FootBar/HealthMetric.tsx | 1 + src/components/InfoBox/InfoBox.tsx | 11 +++++------ src/components/NetworkStats/NetworkStats.tsx | 2 +- src/components/SideBar/SideBar.tsx | 4 ++-- src/components/SideBar/SideItem.tsx | 2 +- src/components/SyncMetric/SyncMetric.tsx | 2 +- src/components/TopBar/BeaconMetric.tsx | 2 +- src/components/TopBar/TopBar.tsx | 2 +- .../ValidatorGraffitiInput.tsx | 4 ++-- .../ValidatorInfoCard/ValidatorInfoCard.tsx | 2 +- .../ValidatorModal/ValidatorActions.tsx | 2 +- src/components/ValidatorModal/ValidatorModal.tsx | 16 +++++++++++----- src/views/DashBoard/Content/Settings.tsx | 10 +++++----- 18 files changed, 50 insertions(+), 38 deletions(-) diff --git a/src/components/AccountEarnings/AccountEarning.tsx b/src/components/AccountEarnings/AccountEarning.tsx index e46eb2f8..bd36de2d 100644 --- a/src/components/AccountEarnings/AccountEarning.tsx +++ b/src/components/AccountEarnings/AccountEarning.tsx @@ -45,7 +45,7 @@ const AccountEarning = () => { return ( -
+
{
{ ))}
-
+
- + {
- + = ({ text, subText, onClick, ...props }) => { return ( -
+
{text} diff --git a/src/components/AlertFilterSettings/AlertFilterSettings.tsx b/src/components/AlertFilterSettings/AlertFilterSettings.tsx index d838b0e2..09801969 100644 --- a/src/components/AlertFilterSettings/AlertFilterSettings.tsx +++ b/src/components/AlertFilterSettings/AlertFilterSettings.tsx @@ -32,7 +32,7 @@ const AlertFilterSettings: FC = ({ onChange, value }) ] return ( -
+
{filterOptions.map((option, index) => ( diff --git a/src/components/DiagnosticTable/AlertInfo.tsx b/src/components/DiagnosticTable/AlertInfo.tsx index fb07b51b..dd95b715 100644 --- a/src/components/DiagnosticTable/AlertInfo.tsx +++ b/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,8 +39,8 @@ const AlertInfo = () => { }, []) return ( -
-
+
+
{t('alertInfo.alerts')} @@ -46,7 +48,7 @@ const AlertInfo = () => {
{dimensions && (
{formattedAlerts.length > 0 && ( diff --git a/src/components/DiagnosticTable/LogsInfo.tsx b/src/components/DiagnosticTable/LogsInfo.tsx index f45928f3..97a9ea45 100644 --- a/src/components/DiagnosticTable/LogsInfo.tsx +++ b/src/components/DiagnosticTable/LogsInfo.tsx @@ -35,7 +35,11 @@ const LogsInfo = () => { {t('logInfo.logs')}
- + {t('viewAll')}
diff --git a/src/components/FootBar/HealthMetric.tsx b/src/components/FootBar/HealthMetric.tsx index fa61c19a..46739888 100644 --- a/src/components/FootBar/HealthMetric.tsx +++ b/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' /> ) diff --git a/src/components/InfoBox/InfoBox.tsx b/src/components/InfoBox/InfoBox.tsx index e6a5c411..64c09aef 100644 --- a/src/components/InfoBox/InfoBox.tsx +++ b/src/components/InfoBox/InfoBox.tsx @@ -19,13 +19,12 @@ const InfoBox: FC = ({ 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', [ diff --git a/src/components/NetworkStats/NetworkStats.tsx b/src/components/NetworkStats/NetworkStats.tsx index 5d12f5fb..9d426e16 100644 --- a/src/components/NetworkStats/NetworkStats.tsx +++ b/src/components/NetworkStats/NetworkStats.tsx @@ -35,7 +35,7 @@ const NetworkStats = () => { const participationClasses = addClassString('border-none', [!hasParticipation && 'opacity-20']) return ( -
+
{ /> ))}
- - + +
diff --git a/src/components/SideBar/SideItem.tsx b/src/components/SideBar/SideItem.tsx index 8706169b..caea8de1 100644 --- a/src/components/SideBar/SideItem.tsx +++ b/src/components/SideBar/SideItem.tsx @@ -25,7 +25,7 @@ const SideItem: FC = ({ children, isActive, className, onClick, i [!isActive && 'group-hover:block hidden'], )} /> -
{children}
+
{children}
) return isDisabled ? ( diff --git a/src/components/SyncMetric/SyncMetric.tsx b/src/components/SyncMetric/SyncMetric.tsx index a7d3905f..42dc6aa3 100644 --- a/src/components/SyncMetric/SyncMetric.tsx +++ b/src/components/SyncMetric/SyncMetric.tsx @@ -33,7 +33,7 @@ const SyncMetric: FC = ({ ...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 ( diff --git a/src/components/TopBar/BeaconMetric.tsx b/src/components/TopBar/BeaconMetric.tsx index 9a0c4849..dedf9608 100644 --- a/src/components/TopBar/BeaconMetric.tsx +++ b/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} diff --git a/src/components/TopBar/TopBar.tsx b/src/components/TopBar/TopBar.tsx index ae4e97f4..80cef244 100644 --- a/src/components/TopBar/TopBar.tsx +++ b/src/components/TopBar/TopBar.tsx @@ -20,7 +20,7 @@ const TopBar = () => { const openSideBar = () => toggleSideBar(true) return ( -
+
= ({ return (
-
+
{t('validatorGraffiti')}
-
+
= ({ 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], ) diff --git a/src/components/ValidatorModal/ValidatorActions.tsx b/src/components/ValidatorModal/ValidatorActions.tsx index 21da3ad1..982a133f 100644 --- a/src/components/ValidatorModal/ValidatorActions.tsx +++ b/src/components/ValidatorModal/ValidatorActions.tsx @@ -43,7 +43,7 @@ const ValidatorActions: FC = ({ ) : (
- + {t('blsExecution.warning.text')} diff --git a/src/components/ValidatorModal/ValidatorModal.tsx b/src/components/ValidatorModal/ValidatorModal.tsx index d9f10e47..df02e1c6 100644 --- a/src/components/ValidatorModal/ValidatorModal.tsx +++ b/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({ }) 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.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 ( {validator ? ( - + {renderContent()} diff --git a/src/views/DashBoard/Content/Settings.tsx b/src/views/DashBoard/Content/Settings.tsx index a22dbf92..2ddf4899 100644 --- a/src/views/DashBoard/Content/Settings.tsx +++ b/src/views/DashBoard/Content/Settings.tsx @@ -65,7 +65,7 @@ const Settings = () => {
-
+
{t('sidebar.settings')} @@ -76,8 +76,8 @@ const Settings = () => {
-
-
+
+
{ {t('settings.currentVersion')}
-
+
{
-
+