Merge pull request #143 from WrippleFoss/refactor/styling-changes

Refactor/styling changes

src-view/.postcssrc

@@ -0,0 +1,3 @@
+{
+  "modules": true
+}

src-view/Routes.js

@@ -1,17 +1,11 @@
-import React from 'react';
-import { render } from "react-dom";
-import { Router, Link } from "@reach/router";
-import App from './app';
-import Login from './components/login/Login'
+import React from 'react'
+import LandingView from './views/LandingView'
+import { Router } from '@reach/router'
 
-let Dash = () => <div>Dash</div>
-
-const routes = ()=> (
-  <Router>
-    <App path="/" />
-    <Dash path="dashboard" />
-    <Login path="/login" />
-  </Router>
-)
-
-export default routes;
+export default () => {
+  return (
+    <Router>
+      <LandingView path='/' />
+    </Router>
+  )
+}

src-view/app.js

@@ -1,13 +1,9 @@
-import React from 'react';
+import React from 'react'
+// import './assets/styles/index.scss'
+import Routes from './Routes'
 
-import AppLayout from './layouts/AppLayout';
-import './assets/styles/index.scss';
 const App = () => {
-  return(
-    <React.Fragment >
-      <AppLayout />
-    </React.Fragment>
-  )
-};
+  return <Routes />
+}
 
-export default App;
+export default App

src-view/assets/styles/_mixins.scss

@@ -0,0 +1,5 @@
+@mixin for-desktop {
+    @media (orientation: landscape) and (min-device-aspect-ratio: 1/1) {
+        @content;
+    }
+}

src-view/assets/styles/components/AppLayout.module.scss

@@ -0,0 +1,3 @@
+.AppLayout {
+    display: flex;
+}

src-view/assets/styles/components/LandingView.module.scss

@@ -0,0 +1,50 @@
+@import '../variables';
+@import '../mixins';
+
+
+.landingContainer {
+    background-image: linear-gradient(to right, var(--violet), var(--green));
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    .landingNavbar {
+        // justify-self: flex-start;
+        padding: 1rem;
+    }
+
+    .heroDiv {
+        display: flex;
+        justify-content: space-evenly;
+        flex-wrap: wrap-reverse;
+    }
+
+    .heroText {
+        >h3 {
+            font-size: 2rem;
+        }
+
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        font-size: 1.5rem;
+        line-height: 2rem;
+
+        .landingButton {
+            margin-top: 1rem;
+        }
+
+        .greenButton {
+            width: 100%;
+        }
+    }
+
+    .heroImage {
+        display: none;
+
+        @include for-desktop {
+            display: inline;
+        }
+    }
+}

src-view/assets/styles/components/Navbar.module.scss

@@ -0,0 +1,3 @@
+.navbar {
+    display: flex;
+}

src-view/assets/styles/index.scss

@@ -8,20 +8,6 @@
 
 html,
 body,
-#root{
+#root {
     height: 100%;
 }
-
-
-#root{
-    background-image: linear-gradient(to right, var(--violet), var(--green));
-    // background-image: linear-gradient(to right, red, orange);
-}
-
-.wrapper {
-    margin-right: auto;
-    margin-left: auto;
-    max-width: 960px;
-    padding-right: 10px;
-    padding-left: 10px;
-}

src-view/components/Navbar.js

@@ -1,17 +1,18 @@
-import React from 'react';
-import { Link } from '@reach/router';
-
-import Masterlogo from '../assets/logo/master-logo.png';
-import '../assets/styles/components/_navbar.scss';
+import React from 'react'
+import { Link } from '@reach/router'
 
+import Masterlogo from '../assets/logo/master-logo.png'
+import styles from '../assets/styles/components/Navbar.module.scss'
 
 const Navbar = () => {
-  return(
-    <nav className="navbar">
-      <div className="navbar-brand">
-          <Link to="/"><img src={Masterlogo}/></Link>
+  return (
+    <nav className={styles.navbar}>
+      <div className={styles.navbarBrand}>
+        <Link to='/'>
+          <img src={Masterlogo} />
+        </Link>
       </div>
     </nav>
   )
 }
-export default Navbar;
+export default Navbar