From 873ac4067582761f3efb8863251ce429019b60f6 Mon Sep 17 00:00:00 2001 From: skrzepij Date: Mon, 11 Nov 2019 19:14:41 +0100 Subject: [PATCH 1/3] define style files structure --- .env | 2 ++ public/index.html | 4 ++-- src/App.js | 13 +++++++++++++ src/App.scss | 0 src/components/Dashboard.js | 1 - src/index.js | 13 +++++++------ src/styles/base/_base.scss | 11 +++++++++++ src/styles/base/_headers.scss | 3 +++ src/styles/base/_links.scss | 6 ++++++ src/styles/styles.scss | 7 +++++++ src/styles/utils/_variables.scss | 3 +++ src/styles/vendors/_antd.scss | 1 + 12 files changed, 55 insertions(+), 9 deletions(-) create mode 100644 .env create mode 100644 src/App.js create mode 100644 src/App.scss create mode 100644 src/styles/base/_base.scss create mode 100644 src/styles/base/_headers.scss create mode 100644 src/styles/base/_links.scss create mode 100644 src/styles/styles.scss create mode 100644 src/styles/utils/_variables.scss create mode 100644 src/styles/vendors/_antd.scss diff --git a/.env b/.env new file mode 100644 index 0000000..65bca70 --- /dev/null +++ b/.env @@ -0,0 +1,2 @@ +#SASS_PATH=node+modules:src +SASS_PATH=./node_modules;./src diff --git a/public/index.html b/public/index.html index a146b6f..c1cda5a 100644 --- a/public/index.html +++ b/public/index.html @@ -7,7 +7,7 @@ - React App + CConverter - Currency converter diff --git a/src/App.js b/src/App.js new file mode 100644 index 0000000..180d99c --- /dev/null +++ b/src/App.js @@ -0,0 +1,13 @@ +import React from 'react' +import {Dashboard} from './components/Dashboard' +import './App.scss' + +const App = () => { + return ( +
+ +
+ ) +} + +export default App diff --git a/src/App.scss b/src/App.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/components/Dashboard.js b/src/components/Dashboard.js index 5915aea..2407f92 100644 --- a/src/components/Dashboard.js +++ b/src/components/Dashboard.js @@ -1,5 +1,4 @@ import {Button, Input} from "antd" -import 'antd/dist/antd.css' import './Dashboard.scss' import React, {useEffect, useState} from "react" import {getCurrencyValues} from "../services/CurrencyService" diff --git a/src/index.js b/src/index.js index 8fb757e..1ecf678 100644 --- a/src/index.js +++ b/src/index.js @@ -1,8 +1,9 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import * as serviceWorker from './serviceWorker'; -import {Dashboard} from "./components/Dashboard"; +import React from 'react' +import ReactDOM from 'react-dom' +import * as serviceWorker from './serviceWorker' +import './styles/styles.scss' +import App from './App' -ReactDOM.render(, document.getElementById('root')); +ReactDOM.render(, document.getElementById('root')) -serviceWorker.unregister(); +serviceWorker.unregister() diff --git a/src/styles/base/_base.scss b/src/styles/base/_base.scss new file mode 100644 index 0000000..6c17632 --- /dev/null +++ b/src/styles/base/_base.scss @@ -0,0 +1,11 @@ +@import "../utils/variables"; + +html { + font-size: 14px; +} + +body { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-size: 1rem; +} diff --git a/src/styles/base/_headers.scss b/src/styles/base/_headers.scss new file mode 100644 index 0000000..130593b --- /dev/null +++ b/src/styles/base/_headers.scss @@ -0,0 +1,3 @@ +h2, h2, h3, h4, h5 { + +} diff --git a/src/styles/base/_links.scss b/src/styles/base/_links.scss new file mode 100644 index 0000000..b16d06e --- /dev/null +++ b/src/styles/base/_links.scss @@ -0,0 +1,6 @@ +a { + color: inherit; + &:hover, &:focus, &:active { + color: inherit; + } +} diff --git a/src/styles/styles.scss b/src/styles/styles.scss new file mode 100644 index 0000000..ae0e182 --- /dev/null +++ b/src/styles/styles.scss @@ -0,0 +1,7 @@ +// Vendors +@import 'vendors/antd'; + +// Base +@import "base/base"; +@import "base/headers"; +@import "base/links"; diff --git a/src/styles/utils/_variables.scss b/src/styles/utils/_variables.scss new file mode 100644 index 0000000..c49166b --- /dev/null +++ b/src/styles/utils/_variables.scss @@ -0,0 +1,3 @@ +// Colors +$white: #fff; +$black: #000; diff --git a/src/styles/vendors/_antd.scss b/src/styles/vendors/_antd.scss new file mode 100644 index 0000000..b562508 --- /dev/null +++ b/src/styles/vendors/_antd.scss @@ -0,0 +1 @@ +@import '~antd/dist/antd.css'; From 2a2abe9ce2e12020902d8af805f2532dbd380790 Mon Sep 17 00:00:00 2001 From: skrzepij Date: Mon, 11 Nov 2019 19:22:24 +0100 Subject: [PATCH 2/3] additional comment in .env file --- .env | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/.env b/.env index 65bca70..fc2ff41 100644 --- a/.env +++ b/.env @@ -1,2 +1,4 @@ -#SASS_PATH=node+modules:src SASS_PATH=./node_modules;./src + +# For Windows users: +# SASS_PATH=node+modules:src From dcceb47eb205d305bbc8e6ac3ba63319a53884dd Mon Sep 17 00:00:00 2001 From: skrzepij Date: Mon, 11 Nov 2019 19:23:16 +0100 Subject: [PATCH 3/3] typo --- src/styles/base/_headers.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/base/_headers.scss b/src/styles/base/_headers.scss index 130593b..3754371 100644 --- a/src/styles/base/_headers.scss +++ b/src/styles/base/_headers.scss @@ -1,3 +1,3 @@ -h2, h2, h3, h4, h5 { +h1, h2, h3, h4, h5 { }