story dashboard design + changing button.scss and delete small-button

oSoc18 · Jul 23, 2018 · 11f1ba3 · 11f1ba3
1 parent 71e4b9b
commit 11f1ba3
Show file tree

Hide file tree

Showing 21 changed files with 204 additions and 242 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/src/.DS_Store b/src/.DS_Store
diff --git a/src/components/ModuleEditCard/ModuleEditCard.js b/src/components/ModuleEditCard/ModuleEditCard.js
@@ -1,5 +1,7 @@
 import React from 'react';
 import './ModuleEditCard.css';
+import { Trash, Edit, ChevronUp, ChevronDown } from 'react-feather';
+import Link from '../../../node_modules/react-router-dom/Link';
 
 
 export default class ModuleEditCard extends React.Component {
@@ -14,20 +16,25 @@ export default class ModuleEditCard extends React.Component {
       orderDisabled,
       text } = this.props;
 
-    return <div className="story-module row">
+    return <div className="story-module row justify-content-between">
         <div className="col-md-8">
           <h1 className="type-title row">({order + 1}) { type }</h1>
           <div className="row">
             <p>{ text }</p>
           </div>
         </div>
-        <div className="module-button-container col-md-1">
-            <button disabled={deleteDisabled} className="module-delete row" onClick={(e) => {
-              if (window.confirm("This is IRREVERSIBLE!"))
-                onDelete(e);
-            }}>delete</button>
-            <button disabled={orderDisabled} className="module-up row" onClick={(e) => onOrderUp(e)}>Up</button>
-            <button disabled={orderDisabled} className="module-down row" onClick={(e) => onOrderDown(e)}>Down</button>
+        <div className="col-md-1">
+          <div className="module-button-container float-right">
+              <Link disabled={deleteDisabled} className="module-delete row" to="#" onClick={(e) => {
+                if (window.confirm("This is IRREVERSIBLE!"))
+                  onDelete(e);
+              }}><Trash size="20"/></Link>
+              <Link className="module-edit row" to="#"><Edit size="20" /></Link>
+              <div className="row module-up-down-container align-self-end">
+                <Link disabled={orderDisabled} className="module-up" to="#" onClick={(e) => onOrderUp(e)}><ChevronUp size="20"/></Link>
+                <Link disabled={orderDisabled} className="module-down" to="#" onClick={(e) => onOrderDown(e)}><ChevronDown size="20"/></Link>
+              </div>
+          </div>
         </div>
     </div>;
   }

diff --git a/src/components/ModuleEditCard/ModuleEditCard.scss b/src/components/ModuleEditCard/ModuleEditCard.scss
@@ -2,8 +2,7 @@
 
 .story-module{
     background: #fff;
-    box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.38);
-    padding: 10px;
+    box-shadow: 0px 3px 7px rgba(0,0,0,0.38);
     border-radius: 10px;
 }
 .story-module h1{
@@ -14,7 +13,20 @@
 }
 .story-module p{
     padding: 15px;
+    font-size: 0.9rem;
 }
