Merge pull request #202 from us3r-network/F-dappHomeHeader-shixuewen

feat: dapp home header

packages/client/dashboard/src/components/dapp-home/Header.tsx

@@ -0,0 +1,65 @@
+import styled from 'styled-components'
+import { createImageFromInitials } from '../../utils/createImage'
+import { getRandomColor } from '../../utils/randomColor'
+import { useRef } from 'react'
+
+export default function Header({
+  icon,
+  name,
+}: {
+  icon?: string
+  name: string
+}) {
+  const imgColor = useRef(getRandomColor())
+  return (
+    <HeaderWrap>
+      <DappImg
+        src={
+          icon ||
+          createImageFromInitials(60, name.slice(0, 1), imgColor.current)
+        }
+      />
+      <DappName>
+        {name}, <Welcome>Welcome back!</Welcome>
+      </DappName>
+    </HeaderWrap>
+  )
+}
+
+const HeaderWrap = styled.div`
+  width: 100%;
+  height: 320px;
+  border-radius: 20px;
+  overflow: hidden;
+
+  background-image: url('/dapp-home/header-bg.png');
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 10px;
+  padding-left: 40px;
+  box-sizing: border-box;
+`
+const DappImg = styled.img`
+  width: 100px;
+  height: 100px;
+  border-radius: 20px;
+  overflow: hidden;
+`
+const DappName = styled.span`
+  color: #fff;
+  font-size: 48px;
+  font-style: italic;
+  font-weight: 700;
+  line-height: normal;
+`
+const Welcome = styled.span`
+  color: var(--ffffff, #fff);
+  font-size: 48px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+`

packages/client/dashboard/src/container/DappHome.tsx

@@ -9,6 +9,7 @@ import { Checkbox, ToggleButton } from 'react-aria-components'
 import CheckCircleIcon from '../components/Icons/CheckCircleIcon'
 import { useAppCtx } from '../context/AppCtx'
 import DisabledIcon from '../components/Icons/DisabledIcon'
+import Header from '../components/dapp-home/Header'
 
 export default function DappHome() {
   const { guideSteps } = useAppCtx()
@@ -52,7 +53,7 @@ export default function DappHome() {
 
   return (
     <DappHomeContainer>
-      <h1>{selectedDapp?.name}, welcome to S3 Console</h1>
+      <Header icon={selectedDapp?.icon} name={selectedDapp?.name || ''} />
       <StepAccordionItem
         stepNum={1}
         title={'Data model design'}
@@ -291,16 +292,6 @@ const DappHomeContainer = styled.div`
   flex-direction: column;
   gap: 40px;
 
-  > h1 {
-    font-style: italic;
-    font-weight: 700;
-    font-size: 40px;
-    line-height: 47px;
-    margin: 0;
-    color: #ffffff;
-    word-break: break-all;
-  }
-
   hr {
     width: 100%;
     height: 1px;