feat: improve navigability of complex settings

-  start work on reducing popin of certain elements

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

@@ -183,3 +183,39 @@ h5 {
     align-items: center;
   }
 }
+
+.moreSettings {
+  cursor: pointer;
+  display: flex;
+  flex-flow: row;
+  justify-content: space-between;
+  padding: 25px;
+  margin-top: 20px;
+  @include themed() {
+    background: t($modal-sidebar);
+    border-radius: t($borderRadius);
+    box-shadow: 0 0 0 1px t($modal-sidebarActive);
+    &:hover {
+      background: t($modal-sidebarActive);
+    }
+  }
+  svg {
+    font-size: 20px;
+  }
+  .left {
+    display: flex;
+    flex-flow: row;
+    align-items: center;
+    gap: 25px;
+  }
+  .content {
+    display: flex;
+    flex-flow: column;
+  }
+  .action {
+    display: flex;
+    flex-flow: row;
+    gap: 20px;
+    align-items: center;
+  }
+}

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

@@ -342,7 +342,7 @@ p.author {
   align-items: center;
 
   @include themed() {
-    box-shadow: 0 0 0 4px t($modal-sidebarActive);
+    box-shadow: 0 0 0 1px t($modal-sidebarActive);
     border-radius: t($borderRadius);
   }
 

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

@@ -156,3 +156,26 @@ h4 {
     }
   }
 }
+
+.breadcrumb {
+  display: flex;
+  flex-flow: row;
+  padding-top: 20px;
+  gap: 10px;
+  align-items: center;
+  .returnButton {
+    display: grid;
+    place-items: center;
+    width: 48px;
+    height: 48px;
+    border-radius: 12px;
+    cursor: pointer;
+    margin-right: 25px;
+    svg {
+      font-size: 2em;
+    }
+    &:hover {
+      background: rgba(121, 121, 121, 0.226);
+    }
+  }
+}

src/components/modals/main/settings/Header.jsx

@@ -1,14 +1,14 @@
 import variables from 'modules/variables';
 
 import { PureComponent } from 'react';
-import { MdHelpOutline, MdFlag } from 'react-icons/md';
+import { MdHelpOutline, MdFlag, MdArrowBack } from 'react-icons/md';
 
 import Slider from './Slider';
 import Switch from './Switch';
 import SettingsItem from './SettingsItem';
 
 import { values } from 'modules/helpers/settings/modals';
