fix: overview tab

Co-authored-by: David Ralph <me@davidcralph.co.uk>

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

@@ -230,3 +230,95 @@ h5 {
     align-items: center;
   }
 }
+
+.reminder-info {
+  display: flex;
+  flex-flow: column;
+  position: absolute;
+  bottom: 0;
+  padding: 15px;
+  gap: 15px;
+  @include themed() {
+    background-color: t($modal-sidebarActive);
+    border-radius: t($borderRadius);
+  }
+  button {
+    @include basicIconButton(5px, 5px, modal);
+    display: flex;
+    justify-content: center;
+    gap: 15px;
+    svg {
+      margin: 0 !important;
+    }
+  }
+  @extend %tabText;
+}
+
+.quoteSkeleton {
+  margin-top: 5px;
+  display: flex;
+  flex-flow: column;
+  gap: 5px;
+  align-items: center;
+  div {
+    display: flex;
+    flex-flow: row;
+  }
+  .text {
+    display: flex;
+    flex-flow: column;
+    padding: 5px;
+  }
+  .skeletonAuthor {
+    font-size: smaller;
+    padding: 5px;
+    display: flex;
+    flex-flow: row;
+    align-items: center;
+    gap: 25px;
+    padding: 0 20px 0 5px;
+    svg {
+      @include themed() {
+        background-color: t($modal-sidebar);
+        padding: 10px;
+        border-radius: t($borderRadius);
+        place-items: center;
+      }
+    }
+    @include themed() {
+      background-color: t($modal-sidebarActive);
+      border-radius: t($borderRadius);
+    }
+    .title {
+      font-size: medium !important;
+    }
+    .subtitle {
+      font-size: smaller !important;
+    }
+  }
+}
+
+.quickLinksSkeleton {
+  .circles {
+    display: flex;
+    flex-flow: row;
+    gap: 5px;
+    div {
+      margin-top: 10px;
+      padding: 3px;
+      height: 20px;
+      width: 20px;
+      border-radius: 100%;
+      display: grid;
+      place-items: center;
+      @include themed() {
+        background-color: t($modal-sidebarActive);
+      }
+    }
+  }
+}
+
+.clockSkeleton {
+  font-size: 30px !important;
+  font-weight: bold;
+}

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

@@ -113,6 +113,9 @@ table {
   }
 }
 
