mirror of
https://github.com/lightninglabs/lightning-terminal.git
synced 2026-08-13 12:33:36 +02:00
feat: move colors and fonts into a theme
This commit is contained in:
jamaljsr
parent
b64cbef9d0
commit
3e4792202a
9 changed files with 72 additions and 56 deletions
5
app/.storybook/preview.js
Normal file
5
app/.storybook/preview.js
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
import React from 'react';
|
||||
import { addDecorator } from '@storybook/react';
|
||||
import { ThemeProvider } from 'components/theme';
|
||||
|
||||
addDecorator(storyFn => <ThemeProvider>{storyFn()}</ThemeProvider>);
|
||||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -5,39 +5,12 @@
|
|||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Web site created using create-react-app"
|
||||
/>
|
||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||
<!--
|
||||
manifest.json provides metadata used when your web app is installed on a
|
||||
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
||||
-->
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
<!--
|
||||
Notice the use of %PUBLIC_URL% in the tags above.
|
||||
It will be replaced with the URL of the `public` folder during the build.
|
||||
Only files inside the `public` folder can be referenced from the HTML.
|
||||
|
||||
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
||||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>React App</title>
|
||||
<title>Lightning Dashboard</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
This HTML file is a template.
|
||||
If you open it directly in the browser, you will see an empty page.
|
||||
|
||||
You can add webfonts, meta tags, or analytics to this file.
|
||||
The build step will place the bundled scripts into the <body> tag.
|
||||
|
||||
To begin the development, run `npm start` or `yarn start`.
|
||||
To create a production bundle, use `npm run build` or `yarn build`.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<Layout>
|
||||
<SamplePage />
|
||||
</Layout>
|
||||
<ThemeProvider>
|
||||
<Layout>
|
||||
<SamplePage />
|
||||
</Layout>
|
||||
</ThemeProvider>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
`,
|
||||
|
|
|
|||
|
|
@ -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};
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
|
|
|
|||
33
app/src/components/theme.tsx
Normal file
33
app/src/components/theme.tsx
Normal file
|
|
@ -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<typeof theme>;
|
||||
|
||||
export const ThemeProvider: React.FC = ({ children }) => {
|
||||
return <EmotionThemeProvider theme={theme}>{children}</EmotionThemeProvider>;
|
||||
};
|
||||
|
|
@ -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==
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue