WIP CSS cleanup (some things broken atm)

src/components/widgets/background/Favourite.jsx

@@ -6,25 +6,25 @@ export default class Favourite extends React.PureComponent {
     constructor(...args) {
         super(...args);
         this.state = {
-            favourited: <StarIcon2 id='favouriteButton' onClick={() => this.favourite()} />
+            favourited: <StarIcon2 onClick={() => this.favourite()} />
         };
     }
 
   favourite() {
       if (localStorage.getItem('favourite')) {
         localStorage.removeItem('favourite');
-        this.setState({ favourited: <StarIcon2 id='favouriteButton' onClick={() => this.favourite()} /> });
+        this.setState({ favourited: <StarIcon2 onClick={() => this.favourite()} /> });
       } else {
         const url = document.getElementById('backgroundImage').style.backgroundImage.replace('url("', '').replace('")', '');
         const credit = document.getElementById('credit').textContent;
         const location = document.getElementById('location').textContent;
         localStorage.setItem('favourite', JSON.stringify({ url: url, credit: credit, location: location }));
-        this.setState({ favourited: <StarIcon id='favouriteButton' onClick={() => this.favourite()} /> });
+        this.setState({ favourited: <StarIcon onClick={() => this.favourite()} /> });
       }
   }
 
   componentDidMount() {
-    if (localStorage.getItem('favourite')) this.setState({ favourited: <StarIcon id='favouriteButton' onClick={() => this.favourite()} /> });
+    if (localStorage.getItem('favourite')) this.setState({ favourited: <StarIcon onClick={() => this.favourite()} /> });
   }
 
   render() {

src/components/widgets/background/Maximise.jsx

@@ -38,7 +38,7 @@ export default class View extends React.PureComponent {
   render() {
     if (localStorage.getItem('view') === 'false' || localStorage.getItem('background') === 'false') return null;
     return <div className='view'>
-        <FullscreenIcon id='viewButton' onClick={() => this.viewStuff()} />
+        <FullscreenIcon onClick={() => this.viewStuff()} />
     </div>
   }
 }

src/components/widgets/background/scss/_photoinformation.scss

@@ -7,19 +7,10 @@
 
     svg {
         float: left;
-        vertical-align: middle;
         margin-right: 1rem;
         font-size: calc(10px + 2vmin);
     }
 
-    span {
-        display: none;
-    }
-
-    h1 {
-        position: relative;
-    }
-
     svg,
     h1 {
         display: inline;
@@ -75,10 +66,10 @@
         outline: none;
         border: none;
     }
-}
 
-.infoCard:hover {
-    display: block !important;
+    &:hover {
+        display: block !important;
+    }
 }
 
 .photoInformationHover {

src/components/widgets/background/scss/index.scss

@@ -42,28 +42,23 @@
 }
 
 .view {
-    bottom: 10px;
     right: 25px;
 }
 
 .favourite {
-    bottom: 10px;
     right: 50px;
     padding-right: 5px;
 }
 
 .view,
 .favourite {
+    bottom: 10px;
     position: absolute;
     transition: all 0.5s ease 0s;
+    width: auto;
+    cursor: pointer;
 
     &:hover {
         transform: scale(1.1);
     }
-}
-
-#viewButton,
-#favouriteButton {
-    width: auto;
-    cursor: pointer;
 }

src/components/widgets/navbar/scss/_notes.scss

@@ -1,15 +1,4 @@
-.notes {
-    position: relative;
-    display: inline-block;
-
-    h3 {
-        text-shadow: none;
-        margin: 0;
-    }
-}
-
-.notes .notescontainer {
-    text-align: center;
+.notescontainer {
     padding: 15px;
     visibility: hidden;
     background-color: #fff;
@@ -48,33 +37,21 @@
 }
 
 textarea {
-    overflow: none;
     border: none;
-    outline: none;
     width: 200px;
     resize: none;
     height: 100px;
     margin: 10px;
 }
 
-.noteIcon {
-    display: inline;
-    font-size: 1em;
-    float: none;
-}
-
 .topbarnotes {
-    text-align: center;
-
     svg {
         font-size: 48px;
-        float: left !important;
         padding: 9px;
     }
 
     h3 {
         font-size: 48px;
-        float: right;
         margin-right: 20px;
     }
 }

src/components/widgets/navbar/scss/index.scss

@@ -34,38 +34,6 @@
     }
 }
 
-.bottom-navbar {
-    position: absolute;
-    bottom: 1rem;
-    right: 1rem;
-
-    div {
-        display: inline;
-    }
-
-    img {
-        height: 1em;
-        width: auto;
-        margin: 0.5rem;
-    }
-
-    svg.topicons {
-        color: map-get($theme-colours, 'main-text-color');
-        -webkit-font-smoothing: subpixel-antialiased;
-        font-size: 1em;
-        display: inline;
-        margin: 0.5rem;
-        filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.3));
-        cursor: pointer;
-        transition: .2s ease;
-
-        &:hover {
-            transform: translateZ(0);
-            transform: scale(1.3);
-        }
-    }
-}
-
 .visibilityshow {
     visibility: visible !important;
 }

src/components/widgets/quote/quote.scss

@@ -15,24 +15,12 @@
 .quoteauthor {
     font-size: 0.9em;
     letter-spacing: 0.5px;
-    margin: 0;
-}
-
-.quoteAuthor,
-.copyButton {
-    display: inline;
-    font-size: 0.8em;
-    position: relative !important;
-    display: block;
-    margin: 0 auto;
 }
 
 .copyButton {
     cursor: pointer;
     vertical-align: middle;
-    float: middle;
     margin: 0 auto;
-    text-align: right;
     transition: ease 0.2s !important;
 
     &:hover {
@@ -45,19 +33,6 @@ h1.quoteauthor {
     display: inline;
 }
 
-button.copyButton {
-    background: transparent;
-    border: none;
-    color: map-get($theme-colours, 'main');
-    padding: 20px 20px;
-    text-align: center;
-    text-decoration: none;
-    font-size: 20px;
-    cursor: pointer;
-    border-radius: 5px;
-    display: table-cell
-}
-
 .quoteauthorlink {
     text-decoration: none;
     color: white;

src/components/widgets/search/search.scss

@@ -20,6 +20,7 @@
         background-color: rgba(0, 0, 0, 0.1);
         -webkit-transition: width 0.5s ease-in-out;
         transition: width 0.5s ease-in-out;
+        color: white;
 
         &:focus {
             width: 400px;
@@ -41,8 +42,4 @@
 
 .micIcon {
     margin-right: 10px;
-}
-
-#searchEngine {
-    width: 130px;
 }

src/components/widgets/time/clock.scss

@@ -14,11 +14,10 @@
     margin: 0 auto;
     border-radius: 100%;
     box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.3);
-    border: 1px solid map-get($theme-colours, "main");
+    border: 1px solid map-get($theme-colours, 'main');
 }
 
 .react-clock__hand__body {
-    background: map-get($theme-colours, "main");
-    ;
+    background: map-get($theme-colours, 'main');
     box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
 }