Color system and initial color schema.

This commit is contained in:
codevictory
2021-12-06 19:43:25 +02:00
parent b47c562336
commit f1ec5a0b1b
6 changed files with 29 additions and 3 deletions

View File

@@ -1,10 +1,16 @@
@import '~antd/dist/antd.css'; @import 'antd/dist/antd.variable.min.css';
@import './colors.scss';
.App { .App {
text-align: center; text-align: center;
background-color: $secondary;
} }
.App .App-content { .App .App-content {
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
article {
margin: 2em;
}

View File

@@ -6,11 +6,21 @@ import { Main } from './pages/Main';
import { Registration } from './pages/Registration'; import { Registration } from './pages/Registration';
import { IntlProvider } from 'react-intl'; import { IntlProvider } from 'react-intl';
import { localization } from './constants/localization'; import { localization } from './constants/localization';
import { Header } from './components/Header';
import { ConfigProvider } from 'antd';
export default function App() { export default function App() {
const language = useRecoilValue(currentLanguage) const language = useRecoilValue(currentLanguage)
ConfigProvider.config({
theme: {
primaryColor: '#21b635',
}
});
return ( return (
<IntlProvider locale={language} messages={localization[language]}> <IntlProvider locale={language} messages={localization[language]}>
<Header />
<Router> <Router>
<Switch> <Switch>
<Route exact path="/:page"> <Route exact path="/:page">

2
src/colors.scss Normal file
View File

@@ -0,0 +1,2 @@
$primary: #21b635;
$secondary: #98cc9f;

View File

@@ -1,5 +1,7 @@
@import '../../colors.scss';
.App-header { .App-header {
background-color: #282c34; background-color: $primary;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;

View File

@@ -1,3 +1,5 @@
@import './colors.scss';
body { body {
margin: 0; margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
@@ -5,6 +7,7 @@ body {
sans-serif; sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
background-color: $secondary !important;
} }
code { code {

View File

@@ -3,11 +3,14 @@ import ReactDOM from 'react-dom';
import { RecoilRoot } from 'recoil'; import { RecoilRoot } from 'recoil';
import './index.scss'; import './index.scss';
import App from './App'; import App from './App';
import { ConfigProvider } from 'antd';
ReactDOM.render( ReactDOM.render(
<React.StrictMode> <React.StrictMode>
<RecoilRoot> <RecoilRoot>
<ConfigProvider>
<App /> <App />
</ConfigProvider>
</RecoilRoot> </RecoilRoot>
</React.StrictMode>, </React.StrictMode>,
document.getElementById('root') document.getElementById('root')