reorganize scss to better us the bootstrap imports
authorymh <ymh.work@gmail.com>
Tue, 04 Dec 2018 18:17:56 +0100
changeset 191 3f71ad81a5a9
parent 190 01ad654237d5
child 192 e4c2c1919c20
reorganize scss to better us the bootstrap imports
client/src/App.js
client/src/App.scss
client/src/components/CreateGroup.js
client/src/components/CreateGroup.scss
client/src/components/CreateSession.js
client/src/components/CreateSession.scss
client/src/components/Login.js
client/src/components/Login.scss
client/src/components/Navbar.js
client/src/components/Navbar.scss
client/src/components/Note.js
client/src/components/Note.scss
client/src/components/NoteInput.js
client/src/components/NoteInput.scss
client/src/components/NoteList.scss
client/src/components/NotesList.js
client/src/components/ProtocolSummary.js
client/src/components/ProtocolSummary.scss
client/src/components/Register.js
client/src/components/Register.scss
client/src/components/Session.js
client/src/components/Session.scss
client/src/components/SessionForm.js
client/src/components/SessionForm.scss
client/src/components/SessionList.js
client/src/components/SessionList.scss
client/src/components/SessionSummary.js
client/src/components/SessionSummary.scss
client/src/components/Settings.js
client/src/components/Settings.scss
client/src/components/SlateEditor/SlateEditor.scss
client/src/components/SlateEditor/index.js
client/src/index.scss
client/src/scss/_App.scss
client/src/scss/_components.scss
client/src/scss/_custom.scss
client/src/scss/components/_CreateGroup.scss
client/src/scss/components/_CreateSession.scss
client/src/scss/components/_Login.scss
client/src/scss/components/_Navbar.scss
client/src/scss/components/_Note.scss
client/src/scss/components/_NoteInput.scss
client/src/scss/components/_NoteList.scss
client/src/scss/components/_ProtocolSummary.scss
client/src/scss/components/_Register.scss
client/src/scss/components/_Session.scss
client/src/scss/components/_SessionForm.scss
client/src/scss/components/_SessionList.scss
client/src/scss/components/_SessionSummary.scss
client/src/scss/components/_Settings.scss
client/src/scss/components/_SlateEditor.scss
--- a/client/src/App.js	Mon Dec 03 17:53:37 2018 +0100
+++ b/client/src/App.js	Tue Dec 04 18:17:56 2018 +0100
@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
 
 // import logo from './logo.svg';
-import './App.css';
 import Navbar from './components/Navbar';
 
 class App extends Component {
--- a/client/src/App.scss	Mon Dec 03 17:53:37 2018 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,9 +0,0 @@
-span.annotation {
-    background-color: yellow;
-    text-decoration-line: underline;
-    text-decoration-style: dotted;
-}
-
-a {
-    cursor: pointer;
-}
--- a/client/src/components/CreateGroup.js	Mon Dec 03 17:53:37 2018 +0100
+++ b/client/src/components/CreateGroup.js	Tue Dec 04 18:17:56 2018 +0100
@@ -2,11 +2,9 @@
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { Trans } from 'react-i18next';
-import '../App.css';
 import Navbar from './Navbar';
 import * as authActions from '../actions/authActions';
 import { getOnline, getCreateGroup } from '../selectors/authSelectors';
-import './CreateGroup.css';
 
 class CreateGroup extends Component {
 
--- a/client/src/components/CreateGroup.scss	Mon Dec 03 17:53:37 2018 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,7 +0,0 @@
-div.card-header.bg-primary.w-50 {
-    border-radius: 0% 0% 3% 3%;
-}
-
-#session-button:hover{
-    font-weight: bolder;
-}
--- a/client/src/components/CreateSession.js	Mon Dec 03 17:53:37 2018 +0100
+++ b/client/src/components/CreateSession.js	Tue Dec 04 18:17:56 2018 +0100
@@ -3,8 +3,6 @@
 import PropTypes from 'prop-types';
 import uuidV1 from 'uuid/v1';
 import { withNamespaces } from 'react-i18next';
-import '../App.css';
-import './CreateSession.css';
 
 class CreateSession extends Component {
 
--- a/client/src/components/CreateSession.scss	Mon Dec 03 17:53:37 2018 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,18 +0,0 @@
-.bg-primary {
-    border-radius: 3%;
-}
-
-.material-icons.protocol-toggle {
-    font-size: 1rem;
-    cursor: pointer;
-}
-
-.protocol {
-    max-height: 150px;
-    overflow-x: auto;
-    overflow-y: auto;
-}
-
-.new-session-link {
-    font-size: 1.4rem;
-}
--- a/client/src/components/Login.js	Mon Dec 03 17:53:37 2018 +0100
+++ b/client/src/components/Login.js	Tue Dec 04 18:17:56 2018 +0100
@@ -3,9 +3,6 @@
 import { bindActionCreators } from 'redux';
 import { Trans } from 'react-i18next';
 
-import '../App.css';
-import './Login.css';
-// import Navbar from './Navbar';
 import * as authActions from '../actions/authActions';
 import { getLoginErrorMessages } from '../selectors/authSelectors';
 import * as R from 'ramda';
--- a/client/src/components/Login.scss	Mon Dec 03 17:53:37 2018 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,8 +0,0 @@
-label.col-form-label.text-primary {
-    font-size: 16px;
-}
-
-button.btn.btn-primary {
-    font-size: 	18px;
-
-}
--- a/client/src/components/Navbar.js	Mon Dec 03 17:53:37 2018 +0100
+++ b/client/src/components/Navbar.js	Tue Dec 04 18:17:56 2018 +0100
@@ -1,5 +1,3 @@
-import '../index.css';
-import './Navbar.css';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
--- a/client/src/components/Navbar.scss	Mon Dec 03 17:53:37 2018 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,104 +0,0 @@
-.offline-message {
-    font-size: .9rem;
-}
-
-.sync-button {
-    cursor: pointer;
-}
-
-.sync-button-synchronizing {
-    color: lightgreen;
-}
-
-.sync-button-not-synchronized {
-    color: orange;
-}
-
-.username#navbarDropdown {
-    font-size: 1.4rem;
-}
-
-.nav-link {
-    font-size: 1.2rem;
-}
-
-.dropdown-toggle{
-    cursor: pointer;
-}
-
-.dropdown-item {
-    font-size: 1.1rem;
-    cursor: pointer;
-}
-
-#group-menu-scroll-down {
-    height: auto;
-    max-height: 800%;
-    overflow-y: scroll;
-}
-
-.create-group {
-    font-size: .9rem;
-}
-
-.nav-link .dropdown-toggle .username .font-weight-bold {
-    font-size: 1.1rem;
-}
-
-#logout-modal{
-    -webkit-animation: fadein 0.5s; /* Safari, Chrome and Opera > 12.1 */
-       -moz-animation: fadein 0.5s; /* Firefox < 16 */
-        -ms-animation: fadein 0.5s; /* Internet Explorer */
-         -o-animation: fadein 0.5s; /* Opera < 12.1 */
-            animation: fadein 0.5s;
-}
-
-@keyframes fadein {
-    from { opacity: 0; }
-    to   { opacity: 1; }
-}
-
-/* Firefox < 16 */
-@-moz-keyframes fadein {
-    from { opacity: 0; }
-    to   { opacity: 1; }
-}
-
-/* Safari, Chrome and Opera > 12.1 */
-@-webkit-keyframes fadein {
-    from { opacity: 0; }
-    to   { opacity: 1; }
-}
-
-/* Internet Explorer */
-@-ms-keyframes fadein {
-    from { opacity: 0; }
-    to   { opacity: 1; }
-}
-
-/* Opera < 12.1 */
-@-o-keyframes fadein {
-    from { opacity: 0; }
-    to   { opacity: 1; }
-}
-
-#logout-close-modal-button{
-    background-color: transparent;
-    border: transparent;
-    color: rgba(#769FED, .4);
-    cursor: pointer;
-}
-
-#logout-close-modal-button:hover{
-    background-color: transparent;
-    border: transparent;
-    color:black;
-}
-
-.modal-warning{
-    font-size: 4rem;
-}
-
-#logout-modal-button {
-    font-size: .9rem;
-}
--- a/client/src/components/Note.js	Mon Dec 03 17:53:37 2018 +0100
+++ b/client/src/components/Note.js	Tue Dec 04 18:17:56 2018 +0100
@@ -2,7 +2,6 @@
 import PropTypes from 'prop-types';
 import { formatTimestamp } from '../utils';
 import SlateEditor from './SlateEditor';
