[incubator-devlake] branch main updated: refactor(config-ui): layout adjustment (#4844)

[likyh]

This is an automated email from the ASF dual-hosted git repository.

likyh pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/incubator-devlake.git


The following commit(s) were added to refs/heads/main by this push:
     new c31604e45 refactor(config-ui): layout adjustment (#4844)
c31604e45 is described below

commit c31604e45798903dfb65f577ae1155958f99093c
Author: 青湛 <0x1304...@gmail.com>
AuthorDate: Mon Apr 3 11:55:13 2023 +0800

    refactor(config-ui): layout adjustment (#4844)
---
 config-ui/src/layouts/base/base.tsx           | 25 +++++++++++++------------
 config-ui/src/layouts/base/styled.ts          | 27 ++++++++++++++++-----------
 config-ui/src/pages/connection/home/styled.ts |  4 +---
 3 files changed, 30 insertions(+), 26 deletions(-)

diff --git a/config-ui/src/layouts/base/base.tsx 
b/config-ui/src/layouts/base/base.tsx
index 528cd1cc3..8e6e06a45 100644
--- a/config-ui/src/layouts/base/base.tsx
+++ b/config-ui/src/layouts/base/base.tsx
@@ -20,17 +20,16 @@ import React from 'react';
 import { useLocation, useHistory } from 'react-router-dom';
 import { Menu, MenuItem, Tag, Navbar, Intent, Alignment } from 
'@blueprintjs/core';
 
-import { Logo } from '@/components';
+import { Logo, ExternalLink } from '@/components';
 import { useVersion } from '@/store';
 
+import DashboardIcon from '@/images/icons/dashborad.svg';
 import FileIcon from '@/images/icons/file.svg';
 import GitHubIcon from '@/images/icons/github.svg';
 import SlackIcon from '@/images/icons/slack.svg';
-import DashboardIcon from '@/images/icons/dashborad.svg';
 
 import { useMenu, MenuItemType } from './use-menu';
 import * as S from './styled';
-import { BorderContainer } from './styled';
 
 interface Props {
   children: React.ReactNode;
@@ -58,7 +57,7 @@ export const BaseLayout = ({ children }: Props) => {
   };
 
   return (
-    <S.Container>
+    <S.Wrapper>
       <S.Sider>
         <Logo />
         <Menu className="menu">
@@ -99,15 +98,15 @@ export const BaseLayout = ({ children }: Props) => {
           <div className="version">{version}</div>
         </div>
       </S.Sider>
-      <S.Inner>
+      <S.Main>
         <S.Header>
           <Navbar.Group align={Alignment.RIGHT}>
-            <BorderContainer>
-              <a href={getGrafanaUrl()} rel="noreferrer" target="_blank">
+            <S.DashboardIcon>
+              <ExternalLink link={getGrafanaUrl()}>
                 <img src={DashboardIcon} alt="dashboards" />
                 <span>Dashboards</span>
-              </a>
-            </BorderContainer>
+              </ExternalLink>
+            </S.DashboardIcon>
             <Navbar.Divider />
             <a 
href="https://devlake.apache.org/docs/UserManuals/ConfigUI/Tutorial/"; 
rel="noreferrer" target="_blank">
               <img src={FileIcon} alt="documents" />
@@ -134,8 +133,10 @@ export const BaseLayout = ({ children }: Props) => {
             </a>
           </Navbar.Group>
         </S.Header>
-        <S.Content>{children}</S.Content>
-      </S.Inner>
-    </S.Container>
+        <S.Inner>
+          <S.Content>{children}</S.Content>
+        </S.Inner>
+      </S.Main>
+    </S.Wrapper>
   );
 };
diff --git a/config-ui/src/layouts/base/styled.ts 
b/config-ui/src/layouts/base/styled.ts
index 3713d9999..e6bdc9d82 100644
--- a/config-ui/src/layouts/base/styled.ts
+++ b/config-ui/src/layouts/base/styled.ts
@@ -19,7 +19,7 @@
 import styled from 'styled-components';
 import { Navbar } from '@blueprintjs/core';
 
-export const Container = styled.div`
+export const Wrapper = styled.div`
   display: flex;
   height: 100vh;
   background-color: #f9f9fa;
@@ -82,12 +82,12 @@ export const Sider = styled.div`
   }
 `;
 
-export const Inner = styled.div`
+export const Main = styled.div`
   display: flex;
   flex-direction: column;
   flex: auto;
   height: 100vh;
-  overflow: auto;
+  overflow: hidden;
 `;
 
 export const Header = styled(Navbar)`
@@ -110,11 +110,16 @@ export const Header = styled(Navbar)`
   }
 `;
 
-export const Content = styled.div`
+export const Inner = styled.div`
   flex: auto;
-  margin: 24px auto;
-  max-width: 900px;
-  width: 100%;
+  overflow: auto;
+`;
+
+export const Content = styled.div`
+  margin: 0 auto;
+  padding: 0 24px;
+  max-width: 1200px;
+  min-width: 900px;
 `;
 
 export const SiderMenuItem = styled.div`
@@ -126,11 +131,11 @@ export const SiderMenuItem = styled.div`
   }
 `;
 
-export const BorderContainer = styled.div`
-  border: 1px solid #7497f7;
-  border-radius: 4px;
-  padding: 8px 12px;
+export const DashboardIcon = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
+  padding: 8px 12px;
+  border: 1px solid #7497f7;
+  border-radius: 4px;
 `;
diff --git a/config-ui/src/pages/connection/home/styled.ts 
b/config-ui/src/pages/connection/home/styled.ts
index a28976019..3f2bf26b2 100644
--- a/config-ui/src/pages/connection/home/styled.ts
+++ b/config-ui/src/pages/connection/home/styled.ts
@@ -34,9 +34,7 @@ export const Wrapper = styled.div`
     display: flex;
     flex-direction: column;
     align-items: center;
-    margin-right: 24px;
-    margin-bottom: 12px;
-    padding: 8px 0;
+    padding: 16px 0;
     width: 120px;
     border: 2px solid transparent;
     cursor: pointer;