From daae4e40c87b1c2e6d3bf15faf2a933c461c4535 Mon Sep 17 00:00:00 2001
From: Jake <royalcows9@gmail.com>
Date: Sat, 30 Jan 2021 03:40:40 -0800
Subject: [PATCH] Extracted colors to variables

---
 src/components/AboutMe/AboutMe.scss |  4 ++--
 src/components/Footer.scss          |  2 +-
 src/components/Header.scss          |  2 +-
 src/components/ProjectGrid.scss     | 10 +++++-----
 src/index.scss                      |  4 ++--
 src/index.tsx                       |  1 +
 src/vars.scss                       | 11 +++++++++++
 7 files changed, 23 insertions(+), 11 deletions(-)
 create mode 100644 src/vars.scss

diff --git a/src/components/AboutMe/AboutMe.scss b/src/components/AboutMe/AboutMe.scss
index 970aeac..05b8215 100644
--- a/src/components/AboutMe/AboutMe.scss
+++ b/src/components/AboutMe/AboutMe.scss
@@ -10,7 +10,7 @@
   }
 
   .about-me-card {
-    background: #F1F1F1;
+    background: var(--about-me);
     border-radius: 5px;
     margin: 0 5px 0;
     padding: 10px;
@@ -18,7 +18,7 @@
   }
 
   #about-me {
-    background: #F1F1F1;
+    background: var(--about-me);
     border-radius: 5px;
     padding: 15px;
     width: fit-content;
diff --git a/src/components/Footer.scss b/src/components/Footer.scss
index ae722bb..4fd93eb 100644
--- a/src/components/Footer.scss
+++ b/src/components/Footer.scss
@@ -1,5 +1,5 @@
 .site-footer {
-  background: #84B7DB;
+  background: var(--header);
   margin: 10px;
   border-radius: 5px;
 
diff --git a/src/components/Header.scss b/src/components/Header.scss
index 3f88e0d..23f92b1 100644
--- a/src/components/Header.scss
+++ b/src/components/Header.scss
@@ -5,7 +5,7 @@ header {
   margin: 10px;
   padding: 10px;
   border-radius: 5px;
-  background: #84B7DB;
+  background: var(--header);
   font-family: "Fira Code", monospace;
 
   h1 {
diff --git a/src/components/ProjectGrid.scss b/src/components/ProjectGrid.scss
index 5e7cbd3..8067e9c 100644
--- a/src/components/ProjectGrid.scss
+++ b/src/components/ProjectGrid.scss
@@ -14,11 +14,11 @@ $breakpoints: (x-small: 430px, small: 660px, medium: 900px, large: 1300px, x-lar
 
 #project-grid-parent {
   margin: 10px;
-  background: #FECEA8;
+  background: var(--grid-background);
   border-radius: 5px;
 
   & > #project-header {
-    background: #1C1C1C;
+    background: var(--grid-header-background);
     border-radius: 5px 5px 0 0;
     margin-bottom: 2px;
 
@@ -26,7 +26,7 @@ $breakpoints: (x-small: 430px, small: 660px, medium: 900px, large: 1300px, x-lar
     padding: 5px;
 
     * {
-      color: white;
+      color: var(--grid-header-text);
     }
 
     h2 {
@@ -119,7 +119,7 @@ $breakpoints: (x-small: 430px, small: 660px, medium: 900px, large: 1300px, x-lar
   .GridElementInternal {
     padding: 9px;
     border-radius: 5px;
-    background: #F1F1F1;
+    background: var(--grid-element-background);
 
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
     transition: box-shadow 0.3s ease-in-out;
@@ -249,6 +249,6 @@ $breakpoints: (x-small: 430px, small: 660px, medium: 900px, large: 1300px, x-lar
   font-size: 24px;
   color: black;
 
-  background: rgba(224, 255, 255, 0.7);
+  background: var(--link-icon-background);
   border-radius: 5px;
 }
diff --git a/src/index.scss b/src/index.scss
index df2b6d3..e8e7301 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -1,5 +1,5 @@
 * {
-  color: #2A363B;
+  color: var(--text);
 }
 
 body {
@@ -10,7 +10,7 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   //background: url("./images/y-so-serious-white.png") repeat;
-  background-color: #3767A8 !important;
+  background-color: var(--background) !important;
 }
 
 #root {
diff --git a/src/index.tsx b/src/index.tsx
index 55fe0ae..de07d43 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -3,6 +3,7 @@ import { render } from "react-snapshot";
 
 import "./index.scss";
 import "./imports.scss";
+import "./vars.scss"
 import App from "./App";
 import reportWebVitals from "./reportWebVitals";
 import { HashRouter } from "react-router-dom";
diff --git a/src/vars.scss b/src/vars.scss
new file mode 100644
index 0000000..789caf2
--- /dev/null
+++ b/src/vars.scss
@@ -0,0 +1,11 @@
+:root {
+  --text: black;
+  --background: #2A363B;
+  --header: #84B7DB;
+  --about-me: #F1F1F1;
+  --grid-background: #FECEA8;
+  --grid-header-background: #1C1C1c;
+  --grid-header-text: #F1F1F1;
+  --grid-element-background: #F1F1F1;
+  --link-icon-background: rgba(224, 255, 255, 0.7);
+}