-import './Note.css';
 
 class Note extends Component {
 
--- a/client/src/components/Note.scss	Mon Dec 03 17:53:37 2018 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,61 +0,0 @@
-@import 'bootstrap/scss/functions';
-@import 'bootstrap/scss/variables';
-
-.note {
-    min-width: 95%;
-    display: flex;
-    position: relative;
-    white-space: pre-wrap;
-    overflow-wrap: break-word;
-    cursor: pointer;
-    min-height: ($line-height-base * 4);
-
-    &:before {
-        content: "";
-
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        z-index: -1;
-        display: block;
-        width: 2px;
-    }
-
-    &:hover {
-        color: darkgray;
-        border-bottom-color: black;
-    }
-
-    &:hover .delete-icon {
-        opacity: 1;
-        color: black;
-    }
-
-    .start, .finish {
-        position: absolute;
-        padding-right: 5rem;
-        font-size: .72rem;
-    }
-
-    .start {
-        top: 0;
-        left: 0;
-    }
-    .finish {
-        bottom: 0;
-        left: 0;
-    }
-
-    &-content {
-        min-width: 95%;
-        font-size: .8rem;
-
-        white-space: pre-wrap;
-        overflow-wrap: break-word;
-    }
-}
-
-.delete-icon {
-    font-size: 1.2rem;
-    opacity: 0;
-}
--- a/client/src/components/NoteInput.js	Mon Dec 03 17:53:37 2018 +0100
+++ b/client/src/components/NoteInput.js	Tue Dec 04 18:17:56 2018 +0100
@@ -2,7 +2,6 @@
 import PropTypes from 'prop-types';
 import SlateEditor from './SlateEditor';
 import { now } from '../utils';
-import './NoteInput.css';
 
 class NoteInput extends Component {
 
--- a/client/src/components/NoteInput.scss	Mon Dec 03 17:53:37 2018 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,26 +0,0 @@
-@import 'bootstrap/scss/functions';
-@import 'bootstrap/scss/variables';
-
-.editor {
-    display: flex;
-    &-left {
-        border: .125rem solid;
-        // border-color: transparent;
-        border-color: #769FED;
-        border-radius: .5rem;
-        max-height: 8.5rem;
-        height: 8.5rem;
-        width: 97%;
-        overflow-y: auto;
-    }
-    // &-left:hover {
-    //     border-color: #769FED;
-    // }
-
-    // &-right {
-    //     white-space: pre-wrap;
-    //     overflow-wrap: break-word;
-    //     .form-control {
-    //     min-width: 25%;
-    //   }
-}
--- a/client/src/components/NoteList.scss	Mon Dec 03 17:53:37 2018 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,57 +0,0 @@
-#delete-note-modal{
-    -webkit-animation: fadein 0.5s; /* Safari, Chrome and Opera > 12.1 */
-       -moz-animation: fadein 0.5s; /* Firefox < 16 */
-        -ms-animation: fadein 0.5s; /* Internet Explorer */
-         -o-animation: fadein 0.5s; /* Opera < 12.1 */
-            animation: fadein 0.5s;
-}
-
-@keyframes fadein {
-    from { opacity: 0; }
-    to   { opacity: 1; }
-}
-
-/* Firefox < 16 */
-@-moz-keyframes fadein {
-    from { opacity: 0; }
-    to   { opacity: 1; }
-}
-
-/* Safari, Chrome and Opera > 12.1 */
-@-webkit-keyframes fadein {
-    from { opacity: 0; }
-    to   { opacity: 1; }
-}
-
-/* Internet Explorer */
-@-ms-keyframes fadein {
-    from { opacity: 0; }
-    to   { opacity: 1; }
-}
-
-/* Opera < 12.1 */
-@-o-keyframes fadein {
-    from { opacity: 0; }
-    to   { opacity: 1; }
-}
-
-#delete-note-close-modal-button{
-    background-color: transparent;
-    border: transparent;
-    color: rgba(#769FED, .4);
-    cursor: pointer;
-}
-
-#delete-note-close-modal-button:hover {
-    background-color: transparent;
-    border: transparent;
-    color:black;
-}
-
-.modal-text{
-    font-size: .9rem;
-}
-
-#delete-note-modal-button {
-    font-size: .8rem;
-}
--- a/client/src/components/NotesList.js	Mon Dec 03 17:53:37 2018 +0100
+++ b/client/src/components/NotesList.js	Tue Dec 04 18:17:56 2018 +0100
@@ -2,7 +2,6 @@
 import PropTypes from 'prop-types';
 import Modal  from 'react-modal';
 import Note from './Note';
-import './NoteList.css';
 import { Trans } from 'react-i18next';
 
 class NotesList extends Component {
--- a/client/src/components/ProtocolSummary.js	Mon Dec 03 17:53:37 2018 +0100
+++ b/client/src/components/ProtocolSummary.js	Tue Dec 04 18:17:56 2018 +0100
@@ -1,6 +1,4 @@
 import React from 'react';
-import './ProtocolSummary.css'
-
 
 export default ({ annotationCategories }) => (
   <div className="protocol-summary">
--- a/client/src/components/ProtocolSummary.scss	Mon Dec 03 17:53:37 2018 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,6 +0,0 @@
-.protocol-summary {
-    overflow-x: hidden;
-    overflow-y: auto;
-    padding: 0.75rem 1.25rem;
-
-}
--- a/client/src/components/Register.js	Mon Dec 03 17:53:37 2018 +0100
+++ b/client/src/components/Register.js	Tue Dec 04 18:17:56 2018 +0100
@@ -1,9 +1,6 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import '../App.css';
-import './Register.css';
-// import Navbar from './Navbar';
 import * as authActions from '../actions/authActions';
 
 class Register extends Component {
--- a/client/src/components/Register.scss	Mon Dec 03 17:53:37 2018 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,8 +0,0 @@
-label.col-form-label.text-primary {
-    font-size: 16px;
-}
-
-button.btn.btn-primary {
-    font-size: 	18px;
-}
-
--- a/client/src/components/Session.js	Mon Dec 03 17:53:37 2018 +0100
+++ b/client/src/components/Session.js	Tue Dec 04 18:17:56 2018 +0100
@@ -2,8 +2,6 @@
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { Trans } from 'react-i18next';
-import '../App.css';
-import './Session.css';
 import Navbar from './Navbar';
 import NoteInput from './NoteInput';
 import NotesList from './NotesList';
--- a/client/src/components/Session.scss	Mon Dec 03 17:53:37 2018 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,45 +0,0 @@
-@import 'bootstrap/scss/functions';
-@import 'bootstrap/scss/variables';
-
-.session-container {
-position: absolute;
-top: 4rem;
-bottom: 0;
-left: 0;
-right: 0;
-display: flex;
-flex-direction: column;
-// justify-content: flex-end;
-justify-content: flex;
-overflow-y: hidden;
-    .session-notes {
-        overflow-y: hidden;
-        width: 100%;
-        display: flex;
-        flex: 1;
-        > * {
-            padding-left: ($grid-gutter-width / 2);
-            padding-right: ($grid-gutter-width / 2);
-        }
-        .notes-affix {
-            min-width: 17%;
-            max-width: 17%;
-            display: flex;
-            flex-direction: column;
-            // > *:first-child {
-            //     max-height: calc(100%);
-            //     overflow-y: auto;
-            // }
-        }
-        .notes-affix-summary {
-            display: flex;
-            flex-direction: column;
-            overflow: hidden;
-        }
-        .notes-list {
-            width: 100%;
-            overflow-y: auto;
-            overflow-x: hidden;
-        }
-    }
-}
--- a/client/src/components/SessionForm.js	Mon Dec 03 17:53:37 2018 +0100
+++ b/client/src/components/SessionForm.js	Tue Dec 04 18:17:56 2018 +0100
@@ -1,11 +1,9 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import '../App.css';
 import * as sessionsActions from '../actions/sessionsActions';
 import * as authActions from '../actions/authActions';
 import _ from 'lodash';
-import './SessionForm.css';
 
 class SessionForm extends Component {
 
@@ -121,7 +119,7 @@
         onClick={this.toggleOnTitleEditMode}
         className='session-page-title border-0 bg-irinotes-headers text-muted ml-3'
       >
-        { this.props.currentSession.title || 'Espace titre' }
+        { this.props.currentSession.title || <span className='session-placeholder'>Espace titre</span> }
       </div>
     );
     }
@@ -129,16 +127,15 @@
     if (this.state.titleEditMode === true) {
     return (
     <div className="form-group pr-5">
-      <textarea className='session-page-title form-control border-primary bg-secondary text-muted ml-3'
+      <textarea className='session-page-title form-control border-primary bg-secondary text-muted ml-3  session-placeholder'
         onKeyDown={ this.saveEdit }
         onChange={ this.onChange }
         type="textarea"
         name="title"
-        defaultValue={ this.props.currentSession.title || 'Espace titre' }
+        defaultValue={ this.props.currentSession.title }
         placeholder="Espace titre"
         ref={title => this.title = title}
-      >
-      </textarea>
+      ></textarea>
     </div>
     );
     }
@@ -152,7 +149,7 @@
       onClick={this.toggleOnDescriptionEditMode}
       className="session-page-description border-0 bg-irinotes-headers text-muted ml-3"
     >
-      { this.props.currentSession.description || 'Espace description' }
+      { this.props.currentSession.description || <span className='session-placeholder'>Espace description</span> }
     </div>
   );
   }
