feat: better error feedback in weather, run prettier + lint

jsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "module": "commonjs",
-    "target": "es6"
+    "target": "es6",
   },
-  "exclude": ["node_modules"]
+  "exclude": ["node_modules"],
 }

src/components/modals/apps/scss/index.scss

@@ -5,6 +5,7 @@ $appsWidth: 21rem;
 .appsShortcutContainer {
   max-height: 35rem;
   overflow-y: auto;
+
   // scrollbar-width: thin;
   border-radius: 0.8em;
   padding: 1.2em;

src/components/modals/main/scss/index.scss

@@ -10,10 +10,7 @@
 .Overlay {
   position: fixed;
   z-index: 100;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  inset: 0;
   width: 100vw;
   height: 100vh;
   display: grid;
@@ -170,6 +167,7 @@ h5 {
   gap: 20px;
   justify-content: center;
   align-items: center;
+
   .link {
     display: flex;
     flex-flow: row;

src/components/modals/main/scss/marketplace/modules/_buttons.scss

@@ -28,7 +28,8 @@
   display: inline;
   margin-top: 0;
   float: none !important;
-  padding: 0 20px 0 20px;
+  padding: 0 20px;
+
   // width: 200px;
 }
 

src/components/modals/main/scss/modules/_sidebar.scss

@@ -6,13 +6,12 @@
     left: 0;
     position: sticky;
     margin: 0;
-    padding: 0 5px 0 5px;
+    padding: 0 5px;
     background: t($modal-sidebar);
     border-radius: 12px 0 0 12px;
-    overflow-y: auto;
+    overflow: hidden auto;
     height: 80vh;
     min-width: 250px;
-    overflow-x: hidden;
 
     .mainTitle {
       text-align: center;

src/components/modals/main/scss/modules/_tab-content.scss

@@ -65,9 +65,8 @@
 }
 
 .activityButtons {
-  justify-content: space-between !important;
+  place-content: space-between space-between !important;
   align-items: flex-end !important;
-  align-content: space-between !important;
   flex-flow: row wrap !important;
 
   button:not(:first-child) {

src/components/modals/main/scss/settings/_main.scss

@@ -1,5 +1,4 @@
 @import 'scss/variables';
-
 @import 'modules/material-ui';
 @import 'modules/tabs/about';
 @import 'modules/tabs/changelog';
@@ -140,10 +139,12 @@ h4 {
       justify-content: center;
       margin-bottom: 30px;
     }
+
     .statGrid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
       grid-gap: 10px;
+
       div {
         display: flex;
         flex-flow: column;
@@ -214,6 +215,7 @@ h4 {
     font-weight: bold;
     font-size: 15px;
   }
+
   .subtitle {
     font-size: 13px !important;
   }

src/components/modals/main/scss/settings/modules/_material-ui.scss

@@ -173,6 +173,7 @@ legend,
 
 .MuiChip-root {
   text-transform: capitalize;
+
   @include themed {
     background: t($modal-sidebarActive) !important;
     color: t($color) !important;

src/components/modals/main/settings/sections/Weather.jsx

@@ -61,6 +61,10 @@ export default class TimeSettings extends PureComponent {
 
     const LocationSetting = () => {
       const getAuto = () => {
+        this.setState({
+          location: variables.getMessage('modals.main.loading'),
+        });
+
         navigator.geolocation.getCurrentPosition(
           async (position) => {
             const data = await (

src/components/modals/welcome/welcome.scss

@@ -68,11 +68,12 @@
   .step {
     display: inline-block;
     border-bottom: 2px solid grey;
-    padding: 10px 20px 10px 20px;
+    padding: 10px 20px;
     margin: 5px;
     transition: 0.2s ease-in-out;
     cursor: pointer;
     border-radius: 10px 10px 0 0;
+
     &:hover {
       background: #dd4038;
       border-radius: 10px;
@@ -103,8 +104,7 @@
       display: flex;
       flex-direction: column;
       align-items: center;
-      align-content: center;
-      justify-content: center;
+      place-content: center center;
       cursor: pointer;
 
       &:hover {
@@ -197,9 +197,11 @@ a.privacy {
 .examples {
   display: flex;
   flex-flow: column;
+
   .shareYourMue {
     width: fit-content;
   }
+
   img {
     max-width: 60%;
     border-radius: 10px 10px 10px 0;
@@ -207,9 +209,10 @@ a.privacy {
 }
 
 .shareYourMue {
-  padding: 8px 20px 8px 20px;
+  padding: 8px 20px;
   border-radius: 0 0 10px 10px;
   letter-spacing: 2px;
+
   @include themed {
     background-color: t($modal-sidebarActive);
   }
@@ -264,9 +267,10 @@ a.privacy {
 
   .icon {
     background: linear-gradient(238.7deg, #ff5c25 13.8%, #d21a11 49.49%, #ff456e 87.48%);
-    /*@include themed {
+
+    /* @include themed {
       background-color: t($modal-sidebarActive);
-    }*/
+    } */
 
     height: 50px !important;
     width: 50px !important;

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

@@ -459,6 +459,7 @@
   display: flex;
   flex-flow: column;
   justify-content: space-between;
+
   div {
     display: flex;
     flex-flow: row;

src/components/widgets/navbar/Todo.jsx

@@ -243,7 +243,13 @@ function TodoWrapper() {
   });
 
   return (
-    <Todo todoRef={setReference} floatRef={refs.setFloating} position={strategy} xPosition={x} yPosition={y} />
+    <Todo
+      todoRef={setReference}
+      floatRef={refs.setFloating}
+      position={strategy}
+      xPosition={x}
+      yPosition={y}
+    />
   );
 }
 

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

@@ -108,11 +108,13 @@ textarea {
 .notes-buttons {
   display: flex !important;
   gap: 10px;
+
   button {
     &:disabled {
-      @include themed() {
+      @include themed {
         background: t($modal-sidebar) !important;
       }
+
       cursor: not-allowed;
     }
   }

src/components/widgets/navbar/scss/_todo.scss

@@ -7,8 +7,7 @@
 
     .todoRows {
       max-height: 65vh !important;
-      overflow-y: visible !important;
-      overflow-x: hidden;
+      overflow: hidden visible !important;
       display: flex;
       flex-flow: column;
       gap: 15px;

src/components/widgets/quicklinks/quicklinks.scss

@@ -20,8 +20,7 @@
   border-radius: 12px;
   z-index: 1;
   display: flex;
-  align-content: center;
-  justify-content: center;
+  place-content: center center;
   gap: 12px;
 
   textarea {
@@ -151,6 +150,7 @@ button.quicklinks {
 
 .addLinkModal {
   @extend %tabText;
+
   padding: 15px;
 
   @include themed {
@@ -159,7 +159,8 @@ button.quicklinks {
 
   button {
     @include modal-button(standard);
-    padding: 10px 30px 10px 30px;
+
+    padding: 10px 30px;
     float: right;
   }
 
@@ -182,7 +183,7 @@ button.quicklinks {
   grid-template-rows: auto 1fr; /* Two rows: first auto-sized, second filling remaining space */
   grid-template-columns: repeat(2, 1fr); /* Two equal-width columns for the first row */
   grid-gap: 10px; /* Optional gap between items */
-  padding: 15px 0 15px 0;
+  padding: 15px 0;
 
   button {
     display: flex;

src/components/widgets/quote/Quote.jsx

@@ -115,8 +115,8 @@ export default class Quote extends PureComponent {
 
   stripHTML(html) {
     const tmpdoc = new DOMParser().parseFromString(html, 'text/html');
-    return tmpdoc.body.textContent || "";
-}
+    return tmpdoc.body.textContent || '';
+  }
 
   async getAuthorImg(author) {
     if (localStorage.getItem('authorImg') === 'false') {

src/components/widgets/weather/Weather.jsx

@@ -41,6 +41,10 @@ export default class Weather extends PureComponent {
       );
 
       if (!response.ok) {
+        this.setState({
+          location: variables.getMessage('modals.main.error_boundary.title'),
+          done: true,
+        });
         throw new Error('Network response was not ok');
       }
 
@@ -49,6 +53,7 @@ export default class Weather extends PureComponent {
       if (data.status === 404) {
         return this.setState({
           location: variables.getMessage('widgets.weather.not_found'),
+          done: true,
         });
       }
 
@@ -107,7 +112,7 @@ export default class Weather extends PureComponent {
 
     const weatherType = localStorage.getItem('weatherType') || 1;
 
-    if (this.state.location === variables.getMessage('weather.not_found')) {
+    if (!this.state.weather) {
       return (
         <div className="weather">
           <span className="loc">{this.state.location}</span>

src/scss/index.scss

@@ -18,10 +18,7 @@ body {
   font-size: calc(10px + 2vmin);
   text-align: center;
   position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
+  inset: 0;
   text-shadow: 0 0 25px rgb(0 0 0 / 30%);
   display: grid;
   place-items: center;
@@ -123,6 +120,7 @@ body {
   display: flex;
   justify-content: space-between;
   align-items: center;
+
   button {
     margin-bottom: 15px;
     flex-flow: row !important;