WIP CSS cleanup (some things broken atm)

src/App.jsx

@@ -75,10 +75,8 @@ export default class App extends React.PureComponent {
           <Quote language={language.toasts} languagecode={languagecode} />
           <Countdown/>
           <PhotoInformation language={language} className={tooltipClassList} />
-          <div className='bottom-navbar'>
-            <Maximise/>
-            <Favourite/>
-          </div>
+          <Maximise/>
+          <Favourite/>
           <React.Suspense fallback={renderLoader()}>
             <Modal id={'modal'} onRequestClose={() => this.setState({ mainModal: false })} isOpen={this.state.mainModal} className={modalClassList} overlayClassName={overlayClassList} ariaHideApp={false}>
               <Main

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);
 }

src/scss/modules/_buttons.scss

@@ -1,15 +1,10 @@
 %settingsButton {
-  text-align: center;
-  border: none;
   transition: ease 0.33s;
   color: map-get($theme-colours, 'main');
   cursor: pointer;
-  display: inline-block;
-  position: relative;
   padding: 10px 30px;
   font-size: 20px;
   border-radius: 24px;
-  background: none;
   box-shadow: 0 5px 15px rgba(128, 161, 144, 0.4);
 
   &:hover, &:active {
@@ -92,14 +87,9 @@
   cursor: pointer;
   font-size: 18px;
   float: right;
-  vertical-align: middle;
   padding: 5px 30px;
   background: none;
-  outline: none;
-  border: none;
-  border: 2px solid #2d3436;
   border-radius: 24px;
-  font-family: 'Lexend Deca', sans-serif;
   transition: ease 0.33s;
 
   &:hover {

src/scss/modules/_marketplace.scss

@@ -1,33 +1,3 @@
-.tab,
-button.tablinks {
-  margin-top: -10px;
-  font-size: 24px;
-  background: none;
-  border: none;
-  outline: none;
-  color: map-get($modal, 'text');
-}
-
-button.tablinks {
-  cursor: pointer;
-  padding: 6px;
-  border-radius: 12px;
-  padding: 10px 30px 10px 30px;
-
-  &:hover {
-    background: rgba(189, 195, 199, .075);
-  }
-
-  &:after {
-    content: '';
-    display: block;
-    margin: 0 auto;
-    width: 50%;
-    padding-top: 10px;
-    border-bottom: 3px solid map-get($modal, 'tab-underline');
-  }
-}
-
 #item a {
   color: map-get($button-colours, 'other');
   cursor: pointer;
@@ -222,16 +192,6 @@ p.description {
   }
 }
 
-.banner {
-  text-align: center;
-  background: #54a0ff;
-  border-radius: 24px;
-  padding: 10px;
-  margin: 0;
-  color: map-get($theme-colours, 'main');
-  display: none !important;
-}
-
 .featured {
   background: #2d3436;
   margin-top: 20px;
@@ -261,10 +221,6 @@ p.description {
   color: white;
 }
 
-.requires {
-  float: right;
-}
-
 #seemore {
   display: none;
 

src/scss/modules/_modal.scss

@@ -149,18 +149,38 @@
   }
 }
 
-.updateContent {
-  width: 400px;
-  padding: 5px;
+.tab,
+button.tablinks {
+  margin-top: -10px;
+  font-size: 24px;
+  background: none;
+  border: none;
+  outline: none;
+  color: map-get($modal, 'text');
+}
 
-  .closeModal {
-    margin-top: 10px;
-    font-size: 45px;
+.tablinks {
+  cursor: pointer;
+  padding: 6px;
+  border-radius: 12px;
+  padding: 10px 30px 10px 30px;
+
+  &:hover {
+    background: rgba(189, 195, 199, .075);
   }
 
-  img {
-    width: 100%;
-    height: auto;
+  &:after {
+    content: '';
+    display: block;
+    margin: 0 auto;
+    width: 50%;
+    padding-top: 10px;
+    border-bottom: 3px solid map-get($modal, 'tab-underline');
+  }
+
+  svg {
+    top: 0.125em;
+    position: relative;
   }
 }
 
@@ -177,9 +197,19 @@
   border-bottom-right-radius: map-get($modal, 'border-radius');
 }
 
-.tablinks svg {
-  top: 0.125em;
-  position: relative;
+.updateContent {
+  width: 400px;
+  padding: 5px;
+
+  .closeModal {
+    margin-top: 10px;
+    font-size: 45px;
+  }
+
+  img {
+    width: 100%;
+    height: auto;
+  }
 }
 
 #feedbackmodal {

src/scss/modules/_settings.scss

@@ -37,10 +37,6 @@
     transition: 0.4s;
     border-radius: 50%;
   }
-
-  &.round:before {
-    border-radius: 50%;
-  }
 }
 
 input {
@@ -50,7 +46,6 @@ input {
     box-sizing: border-box;
     border-image-slice: 1;
     border-image-source: map-get($theme-colours, 'gradient');
-    outline: none;
     background: transparent;
   }
 
@@ -59,7 +54,6 @@ input {
 
     &:before {
       -webkit-transform: translateX(26px);
-      -ms-transform: translateX(26px);
       transform: translateX(26px);
     }
   }
@@ -186,7 +180,6 @@ input[type=color] {
   }
 }
 
-// This is duplicated because it didn't work with a comma, need to look into it later
 input[type=color]::-moz-color-swatch {
   border-radius: 100%;
   height: 30px;
@@ -207,28 +200,16 @@ input[type=color]::-moz-color-swatch {
   }
 }
 
-input[type=checkbox] {
-  vertical-align: middle;
-}
-
 .customBackgroundHex {
   font-size: 1.2em;
   padding-left: 7px;
   vertical-align: middle;
 }
 
-input[type=number].stop  {
-  margin-left: 7px;
-}
-
 button.remove + input[type=color].colour  {
   margin-left: 7px;
 }
 
-#customBackgroundColour {
-  cursor: pointer;
-}
-
 // Dark Theme
 .dark {
   #blurRange, #brightnessRange {