Update styles and dependencies

Co-authored-by: David Ralph <me@davidcralph.co.uk>
2024-01-05 00:01:47 +00:00 · 2024-01-05 00:01:47 +00:00 · 6915c0ef9e
parent 80dd8bcd8e
commit 6915c0ef9e
18 changed files with 132 additions and 115 deletions
--- a/README.md
+++ b/README.md
@ -12,6 +12,7 @@ Mue is a fast, open and free-to-use browser extension that gives a new, fresh an
 <br>

 ## Table of contents
+
 - [Table of contents](#table-of-contents)
 - [Screenshots](#screenshots)
 - [Features](#features)
@ -107,6 +108,7 @@ Please see the [documentation](https://docs.muetab.com/development#mue-tab).
 [Aksal](https://github.com/aksalsf) - Indonesian <br/>
 [Kağan Can Şit](https://github.com/KaganCanSit) - Turkish <br/>
 efeaydal - Turkish <br/>
+
 ### Contributors

 Many thanks to the photographers [here](https://api.muetab.com/images/photographers) for letting us use their wonderful photographs.
--- a/index.html
+++ b/index.html
@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
  <head>
    <meta charset="utf-8" />
@ -23,7 +23,7 @@
          *,
          a {
            color: white;
-            background: #2f3640 !important;
+            background: #0a0a0a !important;
          }
        }
      </style>
--- a/package.json
+++ b/package.json
@ -14,7 +14,7 @@
    "@eartharoid/i18n": "1.2.1",
    "@emotion/react": "^11.11.3",
    "@emotion/styled": "^11.11.0",
-    "@floating-ui/react-dom": "2.0.4",
+    "@floating-ui/react-dom": "1.3.0",
    "@fontsource/lexend-deca": "5.0.8",
    "@fontsource/montserrat": "5.0.8",
    "@muetab/react-color-gradient-picker": "0.1.2",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -15,8 +15,8 @@ dependencies:
    specifier: ^11.11.0
    version: 11.11.0(@emotion/react@11.11.3)(react@18.2.0)
  '@floating-ui/react-dom':
-    specifier: 2.0.4
-    version: 2.0.4(react-dom@18.2.0)(react@18.2.0)
+    specifier: 1.3.0
+    version: 1.3.0(react-dom@18.2.0)(react@18.2.0)
  '@fontsource/lexend-deca':
    specifier: 5.0.8
    version: 5.0.8
@ -2137,6 +2137,17 @@ packages:
      '@floating-ui/utils': 0.1.6
    dev: false

+  /@floating-ui/react-dom@1.3.0(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-htwHm67Ji5E/pROEAr7f8IKFShuiCKHwUC/UY4vC3I5jiSvGFAYnSYiZO5MlGmads+QqvUkR9ANHEguGrDv72g==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+    dependencies:
+      '@floating-ui/dom': 1.5.3
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
  /@floating-ui/react-dom@2.0.4(react-dom@18.2.0)(react@18.2.0):
    resolution: {integrity: sha512-CF8k2rgKeh/49UrnIBs4BdxPUV6vize/Db1d/YbCLyp9GiVZ0BEwf5AiDSxJRCr6yOkGqTFHtmrULxkEfYZ7dQ==}
    peerDependencies:
--- a/src/components/modals/main/marketplace/Item.jsx
+++ b/src/components/modals/main/marketplace/Item.jsx
@ -31,7 +31,6 @@ class Item extends PureComponent {
      showUpdateButton:
        this.props.addonInstalled === true &&
        this.props.addonInstalledVersion !== this.props.data.version,
-      showMore: false,
      shareModal: false,
      count: 5,
    };
@ -46,14 +45,6 @@ class Item extends PureComponent {
    });
  }

-  toggleShowMore() {
-    if (this.state.showMore === true) {
-      this.setState({ showMore: false });
-    } else {
-      this.setState({ showMore: true });
-    }
-  }
-
  incrementCount(type) {
    if (this.state.count !== this.props.data.data[type].length) {
      this.setState({ count: this.props.data.data[type].length });
@ -62,6 +53,19 @@ class Item extends PureComponent {
    }
  }

+  getName(name) {
+    switch (name) {
+      case 'photos':
+        return 'photo_packs';
+      case 'quotes':
+        return 'quote_packs';
+      case 'settings':
+        return 'preset_settings';
+      default:
+        return name;
+    }
+  }
+
  render() {
    if (!this.props.data.display_name) {
      return null;
@ -95,7 +99,9 @@ class Item extends PureComponent {
          onRequestClose={() => this.setState({ shareModal: false })}
        >
          <ShareModal
-            data={variables.constants.MARKETPLACE_URL + '/share/' + btoa(this.props.data.api_name)}
+            data={
+              variables.constants.API_URL + '/marketplace/share/' + btoa(this.props.data.api_name)
+            }
            modalClose={() => this.setState({ shareModal: false })}
          />
        </Modal>
@ -266,7 +272,7 @@ class Item extends PureComponent {
                  <span>
                    {' '}
                    {variables.getMessage(
-                      'modals.main.addons.create.types.' + this.props.data.data.type,
+                      'modals.main.marketplace.' + this.getName(this.props.data.data.type),
                    ) || 'marketplace'}
                  </span>
                </div>
--- a/src/components/modals/main/marketplace/sections/Added.jsx
+++ b/src/components/modals/main/marketplace/sections/Added.jsx
@ -143,7 +143,7 @@ export default class Added extends PureComponent {
    let updates = 0;
    this.state.installed.forEach(async (item) => {
      const data = await (
-        await fetch(variables.constants.MARKETPLACE_URL + '/item/' + item.name)
+        await fetch(variables.constants.API_URL + 'marketplace//item/' + item.name)
      ).json();
      if (data.version !== item.version) {
        updates++;
--- a/src/components/modals/main/marketplace/sections/Marketplace.jsx
+++ b/src/components/modals/main/marketplace/sections/Marketplace.jsx
@ -54,7 +54,7 @@ class Marketplace extends PureComponent {
          type = data.type;
        }
        info = await (
-          await fetch(`${variables.constants.MARKETPLACE_URL}/item/${type}/${data.name}`, {
+          await fetch(`${variables.constants.API_URL}/marketplace/item/${type}/${data.name}`, {
            signal: this.controller.signal,
          })
        ).json();
@ -109,7 +109,7 @@ class Marketplace extends PureComponent {
        done: false,
      });
      const collection = await (
-        await fetch(`${variables.constants.MARKETPLACE_URL}/collection/${data}`, {
+        await fetch(`${variables.constants.API_URL}/marketplace/collection/${data}`, {
          signal: this.controller.signal,
        })
      ).json();
@ -131,15 +131,15 @@ class Marketplace extends PureComponent {
  async getItems() {
    const dataURL =
      this.props.type === 'collections'
-        ? variables.constants.MARKETPLACE_URL + '/collections'
-        : variables.constants.MARKETPLACE_URL + '/items/' + this.props.type;
+        ? variables.constants.API_URL + '/marketplace/collections'
+        : variables.constants.API_URL + '/marketplace/items/' + this.props.type;
    const { data } = await (
      await fetch(dataURL, {
        signal: this.controller.signal,
      })
    ).json();
    const collections = await (
-      await fetch(variables.constants.MARKETPLACE_URL + '/collections', {
+      await fetch(variables.constants.API_URL + '/marketplace/collections', {
        signal: this.controller.signal,
      })
    ).json();
@ -184,7 +184,7 @@ class Marketplace extends PureComponent {
      for (const item of this.state.items) {
        if (installed.some((i) => i.name === item.display_name)) continue; // don't install if already installed
        let { data } = await (
-          await fetch(`${variables.constants.MARKETPLACE_URL}/item/${item.type}/${item.name}`, {
+          await fetch(`${variables.constants.API_URL}/marketplace/item/${item.type}/${item.name}`, {
            signal: this.controller.signal,
          })
        ).json();
@ -277,7 +277,9 @@ class Marketplace extends PureComponent {
      return errorMessage(
        <>
          <MdWifiOff />
-          <span className="title">{variables.getMessage('modals.main.marketplace.offline.title')}</span>
+          <span className="title">
+            {variables.getMessage('modals.main.marketplace.offline.title')}
+          </span>
          <span className="subtitle">
            {variables.getMessage('modals.main.marketplace.offline.description')}
          </span>
@ -302,7 +304,9 @@ class Marketplace extends PureComponent {
          {errorMessage(
            <>
              <MdLocalMall />
-              <span className="title">{variables.getMessage('modals.main.addons.empty.title')}</span>
+              <span className="title">
+                {variables.getMessage('modals.main.addons.empty.title')}
+              </span>
              <span className="subtitle">
                {variables.getMessage('modals.main.marketplace.no_items')}
              </span>
--- a/src/components/modals/main/scss/index.scss
+++ b/src/components/modals/main/scss/index.scss
@ -164,6 +164,14 @@ h5 {
  }
 }

+.headerActions {
+  display: flex;
+  flex-flow: row;
+  gap: 20px;
+  justify-content: center;
+  align-items: center;
+}
+
 .marketplaceCondition {
  display: flex;
  flex-flow: row !important;
--- a/src/components/modals/main/scss/marketplace/_main.scss
+++ b/src/components/modals/main/scss/marketplace/_main.scss
@ -255,7 +255,8 @@
  grid-gap: 5px;
  padding: 50px;

-  .title, svg {
+  .title,
+  svg {
    margin: 10px;
  }

--- a/src/components/modals/main/scss/modules/_tab-content.scss
+++ b/src/components/modals/main/scss/modules/_tab-content.scss
@ -27,7 +27,7 @@
      justify-content: space-between;

      /* border-top: 1px solid #ccc; */
-      border-bottom: 1px solid #ccc;
+      border-bottom: 1px solid #676767;
      padding-top: 1rem;
      padding-bottom: 1rem;

--- a/src/components/modals/main/settings/Header.jsx
+++ b/src/components/modals/main/settings/Header.jsx
@ -63,47 +63,34 @@ class Header extends PureComponent {
            </div>
          )}
          <span className="mainTitle">{this.props.title}</span>
-          {this.props.switch && (
-            <button className="sideload" onClick={() => this.changeSetting()}>
-              {this.state[this.props.setting] ? (
-                <>
-                  Hide
-                  <MdOutlineVisibilityOff />
-                </>
-              ) : (
-                <>
-                  Show
-                  <MdOutlineVisibility />
-                </>
-              )}
+          <div className="headerActions">
+            <button
+              className="sideload"
+              onClick={() =>
+                window.open(
+                  variables.constants.BUG_REPORT + this.props.title.split(' ').join('+'),
+                  '_blank',
+                )
+              }
+            >
+              {variables.getMessage('modals.main.settings.sections.header.report_issue')} <MdFlag />
            </button>
-          )}
-        </div>
-        <div className="headerExtras">
-          {/*<span
-            className="link"
-            onClick={() =>
-              window.open(
-                variables.constants.KNOWLEDGEBASE +
-                  '/settings/' +
-                  this.props.setting.toLowerCase().replace('enabled', ''),
-                '_blank',
-              )
-            }
-          >
-            <MdHelpOutline /> {variables.getMessage('modals.main.settings.sections.header.more_info')}
-          </span>*/}
-          <span
-            className="link"
-            onClick={() =>
-              window.open(
-                variables.constants.BUG_REPORT + this.props.title.split(' ').join('+'),
-                '_blank',
-              )
-            }
-          >
-            <MdFlag /> {variables.getMessage('modals.main.settings.sections.header.report_issue')}
-          </span>
+            {this.props.switch && (
+              <button className="sideload" onClick={() => this.changeSetting()}>
+                {this.state[this.props.setting] ? (
+                  <>
+                    Hide
+                    <MdOutlineVisibilityOff />
+                  </>
+                ) : (
+                  <>
+                    Show
+                    <MdOutlineVisibility />
+                  </>
+                )}
+              </button>
+            )}
+          </div>
        </div>
        {this.props.zoomSetting && (
          <SettingsItem
--- a/src/components/modals/main/settings/sections/background/Background.jsx
+++ b/src/components/modals/main/settings/sections/background/Background.jsx
@ -125,24 +125,11 @@ export default class BackgroundSettings extends PureComponent {
              </Dropdown>
            </>
          ) : (
-            <>
-              {/*<Dropdown
-                label={variables.getMessage('modals.main.settings.sections.background.category')}
-                name="apiCategories"
-              >
-                {this.state.backgroundCategories.map((category) => (
-                  <MenuItem value={category.name} key={category.name}>
-                    {category.name.charAt(0).toUpperCase() + category.name.slice(1)} (
-                    {category.count})
-                  </MenuItem>
-                ))}
-                    </Dropdown>*/}
-              <ChipSelect
-                label={variables.getMessage('modals.main.settings.sections.background.categories')}
-                options={this.state.backgroundCategories}
-                name="apiCategories"
-              ></ChipSelect>
-            </>
+            <ChipSelect
+              label={variables.getMessage('modals.main.settings.sections.background.categories')}
+              options={this.state.backgroundCategories}
+              name="apiCategories"
+            />
          )}
          <Dropdown
            label={variables.getMessage(
@ -388,7 +375,7 @@ export default class BackgroundSettings extends PureComponent {
            />
          </SettingsItem>
        ) : null}
-        {this.state.backgroundSettingsSection ? (
+        {this.state.backgroundSettingsSection && (
          <>
            <SettingsItem
              title={variables.getMessage('modals.main.settings.sections.background.source.title')}
@ -444,7 +431,7 @@ export default class BackgroundSettings extends PureComponent {
                  : null}*/}
            {backgroundSettings}
          </>
-        ) : null}
+        )}
        {(this.state.backgroundType === 'api' ||
          this.state.backgroundType === 'custom' ||
          this.state.marketplaceEnabled) &&
--- a/src/components/modals/main/settings/sections/background/Custom.jsx
+++ b/src/components/modals/main/settings/sections/background/Custom.jsx
@ -76,17 +76,8 @@ export default class CustomSettings extends PureComponent {
    localStorage.setItem('showReminder', true);
  }

-  videoCheck(url) {
-    return (
-      url.startsWith('data:video/') ||
-      url.endsWith('.mp4') ||
-      url.endsWith('.webm') ||
-      url.endsWith('.ogg')
-    );
-  }
-
  videoCustomSettings = () => {
-    const hasVideo = this.state.customBackground.filter((bg) => this.videoCheck(bg));
+    const hasVideo = this.state.customBackground.filter((bg) => videoCheck(bg));

    if (hasVideo.length > 0) {
      return (
@ -225,9 +216,9 @@ export default class CustomSettings extends PureComponent {
                  <div key={index}>
                    <img
                      alt={'Custom background ' + (index || 0)}
-                      src={`${!this.videoCheck(url) ? this.state.customBackground[index] : ''}`}
+                      src={`${!videoCheck(url) ? this.state.customBackground[index] : ''}`}
                    />
-                    {this.videoCheck(url) && <MdPersonalVideo className="customvideoicon" />}
+                    {videoCheck(url) && <MdPersonalVideo className="customvideoicon" />}
                    {this.state.customBackground.length > 0 && (
                      <Tooltip
                        title={variables.getMessage(
--- a/src/components/widgets/background/Background.jsx
+++ b/src/components/widgets/background/Background.jsx
@ -105,10 +105,16 @@ export default class Background extends PureComponent {
    }

    let requestURL, data;
+
    switch (backgroundAPI) {
      case 'unsplash':
      case 'pexels':
-        requestURL = `${variables.constants.API_URL}/images/unsplash?categories=${apiCategories}&quality=${apiQuality}`;
+        const collection = localStorage.getItem('apiCollection');
+        if (collection) {
+          requestURL = `${variables.constants.API_URL}/images/unsplash?collection=${collection}&quality=${apiQuality}`;
+        } else {
+          requestURL = `${variables.constants.API_URL}/images/unsplash?categories=${apiCategories}&quality=${apiQuality}`;
+        }
        break;
      // Defaults to Mue
      default:
--- a/src/components/widgets/background/PhotoInformation.jsx
+++ b/src/components/widgets/background/PhotoInformation.jsx
@ -241,16 +241,23 @@ function PhotoInformation({ info, url, api }) {
            </div>
          )}
          <div className="photoInformation-content">
-            <span className="title">
-              {(showExtraInfo || other) && info.description
-                ? info.description.length > 40
-                  ? info.description.substring(0, 40) + '...'
-                  : info.description
-                : info.location?.split(',').slice(-2).join(', ').trim()}
-            </span>
-            <span className="subtitle" id="credit">
-              {photo} {credit}
-            </span>
+            <div className="photoInfomration-text">
+              <span
+                className="title"
+                title={
+                  (showExtraInfo || other) && info.description ? info.description : info.location
+                }
+              >
+                {(showExtraInfo || other) && info.description
+                  ? info.description.length > 40
+                    ? info.description.substring(0, 40) + '...'
+                    : info.description
+                  : info.location?.split(',').slice(-2).join(', ').trim()}
+              </span>
+              <span className="subtitle" id="credit">
+                {photo} {credit}
+              </span>
+            </div>
            {info.views && info.downloads !== null ? (
              <div className="unsplashStats">
                <div title={variables.getMessage('widgets.background.views')}>
--- a/src/components/widgets/background/scss/_photoinformation.scss
+++ b/src/components/widgets/background/scss/_photoinformation.scss
@ -358,8 +358,12 @@
  line-height: 2em;
  margin-right: 3px;
  display: flex;
-  flex-flow: column;
+  flex-flow: row;
+  align-items: center;
+  gap: 20px;
  padding-left: 20px;
+  width: 100%;
+  justify-content: space-between;

  a {
    @include themed {
@ -452,10 +456,8 @@

 .unsplashStats {
  display: flex;
-  flex-flow: row;
+  flex-flow: column;
  justify-content: space-between;
-  gap: 40px;
-  margin-right: 40px;
  div {
    display: flex;
    flex-flow: row;
@ -463,3 +465,8 @@
    align-items: center;
  }
 }
+
+.photoInfomration-text {
+  display: flex;
+  flex-flow: column;
+}
--- a/src/modules/constants.js
+++ b/src/modules/constants.js
@ -1,6 +1,5 @@
 // API URLs
 export const API_URL = 'https://api.muetab.com/v2';
-export const MARKETPLACE_URL = 'https://marketplace.muetab.com';
 export const SPONSORS_URL = 'https://sponsors.muetab.com';
 export const GITHUB_URL = 'https://api.github.com';
 export const DDG_IMAGE_PROXY = 'https://external-content.duckduckgo.com/iu/?u=';
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@ -120,6 +120,7 @@ $themes: (
    font-size: 38px;
    font-weight: 600;
    margin-bottom: 15px;
+    text-transform: capitalize;

    @include themed {
      color: t($color);