diff --git a/app/.storybook/preview.js b/app/.storybook/preview.js new file mode 100644 index 00000000..23bea8da --- /dev/null +++ b/app/.storybook/preview.js @@ -0,0 +1,5 @@ +import React from 'react'; +import { addDecorator } from '@storybook/react'; +import { ThemeProvider } from 'components/theme'; + +addDecorator(storyFn => {storyFn()}); diff --git a/app/package.json b/app/package.json index c4bbb305..20d30557 100644 --- a/app/package.json +++ b/app/package.json @@ -22,6 +22,7 @@ "@emotion/styled": "10.0.27", "@improbable-eng/grpc-web": "0.12.0", "debug": "4.1.1", + "emotion-theming": "10.0.27", "i18next": "19.4.1", "i18next-browser-languagedetector": "4.0.2", "mobx": "5.15.4", diff --git a/app/public/index.html b/app/public/index.html index aa069f27..e2fb9430 100644 --- a/app/public/index.html +++ b/app/public/index.html @@ -5,39 +5,12 @@ - - - - React App + Lightning Dashboard
- diff --git a/app/src/App.scss b/app/src/App.scss index e1f881e2..d8617d53 100644 --- a/app/src/App.scss +++ b/app/src/App.scss @@ -1,18 +1,17 @@ @charset "utf-8"; -// @import '../node_modules/bootstrap/scss/bootstrap'; - +// required bootstrap styles @import '../node_modules/bootstrap/scss/functions'; @import '../node_modules/bootstrap/scss/variables'; @import '../node_modules/bootstrap/scss/mixins'; @import '../node_modules/bootstrap/scss/utilities'; + +// optional bootstrap styles @import '../node_modules/bootstrap/scss/reboot'; @import '../node_modules/bootstrap/scss/buttons'; @import '../node_modules/bootstrap/scss/tables'; @import '../node_modules/bootstrap/scss/nav'; -/* Open Sans */ - @font-face { font-family: 'OpenSans Light'; src: url('./assets/fonts/OpenSans-Light.ttf') format('truetype'); @@ -45,13 +44,8 @@ } html, -body { - min-height: 100vh; -} - +body, #root { min-height: 100vh; width: 100%; - color: #ffffff; - font-family: 'OpenSans Regular'; } diff --git a/app/src/App.tsx b/app/src/App.tsx index 14f00aac..2fe2bbb0 100644 --- a/app/src/App.tsx +++ b/app/src/App.tsx @@ -2,12 +2,15 @@ import React from 'react'; import './App.scss'; import { Layout } from 'components/layout'; import SamplePage from 'components/pages/SamplePage'; +import { ThemeProvider } from 'components/theme'; const App = () => { return ( - - - + + + + + ); }; diff --git a/app/src/components/layout/Layout.tsx b/app/src/components/layout/Layout.tsx index 218eeb89..c209e45a 100644 --- a/app/src/components/layout/Layout.tsx +++ b/app/src/components/layout/Layout.tsx @@ -1,11 +1,14 @@ import React from 'react'; -import styled from '@emotion/styled/macro'; +import { styled } from 'components/theme'; import Sidebar from './Sidebar'; const Styled = { Background: styled.div` min-height: 100vh; - background-color: #252f4a; + color: ${props => props.theme.colors.white}; + background-color: ${props => props.theme.colors.blue}; + font-family: ${props => props.theme.fonts.regular}; + font-size: ${props => props.theme.sizes.m}; `, Container: styled.div` min-height: 100vh; @@ -16,7 +19,7 @@ const Styled = { position: fixed; top: 0; height: 100vh; - background-color: #212133; + background-color: ${props => props.theme.colors.darkBlue}; width: 285px; padding: 17px; `, diff --git a/app/src/components/layout/Sidebar.tsx b/app/src/components/layout/Sidebar.tsx index 15ddcb08..f1897707 100644 --- a/app/src/components/layout/Sidebar.tsx +++ b/app/src/components/layout/Sidebar.tsx @@ -1,13 +1,13 @@ import React from 'react'; -import styled from '@emotion/styled/macro'; +import { styled } from 'components/theme'; const Title = styled.div` - font-size: 14px; - font-family: 'OpenSans SemiBold'; + font-size: ${props => props.theme.sizes.s}; + font-family: ${props => props.theme.fonts.semiBold}; letter-spacing: 0; line-height: 19px; padding: 8px 14px; - color: #848a99; // gray + color: ${props => props.theme.colors.gray}; `; const Nav = styled.ul` @@ -17,26 +17,30 @@ const Nav = styled.ul` `; const NavItem = styled.li` - font-size: 14px; - border-left: 3px solid transparent; + font-size: ${props => props.theme.sizes.s}; a { display: block; height: 50px; line-height: 50px; padding: 0 12px; - color: #f5f5f5; // white + border-left: 3px solid transparent; + color: ${props => props.theme.colors.whitish}; - &:active, &:hover { text-decoration: none; + border-left: 3px solid ${props => props.theme.colors.pink}; } } - &.active { - border-left: 3px solid #f5f5f5; // white - background-color: #252f4a; // dark blue + &.active a { + border-left: 3px solid ${props => props.theme.colors.whitish}; + background-color: ${props => props.theme.colors.blue}; margin-right: -17px; + + &:hover { + border-left: 3px solid ${props => props.theme.colors.pink}; + } } `; diff --git a/app/src/components/theme.tsx b/app/src/components/theme.tsx new file mode 100644 index 00000000..ccfcf5ed --- /dev/null +++ b/app/src/components/theme.tsx @@ -0,0 +1,33 @@ +import React from 'react'; +import emotionStyled, { CreateStyled } from '@emotion/styled/macro'; +import { ThemeProvider as EmotionThemeProvider } from 'emotion-theming'; + +const theme = { + fonts: { + light: "'OpenSans Light'", + regular: "'OpenSans Regular'", + semiBold: "'OpenSans SemiBold'", + bold: "'OpenSans Bold'", + extraBold: "'OpenSans ExtraBold'", + }, + sizes: { + s: '14px', + m: '18px', + l: '22px', + xl: '27px', + }, + colors: { + blue: '#252f4a', + darkBlue: '#212133', + gray: '#848a99', + white: '#ffffff', + whitish: '#f5f5f5', + pink: '#f5406e', + }, +}; + +export const styled = emotionStyled as CreateStyled; + +export const ThemeProvider: React.FC = ({ children }) => { + return {children}; +}; diff --git a/app/yarn.lock b/app/yarn.lock index 106ab67f..a308a5a1 100644 --- a/app/yarn.lock +++ b/app/yarn.lock @@ -5669,7 +5669,7 @@ emojis-list@^3.0.0: resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78" integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q== -emotion-theming@^10.0.19: +emotion-theming@10.0.27, emotion-theming@^10.0.19: version "10.0.27" resolved "https://registry.yarnpkg.com/emotion-theming/-/emotion-theming-10.0.27.tgz#1887baaec15199862c89b1b984b79806f2b9ab10" integrity sha512-MlF1yu/gYh8u+sLUqA0YuA9JX0P4Hb69WlKc/9OLo+WCXuX6sy/KoIa+qJimgmr2dWqnypYKYPX37esjDBbhdw==