style: Unified spacing to 2 and add editor config

2026-07-18 06:24:17 +02:00 · 2021-03-17 14:01:53 +01:00
parent aec47d9d0b
commit 9981a28638
98 changed files with 2931 additions and 2902 deletions
--- a/src/components/widgets/Widgets.jsx
+++ b/src/components/widgets/Widgets.jsx
@@ -9,7 +9,7 @@ import Favourite from './background/Favourite';
 import Date from './time/Date';

 export default class Widgets extends React.PureComponent {
-   enabled(key) {
+  enabled(key) {
    const stringValue = localStorage.getItem(key);
    let enabled = true;

@@ -18,7 +18,7 @@ export default class Widgets extends React.PureComponent {
        enabled = true;
      }

-      if (stringValue === 'false') { 
+      if (stringValue === 'false') {
        enabled = false;
      }
    }
@@ -32,13 +32,13 @@ export default class Widgets extends React.PureComponent {

    return (
      <React.Fragment>
-          {enabled('searchBar') ? <Search language={language.widgets.search} /> : null}
-          {enabled('greeting') ? <Greeting language={language.widgets.greeting} /> : null}
-          {enabled('time') ? <Clock/> : null}
-          {enabled('date') ? <Date/> : null}
-          {enabled('quote') ? <Quote language={language.toasts} languagecode={languagecode} /> : null}
-          {enabled('view') ? <Maximise/> : null}
-          {enabled('favouriteEnabled') ? <Favourite/> : null}
+        {enabled('searchBar') ? <Search language={language.widgets.search} /> : null}
+        {enabled('greeting') ? <Greeting language={language.widgets.greeting} /> : null}
+        {enabled('time') ? <Clock/> : null}
+        {enabled('date') ? <Date/> : null}
+        {enabled('quote') ? <Quote language={language.toasts} languagecode={languagecode} /> : null}
+        {enabled('view') ? <Maximise/> : null}
+        {enabled('favouriteEnabled') ? <Favourite/> : null}
      </React.Fragment>
    );
  }
--- a/src/components/widgets/background/Background.jsx
+++ b/src/components/widgets/background/Background.jsx
@@ -28,7 +28,7 @@ export default class Background extends React.PureComponent {
        localStorage.setItem('customBackgroundColour', JSON.stringify(gradientSettings));
      }
    }
-    
+
    const background = typeof gradientSettings === 'object' && gradientSettings !== null ? this.gradientStyleBuilder(gradientSettings) : `background-image: url(${url})`;

    // Brightness
@@ -83,7 +83,7 @@ export default class Background extends React.PureComponent {

    const customBackgroundColour = localStorage.getItem('customBackgroundColour');
    const customBackground = localStorage.getItem('customBackground');
-    
+
    const favourited = JSON.parse(localStorage.getItem('favourite'));

    if (favourited) {
@@ -110,7 +110,7 @@ export default class Background extends React.PureComponent {
      if (customBackground.includes('.mp4') || customBackground.includes('.webm') || customBackground.includes('.ogg')) {
        document.getElementById('backgroundImage').innerHTML = `
        <video autoplay muted loop id='backgroundVideo'>
-            <source src='${customBackground}'/>
+          <source src='${customBackground}'/>
        </video>`;
      } else {
        this.setBackground(customBackground, null, 'false'); // Local
@@ -119,12 +119,12 @@ export default class Background extends React.PureComponent {
      if (offlineMode === 'true') {
        return this.doOffline();
      }
-    
+
      try { // First we try and get an image from the API...
        let requestURL;

        switch (localStorage.getItem('backgroundAPI')) {
-          case 'unsplash': 
+          case 'unsplash':
            requestURL = `${Constants.UNSPLASH_URL}/getImage`;
            break;
          default: // Defaults to Mue
@@ -151,7 +151,7 @@ export default class Background extends React.PureComponent {
        if (data.location.replace(/[null]+/g, '') === ' ') {
          return document.querySelector('#backgroundCredits').style.display = 'none';
        }
-  
+
        document.getElementById('location').innerText = `${data.location.replace('null', '')}`; // Set the location tooltip
      } catch (e) { // ..and if that fails we load one locally
        this.doOffline();
@@ -171,7 +171,7 @@ export default class Background extends React.PureComponent {
    if (localStorage.getItem('animations') === 'true') {
      document.querySelector('#backgroundImage').classList.add('fade-in');
    }
-    
+
    this.determineMode();
  }

--- a/src/components/widgets/background/Favourite.jsx
+++ b/src/components/widgets/background/Favourite.jsx
@@ -4,36 +4,36 @@ import StarIcon from '@material-ui/icons/Star';
 import StarIcon2 from '@material-ui/icons/StarBorder';

 export default class Favourite extends React.PureComponent {
-    constructor(...args) {
-        super(...args);
-        this.state = {
-            favourited: <StarIcon2 onClick={() => this.favourite()} />
-        };
-    }
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      favourited: <StarIcon2 onClick={() => this.favourite()} />
+    };
+  }

  favourite() {
-      if (localStorage.getItem('favourite')) {
-        localStorage.removeItem('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 onClick={() => this.favourite()} /> 
-        });
-      }
+    if (localStorage.getItem('favourite')) {
+      localStorage.removeItem('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 onClick={() => this.favourite()} />
+      });
+    }
  }

  componentDidMount() {
    if (localStorage.getItem('favourite')) {
-      this.setState({ 
-        favourited: <StarIcon onClick={() => this.favourite()} /> 
+      this.setState({
+        favourited: <StarIcon onClick={() => this.favourite()} />
      });
    }
  }
@@ -42,9 +42,9 @@ export default class Favourite extends React.PureComponent {
    if (localStorage.getItem('favouriteEnabled') === 'false' || localStorage.getItem('background') === 'false' || localStorage.getItem('customBackgroundColour') || localStorage.getItem('customBackground')) {
      return null;
    }
-    
+
    return <div className='favourite'>
-        {this.state.favourited}
+      {this.state.favourited}
    </div>
  }
-}
+}
--- a/src/components/widgets/background/Maximise.jsx
+++ b/src/components/widgets/background/Maximise.jsx
@@ -3,53 +3,53 @@ import React from 'react';
 import FullscreenIcon from '@material-ui/icons/Fullscreen';

 export default class View extends React.PureComponent {
-    constructor(...args) {
-        super(...args);
-        this.state = {
-            hidden: false
-        };
-    }
-
-    setAttribute(blur, brightness) {
-        document.querySelector('#backgroundImage').setAttribute(
-            'style',
-            `background-image: url(${document.getElementById('backgroundImage').style.backgroundImage.replace('url("', '').replace('")', '')}); -webkit-filter: blur(${blur}); -webkit-filter: brightness(${brightness}%);`
-        );
-    }
-
-    viewStuff() {
-      const elements = ['#searchBar', '.navbar-container', '.clock', '.greeting', '.quotediv', 'time']; // elements to hide
-
-      elements.forEach((element) => {
-          try {
-              (this.state.hidden === false) ? document.querySelector(element).style.display = 'none' : document.querySelector(element).style.display = 'block';
-          } catch (e) {
-              return;
-          }
-      });
-  
-      if (this.state.hidden === false) {
-          this.setState({ 
-              hidden: true 
-          });
-
-          this.setAttribute(0, 100);
-      } else {
-          this.setState({ 
-              hidden: false 
-          });
-
-          this.setAttribute(localStorage.getItem('blur'), localStorage.getItem('brightness'));
-      }
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      hidden: false
+    };
  }

-    render() {
-      if (localStorage.getItem('background') === 'false') {
-        return null;
+  setAttribute(blur, brightness) {
+    document.querySelector('#backgroundImage').setAttribute(
+      'style',
+      `background-image: url(${document.getElementById('backgroundImage').style.backgroundImage.replace('url("', '').replace('")', '')}); -webkit-filter: blur(${blur}); -webkit-filter: brightness(${brightness}%);`
+    );
+  }
+
+  viewStuff() {
+    const elements = ['#searchBar', '.navbar-container', '.clock', '.greeting', '.quotediv', 'time']; // elements to hide
+
+    elements.forEach((element) => {
+      try {
+        (this.state.hidden === false) ? document.querySelector(element).style.display = 'none' : document.querySelector(element).style.display = 'block';
+      } catch (e) {
+        return;
      }
-      
-      return <div className='view'>
-          <FullscreenIcon onClick={() => this.viewStuff()} />
-      </div>
+    });
+
+    if (this.state.hidden === false) {
+      this.setState({
+        hidden: true
+      });
+
+      this.setAttribute(0, 100);
+    } else {
+      this.setState({
+        hidden: false
+      });
+
+      this.setAttribute(localStorage.getItem('blur'), localStorage.getItem('brightness'));
    }
-}
+  }
+
+  render() {
+    if (localStorage.getItem('background') === 'false') {
+      return null;
+    }
+
+    return <div className='view'>
+      <FullscreenIcon onClick={() => this.viewStuff()} />
+    </div>
+  }
+}
--- a/src/components/widgets/background/PhotoInformation.jsx
+++ b/src/components/widgets/background/PhotoInformation.jsx
@@ -26,4 +26,4 @@ export default function PhotoInformation(props) {
      <span id='credit' style={{ 'display': 'none' }}></span>
    </div>
  );
-}
+}
--- a/src/components/widgets/background/offline_images.json
+++ b/src/components/widgets/background/offline_images.json
@@ -1,20 +1,20 @@
 {
-    "Tirachard Kumtanom": {
-        "photo": [1]
-    },
-    "Sohail Na": {
-        "photo": [4]
-    },
-    "Miriam Espacio": {
-        "photo": [7]
-    },
-    "Fabian Wiktor": {
-        "photo": [20]
-    },
-    "Pixabay": {
-        "photo": [2, 3, 9, 11, 13, 14, 15]
-    },
-    "Unknown": {
-        "photo": [5, 6, 8, 10, 12, 16, 17, 18, 19]
-    }
-}
+  "Tirachard Kumtanom": {
+    "photo": [1]
+  },
+  "Sohail Na": {
+    "photo": [4]
+  },
+  "Miriam Espacio": {
+    "photo": [7]
+  },
+  "Fabian Wiktor": {
+    "photo": [20]
+  },
+  "Pixabay": {
+    "photo": [2, 3, 9, 11, 13, 14, 15]
+  },
+  "Unknown": {
+    "photo": [5, 6, 8, 10, 12, 16, 17, 18, 19]
+  }
+}
--- a/src/components/widgets/background/scss/_photoinformation.scss
+++ b/src/components/widgets/background/scss/_photoinformation.scss
@@ -1,78 +1,78 @@
 .photoInformation {
-    position: absolute;
-    bottom: 1rem;
-    left: 1rem;
-    font-size: calc(10px + 0.1vmin) !important;
-    text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+  position: absolute;
+  bottom: 1rem;
+  left: 1rem;
+  font-size: calc(10px + 0.1vmin) !important;
+  text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);

-    svg {
-        float: left;
-        margin-right: 1rem;
-        font-size: calc(10px + 2vmin);
-        cursor: pointer;
-    }
+  svg {
+    float: left;
+    margin-right: 1rem;
+    font-size: calc(10px + 2vmin);
+    cursor: pointer;
+  }

-    svg,
-    h1 {
-        display: inline;
-    }
+  svg,
+  h1 {
+    display: inline;
+  }

-    svg:hover+.infoCard {
-        display: block;
-    }
+  svg:hover+.infoCard {
+    display: block;
+  }
 }

 .infoCard {
-    display: none;
-    background: #fff;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
-    color: #000;
-    position: fixed;
-    bottom: 3.25rem;
-    left: 0.7em;
-    padding: 1rem;
-    border-radius: 24px 24px 24px 0;
-    max-width: 500px;
-    text-align: left;
-    text-shadow: none;
+  display: none;
+  background: #fff;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+  color: #000;
+  position: fixed;
+  bottom: 3.25rem;
+  left: 0.7em;
+  padding: 1rem;
+  border-radius: 24px 24px 24px 0;
+  max-width: 500px;
+  text-align: left;
+  text-shadow: none;

-    span {
-        display: block;
-    }
+  span {
+    display: block;
+  }

-    svg {
-        margin-right: 0.5rem;
-        vertical-align: middle;
-        display: inline-flex;
-        padding: 2px;
-    }
+  svg {
+    margin-right: 0.5rem;
+    vertical-align: middle;
+    display: inline-flex;
+    padding: 2px;
+  }

-    span,
-    svg {
-        font-size: 2em;
-    }
+  span,
+  svg {
+    font-size: 2em;
+  }

-    h1,
-    .infoIcon {
-        font-size: 3em;
-    }
+  h1,
+  .infoIcon {
+    font-size: 3em;
+  }

-    .infoIcon {
-        padding: 4px;
-    }
+  .infoIcon {
+    padding: 4px;
+  }

-    hr {
-        height: 3px;
-        background: #2d3436;
-        outline: none;
-        border: none;
-    }
+  hr {
+    height: 3px;
+    background: #2d3436;
+    outline: none;
+    border: none;
+  }

-    &:hover {
-        display: block !important;
-    }
+  &:hover {
+    display: block !important;
+  }
 }

 .dark hr {
-    background-color: white !important;
-}
+  background-color: white !important;
+}
--- a/src/components/widgets/background/scss/index.scss
+++ b/src/components/widgets/background/scss/index.scss
@@ -2,63 +2,63 @@
@import '../../../../scss/mixins';

 #backgroundImage {
-    height: 100vh;
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-position: center;
-    background-attachment: fixed;
+  height: 100vh;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-attachment: fixed;
 }

 #backgroundVideo {
-    position: fixed;
-    right: 0;
-    bottom: 0;
-    min-width: 100%;
-    min-height: 100%;
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  min-width: 100%;
+  min-height: 100%;
 }

 .fade-in {
-    @include animation('fadein 2s');
+  @include animation('fadein 2s');
 }