@@ -160,17 +157,16 @@
   if (this.state.descriptionEditMode === true) {
   return (
     <div className="form-group mt-2 pb-2">
-    <textarea className="session-page-description form-control border-primary bg-secondary text-muted ml-3"
-      onKeyDown={ this.saveEdit }
-      onChange={ this.onChange }
-      type="textarea"
-      name="description"
-      defaultValue={ this.props.currentSession.description || 'Espace description' }
-      placeholder="Espace description"
-      ref={desc => this.desc = desc}
-    >
-    </textarea>
-  </div>
+      <textarea className="session-page-description form-control border-primary bg-secondary text-muted ml-3 session-placeholder"
+        onKeyDown={ this.saveEdit }
+        onChange={ this.onChange }
+        type="textarea"
+        name="description"
+        defaultValue={ this.props.currentSession.description }
+        placeholder="Espace description"
+        ref={desc => this.desc = desc}
+      ></textarea>
+    </div>
   );
   }
 }
--- a/client/src/components/SessionForm.scss	Mon Dec 03 17:53:37 2018 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,34 +0,0 @@
-.material-icons.protocol-toggle {
-    font-size: 1rem;
-    cursor: pointer;
-}
-
-.session {
-
-    &-page-panel {
-        z-index: 5;
-    }
-
-    &-page-title{
-        font-size: 1.8rem;
-        resize: auto;
-        font-weight: bolder;
-        overflow: hidden;
-        height: auto;
-        transition: height 0.2s ease;
-        box-sizing: border-box;
-        line-height: 1.1;
-    }
-
-    &-page-description{
-        font-size: .9rem;
-        resize: auto;
-        overflow: hidden;
-        height: auto;
-        transition: height 0.2s ease;
-        box-sizing: border-box;
-    }
-}
-
-
-
--- a/client/src/components/SessionList.js	Mon Dec 03 17:53:37 2018 +0100
+++ b/client/src/components/SessionList.js	Tue Dec 04 18:17:56 2018 +0100
@@ -4,8 +4,6 @@
 import { Trans } from 'react-i18next';
 import Modal from 'react-modal';
 import moment from 'moment';
-import '../App.css';
-import './SessionList.css';
 import Navbar from './Navbar';
 import * as sessionsActions from '../actions/sessionsActions';
 import { getActiveSessions } from '../selectors/coreSelectors';
