[incubator-devlake] branch main updated: refactor(config-ui): add new component logo (#3907)

[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 c82980f2e refactor(config-ui): add new component logo (#3907)
c82980f2e is described below

commit c82980f2e537f353c42d669e584cc0e5e5d88a10
Author: 青湛 <0x1304...@gmail.com>
AuthorDate: Mon Dec 12 14:37:31 2022 +0800

    refactor(config-ui): add new component logo (#3907)
---
 config-ui/src/components/index.ts                  |  1 +
 .../src/components/{index.ts => logo/index.tsx}    | 22 +++++++++++++------
 .../src/components/{index.ts => logo/styled.ts}    | 25 ++++++++++++++++------
 config-ui/src/layouts/base/base.tsx                |  9 +++-----
 config-ui/src/layouts/base/styled.ts               | 22 ++-----------------
 5 files changed, 39 insertions(+), 40 deletions(-)

diff --git a/config-ui/src/components/index.ts 
b/config-ui/src/components/index.ts
index f14615baf..77de69cc2 100644
--- a/config-ui/src/components/index.ts
+++ b/config-ui/src/components/index.ts
@@ -23,3 +23,4 @@ export * from './selector'
 export * from './dialog'
 export * from './table'
 export * from './toast2'
+export * from './logo'
diff --git a/config-ui/src/components/index.ts 
b/config-ui/src/components/logo/index.tsx
similarity index 71%
copy from config-ui/src/components/index.ts
copy to config-ui/src/components/logo/index.tsx
index f14615baf..90d797f8d 100644
--- a/config-ui/src/components/index.ts
+++ b/config-ui/src/components/logo/index.tsx
@@ -16,10 +16,18 @@
  *
  */
 
-export * from './loading'
-export * from './divider'
-export * from './page-header'
-export * from './selector'
-export * from './dialog'
-export * from './table'
-export * from './toast2'
+import React from 'react'
+
+import LogoImg from '@/images/devlake-logo.svg'
+import LogoTextImg from '@/images/devlake-textmark.svg'
+
+import * as S from './styled'
+
+export const Logo = () => {
+  return (
+    <S.Wrapper>
+      <img src={LogoImg} alt='' />
+      <img src={LogoTextImg} alt='' />
+    </S.Wrapper>
+  )
+}
diff --git a/config-ui/src/components/index.ts 
b/config-ui/src/components/logo/styled.ts
similarity index 73%
copy from config-ui/src/components/index.ts
copy to config-ui/src/components/logo/styled.ts
index f14615baf..1fca889d2 100644
--- a/config-ui/src/components/index.ts
+++ b/config-ui/src/components/logo/styled.ts
@@ -16,10 +16,21 @@
  *
  */
 
-export * from './loading'
-export * from './divider'
-export * from './page-header'
-export * from './selector'
-export * from './dialog'
-export * from './table'
-export * from './toast2'
+import styled from 'styled-components'
+
+export const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  img:first-child {
+    width: 48px;
+    height: 48px;
+  }
+
+  img:last-child {
+    margin-top: 10px;
+    width: 100px;
+    height: 13px;
+  }
+`
diff --git a/config-ui/src/layouts/base/base.tsx 
b/config-ui/src/layouts/base/base.tsx
index 928f483cc..2e7aeb7b8 100644
--- a/config-ui/src/layouts/base/base.tsx
+++ b/config-ui/src/layouts/base/base.tsx
@@ -30,8 +30,8 @@ import {
 } from '@blueprintjs/core'
 import { Popover2 } from '@blueprintjs/popover2'
 
-import Logo from '@/images/devlake-logo.svg'
-import LogoText from '@/images/devlake-textmark.svg'
+import { Logo } from '@/components'
+
 import SlackIcon from '@/images/slack-mark-monochrome-black.svg'
 import SlackLogo from '@/images/slack-rgb.svg'
 
@@ -58,10 +58,7 @@ export const BaseLayout = ({ children }: Props) => {
   return (
     <S.Container>
       <S.Sider>
-        <div className='logo'>
-          <img src={Logo} alt='' />
-          <img src={LogoText} alt='' />
-        </div>
+        <Logo />
         <Menu className='menu'>
           {menu.map((it) => (
             <MenuItem
diff --git a/config-ui/src/layouts/base/styled.ts 
b/config-ui/src/layouts/base/styled.ts
index bc1c367b7..8b0a3e954 100644
--- a/config-ui/src/layouts/base/styled.ts
+++ b/config-ui/src/layouts/base/styled.ts
@@ -29,30 +29,12 @@ export const Container = styled.div`
 export const Sider = styled.div`
   flex: 0 0 200px;
   position: relative;
+  padding: 20px 0;
   width: 200px;
   background-color: #292b3f;
 
-  .logo {
-    display: flex;
-    text-align: center;
-    flex-direction: column;
-    align-items: center;
-    margin: 20px 0;
-
-    img:first-child {
-      width: 48px;
-      height: 48px;
-    }
-
-    img:last-child {
-      margin-top: 10px;
-      width: 100px;
-      height: 13px;
-    }
-  }
-
   .menu {
-    margin: 0 4px;
+    margin: 20px 4px 0;
     color: #fff;
     background-color: transparent;