feat: finish 5.0 (mostly)

Co-authored-by: Alex Sparkes <turbomarshmello@gmail.com>

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

@@ -4,6 +4,8 @@
   h3 {
     text-shadow: none;
     margin: 0;
+    cursor: initial;
+    user-select: none;
   }
 }
 

src/components/widgets/quicklinks/QuickLinks.jsx

@@ -14,7 +14,9 @@ export default class QuickLinks extends React.PureComponent {
       items: JSON.parse(localStorage.getItem('quicklinks')),
       name: '',
       url: '',
-      showAddLink: 'hidden'
+      showAddLink: 'hidden',
+      nameError: '',
+      urlError: ''
     };
     this.language = window.language.widgets.quicklinks;
   }
@@ -35,6 +37,22 @@ export default class QuickLinks extends React.PureComponent {
     let data = JSON.parse(localStorage.getItem('quicklinks'));
     let url = this.state.url;
 
+    let nameError, urlError;
+    if (this.state.name.length <= 0) {
+      nameError = 'Must provide name';
+    }
+
+    if (url.length <= 0) {
+      urlError = 'Must provide URL';
+    }
+
+    if (nameError || urlError) {
+      return this.setState({
+        nameError: nameError,
+        urlError: urlError
+      });
+    }
+
     if (!url.startsWith('http://') && !url.startsWith('https://')) {
       url = 'http://' + url;
     }
@@ -99,8 +117,8 @@ export default class QuickLinks extends React.PureComponent {
   render() {
     let target, rel = null;
     if (localStorage.getItem('quicklinksnewtab') === 'true') {
-      target ='_blank';
-      rel ='noopener noreferrer';
+      target = '_blank';
+      rel = 'noopener noreferrer';
     }
 
     const tooltipEnabled = localStorage.getItem('quicklinkstooltip');
@@ -113,7 +131,7 @@ export default class QuickLinks extends React.PureComponent {
       );
 
       if (tooltipEnabled === 'true') {
-        return <Tooltip title={item.name} key={item.name}>{link}</Tooltip>;
+        return <Tooltip title={item.name} key={item.name} draggable={false}>{link}</Tooltip>;
       } else {
         return link;
       }
@@ -129,9 +147,9 @@ export default class QuickLinks extends React.PureComponent {
           <div className='topbarquicklinks'>
             <h4>{this.language.new}</h4>
             <TextareaAutosize rowsMax={1} placeholder={this.language.name} value={this.state.name} onChange={(e) => this.setState({ name: e.target.value })} />
-            <br/>
+            <p>{this.state.nameError}</p>
             <TextareaAutosize rowsMax={10} placeholder={this.language.url} value={this.state.url} onChange={(e) => this.setState({ url: e.target.value })} />
-            <br/>
+            <p>{this.state.urlError}</p>
             <button className='pinNote' onClick={this.addLink}>{this.language.add}</button>
           </div>
         </span>

src/components/widgets/quicklinks/quicklinks.scss

@@ -15,9 +15,8 @@
   text-align: center;
   border-radius: 12px;
   position: absolute;
-  top: 56%;
   margin-left: -140px;
-  margin-top: 5px;
+  margin-top: 50px;
 
   svg {
     float: left;
@@ -43,16 +42,18 @@ textarea {
     padding: 9px;
   }
 
-  h3 {
-    font-size: 46px;
-    margin-right: 20px;
-  }
-
   h4 {
     margin: 0;
     cursor: initial;
     user-select: none;
   }
+
+  p {
+    font-size: 16px;
+    cursor: initial;
+    user-select: none;
+    color: rgba(255, 71, 87, 1);
+  }
 }
 
 .dark textarea {
@@ -79,6 +80,7 @@ textarea {
     height: 32px;
     width: auto;
     transition: transform .2s;
+    user-select: none;
 
     &:hover {
       transform: scale(1.1);

src/components/widgets/search/search.scss

@@ -13,7 +13,7 @@
     font-size: calc(5px + 1.2vmin);
     border: none;
     position: absolute;
-    background-color: rgba(0, 0, 0, 0.1);
+    background-color: rgba(0, 0, 0, 0.3);
     -webkit-transition: width 0.5s ease-in-out;
     transition: width 0.5s ease-in-out;
     color: white;
@@ -22,7 +22,7 @@
 
     &:focus {
       width: 400px;
-      background-color: rgba(0, 0, 0, .3);
+      background-color: rgba(0, 0, 0, .5);
       user-select: text;
     }
   }

src/components/widgets/time/Clock.jsx

@@ -114,14 +114,14 @@ export default class Clock extends React.PureComponent {
       clockHTML = (
         <React.Suspense fallback={renderLoader()}>
           <Analog 
-          className='analogclock clock-container' 
-          value={this.state.time} 
-          renderHourMarks={enabled('hourMarks')} 
-          renderMinuteMarks={enabled('minuteMarks')} 
-          renderSecondHand={enabled('secondHand')} 
-          renderMinuteHand={enabled('minuteHand')} 
-          renderHourHand={enabled('hourHand')} 
-        />
+            className='analogclock clock-container' 
+            value={this.state.time} 
+            renderMinuteMarks={enabled('minuteMarks')}
+            renderHourMarks={enabled('hourMarks')} 
+            renderSecondHand={enabled('secondHand')} 
+            renderMinuteHand={enabled('minuteHand')} 
+            renderHourHand={enabled('hourHand')} 
+          />
         </React.Suspense>
       );
     }

src/components/widgets/weather/Weather.jsx

@@ -48,8 +48,14 @@ export default class Weather extends React.PureComponent {
       data = await (await fetch (window.constants.WEATHER_URL + `?city=${this.state.location}`)).json();
     }
 
+    if (data.cod === '404') {
+      return this.setState({
+        location: window.language.widgets.weather.not_found
+      });
+    }
+
     let temp = data.main.temp;
-    let temp_min = data.main.temp_mix 
+    let temp_min = data.main.temp_min; 
     let temp_max = data.main.temp_max;
     let temp_text = 'K';
 
@@ -105,6 +111,12 @@ export default class Weather extends React.PureComponent {
       return (localStorage.getItem(setting) === 'true');
     };
 
+    if (this.state.location === window.language.widgets.weather.not_found) {
+      return (<div className='weather'>
+        <span className='loc'>{this.state.location}</span>
+      </div>);
+    };
+
     const minmax = () => {
       const mintemp = (localStorage.getItem('mintemp') === 'true');
       const maxtemp = (localStorage.getItem('maxtemp') === 'true');
@@ -129,7 +141,7 @@ export default class Weather extends React.PureComponent {
         {enabled('windspeed') ? <span className='loc'><br/><WiWindy/>{this.state.weather.windspeed}<span className='minmax'> m/s</span></span> : null}
         {enabled('atmosphericpressure') ? <span className='loc'><br/>{this.state.weather.pressure}<span className='minmax'> hPa</span></span> : null}
         <br/>
-        <span className='loc'>{this.state.location}</span>
+        {enabled('showlocation') ? <span className='loc'>{this.state.location}</span> : null}
       </div>
     );
   }

src/components/widgets/weather/weather.scss

@@ -4,14 +4,18 @@
   right: 1rem;
   cursor: initial;
   user-select: none;
+  padding: 20px;
+  background-color: rgba(0, 0, 0, 0.3);
+  border-radius: 20px;
 
   span {
     text-shadow: 0 0 10px rgb(0 0 0 / 50%);
   }
 
   svg {
-    filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.3));
-    font-size: 0.8em;
+    filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.1));
+    vertical-align: middle;
+    font-size: 35px;
   }
 
   .loc {