-.module-button-container{
-    float: right;
+.module-button-container .row{
+    margin-bottom: 0.3rem;
+    padding-top: 0;
 }
+
+.module-delete{
+    color: $brand-red;
+}
+.module-edit{
+    color: $brand-orange
+}
+.module-up-down-container{
+    flex-direction: column;
+
+}
diff --git a/src/components/button-small/Button.js b/src/components/button-small/Button.js
diff --git a/src/components/button-small/Button.scss b/src/components/button-small/Button.scss
diff --git a/src/components/button/Button.scss b/src/components/button/Button.scss
@@ -9,15 +9,16 @@
   padding: 1.2em 2.4em;
   background-color: $primary-color;
   border-radius: 4em;
+  border: 2px solid #fff;
   color: #fff;
   transition: all $transition-timing;
   vertical-align: center;
 
   &:hover,
   &:focus {
-    color: #fff;
-    box-shadow: $box-shadow;
-    transform: translateY(-.1rem);
+    border: 2px solid $brand-blue;
+    color: $brand-blue;
+    background: #fff;
   }
 
   &--inverted {
@@ -26,16 +27,15 @@
     background-color: #fff;
     &:hover,
     &:focus {
-      color: $primary-color;
+      color: #fff;
+      background: $brand-blue;
     }
   }
 
   &:disabled {
-    background-color: #aaa;
-    cursor: not-allowed;
-    border: none;
-    box-shadow: 0 0 10px 2px rgba(#888, .8);
+      cursor: not-allowed;
     &:hover {
+
     }
   }
   &--small {

diff --git a/src/components/nav/Navlink.scss b/src/components/nav/Navlink.scss
@@ -50,13 +50,3 @@
 .navbar-toggler {
   background-color: white;
 }
-
-.nav-item {
-  .button:hover,
-  .button:focus {
-    color: #fff;
-  }
-  &:hover {
-    border: none;
-  }
-}
diff --git a/src/containers/.DS_Store b/src/containers/.DS_Store
diff --git a/src/containers/views/.DS_Store b/src/containers/views/.DS_Store
diff --git a/src/containers/views/AddStories/AddStories.js b/src/containers/views/AddStories/AddStories.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import Button from '../../../components/button/Button';
-import SmallButton from '../../../components/button-small/Button';
 import Navbar from '../../../components/nav/Navbar';
 import Footer from '../../../components/footer/Footer';
 
@@ -289,27 +288,27 @@ class AddStories extends React.Component {
                     <div className="row">Belangrijke locaties</div>
                     <div className="row">
                         <div className="col-md-4">
-                            <SmallButton type="button" className={this.state.tags.brugge ? 'activeButton': ''} onClick={(e) => this.handleTag(e)} value="brugge">Brugge</SmallButton>
+                            <Button size="small" className={this.state.tags.brugge ? 'activeButton': ''} onClick={(e) => this.handleTag(e)} value="brugge">Brugge</Button>
                         </div>
                         <div className="col-md-4">
-                            <SmallButton type="button" className={this.state.tags.ieper ? 'activeButton': ''} onClick={(e) => this.handleTag(e)} value="ieper">Ieper</SmallButton>
+                            <Button size="small" className={this.state.tags.ieper ? 'activeButton': ''} onClick={(e) => this.handleTag(e)} value="ieper">Ieper</Button>
                         </div>
                         <div className="col-md-4">
-                            <SmallButton type="button" className={this.state.tags.poperinge ? 'activeButton': ''} onClick={(e) => this.handleTag(e)} value="poperinge">Poperinge</SmallButton>
+                            <Button size="small" className={this.state.tags.poperinge ? 'activeButton': ''} onClick={(e) => this.handleTag(e)} value="poperinge">Poperinge</Button>
                         </div>
                     </div>
                     </div>
                     <div>
                     <div className="row">Categorie</div>
                     <div className="row">
                         <div className="col-md-4">
-                            <SmallButton type="button" className={this.state.tags.food ? 'activeButton': ''} onClick={(e) => this.handleTag(e)} value="food">Voedsel</SmallButton>
+                            <Button size="small" className={this.state.tags.food ? 'activeButton': ''} onClick={(e) => this.handleTag(e)} value="food">Voedsel</Button>
                         </div>
                         <div className="col-md-4">
-                            <SmallButton type="button" className={this.state.tags.sport ? 'activeButton': ''} onClick={(e) => this.handleTag(e)} value="sport">Sport</SmallButton>
+                            <Button size="small" className={this.state.tags.sport ? 'activeButton': ''} onClick={(e) => this.handleTag(e)} value="sport">Sport</Button>
                         </div>
                         <div className="col-md-4">
-                            <SmallButton type="button" className={this.state.tags.transportation ? 'activeButton': ''} onClick={(e) => this.handleTag(e)} value="transportation">Transport</SmallButton>
+                            <Button size="small" className={this.state.tags.transportation ? 'activeButton': ''} onClick={(e) => this.handleTag(e)} value="transportation">Transport</Button>
                         </div>
                     </div>
                     </div>

diff --git a/src/containers/views/Admin/CreateUser/CreateUser.js b/src/containers/views/Admin/CreateUser/CreateUser.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import Button from '../../../../components/button/Button';
-import ButtonSmall from '../../../../components/button-small/Button';
 import { Link } from 'react-router-dom';
 import { Field, reduxForm, SubmissionError, formValueSelector } from 'redux-form';
 import {

diff --git a/src/containers/views/DashboardStoryList/DashboardStoryList.js b/src/containers/views/DashboardStoryList/DashboardStoryList.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import Button from '../../../components/button-small/Button';
+import Button from '../../../components/button/Button';
 import Navbar from '../../../components/nav/Navbar';
 import Footer from '../../../components/footer/Footer';
 import Spinner from '../../../components/spinner/Spinner';
@@ -80,19 +80,22 @@ class DashboardStoryList extends React.Component {
 
                                     <div className="flex">
                                     <Button
+                                    size="small"
                                     onClick={(e) => {
                                         this.props.fetchStory(story.id)
                                         .then(() => history.push(`/dashboardstorylist/${story.id}/edit`));
                                     }}
                                     >Aanpassen</Button>
-                                    <Button onClick={(e) => {
+                                    <Button 
+                                    size="small"
+                                    onClick={(e) => {
                                         if (window.confirm('Are you sure you wish to delete this item?')) deleteSt(story) } }>
                                     Verwijder
                                     </Button>
                                     </div>
 
                                     <div className="flex">
-                                    <Button onClick={(e) => this.handleVisibility(e)}>Maak onzichtbaar</Button>
+                                    <Button size="small" onClick={(e) => this.handleVisibility(e)}>Maak onzichtbaar</Button>
                                     </div>
 
                                 </div>

diff --git a/src/containers/views/EditStory/EditStory.js b/src/containers/views/EditStory/EditStory.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import Button from '../../../components/button/Button';
-import SmallButton from '../../../components/button-small/Button';
 import Navbar from '../../../components/nav/Navbar';
 import Footer from '../../../components/footer/Footer';
 import Spinner from '../../../components/spinner/Spinner';
@@ -261,17 +260,17 @@ class EditStory extends React.Component {
                         <div>
                         <span>Belangrijke locaties</span>
 
-                        <SmallButton type="button" className={this.state.tags.brugge ? 'activeButton': ''} onClick={(e) => this.handleTag(e)} value="brugge">Brugge</SmallButton>
-                        <SmallButton type="button" className={this.state.tags.ieper ? 'activeButton': ''} onClick={(e) => this.handleTag(e)} value="ieper">Ieper</SmallButton>
-                        <SmallButton type="button" className={this.state.tags.poperinge ? 'activeButton': ''} onClick={(e) => this.handleTag(e)} value="poperinge">Poperinge</SmallButton>
+                        <Button size="small" className={this.state.tags.brugge ? 'activeButton': ''} onClick={(e) => this.handleTag(e)} value="brugge">Brugge</Button>
+                        <Button size="small" className={this.state.tags.ieper ? 'activeButton': ''} onClick={(e) => this.handleTag(e)} value="ieper">Ieper</Button>
+                        <Button size="small" className={this.state.tags.poperinge ? 'activeButton': ''} onClick={(e) => this.handleTag(e)} value="poperinge">Poperinge</Button>
 
                         </div>
                         <div>
                         <span>Categorie</span>
 
-                        <SmallButton type="button" className={this.state.tags.food ? 'activeButton': ''} onClick={(e) => this.handleTag(e)} value="food">Voedsel</SmallButton>
-                        <SmallButton type="button" className={this.state.tags.sport ? 'activeButton': ''} onClick={(e) => this.handleTag(e)} value="sport">Sport</SmallButton>
-                        <SmallButton type="button" className={this.state.tags.transportation ? 'activeButton': ''} onClick={(e) => this.handleTag(e)} value="transportation">Transport</SmallButton>
+                        <Button size="small" className={this.state.tags.food ? 'activeButton': ''} onClick={(e) => this.handleTag(e)} value="food">Voedsel</Button>
+                        <Button size="small" className={this.state.tags.sport ? 'activeButton': ''} onClick={(e) => this.handleTag(e)} value="sport">Sport</Button>
+                        <Button size="small" className={this.state.tags.transportation ? 'activeButton': ''} onClick={(e) => this.handleTag(e)} value="transportation">Transport</Button>
 
                         </div>
 

diff --git a/src/containers/views/Login/Login.js b/src/containers/views/Login/Login.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import Button from '../../../components/button/Button';
-import SmallButton from '../../../components/button-small/Button';
 import { firebaseAuth, googleAuthProvider } from '../../../helpers/firebase';
 import { Field, reduxForm, SubmissionError } from 'redux-form';
 import { Link } from 'react-router-dom';
@@ -56,6 +55,7 @@ const Login = ({ pristine, submitting, handleSubmit, error, showToast }) => {
                     className="submit_button"
                     type="submit"
                     disabled={pristine || submitting}
+                    size="small"
                   >
                     Login
                   </Button>

diff --git a/src/containers/views/Register/Register.scss b/src/containers/views/Register/Register.scss
@@ -1,8 +1,6 @@
 @import '../../../variables.scss';
 body{
 background-image: url('../bg.svg');
-  background-repeat: no-repeat;
-  background-size: cover;
   background-position: center;}
 .register-title {
   color: #3274ff;