MrKBear/living-together
2
2
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add header bar component #6

Merged
MrKBear merged 2 commits from dev-mrkbear into master 2022-02-25 16:31:21 +08:00
Conversation 0 Commits 2 Files Changed 12 +9 -5
3 changed files with 9 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 6bc498f14d - Show all commits

3
source/Component/HeaderBar/HeaderBar.scss
View File

@ -1,3 +1,6 @@
div.header-bar {
padding: 0 20px;
box-sizing: border-box;
display: flex;
align-items: center;
}

3
source/Component/HeaderBar/HeaderBar.tsx
View File

@ -1,6 +1,7 @@
import { Component, ReactNode } from "react";
import { useStatus, IMixinStatusProps } from "@Context/Status";
import { Theme, BackgroundLevel, FontLevel } from "@Component/Theme/Theme";
import "./HeaderBar.scss";
interface IHeaderBarProps {
height: number;
@ -31,7 +32,7 @@ class HeaderBar extends Component<IHeaderBarProps & IMixinStatusProps> {
fontLevel={FontLevel.Level3}
style={{ height: this.props.height }}
>
Living Together | Web
<div>Living Together | Web</div>
</Theme>
}
}

8
source/Component/Theme/Theme.scss
View File

@ -18,10 +18,10 @@ $lt-bg-color-lvl4-dark: $ms-color-gray180;
$lt-bg-color-lvl5-dark: $ms-color-gray200;
// 文字颜色
$lt-font-color-normal-dark: $ms-color-gray110;
$lt-font-color-lvl3-dark: $ms-color-gray100;
$lt-font-color-lvl2-dark: $ms-color-gray100;
$lt-font-color-lvl1-dark: $ms-color-gray90;
$lt-font-color-normal-dark: $ms-color-gray90;
$lt-font-color-lvl3-dark: $ms-color-gray80;
$lt-font-color-lvl2-dark: $ms-color-gray80;
$lt-font-color-lvl1-dark: $ms-color-gray70;
// 背景颜色
$lt-bg-color-lvl1-light: $ms-color-gray10;