diff --git a/src/components/modals/main/scss/index.scss b/src/components/modals/main/scss/index.scss
index 6c964b94..1663cd87 100644
--- a/src/components/modals/main/scss/index.scss
+++ b/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;
+}
diff --git a/src/components/modals/main/scss/modules/_tab-content.scss b/src/components/modals/main/scss/modules/_tab-content.scss
index eb46d8b0..a716afad 100644
--- a/src/components/modals/main/scss/modules/_tab-content.scss
+++ b/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;
diff --git a/src/components/modals/main/scss/settings/modules/tabs/_order.scss b/src/components/modals/main/scss/settings/modules/tabs/_order.scss
index f79275fe..efc6e28d 100644
--- a/src/components/modals/main/scss/settings/modules/tabs/_order.scss
+++ b/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%;
}
diff --git a/src/components/modals/main/settings/sections/Message.jsx b/src/components/modals/main/settings/sections/Message.jsx
index 4bafce2a..b8a689fa 100644
--- a/src/components/modals/main/settings/sections/Message.jsx
+++ b/src/components/modals/main/settings/sections/Message.jsx
@@ -82,7 +82,7 @@ export default class Message extends PureComponent {
{this.state.messages.map((_url, index) => (
-
+
diff --git a/src/components/modals/main/settings/sections/Overview.jsx b/src/components/modals/main/settings/sections/Overview.jsx
index a7615099..55227871 100644
--- a/src/components/modals/main/settings/sections/Overview.jsx
+++ b/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';
diff --git a/src/components/modals/main/settings/sections/Quote.jsx b/src/components/modals/main/settings/sections/Quote.jsx
index 3f6eeb72..400c1f3a 100644
--- a/src/components/modals/main/settings/sections/Quote.jsx
+++ b/src/components/modals/main/settings/sections/Quote.jsx
@@ -214,7 +214,7 @@ export default class QuoteSettings extends PureComponent {
/>
+ 10:20
+
+ );
+}
diff --git a/src/components/modals/main/settings/sections/overview_skeletons/Date.jsx b/src/components/modals/main/settings/sections/overview_skeletons/Date.jsx
new file mode 100644
index 00000000..9c288bcc
--- /dev/null
+++ b/src/components/modals/main/settings/sections/overview_skeletons/Date.jsx
@@ -0,0 +1,9 @@
+export default function DateSkeleton() {
+ return (
+
+ Thursday January 1st
+
+ Week 1
+
+ );
+}
diff --git a/src/components/modals/main/settings/sections/overview_skeletons/Greeting.jsx b/src/components/modals/main/settings/sections/overview_skeletons/Greeting.jsx
new file mode 100644
index 00000000..babf7ce0
--- /dev/null
+++ b/src/components/modals/main/settings/sections/overview_skeletons/Greeting.jsx
@@ -0,0 +1,7 @@
+export default function GreetingSkeleton() {
+ return (
+
+ Good Morning
+
+ );
+}
diff --git a/src/components/modals/main/settings/sections/overview_skeletons/Message.jsx b/src/components/modals/main/settings/sections/overview_skeletons/Message.jsx
new file mode 100644
index 00000000..122468be
--- /dev/null
+++ b/src/components/modals/main/settings/sections/overview_skeletons/Message.jsx
@@ -0,0 +1,10 @@
+export default function MessageSkeleton() {
+ return (
+
+
+ Message
+
+
+
+ );
+}
diff --git a/src/components/modals/main/settings/sections/overview_skeletons/QuickLinks.jsx b/src/components/modals/main/settings/sections/overview_skeletons/QuickLinks.jsx
new file mode 100644
index 00000000..90877141
--- /dev/null
+++ b/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 (
+
+ );
+}
diff --git a/src/components/modals/main/settings/sections/overview_skeletons/Quote.jsx b/src/components/modals/main/settings/sections/overview_skeletons/Quote.jsx
new file mode 100644
index 00000000..0eae8b79
--- /dev/null
+++ b/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 (
+
+
"Cheese good"
+
+
+
+
+
+ James May
+ Cheese Man
+
+
+
+ );
+}
diff --git a/src/components/modals/main/tabs/backend/Tab.jsx b/src/components/modals/main/tabs/backend/Tab.jsx
index f1dd093b..49d64110 100644
--- a/src/components/modals/main/tabs/backend/Tab.jsx
+++ b/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 = ;
break;
- case getMessage('modals.main.settings.sections.order.title'):
- icon = ;
- break;
case getMessage('modals.main.settings.sections.greeting.title'):
icon = ;
break;
diff --git a/src/components/modals/main/tabs/backend/Tabs.jsx b/src/components/modals/main/tabs/backend/Tabs.jsx
index 58629cc2..0f1af6dc 100644
--- a/src/components/modals/main/tabs/backend/Tabs.jsx
+++ b/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 {
)}