@include keyframes(fadein) {
-    from {
-        opacity: 0;
-    }
+  from {
+    opacity: 0;
+  }

-    to {
-        opacity: 1;
-    }
+  to {
+    opacity: 1;
+  }
 }

 .backgroundEffects {
-    opacity: 0.7;
-    transition: ease 0.6s;
+  opacity: 0.7;
+  transition: ease 0.6s;
 }

 .creditlink {
-    text-decoration: none;
-    color: white;
+  text-decoration: none;
+  color: white;
 }

 .view {
-    right: 25px;
+  right: 25px;
 }

 .favourite {
-    right: 50px;
-    padding-right: 5px;
+  right: 50px;
+  padding-right: 5px;
 }

 .view,
 .favourite {
-    bottom: 10px;
-    position: absolute;
-    transition: all 0.5s ease 0s;
-    width: auto;
-    cursor: pointer;
+  bottom: 10px;
+  position: absolute;
+  transition: all 0.5s ease 0s;
+  width: auto;
+  cursor: pointer;

-    &:hover {
-        transform: scale(1.1);
-    }
-}
+  &:hover {
+    transform: scale(1.1);
+  }
+}
--- a/src/components/widgets/greeting/Greeting.jsx
+++ b/src/components/widgets/greeting/Greeting.jsx
@@ -70,8 +70,8 @@ export default class Greeting extends React.PureComponent {
    }

    // Set the state to the greeting string
