convert ComingSoon to styled component,

relates #148
fac-14 · Oct 18, 2018 · 6ee17dc · 6ee17dc
1 parent 89c62af
commit 6ee17dc
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 17 deletions.
diff --git a/src/assets/universal-styles.scss b/src/assets/universal-styles.scss
@@ -33,17 +33,3 @@ body {
   text-align: center;
   padding: 32px 0;
 }
-
-#icon-wrapper {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 60vh;
-  width: 100vw;
-  margin: 64px 0;
-}
-
-#icon-wrapper #coming-soon-icon {
-  width: 80%;
-  max-height: 100%;
-}
diff --git a/src/components/Pages/ComingSoon.js b/src/components/Pages/ComingSoon.js
@@ -3,14 +3,29 @@
 import React from "react";
 import NavBar from "../Navbar/Navbar";
 import comingSoonIcon from "../../assets/icons/coming-soon-icon.svg";
+import styled from "styled-components";
+
+const ComingSoonDiv = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 60vh;
+  width: 100vw;
+  margin: 64px 0;
+`;
+
+const ComingSoonImg = styled.img`
+  width: 80%;
+  max-height: 100%;
+`;
 
 export default class ComingSoon extends React.Component {
   render() {
     return (
       <React.Fragment>
-        <div id="icon-wrapper">
-          <img id="coming-soon-icon" src={comingSoonIcon} />
-        </div>
+        <ComingSoonDiv>
+          <ComingSoonImg id="coming-soon-icon" src={comingSoonIcon} />
+        </ComingSoonDiv>
         <NavBar />
       </React.Fragment>
     );