fix: todo ordering

- start work on improving loaders, error messages etc

src/components/modals/ErrorBoundary.jsx

@@ -9,7 +9,7 @@ export default class ErrorBoundary extends PureComponent {
     this.state = {
       error: false,
       errorData: '',
-      showReport: true
+      showReport: true,
     };
   }
 
@@ -18,44 +18,48 @@ export default class ErrorBoundary extends PureComponent {
     variables.stats.postEvent('modal', 'Error occurred');
     return {
       error: true,
-      errorData: error
+      errorData: error,
     };
   }
 
   reportError() {
     captureException(this.state.errorData);
     this.setState({
-      showReport: false
-    })
+      showReport: false,
+    });
   }
 
   render() {
     if (this.state.error) {
       return (
         <div className="emptyItems">
-          <div className="emptyMessage">
+          <div className="emptyNewMessage">
             <MdErrorOutline />
-            <h1>
+            <span className="title">
               {variables.language.getMessage(
                 variables.languagecode,
                 'modals.main.error_boundary.title',
               )}
-            </h1>
-            <p>
+            </span>
+            <span className="subtitle">
               {variables.language.getMessage(
                 variables.languagecode,
                 'modals.main.error_boundary.message',
               )}
-            </p>
-            {this.state.showReport ? <button onClick={() => this.reportError()}>
-              Send Error Report
-            </button> : <button>Sent!</button>}
-            <button className="refresh" onClick={() => window.location.reload()}>
-              {variables.language.getMessage(
-                variables.languagecode,
-                'modals.main.error_boundary.refresh',
+            </span>
+            <div className="buttonsRow">
+              {this.state.showReport ? (
+                <button onClick={() => this.reportError()}>Send Error Report</button>
+              ) : (
+                <span className="subtitle">Sent!</span>
               )}
-            </button>
+              <button className="refresh" onClick={() => window.location.reload()}>
+                {variables.language.getMessage(
+                  variables.languagecode,
+                  'modals.main.error_boundary.refresh',
+                )}
+              </button>
+            </div>
           </div>
         </div>
       );

src/components/modals/main/marketplace/sections/Added.jsx

@@ -1,6 +1,6 @@
 import variables from 'modules/variables';
 import { PureComponent } from 'react';
-import { MdLocalMall, MdUpdate } from 'react-icons/md';
+import { MdLocalMall, MdUpdate, MdOutlineExtensionOff } from 'react-icons/md';
 import { toast } from 'react-toastify';
 
 import Item from '../Item';
@@ -127,8 +127,13 @@ export default class Added extends PureComponent {
     if (this.state.installed.length === 0) {
       return (
         <div className="emptyItems">
-          <div className="emptyMessage">
-            <MdLocalMall />
+          <div className="emptyNewMessage">
+            {/*<MdLocalMall />
+            <span className="title">{this.getMessage('modals.main.addons.empty.title')}</span>
+            <span className="subtitle">
+              {this.getMessage('modals.main.addons.empty.description')}
+      </span>*/}
+            <MdOutlineExtensionOff />
             <span className="title">{this.getMessage('modals.main.addons.empty.title')}</span>
             <span className="subtitle">
               {this.getMessage('modals.main.addons.empty.description')}
@@ -163,7 +168,8 @@ export default class Added extends PureComponent {
             <option value="z-a">{this.getMessage('modals.main.addons.sort.z_a')}</option>
           </Dropdown>
           <button className="addToMue sideload updateCheck" onClick={() => this.updateCheck()}>
-            <MdUpdate />{this.getMessage('modals.main.addons.check_updates')}
+            <MdUpdate />
+            {this.getMessage('modals.main.addons.check_updates')}
           </button>
         </div>
         <Items

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

@@ -218,6 +218,30 @@
   }
 }
 
+.emptyNewMessage {
+  display: flex;
+  gap: 20px;
+  flex-flow: column;
+  text-align: center;
+  align-items: center;
+  img {
+    width: 200px;
+    height: auto;
+  }
+  svg {
+    font-size: 70px;
+   /* background: -webkit-linear-gradient(90deg,rgba(255,92,39,.7) 37%,rgba(255,70,110,.67) 60%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;*/
+  }
+  .buttonsRow {
+    display: flex;
+    flex-flow: row;
+    gap: 30px;
+    align-items: center;
+  }
+}
+
 p.author {
   margin-top: -5px;
 }

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

@@ -23,8 +23,8 @@ export default class About extends PureComponent {
       loading: this.getMessage('modals.main.loading'),
       image:
         document.body.classList.contains('dark')
-          ? 'public/icons/mue_dark.png'
-          : 'public/icons/mue_light.png',
+          ? 'icons/mue_dark.png'
+          : 'icons/mue_light.png',
     };
     this.controller = new AbortController();
   }

src/components/widgets/navbar/Todo.jsx

@@ -1,6 +1,12 @@
 import variables from 'modules/variables';
 import { PureComponent } from 'react';
-import { MdChecklist, MdPushPin, MdDelete, MdPlaylistAdd,  MdOutlineDragIndicator} from 'react-icons/md';
+import {
+  MdChecklist,
+  MdPushPin,
+  MdDelete,
+  MdPlaylistAdd,
+  MdOutlineDragIndicator,
+} from 'react-icons/md';
 import TextareaAutosize from '@mui/material/TextareaAutosize';
 import Tooltip from '../../helpers/tooltip/Tooltip';
 import Checkbox from '@mui/material/Checkbox';
@@ -9,15 +15,12 @@ import { shift, useFloating } from '@floating-ui/react-dom';
 import { sortableContainer, sortableElement } from 'react-sortable-hoc';
 
 const SortableItem = sortableElement(({ value }) => (
-  <li>
+  <div>
     {value}
-    <MdOutlineDragIndicator />
-  </li>
+  </div>
 ));
 
-const SortableContainer = sortableContainer(({ children }) => (
-  <ul>{children}</ul>
-));
+const SortableContainer = sortableContainer(({ children }) => <div>{children}</div>);
 
 class Todo extends PureComponent {
   constructor() {
@@ -167,33 +170,32 @@ class Todo extends PureComponent {
                   disableAutoscroll
                 >
                   {this.state.todo.map((_value, index) => (
-                    <div
-                      className={'todoRow' + (this.state.todo[index].done ? ' done' : '')}
-                      key={index}
-                    >
-                      <SortableItem
-                        key={`item-${index}`}
-                        index={index}
-                        value={
-                          <>
-                            <Checkbox
-                              checked={this.state.todo[index].done}
-                              onClick={() => this.updateTodo('done', index)}
-                            />
-                            <TextareaAutosize
-                              placeholder={variables.language.getMessage(
-                                variables.languagecode,
-                                'widgets.navbar.notes.placeholder',
-                              )}
-                              value={this.state.todo[index].value}
-                              onChange={(data) => this.updateTodo('set', index, data)}
-                              readOnly={this.state.todo[index].done}
-                            />
-                            <MdDelete onClick={() => this.updateTodo('remove', index)} />
-                          </>
-                        }
-                      />
-                    </div>
+                    <SortableItem
+                      key={`item-${index}`}
+                      index={index}
+                      value={
+                        <div
+                          className={'todoRow' + (this.state.todo[index].done ? ' done' : '')}
+                          key={index}
+                        >
+                          <Checkbox
+                            checked={this.state.todo[index].done}
+                            onClick={() => this.updateTodo('done', index)}
+                          />
+                          <TextareaAutosize
+                            placeholder={variables.language.getMessage(
+                              variables.languagecode,
+                              'widgets.navbar.notes.placeholder',
+                            )}
+                            value={this.state.todo[index].value}
+                            onChange={(data) => this.updateTodo('set', index, data)}
+                            readOnly={this.state.todo[index].done}
+                          />
+                          <MdDelete onClick={() => this.updateTodo('remove', index)} />
+                          <MdOutlineDragIndicator />
+                        </div>
+                      }
+                    />
                   ))}
                 </SortableContainer>
               </div>

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

@@ -22,7 +22,7 @@
   flex-flow: row;
   align-items: center;
   padding-right: 10px;
-  margin: 1px;
+  margin: 10px 0 10px 0;
 
   @include themed() {
     color: t($color) !important;