styles: basic styles for application
This commit is contained in:
parent
aaa0fbad99
commit
70f9707273
|
@ -11,7 +11,7 @@ const Layout = styled.div`
|
|||
left: 200px;
|
||||
top: 0;
|
||||
height: 100vh;
|
||||
background: #ccc;
|
||||
background: ${props => props.theme.colors.secondary};
|
||||
`;
|
||||
|
||||
type Props = {
|
||||
|
|
|
@ -13,11 +13,17 @@ const Wrapper = styled.div`
|
|||
left: 0;
|
||||
top: 0;
|
||||
height: 100vh;
|
||||
background-color: ${props => props.theme.colors.secondary};
|
||||
font-family: ${props => props.theme.fontFamily}
|
||||
background-color: ${props => props.theme.colors.sidebarBg};
|
||||
padding: 20px;
|
||||
`;
|
||||
|
||||
const StyledLink = styled(Link)`
|
||||
color: ${props => props.theme.colors.primary};
|
||||
color: ${props => props.theme.colors.sidebarItem};
|
||||
font-size: 16px;
|
||||
text-decoration: none;
|
||||
font-weight: 700;
|
||||
padding: 5px 0;
|
||||
`;
|
||||
|
||||
type MenuItem = {
|
||||
|
|
18
app/theme.js
18
app/theme.js
|
@ -7,18 +7,26 @@ import { normalize } from 'polished'; // eslint-disable-line
|
|||
|
||||
import { DARK } from './constants/themes';
|
||||
|
||||
const darkOne = '#212124';
|
||||
const lightOne = '#ffffff';
|
||||
const brandOne = '#624cda';
|
||||
const brandTwo = '#a6ede2';
|
||||
|
||||
const appTheme = {
|
||||
mode: DARK,
|
||||
fontFamily: 'Open Sans',
|
||||
fontFamily: 'PT Sans',
|
||||
colors: {
|
||||
primary: theme('mode', {
|
||||
light: '#000',
|
||||
dark: '#fff',
|
||||
light: darkOne,
|
||||
dark: lightOne,
|
||||
}),
|
||||
secondary: theme('mode', {
|
||||
light: '#fff',
|
||||
dark: '#000',
|
||||
light: lightOne,
|
||||
dark: darkOne,
|
||||
}),
|
||||
sidebarBg: brandOne,
|
||||
sidebarItem: brandTwo,
|
||||
sidebarItemActive: lightOne,
|
||||
},
|
||||
size: {
|
||||
title: 18,
|
||||
|
|
Loading…
Reference in New Issue