From 2e24548deb28473fed9459c9399cd3e3cb23c7a6 Mon Sep 17 00:00:00 2001
From: "Collin M. Barrett" <collinbarrett@users.noreply.github.com>
Date: Sun, 28 Jul 2019 17:31:24 -0500
Subject: [PATCH] a bit of refactoring

---
 src/FilterLists.Web/src/App.css               |  2 +
 src/FilterLists.Web/src/App.tsx               |  8 +-
 .../src/{Routes.tsx => Router.tsx}            |  9 +-
 src/FilterLists.Web/src/index.css             |  6 +-
 src/FilterLists.Web/src/utils/loader.css      | 90 ++++++++++---------
 5 files changed, 61 insertions(+), 54 deletions(-)
 rename src/FilterLists.Web/src/{Routes.tsx => Router.tsx} (63%)

diff --git a/src/FilterLists.Web/src/App.css b/src/FilterLists.Web/src/App.css
index 84e70e188..021a9f2fc 100644
--- a/src/FilterLists.Web/src/App.css
+++ b/src/FilterLists.Web/src/App.css
@@ -1,3 +1,4 @@
+/* use consistent and smaller font size globally */
 body,
 h2,
 h3,
@@ -7,6 +8,7 @@ blockquote {
   font-size: 16px;
 }
 
+/* leave a bit of horizontal padding around the app for cleanliness */
 .container {
   max-width: 90vw;
 }
diff --git a/src/FilterLists.Web/src/App.tsx b/src/FilterLists.Web/src/App.tsx
index 2525f4138..6d354ddf2 100644
--- a/src/FilterLists.Web/src/App.tsx
+++ b/src/FilterLists.Web/src/App.tsx
@@ -1,12 +1,14 @@
 import React from 'react';
 import '../node_modules/bootstrap/dist/css/bootstrap.min.css'
 import './App.css';
-import { BrowserRouter } from "react-router-dom";
-import * as RoutesModule from "./Routes";
+import { Layout } from "./Layout";
+import { Router } from "./Router";
 
 const App: React.FC = () => {
   return (
-    <BrowserRouter children={RoutesModule.Routes} />
+    <Layout>
+      <Router />
+    </Layout>
   );
 }
 
diff --git a/src/FilterLists.Web/src/Routes.tsx b/src/FilterLists.Web/src/Router.tsx
similarity index 63%
rename from src/FilterLists.Web/src/Routes.tsx
rename to src/FilterLists.Web/src/Router.tsx
index 1409781f1..ed57d47fd 100644
--- a/src/FilterLists.Web/src/Routes.tsx
+++ b/src/FilterLists.Web/src/Router.tsx
@@ -1,13 +1,14 @@
 import * as React from "react";
-import { Layout } from "./Layout";
 import { Route, Redirect, Switch } from "react-router-dom";
 import { Home } from "./modules";
+import { BrowserRouter } from "react-router-dom";
 
-export const Routes = <Layout>
+const Routes =
     <Switch>
         <Route exact path="/" component={Home} />
         <Route>
             <Redirect to="/" />
         </Route>
-    </Switch>
-</Layout>;
\ No newline at end of file
+    </Switch>;
+
+export const Router = () => <BrowserRouter children={Routes} />
\ No newline at end of file
diff --git a/src/FilterLists.Web/src/index.css b/src/FilterLists.Web/src/index.css
index ec2585e8c..4a1df4db7 100644
--- a/src/FilterLists.Web/src/index.css
+++ b/src/FilterLists.Web/src/index.css
@@ -1,13 +1,13 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
diff --git a/src/FilterLists.Web/src/utils/loader.css b/src/FilterLists.Web/src/utils/loader.css
index 396eb8671..bdf0e7446 100644
--- a/src/FilterLists.Web/src/utils/loader.css
+++ b/src/FilterLists.Web/src/utils/loader.css
@@ -3,66 +3,68 @@
 .loader,
 .loader:before,
 .loader:after {
-    -ms-animation: load1 1s infinite ease-in-out;
-    -webkit-animation: load1 1s infinite ease-in-out;
-    animation: load1 1s infinite ease-in-out;
-    background: #000000;
-    height: 4em;
-    width: 1em;
+  -ms-animation: load1 1s infinite ease-in-out;
+  -webkit-animation: load1 1s infinite ease-in-out;
+  animation: load1 1s infinite ease-in-out;
+  background: #000000;
+  height: 4em;
+  width: 1em;
 }
 
 .loader {
-    -ms-transform: translateZ(0);
-    -webkit-animation-delay: -0.16s;
-    -webkit-transform: translateZ(0);
-    animation-delay: -0.16s;
-    color: #000000;
-    font-size: 11px;
-    margin: 88px auto;
-    position: relative;
-    text-indent: -9999em;
-    transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  -webkit-animation-delay: -0.16s;
+  -webkit-transform: translateZ(0);
+  animation-delay: -0.16s;
+  color: #000000;
+  font-size: 11px;
+  margin: 88px auto;
+  position: relative;
+  text-indent: -9999em;
+  transform: translateZ(0);
 }
 
 .loader:before,
 .loader:after {
-    content: '';
-    position: absolute;
-    top: 0;
+  content: "";
+  position: absolute;
+  top: 0;
 }
 
 .loader:before {
-    -webkit-animation-delay: -0.32s;
-    animation-delay: -0.32s;
-    left: -1.5em;
+  -webkit-animation-delay: -0.32s;
+  animation-delay: -0.32s;
+  left: -1.5em;
 }
 
-.loader:after { left: 1.5em; }
+.loader:after {
+  left: 1.5em;
+}
 
 @-webkit-keyframes load1 {
-    0%,
-    80%,
-    100% {
-        box-shadow: 0 0;
-        height: 4em;
-    }
+  0%,
+  80%,
+  100% {
+    box-shadow: 0 0;
+    height: 4em;
+  }
 
-    40% {
-        box-shadow: 0 -2em;
-        height: 5em;
-    }
+  40% {
+    box-shadow: 0 -2em;
+    height: 5em;
+  }
 }
 
 @keyframes load1 {
-    0%,
-    80%,
-    100% {
-        box-shadow: 0 0;
-        height: 4em;
-    }
+  0%,
+  80%,
+  100% {
+    box-shadow: 0 0;
+    height: 4em;
+  }
 
-    40% {
-        box-shadow: 0 -2em;
-        height: 5em;
-    }
-}
\ No newline at end of file
+  40% {
+    box-shadow: 0 -2em;
+    height: 5em;
+  }
+}