+.flexGrow {
+  flex-grow: 1;
+}
 .messageMap {
   display: flex;
   flex-flow: row;
@@ -139,6 +142,12 @@ table {
   .messageText {
     display: flex;
     flex-flow: column;
+    flex-grow: 3; 
+    textarea {
+      @include themed() {
+        color: t($color);
+      }
+    }
   }
   .messageAction {
     float: right;

src/components/modals/main/scss/settings/modules/tabs/_order.scss

@@ -103,6 +103,9 @@
   }
 
   .previewItem {
+    display: flex;
+    flex-flow: column;
+    align-items: center;
     .quotediv .quote {
       max-width: 100%;
     }

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

@@ -82,7 +82,7 @@ export default class Message extends PureComponent {
         <div className="messagesContainer">
           {this.state.messages.map((_url, index) => (
             <div className="messageMap">
-              <div>
+              <div className="flexGrow">
                 <div className="icon">
                   <MdOutlineTextsms />
                 </div>

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

@@ -4,12 +4,12 @@ import { MdOutlineDragIndicator } from 'react-icons/md';
 import { sortableContainer, sortableElement } from 'react-sortable-hoc';
 import { toast } from 'react-toastify';
 
-import Greeting from '../../../../widgets/greeting/Greeting';
+import Greeting from './overview_skeletons/Greeting';
-import Clock from '../../../../widgets/time/Clock';
+import Clock from './overview_skeletons/Clock';
-import Quote from '../../../../widgets/quote/Quote';
+import Quote from './overview_skeletons/Quote';
-import QuickLinks from '../../../../widgets/quicklinks/QuickLinks';
+import QuickLinks from './overview_skeletons/QuickLinks';
-import Date from '../../../../widgets/time/Date';
+import Date from './overview_skeletons/Date';
-import Message from '../../../../widgets/message/Message';
+import Message from './overview_skeletons/Message';
 
 import EventBus from 'modules/helpers/eventbus';
 

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

@@ -214,7 +214,7 @@ export default class QuoteSettings extends PureComponent {
               />
               <Checkbox
                 name="quoteShareButton"
-                text={this.getMessage('modals.main.settings.sections.quote.buttons.tweet')}
+                text={this.getMessage('widgets.quote.share')}
                 category="quote"
               />
               <Checkbox

src/components/modals/main/settings/sections/overview_skeletons/Clock.jsx

@@ -0,0 +1,7 @@
+export default function ClockSkeleton() {
+  return (
+    <span className="new-clock clock-container clockSkeleton">
+     10:20
+    </span>
+  );
+}

src/components/modals/main/settings/sections/overview_skeletons/Date.jsx

@@ -0,0 +1,9 @@
+export default function DateSkeleton() {
+  return (
+    <span className="date">
+      Thursday January 1st
+      <br />
+      Week 1
+    </span>
+  );
+}

src/components/modals/main/settings/sections/overview_skeletons/Greeting.jsx

@@ -0,0 +1,7 @@
+export default function GreetingSkeleton() {
+  return (
+    <span className="greeting">
+        Good Morning
+    </span>
+  );
+}

src/components/modals/main/settings/sections/overview_skeletons/Message.jsx

@@ -0,0 +1,10 @@
+export default function MessageSkeleton() {
+  return (
+    <h2 className="message">
+      <span>
+        Message
+        <br />
+      </span>
+    </h2>
+  );
+}

src/components/modals/main/settings/sections/overview_skeletons/QuickLinks.jsx

@@ -0,0 +1,16 @@
+import { FaDiscord, FaTwitter } from 'react-icons/fa';
+import { SiKofi, SiPatreon } from 'react-icons/si';
+
+
+export default function QuicklinksSkeleton() {
+  return (
+    <div className="quickLinksSkeleton">
+      <div className='circles'>
+        <div><FaDiscord/></div>
+        <div><FaTwitter/></div>
+        <div><SiKofi/></div>
+        <div><SiPatreon/></div>
+      </div>
+    </div>
+  );
+}

src/components/modals/main/settings/sections/overview_skeletons/Quote.jsx

@@ -0,0 +1,18 @@
+import { MdPerson } from 'react-icons/md';
+
+export default function QuoteSkeleton() {
+  return (
+    <div className="quoteSkeleton">
+      <span className="subtitle">"Cheese good"</span>
+        <div className="skeletonAuthor">
+          <div>
+            <MdPerson />
+          </div>
+          <div className="text">
+            <span className="title">James May</span>
+            <span className="subtitle">Cheese Man</span>
+          </div>
+        </div>
+    </div>
+  );
+}

src/components/modals/main/tabs/backend/Tab.jsx

@@ -14,7 +14,6 @@ import {
   MdOutlinePhoto as Background,
   MdSearch,
   MdCloudQueue as Weather,
-  MdList as Order,
   MdFormatPaint as Appearance,
   MdTranslate as Language,
   MdOutlineSettings as Advanced,
@@ -65,9 +64,6 @@ function Tab({ label, currentTab, onClick, navbarTab }) {
     case getMessage('modals.main.settings.sections.appearance.navbar.title'):
       icon = <Navbar />;
       break;
-    case getMessage('modals.main.settings.sections.order.title'):
-      icon = <Order />;
-      break;
     case getMessage('modals.main.settings.sections.greeting.title'):
       icon = <Greeting />;
       break;

src/components/modals/main/tabs/backend/Tabs.jsx

@@ -1,6 +1,6 @@
 import variables from 'modules/variables';
 import { PureComponent } from 'react';
-import { MdSettings, MdOutlineShoppingBasket, MdOutlineExtension } from 'react-icons/md';
+import { MdSettings, MdOutlineShoppingBasket, MdOutlineExtension, MdRefresh } from 'react-icons/md';
 import Tab from './Tab';
 import ErrorBoundary from '../../../ErrorBoundary';
 
@@ -41,6 +41,7 @@ export default class Tabs extends PureComponent {
           )}
         </span>
         <button onClick={() => window.location.reload()}>
+          <MdRefresh />
           {variables.language.getMessage(
             variables.languagecode,
             'modals.main.error_boundary.refresh',
@@ -70,7 +71,6 @@ export default class Tabs extends PureComponent {
     return (
       <div style={{ display: 'flex', width: '100%' }}>
         <ul className="sidebar">
-          {reminderInfo}
           {this.props.children.map((tab, index) => (
             <Tab
               currentTab={this.state.currentTab}
@@ -80,6 +80,7 @@ export default class Tabs extends PureComponent {
               navbarTab={this.props.navbar || false}
             />
           ))}
+          {reminderInfo}
         </ul>
         <div className="tab-content" style={{ width: '100%' }}>
           <ErrorBoundary>