-import InfoTooltip from '../../../helpers/tooltip/infoTooltip';
+import Tooltip from '../../../helpers/tooltip/Tooltip';
 
 export default class Header extends PureComponent {
   render() {
@@ -16,14 +16,23 @@ export default class Header extends PureComponent {
 
     return (
       <>
-        <span className="mainTitle">{this.props.title}</span>
+        <div className="flexTopMarketplace">
+          {this.props.backButton ? (
+            <div className="returnButton" onClick={this.props.clickEffect} >
+              <Tooltip title="back" key="backArrow">
+                <MdArrowBack className="backArrow" />
+              </Tooltip>
+            </div>
+          ) : null}
+          <span className="mainTitle">{this.props.title}</span>
+        </div>
         <div className="headerExtras">
           <span
             className="link"
             onClick={() =>
               window.open(
                 variables.constants.KNOWLEDGEBASE +
-                  '/' +
+                  '/settings/' +
                   this.props.setting.toLowerCase().replace('enabled', ''),
                 '_blank',
               )

src/components/modals/main/settings/sections/background/Background.jsx

@@ -1,6 +1,12 @@
 import variables from 'modules/variables';
 import { PureComponent } from 'react';
 import { MenuItem } from '@mui/material';
+import {
+  MdSource,
+  MdOutlineKeyboardArrowRight,
+  MdOutlineAutoAwesome,
+  MdArrowBack,
+} from 'react-icons/md';
 
 import Header from '../../Header';
 import Checkbox from '../../Checkbox';
@@ -8,6 +14,7 @@ import Dropdown from '../../Dropdown';
 import Slider from '../../Slider';
 import Radio from '../../Radio';
 import SettingsItem from '../../SettingsItem';
+import Tooltip from '../../../../../helpers/tooltip/Tooltip';
 
 import ColourSettings from './Colour';
 import CustomSettings from './Custom';
@@ -25,6 +32,8 @@ export default class BackgroundSettings extends PureComponent {
       backgroundCategories: [this.getMessage('modals.main.loading')],
       backgroundAPI: localStorage.getItem('backgroundAPI') || 'mue',
       marketplaceEnabled: localStorage.getItem('photo_packs'),
+      effects: false,
+      backgroundSettingsSection: false,
     };
     this.controller = new AbortController();
   }
@@ -207,73 +216,162 @@ export default class BackgroundSettings extends PureComponent {
           category="background"
           element="#backgroundImage"
         />
-        <SettingsItem
-          title="Display"
-          subtitle="Change how background and photo information are loaded"
-        >
-          <Checkbox
-            name="ddgProxy"
-            text={getMessage('modals.main.settings.sections.background.ddg_image_proxy')}
-            element=".other"
-            disabled={!usingImage}
-          />
-          <Checkbox
-            name="bgtransition"
-            text={getMessage('modals.main.settings.sections.background.transition')}
-            element=".other"
-            disabled={!usingImage}
-          />
-          <Checkbox
-            name="photoInformation"
-            text={getMessage('modals.main.settings.sections.background.photo_information')}
-            element=".other"
-            disabled={
-              this.state.backgroundType !== 'api' && this.state.backgroundType !== 'marketplace'
-            }
-          />
-          <Checkbox
-            name="photoMap"
-            text={getMessage('modals.main.settings.sections.background.show_map')}
-            element=".other"
-            disabled={this.state.backgroundAPI !== 'unsplash'}
-          />
-        </SettingsItem>
-        <SettingsItem
-          title={getMessage('modals.main.settings.sections.background.source.title')}
-          subtitle="Select where to get background images from"
-        >
-          <Dropdown
-            label={getMessage('modals.main.settings.sections.background.type.title')}
-            name="backgroundType"
-            onChange={(value) => this.setState({ backgroundType: value })}
-            category="background"
+        {this.state.effects ? (
+          <>
+            <div className="breadcrumb">
+              <div onClick={() => this.setState({ effects: false })}>
+                <Tooltip title="back" key="backArrow">
+                  <MdArrowBack />
+                </Tooltip>
+              </div>
+              <span className="subtitle">effects</span>
+            </div>
+          </>
+        ) : null}
+        {this.state.backgroundSettingsSection ? (
+          <div className="breadcrumb">
+            <div onClick={() => this.setState({ backgroundSettingsSection: false })}>
+              <Tooltip title="back" key="backArrow">
+                <MdArrowBack />
+              </Tooltip>
+            </div>
+            <span className="subtitle">Source</span>
+          </div>
+        ) : null}
+        {(this.state.backgroundSettingsSection !== true && this.state.effects !== true) ? (
+          <>
+            <div
+              className="moreSettings"
+              onClick={() => this.setState({ backgroundSettingsSection: true })}
+            >
+              <div className="left">
+                <MdSource />
+                <div className="content">
+                  <span className="title">
+                    {getMessage('modals.main.settings.sections.background.source.title')}
+                  </span>
+                  <span className="subtitle">Select where to get background images from</span>
+                </div>
+              </div>
+              <div className="action">
+                <Dropdown
+                  label={getMessage('modals.main.settings.sections.background.type.title')}
+                  name="backgroundType"
+                  onChange={(value) => this.setState({ backgroundType: value })}
+                  category="background"
+                >
+                  {this.state.marketplaceEnabled ? (
+                    <option value="photo_pack">
+                      {this.getMessage('modals.main.navbar.marketplace')}
+                    </option>
+                  ) : null}
+                  <option value="api">
+                    {getMessage('modals.main.settings.sections.background.type.api')}
+                  </option>
+                  <option value="custom">
+                    {getMessage('modals.main.settings.sections.background.type.custom_image')}
+                  </option>
+                  <option value="colour">
+                    {getMessage('modals.main.settings.sections.background.type.custom_colour')}
+                  </option>
+                  <option value="random_colour">
+                    {getMessage('modals.main.settings.sections.background.type.random_colour')}
+                  </option>
+                  <option value="random_gradient">
+                    {getMessage('modals.main.settings.sections.background.type.random_gradient')}
+                  </option>
+                </Dropdown>
+              </div>
+            </div>
+            <div className="moreSettings" onClick={() => this.setState({ effects: true })}>
+              <div className="left">
+                <MdOutlineAutoAwesome />
+                <div className="content">
+                  <span className="title">
+                    {getMessage('modals.main.settings.sections.background.effects.title')}
+                  </span>
+                  <span className="subtitle">Add effects to the background image</span>
+                </div>
+              </div>
+              <div className="action"></div>
+            </div>
+          </>
+        ) : null}
+        {this.state.backgroundSettingsSection !== true && this.state.effects !== true ? (
+          <SettingsItem
+            title="Display"
+            subtitle="Change how background and photo information are loaded"
+            final={true}
           >
-            {this.state.marketplaceEnabled ? (
-              <option value="photo_pack">
-                {this.getMessage('modals.main.navbar.marketplace')}
-              </option>
-            ) : null}
-            <option value="api">
-              {getMessage('modals.main.settings.sections.background.type.api')}
-            </option>
-            <option value="custom">
-              {getMessage('modals.main.settings.sections.background.type.custom_image')}
-            </option>
-            <option value="colour">
-              {getMessage('modals.main.settings.sections.background.type.custom_colour')}
-            </option>
-            <option value="random_colour">
-              {getMessage('modals.main.settings.sections.background.type.random_colour')}
-            </option>
-            <option value="random_gradient">
-              {getMessage('modals.main.settings.sections.background.type.random_gradient')}
-            </option>
-          </Dropdown>
-        </SettingsItem>
-        {backgroundSettings}
-        {this.state.backgroundType === 'api' ||
-        this.state.backgroundType === 'custom' ||
-        this.state.marketplaceEnabled ? (
+            <Checkbox
+              name="ddgProxy"
+              text={getMessage('modals.main.settings.sections.background.ddg_image_proxy')}
+              element=".other"
+              disabled={!usingImage}
+            />
+            <Checkbox
+              name="bgtransition"
+              text={getMessage('modals.main.settings.sections.background.transition')}
+              element=".other"
+              disabled={!usingImage}
+            />
+            <Checkbox
+              name="photoInformation"
+              text={getMessage('modals.main.settings.sections.background.photo_information')}
+              element=".other"
+              disabled={
+                this.state.backgroundType !== 'api' && this.state.backgroundType !== 'marketplace'
+              }
+            />
+            <Checkbox
+              name="photoMap"
+              text={getMessage('modals.main.settings.sections.background.show_map')}
+              element=".other"
+              disabled={this.state.backgroundAPI !== 'unsplash'}
+            />
+          </SettingsItem>
+        ) : null}
+        {this.state.backgroundSettingsSection ? (
+          <>
+            <SettingsItem
+              title={getMessage('modals.main.settings.sections.background.source.title')}
+              subtitle="Select where to get background images from"
+            >
+              <Dropdown
+                label={getMessage('modals.main.settings.sections.background.type.title')}
+                name="backgroundType"
+                onChange={(value) => this.setState({ backgroundType: value })}
+                category="background"
+              >
+                {this.state.marketplaceEnabled ? (
+                  <option value="photo_pack">
+                    {this.getMessage('modals.main.navbar.marketplace')}
+                  </option>
+                ) : null}
+                <option value="api">
+                  {getMessage('modals.main.settings.sections.background.type.api')}
+                </option>
+                <option value="custom">
+                  {getMessage('modals.main.settings.sections.background.type.custom_image')}
+                </option>
+                <option value="colour">
+                  {getMessage('modals.main.settings.sections.background.type.custom_colour')}
+                </option>
+                <option value="random_colour">
+                  {getMessage('modals.main.settings.sections.background.type.random_colour')}
+                </option>
+                <option value="random_gradient">
+                  {getMessage('modals.main.settings.sections.background.type.random_gradient')}
+                </option>
+              </Dropdown>
+            </SettingsItem>
+            {backgroundSettings}
+          </>
+        ) : null}
+        {(this.state.backgroundType === 'api' ||
+          this.state.backgroundType === 'custom' ||
+          this.state.marketplaceEnabled) &&
+        this.state.effects ? (
           <SettingsItem
             title={getMessage('modals.main.settings.sections.background.effects.title')}
             subtitle="Add effects to the background image"

src/components/widgets/quote/Quote.jsx

@@ -105,11 +105,11 @@ export default class Quote extends PureComponent {
   }
 
   async getAuthorImg(author) {
-    if (localStorage.getItem('authorImg') === 'false') { 
+    if (localStorage.getItem('authorImg') === 'false') {
       return {
         authorimg: null,
-        authorimglicense: null
-      }
+        authorimglicense: null,
+      };
     }
 
     const authorimgdata = await (
@@ -415,7 +415,10 @@ export default class Quote extends PureComponent {
           ariaHideApp={false}
           onRequestClose={() => this.setState({ shareModal: false })}
         >
-          <ShareModal data={`${this.state.quote} - ${this.state.author}`} modalClose={() => this.setState({ shareModal: false })} />
+          <ShareModal
+            data={`${this.state.quote} - ${this.state.author}`}
+            modalClose={() => this.setState({ shareModal: false })}
+          />
         </Modal>
         <span className="quote" ref={this.quote}>
           {this.state.quote}
@@ -440,15 +443,15 @@ export default class Quote extends PureComponent {
           </>
         ) : (
           <>
-            {this.state.author !== '' ? (
-              <div className="author-holder">
-                <div className="author">
-                  <div
-                    className="author-img"
-                    style={{ backgroundImage: `url(${this.state.authorimg})` }}
-                  >
-                    {this.state.authorimg === undefined || this.state.authorimg ? '' : <MdPerson />}
-                  </div>
+            <div className="author-holder">
+              <div className="author">
+                <div
+                  className="author-img"
+                  style={{ backgroundImage: `url(${this.state.authorimg})` }}
+                >
+                  {this.state.authorimg === undefined || this.state.authorimg ? '' : <MdPerson />}
+                </div>
+                {this.state.author !== '' ? (
                   <div className="author-content" ref={this.quoteauthor}>
                     <span className="title">{this.state.author}</span>
                     {this.state.authorOccupation !== 'Unknown' ? (
@@ -456,26 +459,29 @@ export default class Quote extends PureComponent {
                     ) : null}
                     <span className="author-license">{this.state.authorimglicense}</span>
                   </div>
-                  <div className="quote-buttons">
-                    {this.state.authorOccupation !== 'Unknown' && this.state.authorlink !== '' ? (
-                      <Tooltip title="Open On Wikipedia">
-                        <a
-                          href={this.state.authorlink}
-                          className="quoteAuthorLink"
-                          target="_blank"
-                          rel="noopener noreferrer"
-                        >
-                          <MdOpenInNew />
-                        </a>{' '}
-                      </Tooltip>
-                    ) : null}
-                    {this.state.copy} {this.state.share} {this.state.favourited}
+                ) : (
+                  <div className="author-content whileLoading" ref={this.quoteauthor}>
+                    <span className="title">loading</span>
+                    <span className="subtitle">loading</span>
                   </div>
+                )}
+                <div className="quote-buttons">
+                  {this.state.authorOccupation !== 'Unknown' && this.state.authorlink !== '' ? (
+                    <Tooltip title="Open On Wikipedia">
+                      <a
+                        href={this.state.authorlink}
+                        className="quoteAuthorLink"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        <MdOpenInNew />
+                      </a>{' '}
+                    </Tooltip>
+                  ) : null}
+                  {this.state.copy} {this.state.share} {this.state.favourited}
                 </div>
               </div>
-            ) : (
-              <div ref={this.quoteauthor}></div>
-            )}
+            </div>
           </>
         )}
         {/*variables.keybinds.favouriteQuote && variables.keybinds.favouriteQuote !== '' ? <Hotkeys keyName={variables.keybinds.favouriteQuote} onKeyDown={() => this.favourite()} /> : null*/}

src/components/widgets/quote/quote.scss

@@ -136,3 +136,27 @@ h1.quoteauthor {
   height: auto !important;
   @include basicIconButton(11px, 1.3rem, modal);
 }
+
+.author-content.whileLoading {
+  gap: 5px;
+  .title {
+    color: transparent;
+    width: 100px;
+    background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);
+    background-size: 200% 100%;
+    animation: 1.5s shine linear infinite;
+  }
+  .subtitle {
+    color: transparent;
+    width: 50px;
+    background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);
+    background-size: 200% 100%;
+    animation: 1.5s shine linear infinite;
+  }
+}
+
+@keyframes shine {
+  to {
+    background-position-x: -200%;
+  }
+}