update to the styles of submission, adding a class named [back] for the secondary button.

src/atoms/Button.js

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

src/atoms/Button.local.scss

 .root {
   text-transform: uppercase;
-  font-family: 'Fira Sans Condensed', sans-serif;
+  font-family: var(--font-interface);
   letter-spacing: 0.05em;
   border: none;
   font-size: inherit;
   padding: 10px 20px;
   position: relative;
+  background: #ddd;
+}
 
-  &:not(.disabled) {
-    cursor: pointer;
-    border: 2px solid transparent;
-    border-bottom: 4px solid transparent;
-    font-weight: 500;
-    transition: border 0.3s, background 0.5s;
-
-    &:hover {
-      background: white;
-      color: var(--color-primary);
-      border: 2px solid var(--color-primary);
-      border-bottom: 4px solid var(--color-primary);
-      outline: 1px solid transparent;
-    }
-
-    &:focus {
-      background: white;
-      color: var(--color-primary);
-      border: 2px solid var(--color-primary);
-      border-bottom: 4px solid var(--color-primary);
-      box-shadow: 0 2px 0 0 var(--color-primary);
-      outline: 1px solid transparent;
-    }
+.root:hover,
+.root:focus {
+  background: #777;
+  color: white;
+  outline: 1px solid transparent;
+}
 
-    // this will be added to the button that need a feedback to the user. 
-    // &::after {
-    //   content: "Saved!";
-    //   top: 20%;
-    //   left: 115%;
-    //   position: absolute;
-    //   background: var(--color-primary);
-    //   color: white;
-    //   padding: 0.1em 0.3em;
-    //   opacity: 0;
-    // }
+// this will be added to the button that need a feedback to the user. 
+// &::after {
+//   content: "Saved!";
+//   top: 20%;
+//   left: 115%;
+//   position: absolute;
+//   background: var(--color-primary);
+//   color: white;
+//   padding: 0.1em 0.3em;
+//   opacity: 0;
+// }
 
-    &:active {
-      transform: scale(0.8);
+.root :active {
+  transform: scale(0.8);
+}
 
-      &::after {
-        opacity: 1;
-        animation: 1s warning;
-      }
-    }
-  }
+.root ::after {
+  opacity: 1;
+  animation: 1s warning;
 }
 
 .primary {
   background-color: var(--color-primary);
   color: white;
+  border: 2px solid transparent;
+  border-bottom: 4px solid var(--color-primary);
+}
+
+.primary:hover {
+  background: white;
+  color: var(--color-primary);
+  border: 2px solid var(--color-primary);
+  border-bottom: 4px solid var(--color-primary);
+  outline: 1px solid transparent;
+}
+
+.primary:focus {
+  background: white;
+  color: var(--color-primary);
+  border: 2px solid var(--color-primary);
+  border-bottom: 4px solid var(--color-primary);
+  box-shadow: 0 2px 0 0 var(--color-primary);
+  outline: 1px solid transparent;
 }
 
 .disabled {
-  // text-decoration: line-through;
   background: white;
   border: 2px solid transparent;
   border-bottom: 2px solid #bbb;
   color: #bbb;
+}
+
+.disabled:hover {
+  cursor: not-allowed;
+  background: transparent;
+  color: #aaa;
+}
 
-  &:hover {
-    // border: 2px solid #F10C08;
-    cursor: not-allowed;
+.disabled:hover::after {
+  text-transform: lowercase;
+  letter-spacing: 0;
+  content: "sorry, this action is not possible";
+  position: absolute;
+  display: inline;
+  top: 30%;
+  left: 115%;
+  font-style: italic;
+  font-size: 0.9em;
+  color: var(--color-danger);
+  width: 30ch;
+  text-align: left;
+  opacity: 1;
+}
 
-    &::after {
-      text-transform: lowercase;
-      letter-spacing: 0;
-      content: "sorry, this action is not possible";
-      position: absolute;
-      display: inline;
-      top: 30%;
-      left: 115%;
-      font-style: italic;
-      font-size: 0.9em;
-      color: #f10c08;
-      width: 30ch;
-      text-align: left;
-      // background: #F10C08;
-      opacity: 1;
-    }
-  }
+.back {
+  background: none;
+  font-style: italic;
+  text-transform: none;
+  padding: 0;
+  letter-spacing: 0;
+  border: 0;
+  border-bottom: 2px solid #777;
 }
 
-//@keyframes fadeout {
-//  0% {
-//    opacity: 1;
-//  }
-//
-//  90% {
-//    opacity: 1;
-//  }
-//
-//  100% {
-//    opacity: 0;
-//  }
-//}
+.back:hover,
+.back:focus {
+  border: 0;
+  background: transparent;
+  border-bottom: 2px solid var(--color-primary);
+  color: var(--color-primary);
+}
+
+.back:active {
+  transform: scale(0.99);
+}

src/atoms/Button.md

@@ -16,3 +16,9 @@ A button can be marked as the "primary" action.
 ```js
 <Button primary>Save</Button>
 ```
+
+A button can be marked as the "go back" action, as an alternative to the primary button.
+
+```js
+<Button back>Take me back to where i was.</Button>
+```

src/atoms/Checkbox.local.scss

 .root {
   display: flex;
   align-items: center;
-  cursor: pointer;
   transition: all 2s;
   font-size: 1em;
   font-family: var(--font-author);

src/atoms/TextField.local.scss

@@ -27,3 +27,9 @@
     border-bottom: 1px dashed var(--color-primary);
   }
 }
+
+.root input::placeholder {
+  font-style: italic;
+  font-family: var(--font-interface);
+  color: #777;
+}

src/atoms/TextField.md

@@ -6,6 +6,7 @@ initialState = { value: '' };
 
 <TextField 
   value={state.value} 
+  placeholder="so you can write some in here"
   onChange={event => setState({ value: event.target.value })}/>
 ```
 
@@ -17,5 +18,6 @@ initialState = { value: '' };
 <TextField 
   label="Foo" 
   value={state.value}
+  placeholder="so you can write some in here"
   onChange={event => setState({ value: event.target.value })}/>
 ```

src/molecules/Files.local.scss

@@ -3,14 +3,22 @@
 }
 
 .button {
-  border: none;
+  border: 1px dashed grey;
   background: transparent;
   padding: 10px;
   cursor: pointer;
   font-size: inherit;
   font-family: inherit;
+  margin-bottom: 2em;
 }
 
 .button:hover {
   color: var(--color-primary);
+  border-color: var(--color-primary);
+}
+
+.files {
+  font-style: italic;
+  line-height: 1.5;
+  font-size: 0.9em;
 }

src/molecules/Files.md

@@ -15,7 +15,7 @@ const value = [
 
 <Files
   value={value}
-  buttonText="Choose a file to upload"
+  buttonText="↑ Choose a file to upload"
   uploadingFile={({ file, progress, error }) => <div style={{color:'gray'}}>{file.name}</div>}
   uploadedFile={value => <div>{value.name}</div>}
   uploadFile={file => new XMLHttpRequest()}/>

src/molecules/Supplementary.js

@@ -6,7 +6,7 @@ import File from '../atoms/File'
 const Supplementary = props => (
   <Files
     {...props}
-    buttonText="▲ Upload files"
+    buttonText="↑ Upload files"
     uploadingFile={({ file, progress, error }) => (
       <UploadingFile
         key={file.name}