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 (
+ 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. +
+- 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. -
- -- Don’t see support for your browser? let us know! -
+
+ Don’t see support for your browser?
{' '}
+ let us know!
+