fix: overview tab

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

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 Clock from '../../../../widgets/time/Clock';
-import Quote from '../../../../widgets/quote/Quote';
-import QuickLinks from '../../../../widgets/quicklinks/QuickLinks';
-import Date from '../../../../widgets/time/Date';
-import Message from '../../../../widgets/message/Message';
+import Greeting from './overview_skeletons/Greeting';
+import Clock from './overview_skeletons/Clock';
+import Quote from './overview_skeletons/Quote';
+import QuickLinks from './overview_skeletons/QuickLinks';
+import Date from './overview_skeletons/Date';
+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>
+  );
+}