CC-21 - Set Global Styles (#27)

* define style files structure * additional comment in .env file * typo
codrill · Nov 13, 2019 · 2375906 · 2375906
1 parent aa67e9e
commit 2375906
Show file tree

Hide file tree

Showing 12 changed files with 57 additions and 9 deletions.
diff --git a/.env b/.env
@@ -0,0 +1,4 @@
+SASS_PATH=./node_modules;./src
+
+# For Windows users:
+# SASS_PATH=node+modules:src
diff --git a/public/index.html b/public/index.html
@@ -7,7 +7,7 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="CConverter - Open Source Currency converter created by Mad-Rat"
     />
     <link rel="apple-touch-icon" href="logo192.png" />
     <!--
@@ -24,7 +24,7 @@
       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>CConverter - Currency converter</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.js b/src/App.js
@@ -0,0 +1,13 @@
+import React from 'react'
+import {Dashboard} from './components/Dashboard'
+import './App.scss'
+
+const App = () => {
+  return (
+    <div>
+      <Dashboard />
+    </div>
+  )
+}
+
+export default App
diff --git a/src/App.scss b/src/App.scss
diff --git 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
@@ -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(<Dashboard />, document.getElementById('root'));
+ReactDOM.render(<App/>, document.getElementById('root'))
 
-serviceWorker.unregister();
+serviceWorker.unregister()
diff --git a/src/styles/base/_base.scss 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
@@ -0,0 +1,3 @@
+h1, h2, h3, h4, h5 {
+
+}
diff --git a/src/styles/base/_links.scss 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
@@ -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
@@ -0,0 +1,3 @@
+// Colors
+$white: #fff;
+$black: #000;
diff --git a/src/styles/vendors/_antd.scss b/src/styles/vendors/_antd.scss
@@ -0,0 +1 @@
+@import '~antd/dist/antd.css';