Merge pull request #616 from subquery/feat/new-studio

feat: new studio

Author: HuberTRoy

package.json

@@ -20,7 +20,7 @@
     "@rainbow-me/rainbowkit": "^1.2.0",
     "@sentry/react": "^7.57.0",
     "@subql/apollo-links": "^1.2.3",
-    "@subql/components": "1.0.3-20",
+    "@subql/components": "1.0.3-21",
     "@subql/contract-sdk": "0.16.2",
     "@subql/network-clients": "^0.3.17",
     "@subql/network-config": "0.3.17-2",

src/App.tsx

@@ -1,11 +1,9 @@
 // Copyright 2020-2022 SubQuery Pte Ltd authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import React, { PropsWithChildren, useMemo } from 'react';
+import React, { PropsWithChildren } from 'react';
 import { BrowserRouter } from 'react-router-dom';
 import { AppInitProvider } from '@containers/AppInitialProvider';
-import { useStudioEnabled } from '@hooks';
-import { entryLinks, externalAppLinks, studioLink } from '@utils/links';
 
 import { RainbowProvider } from './config/rainbowConf';
 import { ChainStatus, Header } from './components';
@@ -40,15 +38,11 @@ const Providers: React.FC<PropsWithChildren> = ({ children }) => {
 };
 
 const RenderRouter: React.FC = () => {
-  const studioEnabled = useStudioEnabled();
-  const calEntryLinks = useMemo(() => (studioEnabled ? [...entryLinks, studioLink] : [...entryLinks]), [studioEnabled]);
-
   return (
     <BrowserRouter>
       <div className="Main">
         <div className="Header">
-          {/* TODO: replace with component from ui library */}
-          <Header appNavigation={calEntryLinks} dropdownLinks={{ label: 'Kepler', links: externalAppLinks }} />
+          <Header />
         </div>
 
         <div className="Content">

src/components/Header/Header.module.less

@@ -1,159 +1,9 @@
 .header {
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  box-shadow: inset 0px -1px 0px rgba(26, 32, 44, 0.06);
-  padding: 1rem 1.25rem;
-
-  .expandIcon {
-    display: none;
-    font-size: 40px;
-  }
-
-  &Inner {
-    width: 100%;
-  }
-
-  &Logo {
-    display: flex;
-  }
-
-  &Right {
-    display: flex;
-    width: 100%;
-    align-items: center;
-    transition: all 0.2s linear;
-
-  }
-
-  .leftHeader {
-    display: inline-flex;
-  }
-}
-
-.justifyBetween {
-  justify-content: space-between;
-}
-
-.flexCenter {
-  display: flex;
-  align-items: center;
-}
-
-.leftElement {
-  margin-left: 2rem;
-  position: relative;
-}
-
-.appDropdown {
-  margin: 1rem;
-}
-
-.menuOverlay {
-  padding: 1rem !important;
-}
-
-.dropMenu {
-  width: 300px !important;
-}
-
-.navLink {
-  text-decoration: none;
-  margin: 0 1vw;
-  display: flex;
-  color: var(--gray700);
-  width: fit-content;
-}
-
-.navLink:hover {
-  text-decoration: underline;
-  color: var(--sq-primary-blue);
-}
-
-.navLinkCurrent {
-  font-weight: 500;
-  color: var(--sq-info);
-}
-
-@media  screen and (max-width: 600px) {
-  .header {
-    flex-direction: column;
-    .expandIcon {
-      display: inline-block;
-    }
-
-    .middleHeader {
-      width: 100%;
-    }
-
-    &Logo {
-      width: 100%;
-    }
-
-    &Inner {
-      flex-direction: column;
-      width: 100vw;
-      padding: 0 20px;
-      .middleHeader {
-        flex-direction: column;
-      }
-
-      :global {
-          #leftHeader {
-            margin-left: 0;
-          }
-      }
-
-      .appDropdown {
-        width: 100%;
-        margin: 0;
-        padding: 14px 0;
-        border-bottom: 1px solid var(--sq-gray200);
-        :global {
-          .ant-space.ant-dropdown-trigger {
-            margin: 0 1vw;
-          }
-        }
-      }
-    }
-
-    &Right {
-      flex-direction: column;
-    }
-
-    &Item {
-      width: 100%;
-      padding: 14px 0;
-      border-top: 1px solid var(--sq-gray200);
-      border-bottom: 1px solid var(--sq-gray200);
-
-      & + .headerItem {
-        margin-top: -1px;
-      }
-    }
-
-    .hideOnMobile {
-      height: 0;
-      overflow: hidden;
-    }
-
-    .showExpand {
-      height: 570px;
-    }
-
-    .right {
-      width: 100%;
-      margin-bottom: 8px;
-      
-      &>a {
-        width: 100%;
-      }
-    }
-
-    .leftHeader {
-      border-top: 1px solid var(--sq-gray200);
-      padding: 14px 0;
-      width: 100%;
+  :global {
+    .subql-header {
+      padding: 0 24px;
+      display: flex;
+      align-items: center;
     }
   }
-}
+}