--- a/client/src/components/SessionList.scss	Mon Dec 03 17:53:37 2018 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,134 +0,0 @@
-
-.session-count {
-    font-size: 2rem;
-    z-index: -1;
-}
-
-.sessions{
-    cursor: pointer;
-}
-
-#delete {
-    // opacity: 0;
-    // display: none;
-    -webkit-transition: .5s all;
-    -webkit-transition-delay: 5s;
-    -moz-transition: .5s all;
-    -moz-transition-delay: 5s;
-    -ms-transition: .5s all;
-    -ms-transition-delay: 5s;
-    -o-transition: .5s all;
-    -o-transition-delay: 5s;
-    transition: .5s all;
-    transition-delay: 5s;
-
-    &:hover {
-        // opacity: 1;
-        display: inline-block;
-        -webkit-transition-delay: 0s;
-        -moz-transition-delay: 0s;
-        -ms-transition-delay: 0s;
-        -o-transition-delay: 0s;
-        transition-delay: 0s;
-    }
-}
-
-.sessions:hover ~ #delete {
-    // opacity: 1;
-    display: inline-block;
-    -webkit-transition-delay: 0s;
-    -moz-transition-delay: 0s;
-    -ms-transition-delay: 0s;
-    -o-transition-delay: 0s;
-    transition-delay: 0s;
-}
-
-.sessions:hover {
-    opacity: .7;
-}
-
-
-span.session {
-
-    &-title {
-    font-size: 1.3rem;
-    white-space: pre-wrap;
-    overflow-wrap: break-word;
-    }
-
-    &-date {
-        font-size: .9rem;
-    }
-
-    &-description {
-        font-size: .9rem;
-        white-space: pre-wrap;
-        overflow-wrap: break-word;
-    }
-}
-
-.delete{
-    font-size: 1rem;
-}
-
-#delete-session-modal{
-    -webkit-animation: fadein 0.5s; /* Safari, Chrome and Opera > 12.1 */
-       -moz-animation: fadein 0.5s; /* Firefox < 16 */
-        -ms-animation: fadein 0.5s; /* Internet Explorer */
-         -o-animation: fadein 0.5s; /* Opera < 12.1 */
-            animation: fadein 0.5s;
-}
-
-@keyframes fadein {
-    from { opacity: 0; }
-    to   { opacity: 1; }
-}
-
-/* Firefox < 16 */
-@-moz-keyframes fadein {
-    from { opacity: 0; }
-    to   { opacity: 1; }
-}
-
-/* Safari, Chrome and Opera > 12.1 */
-@-webkit-keyframes fadein {
-    from { opacity: 0; }
-    to   { opacity: 1; }
-}
-
-/* Internet Explorer */
-@-ms-keyframes fadein {
-    from { opacity: 0; }
-    to   { opacity: 1; }
-}
-
-/* Opera < 12.1 */
-@-o-keyframes fadein {
-    from { opacity: 0; }
-    to   { opacity: 1; }
-}
-
-#delete-session {
-
-    &-modal-button {
-        font-size: .9rem;
-    }
-
-    &-close-modal-button {
-        background-color: transparent;
-        border: transparent;
-        color: rgba(#769FED, .4);
-        cursor: pointer;
-    }
-
-    &-close-modal-button:hover {
-        background-color: transparent;
-        border: transparent;
-        color:black;
-    }
-}
-
-.modal-text {
-    font-size: 1rem;
-}
-
--- a/client/src/components/SessionSummary.js	Mon Dec 03 17:53:37 2018 +0100
+++ b/client/src/components/SessionSummary.js	Tue Dec 04 18:17:56 2018 +0100
@@ -1,8 +1,6 @@
 import React from 'react';
 import _ from 'lodash';
 import Color from 'color';