-    this.setState({ 
-      greeting: `${message}${name}` 
+    this.setState({
+      greeting: `${message}${name}`
    });
  }

--- a/src/components/widgets/greeting/greeting.scss
+++ b/src/components/widgets/greeting/greeting.scss
@@ -1,4 +1,4 @@
 .greeting {
-    margin: 0;
-    font-size: 1.6em;
-}
+  margin: 0;
+  font-size: 1.6em;
+}
--- a/src/components/widgets/navbar/Navbar.jsx
+++ b/src/components/widgets/navbar/Navbar.jsx
@@ -33,7 +33,7 @@ export default class Navbar extends React.PureComponent {
        <Report className='topicons' onClick={() => this.props.openModal('feedbackModal')} />
      </Tooltip>
    );
-  
+
    if (Constants.BETA_VERSION === false) {
      feedbackHTML = null;
    }
--- a/src/components/widgets/navbar/Notes.jsx
+++ b/src/components/widgets/navbar/Notes.jsx
@@ -7,52 +7,52 @@ import NotesIcon from '@material-ui/icons/AssignmentRounded';
 import Pin from './Pin';

 export default class Notes extends React.PureComponent {
-    constructor(...args) {
-        super(...args);
-        this.state = {
-            notes: localStorage.getItem('notes') || ''
-        };
-    }
-
-    setNotes = (e) => {
-        localStorage.setItem('notes', e.target.value);
-        this.setState({ 
-            notes: e.target.value 
-        });
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      notes: localStorage.getItem('notes') || ''
    };
+  }

