style for the do review

src/atoms/Attachment.js

@@ -8,7 +8,7 @@ const Attachment = ({ value }) => (
     href={value.url}
     className={classes.attachment}>
     <span className={classes.icon}>
-      <Icon color="cornflowerblue">paperclip</Icon>
+      <Icon color="var(--color-primary)">paperclip</Icon>
     </span>
     <span className={classes.filename}>
       {value.name}

src/atoms/Attachment.local.scss

 .attachment {
-  display: flex;
-  align-items: center;
-  color: inherit;
-  text-decoration: none;
+  position: absolute;
+  margin-right: -20ch;
+  width: 20ch;
 }
 
 .icon {
   margin-right: 10px;
   display: inline-flex;
+  color: var(--color-primary);
 }
 
 .filename {
-  font-family: var(--font-mono);
+  font-size: 0.7em;
+  max-width: 25ch;
+  height: 2em;
+  overflow-wrap: break-word;
+  padding: 0;
 }

src/atoms/Button.js

@@ -2,11 +2,12 @@ import React from 'react'
 import classnames from 'classnames'
 import classes from './Button.local.scss'
 
-const Button = ({ children, type = 'button', back, disabled, primary, onClick}) => (
+const Button = ({ children, type = 'button', back, disabled, addFile, primary, onClick}) => (
   <button
     className={classnames(classes.root, {
       [classes.disabled]: disabled,
       [classes.back]: back,
+      [classes.addFile]: addFile,
       [classes.primary]: primary
     })}
     type={type}

src/atoms/Button.local.scss

@@ -72,6 +72,8 @@
   cursor: not-allowed;
   background: transparent;
   color: #aaa;
+  border: 2px solid transparent;
+  border-bottom: 2px solid #bbb;
 }
 
 .disabled:hover::after {
@@ -111,3 +113,12 @@
 .back:active {
   transform: scale(0.99);
 }
+
+.addFile {
+  background: none;
+  font-style: normal;
+  text-transform: none;
+  padding: 0;
+  letter-spacing: 0;
+  border: none;
+}

src/atoms/Checkbox.local.scss

@@ -53,3 +53,4 @@
     box-shadow: inset 1px 1px 0 0 white, inset -1px -1px 0 0 white;
   }
 }
+

src/atoms/Radio.local.scss

+:root {
+  --color-activation: black;
+  --font-style: italic;
+  --letter-spacing:  1px;
+}
+
 .root {
   display: flex;
   align-items: center;
@@ -21,10 +27,10 @@
 
 .label {
   font-size: 1em;
-  font-family: "Vollkorn", serif;
-  font-style: italic;
+  font-family: inherit;
+  font-style: var(--font-style);
   display: inline-block;
-  letter-spacing: 1px;
+  letter-spacing: var(--letter-spacing);
 }
 
 //.checked .label {
@@ -32,7 +38,7 @@ input:checked + .label {
   font-weight: 500;
 }
 
-/* hide the input */
+// hide the input
 
 .input {
   display: none;
@@ -57,14 +63,7 @@ input:checked + .label {
 // TODO: don't apply this when checked
 .root:hover .label::before {
   //background-size: 100%;
-  background:
-    radial-gradient(
-      closest-corner at center,
-      var(--color-primary) 0%,
-      var(--color-primary) 30%,
-      white 30%,
-      white 100%
-    );
+  background: radial-gradient(closest-corner at center, var(--color-primary) 0%, var(--color-primary) 30%, white 30%, white 100%);
 
   /* less blurry circle: 2 lines below
   ------------------------------------------------- */
@@ -76,13 +75,18 @@ input:checked + .label {
 input:checked + .label::before {
   transition: border 0.5s ease, background-size 0.3s ease;
   border-color: transparent;
-  box-shadow: 0 0 0 1px black;
-  background:
-    radial-gradient(
-      closest-corner at center,
-      black 0%,
-      black 45%,
-      white 45%,
-      white 100%
-    );
+  box-shadow: 0 0 0 1px var(--color-activation);
+  background: radial-gradient(closest-corner at center, var(--color-activation) 0%, var(--color-activation) 45%, white 45%, white 100%);
+}
+
+input[value="accept"]:checked + .label::before {
+  --color-activation: var(--color-valid);
+}
+
+input[value="reject"]:checked + .label::before {
+  --color-activation: var(--color-danger);
+}
+
+input[value="revise"]:checked + .label::before {
+  --color-activation: var(--color-warning);
 }

src/molecules/Attachments.js

@@ -13,7 +13,7 @@ const Attachments = props => (
     uploadingFile={({ file, progress, error }) => (
       <div className={classes.uploading}>
         <span className={classes.icon}>
-          <Icon color="cornflowerblue">paperclip</Icon>
+          <Icon color="var(--color-primary)">paperclip</Icon>
         </span>
         <span className={classes.filename}>
           {error ? error : 'Uploading…'}

src/molecules/Files.js

@@ -53,7 +53,7 @@ class Files extends React.Component {
         <div className={classes.upload}>
           <button
             type="button"
-            className={classes.button}
+            className={classes.attach}
             onClick={() => this.fileInput.click()}>
             {buttonText}
           </button>

src/molecules/Files.local.scss

@@ -22,3 +22,18 @@
   line-height: 1.5;
   font-size: 0.9em;
 }
+
+.attach {
+  border: 0 dashed grey;
+  background: transparent;
+  padding: 0;
+  font-family: inherit;
+  margin-bottom: 0;
+  font-size: 0.8em;
+  border-bottom: 2px solid transparent;
+
+  &:hover {
+    border-bottom: 2px solid var(--color-primary);
+    color: primary;
+  }
+}