-import '../App.css';
-import './SessionSummary.css'
 import {formatTimestamp} from '../utils';
 
 const SessionSummary = ({notes}) => (
--- a/client/src/components/SessionSummary.scss	Mon Dec 03 17:53:37 2018 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,13 +0,0 @@
-.session-summary-list {
-    overflow-y: auto;
-    .note {
-        &-length {
-        color: black;
-        font-size: .6rem;
-        }
-        &-time {
-            font-size: .7rem;
-        }
-    }
-}
-
--- a/client/src/components/Settings.js	Mon Dec 03 17:53:37 2018 +0100
+++ b/client/src/components/Settings.js	Tue Dec 04 18:17:56 2018 +0100
@@ -1,10 +1,8 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import '../App.css';
 import Navbar from './Navbar';
 import * as userActions from '../actions/userActions';
-import './Settings.css';
 import { getCurrentUser } from '../selectors/authSelectors';
 
 class Settings extends Component {
--- a/client/src/components/Settings.scss	Mon Dec 03 17:53:37 2018 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,7 +0,0 @@
-label.col-form-label.text-primary {
-    font-size: 16px;
-}
-
-button.btn.btn-primary {
-    font-size: 	18px;
-}
--- a/client/src/components/SlateEditor/SlateEditor.scss	Mon Dec 03 17:53:37 2018 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,58 +0,0 @@
-@import 'bootstrap/scss/functions';
-@import 'bootstrap/scss/variables';
-
-.toolbar-menu {
-      align-items: center;
-  .button {
-    cursor: pointer;
-  }
-  .material-icons {
-    font-size: 1.3rem;
-  }
-//   .button[data-active="true"] {
-//   }
-  > *:last-child {
-    margin-left: auto;
-    // .checkbox {
-    //     display: inline-block;
-    //     margin-right: 10px;
-    // }
-  }
-}
-
-#btn-editor {
-    padding: .1rem .2rem .1rem .2rem;
-    font-size: .8rem;
-  }
-
-.hovering-menu {
-    position: absolute;
-    z-index: 1;
-    top: -10000px;
-    left: -10000px;
-    margin-top: -20px;
-    opacity: 0;
-    transition: opacity .75s;
-}
-
-.categories-tooltip {
-    background-color: #efefef;
-    border-radius: 4px;
-    border: 1px solid #ccc;
-    padding: 5px;
-    .buttons {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: space-between;
-        button {
-            background-color: yellow;
-            border: 1px solid #ccc;
-        }
-        button:not(:last-child) {
-            margin-right: 10px;
-        }
-    }
-    .form-group:last-child {
-        margin-bottom: 0;
-    }
-}
--- a/client/src/components/SlateEditor/index.js	Mon Dec 03 17:53:37 2018 +0100
+++ b/client/src/components/SlateEditor/index.js	Tue Dec 04 18:17:56 2018 +0100
@@ -6,7 +6,6 @@
 import { connect } from 'react-redux';
 import * as R from 'ramda';
 import HtmlSerializer from './HtmlSerializer';
-import './SlateEditor.css';
 import { now } from '../../utils';
 import Toolbar from './Toolbar';
 import { getAutoSubmit } from '../../selectors/authSelectors';
--- a/client/src/index.scss	Mon Dec 03 17:53:37 2018 +0100
+++ b/client/src/index.scss	Tue Dec 04 18:17:56 2018 +0100
@@ -1,2 +1,3 @@
 @import './scss/fonts';
 @import './scss/custom';
+@import "./scss/components";
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/scss/_App.scss	Tue Dec 04 18:17:56 2018 +0100
@@ -0,0 +1,9 @@
+span.annotation {
+    background-color: yellow;
+    text-decoration-line: underline;
+    text-decoration-style: dotted;
+}
+
+a {
+    cursor: pointer;
+}
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/scss/_components.scss	Tue Dec 04 18:17:56 2018 +0100
@@ -0,0 +1,17 @@
+@import "./components/SessionForm";
+@import "./components/Navbar";
+@import "./components/CreateGroup";
+@import "./components/SessionSummary";
+@import "./components/NoteList";
+@import "./components/ProtocolSummary";
+@import "./components/Login";
+@import "./components/Register";
+@import "./components/CreateSession";
+@import "./components/Note";
+@import "./components/SlateEditor";
+@import "./components/NoteInput";
+@import "./components/SessionList";
+@import "./components/Session";
+@import "./components/Settings";
+
+@import "./App";
--- a/client/src/scss/_custom.scss	Mon Dec 03 17:53:37 2018 +0100
+++ b/client/src/scss/_custom.scss	Tue Dec 04 18:17:56 2018 +0100
@@ -51,7 +51,6 @@
 
 $form-group-margin-bottom: .2rem;
 
-
 @import "bootstrap/scss/bootstrap";
 
 .text-irinotes-time {
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/scss/components/_CreateGroup.scss	Tue Dec 04 18:17:56 2018 +0100
@@ -0,0 +1,7 @@
+div.card-header.bg-primary.w-50 {
+    border-radius: 0% 0% 3% 3%;
+}
+
+#session-button:hover{
+    font-weight: bolder;
+}
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/scss/components/_CreateSession.scss	Tue Dec 04 18:17:56 2018 +0100
@@ -0,0 +1,18 @@
+.bg-primary {
+    border-radius: 3%;
+}
+
+.material-icons.protocol-toggle {
+    font-size: 1rem;
+    cursor: pointer;
+}
+
+.protocol {
+    max-height: 150px;
+    overflow-x: auto;
+    overflow-y: auto;
+}
+
+.new-session-link {
+    font-size: 1.4rem;
+}
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/scss/components/_Login.scss	Tue Dec 04 18:17:56 2018 +0100
@@ -0,0 +1,8 @@
+label.col-form-label.text-primary {
+    font-size: 16px;
+}
+
+button.btn.btn-primary {
+    font-size: 	18px;
+
+}
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/scss/components/_Navbar.scss	Tue Dec 04 18:17:56 2018 +0100
@@ -0,0 +1,104 @@
+.offline-message {
+    font-size: .9rem;
+}
+
+.sync-button {
+    cursor: pointer;
+}
+
+.sync-button-synchronizing {
+    color: lightgreen;
+}
+
+.sync-button-not-synchronized {
+    color: orange;
+}
+
+.username#navbarDropdown {
+    font-size: 1.4rem;
+}
+
+.nav-link {
+    font-size: 1.2rem;
+}
+
+.dropdown-toggle{
+    cursor: pointer;
+}
+
+.dropdown-item {
+    font-size: 1.1rem;
+    cursor: pointer;
+}
+
+#group-menu-scroll-down {
+    height: auto;
+    max-height: 800%;
+    overflow-y: scroll;
+}
+
+.create-group {
+    font-size: .9rem;
+}
+
+.nav-link .dropdown-toggle .username .font-weight-bold {
+    font-size: 1.1rem;
+}
+
+#logout-modal{
+    -webkit-animation: fadein 0.5s; /* Safari, Chrome and Opera > 12.1 */
+       -moz-animation: fadein 0.5s; /* Firefox < 16 */
+        -ms-animation: fadein 0.5s; /* Internet Explorer */
+         -o-animation: fadein 0.5s; /* Opera < 12.1 */
+            animation: fadein 0.5s;
+}
+
+@keyframes fadein {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+}
+
+/* Firefox < 16 */
+@-moz-keyframes fadein {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+}
+
+/* Safari, Chrome and Opera > 12.1 */
+@-webkit-keyframes fadein {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+}
+
+/* Internet Explorer */
+@-ms-keyframes fadein {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+}
+
+/* Opera < 12.1 */
+@-o-keyframes fadein {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+}
+
+#logout-close-modal-button{
+    background-color: transparent;
+    border: transparent;
+    color: rgba(#769FED, .4);
+    cursor: pointer;
+}
+
+#logout-close-modal-button:hover{
+    background-color: transparent;
+    border: transparent;
+    color:black;
+}
+
+.modal-warning{
+    font-size: 4rem;
+}
+
+#logout-modal-button {
+    font-size: .9rem;
+}
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/scss/components/_Note.scss	Tue Dec 04 18:17:56 2018 +0100
@@ -0,0 +1,61 @@
+@import 'bootstrap/scss/functions';
+@import 'bootstrap/scss/variables';
+
+.note {
+    min-width: 95%;
+    display: flex;
+    position: relative;
+    white-space: pre-wrap;
+    overflow-wrap: break-word;
+    cursor: pointer;
+    min-height: ($line-height-base * 4);
+
+    &:before {
+        content: "";
+
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        z-index: -1;
+        display: block;
+        width: 2px;
+    }
+
+    &:hover {
+        color: darkgray;
+        border-bottom-color: black;
+    }
+
+    &:hover .delete-icon {
+        opacity: 1;
+        color: black;
+    }
+
+    .start, .finish {
+        position: absolute;
+        padding-right: 5rem;
+        font-size: .72rem;
+    }
+
+    .start {
+        top: 0;
+        left: 0;
+    }
+    .finish {
+        bottom: 0;
+        left: 0;
+    }
+
+    &-content {
+        min-width: 95%;
+        font-size: .8rem;
+
+        white-space: pre-wrap;
+        overflow-wrap: break-word;
+    }
+}
+
+.delete-icon {
+    font-size: 1.2rem;
+    opacity: 0;
+}
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/scss/components/_NoteInput.scss	Tue Dec 04 18:17:56 2018 +0100
@@ -0,0 +1,26 @@
+@import 'bootstrap/scss/functions';
+@import 'bootstrap/scss/variables';
+
+.editor {
+    display: flex;
+    &-left {
+        border: .125rem solid;
+        // border-color: transparent;
+        border-color: #769FED;
+        border-radius: .5rem;
+        max-height: 8.5rem;
+        height: 8.5rem;
+        width: 97%;
+        overflow-y: auto;
+    }
+    // &-left:hover {
+    //     border-color: #769FED;
+    // }
+
+    // &-right {
+    //     white-space: pre-wrap;
+    //     overflow-wrap: break-word;
+    //     .form-control {
+    //     min-width: 25%;
+    //   }
+}
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/scss/components/_NoteList.scss	Tue Dec 04 18:17:56 2018 +0100
@@ -0,0 +1,57 @@
+#delete-note-modal{
+    -webkit-animation: fadein 0.5s; /* Safari, Chrome and Opera > 12.1 */
+       -moz-animation: fadein 0.5s; /* Firefox < 16 */
+        -ms-animation: fadein 0.5s; /* Internet Explorer */
+         -o-animation: fadein 0.5s; /* Opera < 12.1 */
+            animation: fadein 0.5s;
+}
+
+@keyframes fadein {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+}
+
+/* Firefox < 16 */
+@-moz-keyframes fadein {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+}
+
+/* Safari, Chrome and Opera > 12.1 */
+@-webkit-keyframes fadein {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+}
+
+/* Internet Explorer */
+@-ms-keyframes fadein {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+}
+
+/* Opera < 12.1 */
+@-o-keyframes fadein {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+}
+
+#delete-note-close-modal-button{
+    background-color: transparent;
+    border: transparent;
+    color: rgba(#769FED, .4);
+    cursor: pointer;
+}
+
+#delete-note-close-modal-button:hover {
+    background-color: transparent;
+    border: transparent;
+    color:black;
+}
+
+.modal-text{
+    font-size: .9rem;
+}
+
+#delete-note-modal-button {
+    font-size: .8rem;
+}
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/scss/components/_ProtocolSummary.scss	Tue Dec 04 18:17:56 2018 +0100
@@ -0,0 +1,6 @@
+.protocol-summary {
+    overflow-x: hidden;
+    overflow-y: auto;
+    padding: 0.75rem 1.25rem;
+
+}
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/scss/components/_Register.scss	Tue Dec 04 18:17:56 2018 +0100
@@ -0,0 +1,8 @@
+label.col-form-label.text-primary {
+    font-size: 16px;
+}
+
+button.btn.btn-primary {
+    font-size: 	18px;
+}
+
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/scss/components/_Session.scss	Tue Dec 04 18:17:56 2018 +0100
@@ -0,0 +1,45 @@
+@import 'bootstrap/scss/functions';
+@import 'bootstrap/scss/variables';
+
+.session-container {
+position: absolute;
+top: 4rem;
+bottom: 0;
+left: 0;
+right: 0;
+display: flex;
+flex-direction: column;
+// justify-content: flex-end;
+justify-content: flex;
+overflow-y: hidden;
+    .session-notes {
+        overflow-y: hidden;
+        width: 100%;
+        display: flex;
+        flex: 1;
+        > * {
+            padding-left: ($grid-gutter-width / 2);
+            padding-right: ($grid-gutter-width / 2);
+        }
+        .notes-affix {
+            min-width: 17%;
+            max-width: 17%;
+            display: flex;
+            flex-direction: column;
+            // > *:first-child {
+            //     max-height: calc(100%);
+            //     overflow-y: auto;
+            // }
+        }
+        .notes-affix-summary {
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+        }
+        .notes-list {
+            width: 100%;
+            overflow-y: auto;
+            overflow-x: hidden;
+        }
+    }
+}
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/scss/components/_SessionForm.scss	Tue Dec 04 18:17:56 2018 +0100
@@ -0,0 +1,38 @@
+.material-icons.protocol-toggle {
+    font-size: 1rem;
+    cursor: pointer;
+}
+
+.session {
+
+    &-page-panel {
+        z-index: 5;
+    }
+
+    &-page-title {
+        font-size: 1.8rem;
+        resize: auto;
+        font-weight: bolder;
+        overflow: hidden;
+        height: auto;
+        transition: height 0.2s ease;
+        box-sizing: border-box;
+        line-height: 1.1;
+    }
+
+    &-page-description {
+        font-size: .9rem;
+        resize: auto;
+        overflow: hidden;
+        height: auto;
+        transition: height 0.2s ease;
+        box-sizing: border-box;
+    }
+}
+
+textarea.session-placeholder::placeholder, span.session-placeholder {
+    color: $text-muted;
+    opacity: 0.33;
+}
+
+
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/scss/components/_SessionList.scss	Tue Dec 04 18:17:56 2018 +0100
@@ -0,0 +1,134 @@
+
+.session-count {
+    font-size: 2rem;
+    z-index: -1;
+}
+
+.sessions{
+    cursor: pointer;
+}
+
+#delete {
+    // opacity: 0;
+    // display: none;
+    -webkit-transition: .5s all;
+    -webkit-transition-delay: 5s;
+    -moz-transition: .5s all;
+    -moz-transition-delay: 5s;
+    -ms-transition: .5s all;
+    -ms-transition-delay: 5s;
+    -o-transition: .5s all;
+    -o-transition-delay: 5s;
+    transition: .5s all;
+    transition-delay: 5s;
+
+    &:hover {
+        // opacity: 1;
+        display: inline-block;
+        -webkit-transition-delay: 0s;
+        -moz-transition-delay: 0s;
+        -ms-transition-delay: 0s;
+        -o-transition-delay: 0s;
+        transition-delay: 0s;
+    }
+}
+
+.sessions:hover ~ #delete {
+    // opacity: 1;
+    display: inline-block;
+    -webkit-transition-delay: 0s;
+    -moz-transition-delay: 0s;
+    -ms-transition-delay: 0s;
+    -o-transition-delay: 0s;
+    transition-delay: 0s;
+}
+
+.sessions:hover {
+    opacity: .7;
+}
+
+
+span.session {
+
+    &-title {
+    font-size: 1.3rem;
+    white-space: pre-wrap;
+    overflow-wrap: break-word;
+    }
+
+    &-date {
+        font-size: .9rem;
+    }
+
+    &-description {
+        font-size: .9rem;
+        white-space: pre-wrap;
+        overflow-wrap: break-word;
+    }
+}
+
+.delete{
+    font-size: 1rem;
+}
+
+#delete-session-modal{
+    -webkit-animation: fadein 0.5s; /* Safari, Chrome and Opera > 12.1 */
+       -moz-animation: fadein 0.5s; /* Firefox < 16 */
+        -ms-animation: fadein 0.5s; /* Internet Explorer */
+         -o-animation: fadein 0.5s; /* Opera < 12.1 */
+            animation: fadein 0.5s;
+}
+
+@keyframes fadein {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+}
+
+/* Firefox < 16 */
+@-moz-keyframes fadein {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+}
+
+/* Safari, Chrome and Opera > 12.1 */
+@-webkit-keyframes fadein {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+}
+
+/* Internet Explorer */
+@-ms-keyframes fadein {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+}
+
+/* Opera < 12.1 */
+@-o-keyframes fadein {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+}
+
+#delete-session {
+
+    &-modal-button {
+        font-size: .9rem;
+    }
+
+    &-close-modal-button {
+        background-color: transparent;
+        border: transparent;
+        color: rgba(#769FED, .4);
+        cursor: pointer;
+    }
+
+    &-close-modal-button:hover {
+        background-color: transparent;
+        border: transparent;
+        color:black;
+    }
+}
+
+.modal-text {
+    font-size: 1rem;
+}
+
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/scss/components/_SessionSummary.scss	Tue Dec 04 18:17:56 2018 +0100
@@ -0,0 +1,13 @@
+.session-summary-list {
+    overflow-y: auto;
+    .note {
+        &-length {
+        color: black;
+        font-size: .6rem;
+        }
+        &-time {
+            font-size: .7rem;
+        }
+    }
+}
+
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/scss/components/_Settings.scss	Tue Dec 04 18:17:56 2018 +0100
@@ -0,0 +1,7 @@
+label.col-form-label.text-primary {
+    font-size: 16px;
+}
+
+button.btn.btn-primary {
+    font-size: 	18px;
+}
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/scss/components/_SlateEditor.scss	Tue Dec 04 18:17:56 2018 +0100
@@ -0,0 +1,58 @@
+@import 'bootstrap/scss/functions';
+@import 'bootstrap/scss/variables';
+
+.toolbar-menu {
+      align-items: center;
+  .button {
+    cursor: pointer;
+  }
+  .material-icons {
+    font-size: 1.3rem;
+  }
+//   .button[data-active="true"] {
+//   }
+  > *:last-child {
+    margin-left: auto;
+    // .checkbox {
+    //     display: inline-block;
+    //     margin-right: 10px;
+    // }
+  }
+}
+
+#btn-editor {
+    padding: .1rem .2rem .1rem .2rem;
+    font-size: .8rem;
+  }
+
+.hovering-menu {
+    position: absolute;
+    z-index: 1;
+    top: -10000px;
+    left: -10000px;
+    margin-top: -20px;
+    opacity: 0;
+    transition: opacity .75s;
+}
+
+.categories-tooltip {
+    background-color: #efefef;
+    border-radius: 4px;
+    border: 1px solid #ccc;
+    padding: 5px;
+    .buttons {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        button {
+            background-color: yellow;
+            border: 1px solid #ccc;
+        }
+        button:not(:last-child) {
+            margin-right: 10px;
+        }
+    }
+    .form-group:last-child {
+        margin-bottom: 0;
+    }
+}