-    pin() {
-        document.getElementById('noteContainer').classList.toggle('visibilityshow');
+  setNotes = (e) => {
+    localStorage.setItem('notes', e.target.value);
+    this.setState({
+      notes: e.target.value
+    });
+  };

-        if (localStorage.getItem('notesPinned') === 'true') {
-            localStorage.setItem('notesPinned', false);
-        } else {
-            localStorage.setItem('notesPinned', true);
-        }
+  pin() {
+    document.getElementById('noteContainer').classList.toggle('visibilityshow');
+
+    if (localStorage.getItem('notesPinned') === 'true') {
+      localStorage.setItem('notesPinned', false);
+    } else {
+      localStorage.setItem('notesPinned', true);
+    }
+  }
+
+  componentDidMount() {
+    if (localStorage.getItem('notesPinned') === 'true') {
+      document.getElementById('noteContainer').classList.toggle('visibilityshow');
+    }
+  }
+
+  render() {
+    let classList = 'notescontainer';
+    if (localStorage.getItem('darkTheme') === 'true') {
+      classList += ' dark';
    }

-    componentDidMount() {
-        if (localStorage.getItem('notesPinned') === 'true') {
-            document.getElementById('noteContainer').classList.toggle('visibilityshow');
-        }
-    }
-
-    render() {
-        let classList = 'notescontainer';
-        if (localStorage.getItem('darkTheme') === 'true') {
-            classList += ' dark';
-        }
-
-        return (
-            <span id='noteContainer' className={classList}>
-                <div className='topbarnotes'>
-                    <NotesIcon/>
-                    <h3>{this.props.language.title}</h3>
-                </div>
-                <TextareaAutosize rowsMax={50} placeholder={this.props.language.placeholder} value={this.state.notes} onChange={this.setNotes}/>
-                <button onClick={this.pin} className='pinNote'><Pin/></button>
-                <button onClick={() => navigator.clipboard.writeText(this.state.notes)} className='saveNote'><CopyIcon/></button>
-            </span>
-        );
-    }
+    return (
+      <span id='noteContainer' className={classList}>
+        <div className='topbarnotes'>
+          <NotesIcon/>
+          <h3>{this.props.language.title}</h3>
+        </div>
+        <TextareaAutosize rowsMax={50} placeholder={this.props.language.placeholder} value={this.state.notes} onChange={this.setNotes}/>
+        <button onClick={this.pin} className='pinNote'><Pin/></button>
+        <button onClick={() => navigator.clipboard.writeText(this.state.notes)} className='saveNote'><CopyIcon/></button>
+      </span>
+    );
+  }
 }
--- a/src/components/widgets/navbar/Pin.jsx
+++ b/src/components/widgets/navbar/Pin.jsx
@@ -17,10 +17,10 @@
 import React from 'react';

 export default function Pin() {
-    return (
-        <svg xmlns='http://www.w3.org/2000/svg' enableBackground='new 0 0 24 24' viewBox='0 0 24 24' fill='black' width='18px' height='18px'>
-          <g><rect fill='none' height='24' width='24'/></g>
-          <g><path d='M16,9V4l1,0c0.55,0,1-0.45,1-1v0c0-0.55-0.45-1-1-1H7C6.45,2,6,2.45,6,3v0 c0,0.55,0.45,1,1,1l1,0v5c0,1.66-1.34,3-3,3h0v2h5.97v7l1,1l1-1v-7H19v-2h0C17.34,12,16,10.66,16,9z' fillRule='evenodd'/></g>
-        </svg>
-    );
-}
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' enableBackground='new 0 0 24 24' viewBox='0 0 24 24' fill='black' width='18px' height='18px'>
+      <g><rect fill='none' height='24' width='24'/></g>
+      <g><path d='M16,9V4l1,0c0.55,0,1-0.45,1-1v0c0-0.55-0.45-1-1-1H7C6.45,2,6,2.45,6,3v0 c0,0.55,0.45,1,1,1l1,0v5c0,1.66-1.34,3-3,3h0v2h5.97v7l1,1l1-1v-7H19v-2h0C17.34,12,16,10.66,16,9z' fillRule='evenodd'/></g>
+    </svg>
+  );
+}
--- a/src/components/widgets/navbar/scss/_notes.scss
+++ b/src/components/widgets/navbar/scss/_notes.scss
@@ -1,58 +1,58 @@
 .notes {
-    position: relative;
+  position: relative;

-    h3 {
-        text-shadow: none;
-        margin: 0;
-    }
+  h3 {
+    text-shadow: none;
+    margin: 0;
+  }
 }

 .notescontainer {
-    padding: 15px;
-    visibility: hidden;
-    background-color: #fff;
-    color: #000;
-    text-align: center;
-    border-radius: 12px;
-    position: absolute;
-    top: 80%;
-    margin-left: -150px;
+  padding: 15px;
+  visibility: hidden;
+  background-color: #fff;
+  color: #000;
+  text-align: center;
+  border-radius: 12px;
+  position: absolute;
+  top: 80%;
+  margin-left: -150px;

-    svg {
-        float: left;
-    }
+  svg {
+    float: left;
+  }

-    ::placeholder {
-        color: #636e72;
-        opacity: 1;
-    }
+  ::placeholder {
+    color: #636e72;
+    opacity: 1;
+  }
 }

 .notes:hover .notescontainer {
-    visibility: visible;
+  visibility: visible;
 }

 textarea {
-    border: none;
-    width: 200px;
-    resize: none;
-    height: 100px;
-    margin: 10px;
+  border: none;
+  width: 200px;
+  resize: none;
+  height: 100px;
+  margin: 10px;
 }

 .topbarnotes {
-    svg {
-        font-size: 48px;
-        padding: 9px;
-    }
+  svg {
+    font-size: 48px;
+    padding: 9px;
+  }

-    h3 {
-        font-size: 48px;
-        margin-right: 20px;
-    }
+  h3 {
+    font-size: 48px;
+    margin-right: 20px;
+  }
 }

 .dark textarea {
-    background-color: #2f3542;
-    color: white;
-}
+  background-color: #2f3542;
+  color: white;
+}
--- a/src/components/widgets/navbar/scss/index.scss
+++ b/src/components/widgets/navbar/scss/index.scss
@@ -2,37 +2,37 @@
@import '../../../../scss/variables';

 .navbar-container {
-    position: absolute;
-    top: 1rem;
-    right: 1rem;
+  position: absolute;
+  top: 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;
-        margin: 0.5rem;
-        filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.3));
-        cursor: pointer;
-        transition: .2s ease;
-
-        &:hover {
-            color: map-get($theme-colours, 'main-text-color');
-            transform: translateZ(0);
-            transform: scale(1.3);
-        }
+  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;
+    margin: 0.5rem;
+    filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.3));
+    cursor: pointer;
+    transition: .2s ease;
+
+    &:hover {
+      color: map-get($theme-colours, 'main-text-color');
+      transform: translateZ(0);
+      transform: scale(1.3);
    }
