From 72c096daca14a97860c45679b02148f7c1885a47 Mon Sep 17 00:00:00 2001 From: muerwre Date: Thu, 1 Aug 2019 03:51:31 +0700 Subject: [PATCH] some header fixes --- src/components/main/Header/index.tsx | 21 ++++++++------ src/components/main/Header/style.scss | 33 +++++++++++++--------- src/components/main/Logo/index.tsx | 4 +-- src/components/main/Logo/style.scss | 7 +++-- src/components/node/Comment/index.tsx | 1 + src/containers/main/MainLayout/index.tsx | 5 ++-- src/containers/main/MainLayout/styles.scss | 15 ++++++---- src/styles/colors.scss | 4 --- src/styles/global.scss | 1 + 9 files changed, 53 insertions(+), 38 deletions(-) diff --git a/src/components/main/Header/index.tsx b/src/components/main/Header/index.tsx index 439c8a97..7effdcde 100644 --- a/src/components/main/Header/index.tsx +++ b/src/components/main/Header/index.tsx @@ -3,7 +3,9 @@ import { Logo } from "~/components/main/Logo"; import { connect } from 'react-redux'; import { IUserProfile, IUserState } from "~/redux/user/reducer"; -const style = require('./style.scss'); +import * as style from './style.scss'; +import {Filler} from "~/components/containers/Filler"; +import {Group} from "~/components/containers/Group"; interface IHeaderProps { username?: IUserProfile['username'], @@ -14,20 +16,21 @@ export const Component: React.FunctionComponent = ({ username, is_
-
- { - is_user && username && -
-
- {username} -
- } + + +
depth
boris
flow
+ + + +
username
+
+
); diff --git a/src/components/main/Header/style.scss b/src/components/main/Header/style.scss index 99993863..333f375a 100644 --- a/src/components/main/Header/style.scss +++ b/src/components/main/Header/style.scss @@ -3,8 +3,7 @@ align-items: center; justify-content: flex-end; font-weight: 500; - //padding: $gap 0; - height: 100px; + height: 96px; } @@ -15,21 +14,30 @@ .plugs { display: flex; user-select: none; + font: $font_16_medium; + text-transform: uppercase; > div { - //margin: 8px; display: flex; align-items: center; position: relative; padding: $gap; + cursor: pointer; + transition: color 0.25s; + + &:hover { + color: $red; + } &::after { content: ' '; margin-left: $spc; background: white; - width: 2px; + width: 4px; height: $gap; display: block; + opacity: 0.2; + border-radius: 4px; } &:first-child { @@ -52,19 +60,16 @@ } .user_button { - padding: 0 $gap; - display: flex; align-items: center; - background: white; - color: $main_bg_color; - height: 20px; border-radius: $input_radius; - font-size: $text_small; + font: $font_16_medium; + text-transform: uppercase; + flex: 0 !important; } .user_avatar { - //width: 16px; - //height: 16px; - //background: transparentize(white, 0.5); - //margin-right: $gap; + width: 20px; + height: 20px; + background: white; + border-radius: $radius; } diff --git a/src/components/main/Logo/index.tsx b/src/components/main/Logo/index.tsx index f1397106..992edd09 100644 --- a/src/components/main/Logo/index.tsx +++ b/src/components/main/Logo/index.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; -const style = require('./style.scss'); +import * as styles from './style.scss'; export const Logo = () => ( -
+
VAULT
); diff --git a/src/components/main/Logo/style.scss b/src/components/main/Logo/style.scss index 58cb6cc4..d944b988 100644 --- a/src/components/main/Logo/style.scss +++ b/src/components/main/Logo/style.scss @@ -1,6 +1,9 @@ .logo { - font-size: $text_sign; - font-weight: 800; + // font-family: Raleway; + //font-size: $text_sign; + //font-weight: 800; + font: $font_24_bold; + //font-family: Raleway; display: flex; user-select: none; } diff --git a/src/components/node/Comment/index.tsx b/src/components/node/Comment/index.tsx index 46a9dbf2..3a36a3d9 100644 --- a/src/components/node/Comment/index.tsx +++ b/src/components/node/Comment/index.tsx @@ -17,6 +17,7 @@ const Comment: FC = ({ }) => (
diff --git a/src/containers/main/MainLayout/index.tsx b/src/containers/main/MainLayout/index.tsx index 23ff5537..35e695ef 100644 --- a/src/containers/main/MainLayout/index.tsx +++ b/src/containers/main/MainLayout/index.tsx @@ -1,16 +1,17 @@ import * as React from 'react'; import { SidePane } from "~/components/main/SidePane"; import * as styles from './styles.scss'; +import { Header } from "~/components/main/Header"; export const MainLayout = ({ children }) => { return (
+
+
{children}
- -
); }; diff --git a/src/containers/main/MainLayout/styles.scss b/src/containers/main/MainLayout/styles.scss index a8642bbd..d081a6bc 100644 --- a/src/containers/main/MainLayout/styles.scss +++ b/src/containers/main/MainLayout/styles.scss @@ -1,14 +1,19 @@ .wrapper { width: 100%; - padding: $gap $gap $gap 74px; + // padding: $gap $gap $gap 74px; + padding: 0 $gap; display: flex; - align-items: flex-start; - justify-content: center; - flex-direction: row; + //align-items: flex-start; + //justify-content: center; + flex-direction: column; box-sizing: border-box; + align-items: center; + justify-content: flex-start; } .content { - flex: 0 1 $content_width; + // flex: 0 1 $content_width; position: relative; + width: 100%; + max-width: $content_width; } diff --git a/src/styles/colors.scss b/src/styles/colors.scss index 6616668f..6deb9ad5 100644 --- a/src/styles/colors.scss +++ b/src/styles/colors.scss @@ -12,11 +12,7 @@ $blue_gradient: linear-gradient(170deg, $green, $dark_blue); $green_gradient: linear-gradient(170deg, $olive -20%, $grass 120%); $purple_gradient: linear-gradient(170deg, $red, $dark_blue); $cyan_gradient: linear-gradient(260deg, #3c75ff -50%, #7b2653 150%); -//$color_yellow: complement($color_red); -//$color_yellow: yellow; -//$main_bg_color: #161616; -//main_bg_color: #111214; $main_bg_color: #2b2c34; $main_text_color: white; diff --git a/src/styles/global.scss b/src/styles/global.scss index 7b7077b7..22c9c6b2 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -56,6 +56,7 @@ body { } :global(.default_container) { + width: 100%; max-width: $content_width; margin: auto; }