PR: updates

components/core/Label.js

@@ -1,20 +0,0 @@
-import React, { Component } from "react";
-
-export default class Label extends Component {
-  render() {
-    const { labels } = this.props;
-    return (
-      <>
-        <div className="content">
-          {labels.map(label => {
-            return (
-              <a key={label.id} className={"ui tag label"}>
-                {label.name}
-              </a>
-            );
-          })}
-        </div>
-      </>
-    );
-  }
-}

components/core/marketing/CodeTerminal.js

@@ -5,17 +5,24 @@ import * as System from "~/components/system";
 import { css, keyframes } from "@emotion/react";
 
 const blinkCursor = keyframes`
-0% {opacity: 0;}
-50% {opacity: 1;}
-100% {opacity: 0;}
+0% {
+  opacity: 0;
+}
+50% {
+  opacity: 1;
+}
+100% {
+  opacity: 0;
+}
 `;
-
 const typewriter = keyframes`
-  0%,100% {width: 0;}
-  20%, 80% {width: 10.2em;}
-
+  0%,100% {
+    width: 0;
+  }
+  20%, 80% {
+    width: 10.2em;
+  }
 `;
-
 const STYLES_ROOT = css`
   height: 300px;
   width: 500px;
@@ -30,6 +37,7 @@ const STYLES_ROOT = css`
     width: 300px;
   }
 `;
+
 const STYLES_WINDOW = css`
   box-sizing: border-box;
   font-family: ${Constants.font.mono};
@@ -49,7 +57,6 @@ const STYLES_WINDOW = css`
   scrollbar-width: none;
   white-space: pre-wrap;
   -ms-overflow-style: -ms-autohiding-scrollbar;
-
   ::-webkit-scrollbar {
     display: none;
   }
@@ -71,16 +78,13 @@ const STYLES_ICON = css`
   width: 12px;
   height: 12px;
   margin-left: 8px;
-
   :nth-of-type(1) {
     background: rgb(255, 95, 86);
     margin-left: 12px;
   }
-
   :nth-of-type(2) {
     background: rgb(255, 189, 46);
   }
-
   :nth-of-type(3) {
     background: rgb(39, 201, 63);
   }
@@ -88,7 +92,6 @@ const STYLES_ICON = css`
 
 const STYLES_WINDOW_BODY = css`
   padding: 25px;
-
   overflow: hidden;
   white-space: nowrap;
   color: ${Constants.system.white};

components/core/marketing/Issue.js

@@ -1,30 +1,27 @@
 import React, { Component } from "react";
 import * as Constants from "~/common/constants";
 
-import Label from "~/components/core/Label";
-
 import { css } from "@emotion/react";
 
+import Label from "~/components/core/marketing/Label";
+
 const STYLES_SLATE_CARD_GROUP = css`
   display: flex;
   flex-wrap: wrap;
   width: 100%;
   margin-top: 48px;
 `;
-
 const STYLES_SLATE_CARD = css`
   width: 33.33%;
   height: calc(100vh / 4);
   margin: -1px 0 0 -1px;
   transition: 200ms ease box-shadow;
   border: 1px solid ${Constants.system.darkGray};
-
   :hover {
     transition: 200ms ease box-shadow;
     box-shadow: 0px 10px 40px 20px rgba(0, 0, 0, 0.1);
   }
 `;
-
 const STYLES_SLATE_CARD_CTA = css`
   width: 100%;
   height: calc(100vh / 2);
@@ -32,13 +29,11 @@ const STYLES_SLATE_CARD_CTA = css`
   box-shadow: 0px 4px 80px 4px rgba(0, 0, 0, 0.1);
   text-decoration: none;
   transition: 200ms ease all;
-
   :hover {
     box-shadow: 0px 4px 120px 4px rgba(0, 0, 0, 0.1);
     transform: scale(1.01);
   }
 `;
-
 const STYLES_SLATE_CARD_TEXT = css`
   display: flex;
   flex-direction: column;
@@ -49,19 +44,16 @@ const STYLES_SLATE_CARD_TEXT = css`
   height: 100%;
   padding: 12px;
 `;
-
 const STYLES_SLATE_CARD_TITLE = css`
   padding: 12px;
   font-size: ${Constants.typescale.lvl1};
   text-align: left;
   width: 100%;
-
   @media (max-width: ${Constants.sizes.mobile}px) {
     padding: 0px;
     font-size: 1rem;
   }
 `;
-
 const STYLES_SLATE_CARD_CTA_TITLE = css`
   font-size: ${Constants.typescale.lvl5};
   text-align: left;
@@ -70,55 +62,45 @@ const STYLES_SLATE_CARD_CTA_TITLE = css`
   overflow-wrap: break-word;
   width: 100%;
   color: ${Constants.system.darkGray};
-
   @media (max-width: ${Constants.sizes.tablet}px) {
     font-size: ${Constants.typescale.lvl4};
   }
-
   @media (max-width: ${Constants.sizes.mobile}px) {
     font-size: ${Constants.typescale.lvl3};
     padding: 0px 0px 8px 0px;
   }
 `;
-
 const STYLES_SLATE_CARD_EXPLAINER = css`
   display: flex;
   justify-content: space-between;
   width: 100%;
   padding: 12px;
-
   @media (max-width: ${Constants.sizes.mobile}px) {
     padding: 0px;
   }
 `;
-
 const STYLES_SLATE_CARD_PARAGRAPH = css`
   font-size: ${Constants.typescale.lvl0};
   text-align: left;
   text-decoration: none;
   color: ${Constants.system.pitchBlack};
   transition: 200ms ease all;
-
   :hover,
   :active {
     color: ${Constants.system.pitchBlack};
     background-color: transparent;
   }
-
   @media (max-width: ${Constants.sizes.mobile}px) {
     font-size: 0.78rem;
   }
 `;
-
 const STYLES_SLATE_CARD_CTA_PARAGRAPH = css`
   font-size: ${Constants.typescale.lvl2};
   text-align: left;
-
   @media (max-width: ${Constants.sizes.mobile}px) {
     font-size: 1rem;
   }
 `;
-
 export default class Issue extends Component {
   render() {
     const { title, id, labels, userName, url } = this.props;

components/core/marketing/IssuesList.js

@@ -1,10 +1,10 @@
 import React, { Component } from "react";
 import * as Constants from "~/common/constants";
 
-import Issue from "~/components/core/Issue";
-
 import { css, keyframes } from "@emotion/react";
 
+import Issue from "~/components/core/marketing/Issue";
+
 const STYLES_SLATE_CARD_GROUP = css`
   display: flex;
   flex-wrap: wrap;

components/core/marketing/Label.js

@@ -0,0 +1,18 @@
+import React, { Component } from "react";
+
+export default class Label extends Component {
+  render() {
+    const { labels } = this.props;
+    return (
+      <div className="content">
+        {labels.map(label => {
+          return (
+            <a key={label.id} className={"ui tag label"}>
+              {label.name}
+            </a>
+          );
+        })}
+      </div>
+    );
+  }
+}