+  }
 }

 .visibilityshow {
-    visibility: visible !important;
-}
+  visibility: visible !important;
+}
--- a/src/components/widgets/quote/Quote.jsx
+++ b/src/components/widgets/quote/Quote.jsx
@@ -16,11 +16,11 @@ export default class Quote extends React.PureComponent {
  constructor(...args) {
    super(...args);
    this.state = {
-        quote: '',
-        author: '',
-        favourited: <StarIcon2 className='copyButton' onClick={() => this.favourite()} />,
-        tweet: <TwitterIcon className='copyButton' onClick={() => this.tweetQuote()} />,
-        copy: <FileCopy className='copyButton' onClick={() => this.copyQuote()} />
+      quote: '',
+      author: '',
+      favourited: <StarIcon2 className='copyButton' onClick={() => this.favourite()} />,
+      tweet: <TwitterIcon className='copyButton' onClick={() => this.tweetQuote()} />,
+      copy: <FileCopy className='copyButton' onClick={() => this.copyQuote()} />
    };
  }

@@ -40,7 +40,7 @@ export default class Quote extends React.PureComponent {
    if (quotePack === 'undefined') {
      return this.doOffline();
    }
-    
+
    quotePack = JSON.parse(quotePack);

    if (quotePack) {
@@ -109,19 +109,19 @@ export default class Quote extends React.PureComponent {
  favourite() {
    if (localStorage.getItem('favouriteQuote')) {
      localStorage.removeItem('favouriteQuote');
-      this.setState({ 
-        favourited: <StarIcon2 className='copyButton' onClick={() => this.favourite()} /> 
+      this.setState({
+        favourited: <StarIcon2 className='copyButton' onClick={() => this.favourite()} />
      });
    } else {
      localStorage.setItem('favouriteQuote', this.state.quote + ' - ' + this.state.author);
-      this.setState({ 
-        favourited: <StarIcon className='copyButton' onClick={() => this.favourite()} /> 
+      this.setState({
+        favourited: <StarIcon className='copyButton' onClick={() => this.favourite()} />
      });
    }
  }

  componentDidMount() {
-    this.setState({ 
+    this.setState({
      favourited: localStorage.getItem('favouriteQuote') ? <StarIcon className='copyButton' onClick={() => this.favourite()} /> : null, // todo: fix (localStorage.getItem('favouriteQuoteEnabled') === 'false')
      copy: (localStorage.getItem('copyButton') === 'false') ? null : this.state.copy,
      tweet: (localStorage.getItem('tweetButton') === 'false') ? null: this.state.tweet
@@ -132,12 +132,12 @@ export default class Quote extends React.PureComponent {

  render() {
    return (
-        <div className='quotediv'>
-          <h1 className='quote'>{`${this.state.quote}`}</h1>
-          <h1 className='quoteauthor'>
-            <a href={this.state.authorlink} className='quoteauthorlink' target='_blank' rel='noopener noreferrer'>{this.state.author}</a> {this.state.copy} {this.state.tweet} {this.state.favourited}
-          </h1>
-        </div>
+      <div className='quotediv'>
+        <h1 className='quote'>{`${this.state.quote}`}</h1>
+        <h1 className='quoteauthor'>
+          <a href={this.state.authorlink} className='quoteauthorlink' target='_blank' rel='noopener noreferrer'>{this.state.author}</a> {this.state.copy} {this.state.tweet} {this.state.favourited}
+        </h1>
+      </div>
    );
  }
 }
--- a/src/components/widgets/quote/offline_quotes.json
+++ b/src/components/widgets/quote/offline_quotes.json
@@ -1,80 +1,102 @@
 [
-    {
-        "author": "Robert De Niro",
-        "quote": "Time goes on. So whatever you’re going to do, do it. Do it now. Don’t wait."
-    },
-    {
-        "author": "Walt Disney",
-        "quote": "All our dreams can come true, if we have the courage to pursue them."
-    },
-    {
-        "author": "Confucius",
-        "quote": "It does not matter how slowly you go as long as you do not stop."
-    }, {
-        "author": "Roy T. Bennett",
-        "quote": "Believe in yourself. You are braver than you think, more talented than you know, and capable of more than you imagine."
-    }, {
-        "author": "Wayne Dyer",
-        "quote": "If you believe it will work out, you’ll see opportunities. If you believe it won’t, you will see obstacles."
-    }, {
-        "author": "George Addair",
-        "quote": "Everything you’ve ever wanted is on the other side of fear."
-    }, {
-        "author": "Winston Churchill",
-        "quote": "Success is not final, failure is not fatal: it is the courage to continue that counts."
-    }, {
-        "author": "Paulo Coelho",
-        "quote": "There is only one thing that makes a dream impossible to achieve: the fear of failure"
-    }, {
-        "author": "Brian Tracy",
-        "quote": "Your true success in life begins only when you make the commitment to become excellent at what you do."
-    }, {
-        "author": "Chantal Sutherland",
-        "quote": "Believe in yourself, take on your challenges, dig deep within yourself to conquer fears. Never let anyone bring you down. You got to keep going."
-    }, {
-        "author": "Les Brown",
-        "quote": "Too many of us are not living our dreams because we are living our fears."
-    }, {
-        "author": "Bob Riley",
-        "quote": "Hard times don’t create heroes. It is during the hard times when the ‘hero’ within us is revealed."
-    }, {
-        "author": "Jack Canfield",
-        "quote": "If you can tune into your purpose and really align with it, setting goals so that your vision is an expression of that purpose, then life flows much more easily."
-    }, {
-        "author": "Napolean Hill",
-        "quote": "Whatever the mind can conceive and believe, it can achieve."
-    }, {
-        "author": "Jim Rohn",
-        "quote": "Don’t wish it were easier. Wish you were better."
-    }, {
-        "author": "Serena Williams",
-        "quote": "A champion is defined not by their wins but by how they can recover when they fall."
-    }, {
-        "author": "Sheryl Sandberg",
-        "quote": "Motivation comes from working on things we care about."
-    }, {
-        "author": "Reese Witherspoon",
-        "quote": "With the right kind of coaching and determination you can accomplish anything."
-    }, {
-        "author": "Hazrat Inayat Khan",
-        "quote": "Some people look for a beautiful place. Others make a place beautiful."
-    }, {
-        "author": "Albert Einstein",
-        "quote": "Life is like riding a bicycle. To keep your balance, you must keep moving."
-    }, {
-        "author": "Walt Disney",
-        "quote": "The way to get started is to quit talking and begin doing."
-    }, {
-        "author": "Winston Churchill",
-        "quote": "A pessimist sees the difficulty in every opportunity; an optimist sees the opportunity in every difficulty."
-    }, {
-        "author": "Will Rogers",
-        "quote": "Don't let yesterday take up too much of today."
-    }, {
-        "author": "Vince Lombardi",
-        "quote": "It's not whether you get knocked down, it's whether you get up."
-    }, {
-        "author": "Steve Jobs",
-        "quote": "If you are working on something that you really care about, you don’t have to be pushed. The vision pulls you."
-    }
-]
+  {
+    "author": "Robert De Niro",
+    "quote": "Time goes on. So whatever you’re going to do, do it. Do it now. Don’t wait."
+  },
+  {
+    "author": "Walt Disney",
+    "quote": "All our dreams can come true, if we have the courage to pursue them."
+  },
+  {
+    "author": "Confucius",
+    "quote": "It does not matter how slowly you go as long as you do not stop."
+  },
+  {
+    "author": "Roy T. Bennett",
+    "quote": "Believe in yourself. You are braver than you think, more talented than you know, and capable of more than you imagine."
+  },
+  {
+    "author": "Wayne Dyer",
+    "quote": "If you believe it will work out, you’ll see opportunities. If you believe it won’t, you will see obstacles."
+  },
+  {
+    "author": "George Addair",
+    "quote": "Everything you’ve ever wanted is on the other side of fear."
+  },
+  {
+    "author": "Winston Churchill",
+    "quote": "Success is not final, failure is not fatal: it is the courage to continue that counts."
+  },
+  {
+    "author": "Paulo Coelho",
+    "quote": "There is only one thing that makes a dream impossible to achieve: the fear of failure"
+  },
+  {
+    "author": "Brian Tracy",
+    "quote": "Your true success in life begins only when you make the commitment to become excellent at what you do."
+  },
+  {
+    "author": "Chantal Sutherland",
+    "quote": "Believe in yourself, take on your challenges, dig deep within yourself to conquer fears. Never let anyone bring you down. You got to keep going."
+  },
+  {
+    "author": "Les Brown",
+    "quote": "Too many of us are not living our dreams because we are living our fears."
+  },
+  {
+    "author": "Bob Riley",
+    "quote": "Hard times don’t create heroes. It is during the hard times when the ‘hero’ within us is revealed."
+  },
+  {
+    "author": "Jack Canfield",
+    "quote": "If you can tune into your purpose and really align with it, setting goals so that your vision is an expression of that purpose, then life flows much more easily."
+  },
+  {
+    "author": "Napolean Hill",
+    "quote": "Whatever the mind can conceive and believe, it can achieve."
+  },
+  {
+    "author": "Jim Rohn",
+    "quote": "Don’t wish it were easier. Wish you were better."
+  },
+  {
+    "author": "Serena Williams",
+    "quote": "A champion is defined not by their wins but by how they can recover when they fall."
+  },
+  {
+    "author": "Sheryl Sandberg",
+    "quote": "Motivation comes from working on things we care about."
+  },
+  {
+    "author": "Reese Witherspoon",
+    "quote": "With the right kind of coaching and determination you can accomplish anything."
+  },
+  {
+    "author": "Hazrat Inayat Khan",
+    "quote": "Some people look for a beautiful place. Others make a place beautiful."
+  },
+  {
+    "author": "Albert Einstein",
+    "quote": "Life is like riding a bicycle. To keep your balance, you must keep moving."
+  },
+  {
+    "author": "Walt Disney",
+    "quote": "The way to get started is to quit talking and begin doing."
+  },
+  {
+    "author": "Winston Churchill",
+    "quote": "A pessimist sees the difficulty in every opportunity; an optimist sees the opportunity in every difficulty."
+  },
+  {
+    "author": "Will Rogers",
+    "quote": "Don't let yesterday take up too much of today."
+  },
+  {
+    "author": "Vince Lombardi",
+    "quote": "It's not whether you get knocked down, it's whether you get up."
+  },
+  {
+    "author": "Steve Jobs",
+    "quote": "If you are working on something that you really care about, you don’t have to be pushed. The vision pulls you."
+  }
+]
--- a/src/components/widgets/quote/quote.scss
+++ b/src/components/widgets/quote/quote.scss
@@ -1,38 +1,38 @@
@import '../../../scss/variables';

 .quote {
-    font-size: 0.8em;
-    text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+  font-size: 0.8em;
+  text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
 }

@media screen and (min-width: 600px) {
-    .quote {
-        margin-left: 30%;
-        margin-right: 30%;
-    }
+  .quote {
+    margin-left: 30%;
+    margin-right: 30%;
+  }
 }

 .quoteauthor {
-    font-size: 0.9em;
-    letter-spacing: 0.5px;
+  font-size: 0.9em;
+  letter-spacing: 0.5px;
 }

 .copyButton {
-    cursor: pointer;
-    vertical-align: middle;
-    transition: ease 0.2s !important;
+  cursor: pointer;
+  vertical-align: middle;
+  transition: ease 0.2s !important;

-    &:hover {
-        transform: scale(1.1);
-    }
+  &:hover {
+    transform: scale(1.1);
+  }
 }

 i.material-icons,
 h1.quoteauthor {
-    display: inline;
+  display: inline;
 }

 .quoteauthorlink {
-    text-decoration: none;
-    color: white;
-}
+  text-decoration: none;
+  color: white;
+}
--- a/src/components/widgets/search/Search.jsx
+++ b/src/components/widgets/search/Search.jsx
@@ -67,10 +67,10 @@ export default class Search extends React.PureComponent {
    return (
      <div id='searchBar'>
        <form action={this.state.url}>
-            {this.state.microphone}
-            <SearchIcon onClick={() => searchButton()} id='searchButton'/>
-            <input type='text' placeholder={this.props.language} name={this.state.query} id='searchtext'/>
-          </form>
+          {this.state.microphone}
+          <SearchIcon onClick={() => searchButton()} id='searchButton'/>
+          <input type='text' placeholder={this.props.language} name={this.state.query} id='searchtext'/>
+        </form>
      </div>
    );
  }
--- a/src/components/widgets/search/search.scss
+++ b/src/components/widgets/search/search.scss
@@ -1,37 +1,37 @@
@import '../../../scss/variables';

 #searchBar {
+  position: absolute;
+  left: 20px;
+  top: 20px;
+  color: map-get($theme-colours, 'main-text-color');
+
+  input[type=text] {
+    width: 140px;
+    margin-left: 12px;
+    border-radius: 24px;
+    font-size: calc(5px + 1.2vmin);
+    border: none;
    position: absolute;
-    left: 20px;
-    top: 20px;
-    color: map-get($theme-colours, 'main-text-color');
+    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;

-    input[type=text] {
-        width: 140px;
-        margin-left: 12px;
-        border-radius: 24px;
-        font-size: calc(5px + 1.2vmin);
-        border: none;
-        position: absolute;
-        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;
-            background-color: rgba(0, 0, 0, .3);
-        }
+    &:focus {
+      width: 400px;
+      background-color: rgba(0, 0, 0, .3);
    }
+  }

-    .MuiSvgIcon-root {
-        margin-top: 4px;
-        font-size: 30px;
-        filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.3));
-        cursor: pointer;
-    }
+  .MuiSvgIcon-root {
+    margin-top: 4px;
+    font-size: 30px;
+    filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.3));
+    cursor: pointer;
+  }
 }

 .micIcon {
-    margin-right: 10px;
-}
+  margin-right: 10px;
+}
--- a/src/components/widgets/search/search_engines.json
+++ b/src/components/widgets/search/search_engines.json
@@ -1,48 +1,48 @@
 [
-    {
-        "name": "DuckDuckGo",
-        "settingsName": "duckduckgo",
-        "url": "https://duckduckgo.com"
-    },
-    {
-        "name": "Google",
-        "settingsName": "google",
-        "url": "https://google.com/search"
-    },
-    {
-        "name": "Bing",
-        "settingsName": "bing",
-        "url": "https://bing.com/search"
-    },
-    {
-        "name": "Yahoo",
-        "settingsName": "yahoo",
-        "url": "https://search.yahoo.com/search"
-    },
-    {
-        "name": "Ecosia",
-        "settingsName": "ecosia",
-        "url": "https://ecosia.org/search"
-    },
-    {
-        "name": "Яндекс",
-        "settingsName": "yandex",
-        "url": "https://yandex.ru/search",
-        "query": "text"
-    },
-    {
-        "name": "Qwant",
-        "settingsName": "qwant",
-        "url": "https://www.qwant.com/"
-    },
-    {
-        "name": "Ask",
-        "settingsName": "ask",
-        "url": "https://ask.com/web"
-    },
-    {
-        "name": "Startpage",
-        "settingsName": "startpage",
-        "url": "https://www.startpage.com/sp/search"
-    }
-]
+  {
+    "name": "DuckDuckGo",
+    "settingsName": "duckduckgo",
+    "url": "https://duckduckgo.com"
+  },
+  {
+    "name": "Google",
+    "settingsName": "google",
+    "url": "https://google.com/search"
+  },
+  {
+    "name": "Bing",
+    "settingsName": "bing",
+    "url": "https://bing.com/search"
+  },
+  {
+    "name": "Yahoo",
+    "settingsName": "yahoo",
+    "url": "https://search.yahoo.com/search"
+  },
+  {
+    "name": "Ecosia",
+    "settingsName": "ecosia",
+    "url": "https://ecosia.org/search"
+  },
+  {
+    "name": "Яндекс",
+    "settingsName": "yandex",
+    "url": "https://yandex.ru/search",
+    "query": "text"
+  },
+  {
+    "name": "Qwant",
+    "settingsName": "qwant",
+    "url": "https://www.qwant.com/"
+  },
+  {
+    "name": "Ask",
+    "settingsName": "ask",
+    "url": "https://ask.com/web"
+  },
+  {
+    "name": "Startpage",
+    "settingsName": "startpage",
+    "url": "https://www.startpage.com/sp/search"
+  }
+]
--- a/src/components/widgets/time/Clock.jsx
+++ b/src/components/widgets/time/Clock.jsx
@@ -21,7 +21,7 @@ export default class Clock extends React.PureComponent {

      // Percentage
      if (localStorage.getItem('percentageComplete') === 'true') {
-        return this.setState({ 
+        return this.setState({
          time: (now.getHours() / 24).toFixed(2).replace('0.', '') + '%'
        });
      }
@@ -30,8 +30,8 @@ export default class Clock extends React.PureComponent {
      if (localStorage.getItem('analog') === 'true') {
        require('react-clock/dist/Clock.css'); // load analog clock css

-        this.setState({ 
-          time: now 
+        this.setState({
+          time: now
        });
      } else {
        // Default clock
@@ -53,13 +53,13 @@ export default class Clock extends React.PureComponent {
            time = `${('00' + now.getHours()).slice(-2)}:${('00' + now.getMinutes()).slice(-2)}${sec}`;
          }

-          this.setState({ 
-            time: time 
+          this.setState({
+            time: time
          });
        } else {
          // 12 hour support
          let hours = now.getHours();
-  
+
          if (hours > 12) {
            hours -= 12;
          }
@@ -74,7 +74,7 @@ export default class Clock extends React.PureComponent {
            time = `${hours}:${now.getMinutes()}${sec}`;
          } else {
            time = `${('00' + hours).slice(-2)}:${('00' + now.getMinutes()).slice(-2)}${sec}`;
-          } 
+          }

          this.setState({
            time: time,
@@ -93,7 +93,7 @@ export default class Clock extends React.PureComponent {

  render() {
    let clockHTML = <h1 className='clock'>{this.state.time}<span className='ampm'>{this.state.ampm}</span></h1>;
-  
+
    if (localStorage.getItem('analog') === 'true') {
      clockHTML = <Analog className='analogclock' value={this.state.time} renderHourMarks={false} renderMinuteMarks={false} />;
    }
--- a/src/components/widgets/time/Date.jsx
+++ b/src/components/widgets/time/Date.jsx
@@ -32,24 +32,24 @@ export default class DateWidget extends React.PureComponent {
          day = dateYear;
          year = dateDay;
          break;
-        default: 
+        default:
          break; // DMY
      }

      let format;
      switch (localStorage.getItem('shortFormat')) {
-        case 'dash': 
-          format = `${day}-${month}-${year}`; 
+        case 'dash':
+          format = `${day}-${month}-${year}`;
          break;
-        case 'gaps': 
-          format = `${day} - ${month} - ${year}`; 
+        case 'gaps':
+          format = `${day} - ${month} - ${year}`;
          break;
-        default: 
+        default:
          format = `${day}/${month}/${year}`;
      }

-      this.setState({ 
-        date: format 
+      this.setState({
+        date: format
      });
    } else {
      // Full date
@@ -60,8 +60,8 @@ export default class DateWidget extends React.PureComponent {
      const month = date.toLocaleDateString(lang, { month: 'long' });
      const year = date.getFullYear();

-      this.setState({ 
-        date: `${day} ${nth} ${month} ${year}` 
+      this.setState({
+        date: `${day} ${nth} ${month} ${year}`
      });
    }
  }
@@ -73,4 +73,4 @@ export default class DateWidget extends React.PureComponent {
  render() {
    return <span style={{ 'textTransform': 'capitalize', 'fontWeight': 'bold' }}>{this.state.date}</span>
  }
-}
+}
--- a/src/components/widgets/time/clock.scss
+++ b/src/components/widgets/time/clock.scss
@@ -1,24 +1,24 @@
@import '../../../scss/variables';

 .clock {
-    font-size: 4em;
-    margin: 0;
+  font-size: 4em;
+  margin: 0;
 }

 .ampm {
-    font-size: 0.5em;
+  font-size: 0.5em;
 }

 .analogclock,
 .react-clock__face {
-    margin: 0 auto;
-    border-radius: 100%;
-    box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.3);
-    border: none !important;
-    border: 1px solid map-get($theme-colours, 'main') !important;
+  margin: 0 auto;
+  border-radius: 100%;
+  box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.3);
+  border: none !important;
+  border: 1px solid map-get($theme-colours, 'main') !important;
 }

 .react-clock__hand__body {
-    background: map-get($theme-colours, 'main') !important;
-    box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
-}
+  background: map-get($theme-colours, 'main') !important;
+  box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
+}