diff --git a/src/components/charts/BarAnimationDelayChart/BarAnimationDelayChart.tsx b/src/components/charts/BarAnimationDelayChart/BarAnimationDelayChart.tsx index 7cb53fc..35ad4e2 100644 --- a/src/components/charts/BarAnimationDelayChart/BarAnimationDelayChart.tsx +++ b/src/components/charts/BarAnimationDelayChart/BarAnimationDelayChart.tsx @@ -5,6 +5,7 @@ import { BaseChart } from '@app/components/common/charts/BaseChart'; import { useAppSelector } from '@app/hooks/reduxHooks'; import { themeObject } from '@app/styles/themes/themeVariables'; import useBarChartData from '@app/hooks/useBarChartData'; +import { useResponsive } from '@app/hooks/useResponsive'; // Helper function to get the last six months from the current date const getLastSixMonths = () => { @@ -39,6 +40,7 @@ const getLastSixMonths = () => { export const BarAnimationDelayChart: React.FC = () => { const { t } = useTranslation(); const theme = useAppSelector((state) => state.theme.theme); + const { isDesktop } = useResponsive(); const { data, isLoading } = useBarChartData(); @@ -126,8 +128,9 @@ export const BarAnimationDelayChart: React.FC = () => { type: 'bar', data: data1, color: themeObject[theme].chartColor2, + legendHoverLink: isDesktop ? true : false, emphasis: { - focus: 'series', + disable: true, }, barGap: '-10%', // Slightly overlap bars barCategoryGap: '30%', @@ -139,8 +142,9 @@ export const BarAnimationDelayChart: React.FC = () => { data: data2, color: themeObject[theme].chartColor3, emphasis: { - focus: 'series', + disable: true, }, + legendHoverLink: isDesktop ? true : false, barGap: '-10%', // Slightly overlap bars barCategoryGap: '30%', animationDelay: (idx: number) => idx * 10 + 100, diff --git a/src/components/common/Overlay/Overlay.tsx b/src/components/common/Overlay/Overlay.tsx index 610d88c..5f89a21 100644 --- a/src/components/common/Overlay/Overlay.tsx +++ b/src/components/common/Overlay/Overlay.tsx @@ -5,16 +5,19 @@ interface OverlayProps { } export const Overlay = styled.div` - position: absolute; + position: fixed; z-index: 1; - height: 0; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + pointer-events: none; // Ensure it does not interfere with other elements when not visible ${(props) => props.show && css` - z-index: 2; + z-index: 101; backdrop-filter: blur(6px); - width: 100vw; - height: 100vh; + pointer-events: auto; // Enable interaction when visible `} `; diff --git a/src/components/common/SplideCarousel/SplideCarousel.tsx b/src/components/common/SplideCarousel/SplideCarousel.tsx index a6e323c..9442fe0 100644 --- a/src/components/common/SplideCarousel/SplideCarousel.tsx +++ b/src/components/common/SplideCarousel/SplideCarousel.tsx @@ -8,6 +8,7 @@ interface BaseCarouselProps extends SplideProps { slidesToShow?: number; arrows?: boolean; dots?: boolean; + autoSpeed: number; infinite?: boolean; swipeSpeed?: number; type?: 'loop' | 'fade'; @@ -28,6 +29,7 @@ export const SplideCarousel = forwardRef props.isCross && css` + z-index: 105; color: var(--text-secondary-color); `}; `; diff --git a/src/components/header/layouts/MobileHeader.tsx b/src/components/header/layouts/MobileHeader.tsx index c197ad5..4f3ce45 100644 --- a/src/components/header/layouts/MobileHeader.tsx +++ b/src/components/header/layouts/MobileHeader.tsx @@ -26,25 +26,25 @@ const handleTouchStart = (event: React.TouchEvent) => { export const MobileHeader: React.FC = ({ toggleSider, isSiderOpened }) => { return ( - - - - + + {!isSiderOpened && } - - - - - - - - - - - - - + {!isSiderOpened && ( + + + + + + + + + + + + + + )} diff --git a/src/components/layouts/main/MainHeader/MainHeader.styles.ts b/src/components/layouts/main/MainHeader/MainHeader.styles.ts index b1d88d3..0e88a91 100644 --- a/src/components/layouts/main/MainHeader/MainHeader.styles.ts +++ b/src/components/layouts/main/MainHeader/MainHeader.styles.ts @@ -5,10 +5,21 @@ import styled, { css } from 'styled-components'; interface Header { $isTwoColumnsLayoutHeader: boolean; + $isSiderOpened: boolean; } export const Header = styled(BaseLayout.Header)
` line-height: 1.5; + z-index: 100; + ${(props) => + props.$isSiderOpened && + css` + background-color: rgba(0, 0, 0, 0) !important; + z-index: 105; + `} + position: sticky; + position: -webkit-sticky; + top: 0; @media only screen and ${media.md} { display: block; diff --git a/src/components/layouts/main/MainHeader/MainHeader.tsx b/src/components/layouts/main/MainHeader/MainHeader.tsx index 611cec4..dce4863 100644 --- a/src/components/layouts/main/MainHeader/MainHeader.tsx +++ b/src/components/layouts/main/MainHeader/MainHeader.tsx @@ -4,8 +4,13 @@ import * as S from './MainHeader.styles'; interface MainHeaderProps extends WithChildrenProps { isTwoColumnsLayout: boolean; + isSiderOpened: boolean; } -export const MainHeader: React.FC = ({ isTwoColumnsLayout, children }) => { - return {children}; +export const MainHeader: React.FC = ({ isTwoColumnsLayout, isSiderOpened, children }) => { + return ( + + {children} + + ); }; diff --git a/src/components/layouts/main/MainLayout/MainLayout.styles.ts b/src/components/layouts/main/MainLayout/MainLayout.styles.ts index 62ff6bb..191486d 100644 --- a/src/components/layouts/main/MainLayout/MainLayout.styles.ts +++ b/src/components/layouts/main/MainLayout/MainLayout.styles.ts @@ -7,6 +7,7 @@ export const LayoutMaster = styled(BaseLayout)` `; export const LayoutMain = styled(BaseLayout)` + height: fit-content; @media only screen and ${media.md} { margin-left: 80px; } diff --git a/src/components/layouts/main/MainLayout/MainLayout.tsx b/src/components/layouts/main/MainLayout/MainLayout.tsx index dc01b3a..040e304 100644 --- a/src/components/layouts/main/MainLayout/MainLayout.tsx +++ b/src/components/layouts/main/MainLayout/MainLayout.tsx @@ -51,12 +51,22 @@ const MainLayout: React.FC = () => { const duration_in_minutes = 60; // 60 minutes useIdleTimer(duration_in_minutes * 60 * 1000, handleIdle); + useEffect(() => { + if (!siderCollapsed) { + document.body.classList.add('no-scroll'); + } else { + document.body.classList.remove('no-scroll'); + } + + return () => { + document.body.classList.remove('no-scroll'); + }; + }, [siderCollapsed]); return ( - - +
{ )} + ); }; diff --git a/src/components/layouts/main/sider/MainSider/MainSider.styles.ts b/src/components/layouts/main/sider/MainSider/MainSider.styles.ts index 0040bf1..063ab5a 100644 --- a/src/components/layouts/main/sider/MainSider/MainSider.styles.ts +++ b/src/components/layouts/main/sider/MainSider/MainSider.styles.ts @@ -9,7 +9,7 @@ export const Sider = styled(BaseLayout.Sider)` position: fixed; overflow: visible; right: 0; - z-index: 5; + z-index: 102; min-height: 100vh; max-height: 100vh; @@ -27,7 +27,6 @@ export const Sider = styled(BaseLayout.Sider)` export const CollapseButton = styled(BaseButton)<{ $isCollapsed: boolean }>` background: var(--collapse-background-color); - border: 1px solid var(--border-color); transition: all 0.2s ease; position: absolute; diff --git a/src/components/nft-dashboard/trending-creators/TrendingCreators.tsx b/src/components/nft-dashboard/trending-creators/TrendingCreators.tsx index 3d95512..6a5a0a3 100644 --- a/src/components/nft-dashboard/trending-creators/TrendingCreators.tsx +++ b/src/components/nft-dashboard/trending-creators/TrendingCreators.tsx @@ -17,12 +17,12 @@ import { useTranslation } from 'react-i18next'; import { NFTCardHeader } from '@app/components/nft-dashboard/common/NFTCardHeader/NFTCardHeader'; import { ViewAll } from '@app/components/nft-dashboard/common/ViewAll/ViewAll'; import { TrendingCreatorsStory } from '@app/components/nft-dashboard/trending-creators/story/TrendingCreatorsStory'; -import { useResponsive } from '@app/hooks/useResponsive'; import { getTrendingCreators, TrendingCreator } from '@app/api/trendingCreators'; import * as S from './TrendingCreators.styles'; import { BaseRow } from '@app/components/common/BaseRow/BaseRow'; import { BaseCol } from '@app/components/common/BaseCol/BaseCol'; import { SplideCarousel } from '@app/components/common/SplideCarousel/SplideCarousel'; +import { useResponsive } from '@app/hooks/useResponsive'; export const TrendingCreators: React.FC = () => { const [stories, setStories] = useState([]); @@ -44,7 +44,7 @@ export const TrendingCreators: React.FC = () => { profile11, ], }; - const { isTablet: isTabletOrHigher } = useResponsive(); + const { isTablet: isTabletOrHigher, isDesktop } = useResponsive(); const { t } = useTranslation(); const goPrev = () => { @@ -72,6 +72,7 @@ export const TrendingCreators: React.FC = () => { drag="free" gap=".2rem" snap="false" + autoSpeed={isDesktop ? 0.7 : 0.8} flickPower="500" breakpoints={{ 8000: { diff --git a/src/components/tables/Tables/Tables.styles.ts b/src/components/tables/Tables/Tables.styles.ts index 989f903..03e61b1 100644 --- a/src/components/tables/Tables/Tables.styles.ts +++ b/src/components/tables/Tables/Tables.styles.ts @@ -1,10 +1,37 @@ import styled from 'styled-components'; import { BaseCard as CommonCard } from '@app/components/common/BaseCard/BaseCard'; - +const borderRad = '.5rem'; export const TablesWrapper = styled.div` margin-top: 1.875rem; `; export const Card = styled(CommonCard)` margin-bottom: 2rem; + .table-mobile > div.ant-card-head-title { + padding-bottom: 0.3rem !important; + } + .ant-card-head-title { + padding-bottom: 0rem !important; + } + .ant-table-tbody > tr > td { + padding: 0.8rem; + } + + div.ant-table.ant-table-bordered, + div.ant-table-container, + .ant-table.ant-table-bordered > .ant-table-container > .ant-table-content > table { + border-radius: ${borderRad}; + } + .ant-table-container table > thead > tr:first-child th:first-child { + border-top-left-radius: ${borderRad}; + } + .ant-table-container table > thead > tr:first-child th:last-child { + border-top-right-radius: ${borderRad}; + } + .ant-table-container table > tbody > tr:last-child td:last-child { + border-bottom-right-radius: ${borderRad}; + } + .ant-table-container table > tbody > tr:last-child td:first-child { + border-bottom-left-radius: ${borderRad}; + } `; diff --git a/src/components/tables/Tables/Tables.tsx b/src/components/tables/Tables/Tables.tsx index 382ff0b..d25e2a3 100644 --- a/src/components/tables/Tables/Tables.tsx +++ b/src/components/tables/Tables/Tables.tsx @@ -11,8 +11,9 @@ export const Tables: React.FC = () => { <> diff --git a/src/components/tables/editableTable/EditableTable.tsx b/src/components/tables/editableTable/EditableTable.tsx index f00d903..487e2c7 100644 --- a/src/components/tables/editableTable/EditableTable.tsx +++ b/src/components/tables/editableTable/EditableTable.tsx @@ -116,7 +116,7 @@ const EditableTable: React.FC = () => { { title: t('tables.actions'), dataIndex: 'actions', - width: '15%', + width: '10%', render: (_: string, record: any) => ( showModal(record.kindNumber)}> diff --git a/src/hooks/useRelaySettings.ts b/src/hooks/useRelaySettings.ts index 7aaaa5e..fb2215b 100644 --- a/src/hooks/useRelaySettings.ts +++ b/src/hooks/useRelaySettings.ts @@ -22,7 +22,7 @@ interface RelaySettings { } const getInitialSettings = (): RelaySettings => { - const savedSettings = localStorage.getItem('relaySettings'); + const savedSettings = localStorage.getItem('settingsCache'); return savedSettings ? JSON.parse(savedSettings) : { @@ -75,6 +75,7 @@ const useRelaySettings = () => { ? data.relay_settings.chunked : [data.relay_settings.chunked], }); + localStorage.setItem('settingsCache', JSON.stringify(data.relay_settings)); localStorage.setItem('relaySettings', JSON.stringify(data.relay_settings)); } catch (error) { console.error('Error fetching settings:', error); @@ -100,6 +101,7 @@ const useRelaySettings = () => { if (!response.ok) { throw new Error(`Network response was not ok (status: ${response.status})`); } + localStorage.setItem('settingsCache', JSON.stringify(relaySettings)); console.log('Settings saved successfully!'); } catch (error) { console.error('Error saving settings:', error); diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json index b03d2ca..b25f6fe 100644 --- a/src/locales/en/translation.json +++ b/src/locales/en/translation.json @@ -225,7 +225,7 @@ "copy": "Copy", "country": "Country", "customizeRelaySettings": "Storage Settings", - "nft-dashboard": "Dashboard", + "nft-dashboard": "Relay Dashboard", "medical-dashboard": "Medical Dashboard", "dataDisplay": "Data display", "dataTables": "Storage Stats", diff --git a/src/pages/RelaySettingsPage.tsx b/src/pages/RelaySettingsPage.tsx index b1b3ce4..9ccbf17 100644 --- a/src/pages/RelaySettingsPage.tsx +++ b/src/pages/RelaySettingsPage.tsx @@ -17,7 +17,6 @@ import { useResponsive } from '@app/hooks/useResponsive'; import useRelaySettings from '@app/hooks/useRelaySettings'; import * as S from '@app/pages/uiComponentsPages/UIComponentsPage.styles'; import { themeObject } from '@app/styles/themes/themeVariables'; - const { Panel } = Collapse; const StyledPanel = styled(Panel)``; const { Option } = Select; @@ -99,7 +98,7 @@ const RelaySettingsPage: React.FC = () => { ]; const [settings, setSettings] = useState({ - mode: 'unlimited', + mode: JSON.parse(localStorage.getItem('relaySettings') || '{}').mode || relaymode || 'unlimited', protocol: ['WebSocket'], chunked: ['unchunked'], chunksize: '2', @@ -415,6 +414,11 @@ const RelaySettingsPage: React.FC = () => { const [newKind, setNewKind] = useState(''); + useEffect(() => { + return () => { + localStorage.setItem('relaySettings', localStorage.getItem('settingsCache') || '{}'); + }; + }, []); const removeDynamicKind = (kind: string) => { setSettings((prevSettings) => ({ ...prevSettings, diff --git a/src/styles/GlobalStyle.ts b/src/styles/GlobalStyle.ts index cd36054..e850be5 100644 --- a/src/styles/GlobalStyle.ts +++ b/src/styles/GlobalStyle.ts @@ -37,6 +37,9 @@ export default createGlobalStyle` display: none; } } + body.no-scroll { + overflow: hidden; +} .range-picker { & .ant-picker-panels {