styles app page

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "chrome",
+      "request": "launch",
+      "name": "Launch Chrome against 127.0.0.1",
+      "url": "http://127.0.0.1:3000",
+      "webRoot": "${workspaceFolder}"
+    }
+  ]
+}

src/components/extension-splash.css

@@ -1,4 +1,61 @@
 .extension-splash {
+  width: 100%;
+
+  background-color: var(--xlight-grey);
+  box-sizing: border-box;
+  font: var(--ui-basic-font);
+  margin: 0;
   min-height: 100vh;
   padding: calc(var(--header-bar-height) + var(--lgrd)) 0 var(--lgrd);
+  box-sizing: border-box;
+
+  & .extension-splash__content {
+    max-width: var(--middle-column-default-width);
+    margin: 0 auto;
+    background-color: white;
+    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.15);
+    min-height: 100vh;
+    padding: var(--mgrd) var(--xlgrd);
+    box-sizing: border-box;
+    position: relative;
+  }
+
+  & .extension-splash__screenshot {
+    width: 100%;
+    max-height: 500px;
+    object-fit: scale-down;
+  }
+
+  & .extension-splash__body {
+    font: var(--ui-basic-font--large);
+    max-width: 800px;
+    margin: 0 auto;
+  }
+
+  & .extension-splash__title {
+    margin: var(--mgrd) 0 var(--lgrd) 0;
+    font: var(--ui-header-font);
+    text-align: center;
+  }
+
+  & .extension-splash__browser-list {
+    display: flex;
+    list-style: none;
+    justify-content: center;
+  }
+
+  & .extension-splash__browser-list-item {
+    text-align: center;
+    margin: var(--sgrd);
+  }
+  & .extension-splash__install-button {
+  }
+  & .extension-splash__comming-soon {
+    color: var(--ui-basic-font-color--light);
+    padding: var(--xxsgrd);
+  }
+
+  & .extension-splash__request-browser {
+    text-align: center;
+  }
 }

src/components/extension-splash.js

@@ -1,27 +1,58 @@
 import React from 'react';
 import HeaderBar from './header-bar';
+import Button from './button';
+import LabelStyle from './label-style';
 
 export default function ExtensionSplash() {
   return (
     <div className="extension-splash">
       <HeaderBar />
+      <div className="extension-splash__content">
+        <h1 className="extension-splash__title">
+          Add Rapid PREreview to your browser
+        </h1>
 
-      <h1>Add Rapid PREreview to your browser</h1>
+        <div className="extension-splash__body">
+          <p>
+            The Outbreak Science Rapid PREreview app lets you read and add
+            reviews (or requests for feedback) directly from the preprint sites
+            you visit without having to navigate to the Rapid PREreview
+            homepage.
+          </p>
+          <img
+            src="images/extension-preview.png"
+            className="extension-splash__screenshot"
+          />
+          <ul className="extension-splash__browser-list">
+            <li className="extension-splash__browser-list-item">
+              <Button
+                className="extension-splash__install-button"
+                primary={true}
+              >
+                Install for Chrome
+              </Button>
+            </li>
+            <li className="extension-splash__browser-list-item">
+              <Button
+                className="extension-splash__install-button"
+                primary={true}
+                disabled={true}
+              >
+                Install for Firefox
+              </Button>
+              <br />
+              <div className="extension-splash__comming-soon">
+                <LabelStyle>(comming soon)</LabelStyle>
+              </div>
+            </li>
+          </ul>
 
-      <p>
-        The Rapid PREreview app let you read and add reviews (or requests for
-        feedback) directly from the preprint sites you visit without having to
-        navigate to the Rapid PREreview homepage.
-      </p>
-
-      <ul>
-        <li>Install for Chrome</li>
-        <li>Install for Firefox (comming soon)</li>
-      </ul>
-
-      <p>
-        Don’t see support for your browser? <a href="#">let us know!</a>
-      </p>
+          <p className="extension-splash__request-browser">
+            Don’t see support for your browser? <br />{' '}
+            <a href="#">let us know!</a>
+          </p>
+        </div>
+      </div>
     </div>
   );
 }

src/components/header-bar.css

@@ -40,22 +40,25 @@
 
   & .header-bar__right {
     display: flex;
+
     align-items: center;
-  }
 
-  & .header-bar__nav-item {
-    font: var(--ui-header-menu-font);
-    margin: 0 var(--sgrd);
-    display: block;
-    white-space: nowrap;
-    line-height: 0;
     & :any-link {
       color: var(--ui-basic-font-color);
       text-decoration: none;
     }
+
     & a:hover {
       opacity: 0.7;
     }
+  }
+
+  & .header-bar__nav-item {
+    font: var(--ui-header-menu-font);
+    margin: 0 var(--sgrd);
+    display: block;
+    white-space: nowrap;
+    line-height: 0;
 
     &:last-of-type {
       margin-right: 0;

src/components/variables.css

@@ -81,7 +81,7 @@
     var(--ui-basic-font-leading--small) var(--ui-font-family);
 
   --ui-basic-font-size--large: 16px;
-  --ui-basic-font-leading--large: 20px;
+  --ui-basic-font-leading--large: 1.65em;
   --ui-basic-font--large: 400 var(--ui-basic-font-size--large) /
     var(--ui-basic-font-leading--large) var(--ui-font-family);