diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 0000000..2505fa3 --- /dev/null +++ b/.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}" + } + ] +} diff --git a/public/images/extension-preview.png b/public/images/extension-preview.png new file mode 100644 index 0000000..8bb6fda Binary files /dev/null and b/public/images/extension-preview.png differ diff --git a/src/components/extension-splash.css b/src/components/extension-splash.css index 940544a..64ae54f 100644 --- a/src/components/extension-splash.css +++ b/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; + } } diff --git a/src/components/extension-splash.js b/src/components/extension-splash.js index dfe7eae..4bece94 100644 --- a/src/components/extension-splash.js +++ b/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 (
+
+

+ Add Rapid PREreview to your browser +

-

Add Rapid PREreview to your browser

+
+

+ 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. +

+ +
    +
  • + +
  • +
  • + +
    +
    + (comming soon) +
    +
  • +
-

- 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. -

- -
    -
  • Install for Chrome
  • -
  • Install for Firefox (comming soon)
  • -
- -

- Don’t see support for your browser? let us know! -

+

+ Don’t see support for your browser?
{' '} + let us know! +

+
+
); } diff --git a/src/components/header-bar.css b/src/components/header-bar.css index ad5e205..50974b7 100644 --- a/src/components/header-bar.css +++ b/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; diff --git a/src/components/variables.css b/src/components/variables.css index 62c592e..eaf669e 100644 --- a/src/components/variables.css +++ b/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);