Merge pull request #8 from HORNET-Storage/fix/various-visual-bugs

style: tables and sidebar
HORNET-Storage · Jul 15, 2024 · 9926c32 · 9926c32
2 parents 78fd733 + a8bcbf6
commit 9926c32
Show file tree

Hide file tree

Showing 18 changed files with 116 additions and 41 deletions.
diff --git 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
@@ -5,16 +5,19 @@ interface OverlayProps {
 }
 
 export const Overlay = styled.div<OverlayProps>`
-  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
@@ -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<Splide, PropsWithChildren<BaseCarouselP
       infinite = true,
       type = 'loop',
       swipeSpeed = 0.8,
+      autoSpeed = 0.6,
       ...props
     },
     ref,
@@ -43,7 +45,7 @@ export const SplideCarousel = forwardRef<Splide, PropsWithChildren<BaseCarouselP
       drag: 'free',
       type: type,
       autoScroll: {
-        speed: swipeSpeed,
+        speed: autoSpeed,
       },
       ...props,
     };

diff --git a/src/components/header/Header.styles.ts b/src/components/header/Header.styles.ts
@@ -44,7 +44,7 @@ export const DropdownCollapse = styled(BaseCollapse)`
 `;
 
 export const BurgerCol = styled(BaseCol)`
-  z-index: 999;
+  z-index: 105;
   display: flex;
 `;
 
@@ -57,6 +57,7 @@ export const MobileBurger = styled(BurgerIcon)`
   ${(props) =>
     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
@@ -26,25 +26,25 @@ const handleTouchStart = (event: React.TouchEvent) => {
 
 export const MobileHeader: React.FC<MobileHeaderProps> = ({ toggleSider, isSiderOpened }) => {
   return (
-    <BaseRow style={{ width: '100%' }} onTouchStart={handleTouchStart} justify="space-between" align="middle">
-      <BaseCol>
-        <ProfileDropdown />
-      </BaseCol>
+    <BaseRow style={{ width: '100%' }} justify="space-between" align="middle">
+      <BaseCol>{!isSiderOpened && <ProfileDropdown />}</BaseCol>
 
       <BaseCol>
-        <BaseRow align="middle">
-          <BaseCol className="mobile-header-button">
-            <NotificationsDropdown />
-          </BaseCol>
-
-          <BaseCol className="mobile-header-button">
-            <HeaderSearch />
-          </BaseCol>
-
-          <BaseCol className="mobile-header-button">
-            <SettingsDropdown />
-          </BaseCol>
-        </BaseRow>
+        {!isSiderOpened && (
+          <BaseRow align="middle">
+            <BaseCol className="mobile-header-button">
+              <NotificationsDropdown />
+            </BaseCol>
+
+            <BaseCol className="mobile-header-button">
+              <HeaderSearch />
+            </BaseCol>
+
+            <BaseCol className="mobile-header-button">
+              <SettingsDropdown />
+            </BaseCol>
+          </BaseRow>
+        )}
       </BaseCol>
 
       <S.BurgerCol className="mobile-header-button">

diff --git 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)<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
@@ -4,8 +4,13 @@ import * as S from './MainHeader.styles';
 
 interface MainHeaderProps extends WithChildrenProps {
   isTwoColumnsLayout: boolean;
+  isSiderOpened: boolean;
 }
 
-export const MainHeader: React.FC<MainHeaderProps> = ({ isTwoColumnsLayout, children }) => {
-  return <S.Header $isTwoColumnsLayoutHeader={isTwoColumnsLayout}>{children}</S.Header>;
+export const MainHeader: React.FC<MainHeaderProps> = ({ isTwoColumnsLayout, isSiderOpened, children }) => {
+  return (
+    <S.Header $isSiderOpened={isSiderOpened} $isTwoColumnsLayoutHeader={isTwoColumnsLayout}>
+      {children}
+    </S.Header>
+  );
 };
diff --git 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
@@ -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 (
     <S.LayoutMaster>
-      <MainSider isCollapsed={siderCollapsed} setCollapsed={setSiderCollapsed} />
       <S.LayoutMain>
-        <MainHeader isTwoColumnsLayout={isTwoColumnsLayout}>
+        <MainHeader isSiderOpened={!siderCollapsed} isTwoColumnsLayout={isTwoColumnsLayout}>
           <Header toggleSider={toggleSider} isSiderOpened={!siderCollapsed} isTwoColumnsLayout={isTwoColumnsLayout} />
         </MainHeader>
         <MainContent
@@ -97,6 +107,7 @@ const MainLayout: React.FC = () => {
           </div>
         )}
       </S.LayoutMain>
+      <MainSider isCollapsed={siderCollapsed} setCollapsed={setSiderCollapsed} />
     </S.LayoutMaster>
   );
 };

diff --git 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
@@ -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<TrendingCreator[]>([]);
@@ -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
@@ -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
@@ -11,8 +11,9 @@ export const Tables: React.FC = () => {
     <>
       <S.TablesWrapper>
         <S.Card
+          className={isDesktop ? '' : 'table-mobile'}
           id="editable-table"
-          title={'Nostr Stats Table'}
+          title={'Storage Statistics - Nostr Kinds'}
           padding={isDesktop ? '1.25rem 1.25rem 1rem 1.25rem' : '1.25rem .5rem 1.25rem .5rem'}
         >
           <EditableTable />

diff --git 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) => (
         <BaseSpace>
           <BaseButton size={'small'} type="ghost" onClick={() => showModal(record.kindNumber)}>

diff --git 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
@@ -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
@@ -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<Settings>({
-    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,