diff --git a/src/atoms/Attachment.js b/src/atoms/Attachment.js
index e4136e3de7859b53b59f7a9e7204224d61e851e8..2fe8d16d36534c4496adaf70c4dd4e42b9a1cf68 100644
--- a/src/atoms/Attachment.js
+++ b/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}
diff --git a/src/atoms/Attachment.local.scss b/src/atoms/Attachment.local.scss
index 86fc8df67507122a21e8339480bf120e3d5411de..bdfe6f0eee620bb450981297b8a01254a12f5a18 100644
--- a/src/atoms/Attachment.local.scss
+++ b/src/atoms/Attachment.local.scss
@@ -1,15 +1,19 @@
.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;
}
diff --git a/src/atoms/Button.js b/src/atoms/Button.js
index 5f093c76aeb6f472f4425a8a0891f7600e92f3c2..70419e58c3bd7f99db79a1a09c3c3d9bb43ad46b 100644
--- a/src/atoms/Button.js
+++ b/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}
diff --git a/src/atoms/Button.local.scss b/src/atoms/Button.local.scss
index e40b34d9c8516fbc6038cde66867d05479c0ba5c..922affb747435b7e639884d6f1b7110d3f6b6810 100644
--- a/src/atoms/Button.local.scss
+++ b/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;
+}
diff --git a/src/atoms/Checkbox.local.scss b/src/atoms/Checkbox.local.scss
index 6af6908fd2675081501497784bcd08be59b6e591..96ab615f9ed786a0e51eae976ad7e3f6364b613c 100644
--- a/src/atoms/Checkbox.local.scss
+++ b/src/atoms/Checkbox.local.scss
@@ -53,3 +53,4 @@
box-shadow: inset 1px 1px 0 0 white, inset -1px -1px 0 0 white;
}
}
+
diff --git a/src/atoms/Radio.local.scss b/src/atoms/Radio.local.scss
index c04404605cd0acf9570e28f4d0f9ea5ce6a1dbb2..e312e2bba8912bf4b234e194a29126d1ed9d5467 100644
--- a/src/atoms/Radio.local.scss
+++ b/src/atoms/Radio.local.scss
@@ -1,3 +1,9 @@
+: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);
}
diff --git a/src/molecules/Attachments.js b/src/molecules/Attachments.js
index e62bef0751ef752a66573e6afead6254a70617c1..6cf132182cd655c4b0d3d9e38d828347921b8755 100644
--- a/src/molecules/Attachments.js
+++ b/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…'}
diff --git a/src/molecules/Files.js b/src/molecules/Files.js
index cc5291619a7bede9768c811b438b535888c5861a..329119ae8d5ef8dabbad56e6cbded57cc62dab18 100644
--- a/src/molecules/Files.js
+++ b/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>
diff --git a/src/molecules/Files.local.scss b/src/molecules/Files.local.scss
index 897130d7e7898d8a8a37e540a8efb5c9ebecedcd..0a31a81c129539352d9d2d59f5644670f898d485 100644
--- a/src/molecules/Files.local.scss
+++ b/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;
+ }
+}