From 6915c0ef9e6be92717d52200d2ffe08cac1ddec8 Mon Sep 17 00:00:00 2001 From: alexsparkes Date: Fri, 5 Jan 2024 00:01:47 +0000 Subject: [PATCH] Update styles and dependencies Co-authored-by: David Ralph --- README.md | 2 + index.html | 4 +- package.json | 2 +- pnpm-lock.yaml | 15 ++++- .../modals/main/marketplace/Item.jsx | 28 +++++--- .../main/marketplace/sections/Added.jsx | 2 +- .../main/marketplace/sections/Marketplace.jsx | 20 +++--- src/components/modals/main/scss/index.scss | 8 +++ .../modals/main/scss/marketplace/_main.scss | 3 +- .../main/scss/modules/_tab-content.scss | 2 +- .../modals/main/settings/Header.jsx | 67 ++++++++----------- .../sections/background/Background.jsx | 27 ++------ .../settings/sections/background/Custom.jsx | 15 +---- .../widgets/background/Background.jsx | 8 ++- .../widgets/background/PhotoInformation.jsx | 27 +++++--- .../background/scss/_photoinformation.scss | 15 +++-- src/modules/constants.js | 1 - src/scss/_variables.scss | 1 + 18 files changed, 132 insertions(+), 115 deletions(-) diff --git a/README.md b/README.md index 6f0ba194..ec0108dd 100644 --- 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
## 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
[Kağan Can Şit](https://github.com/KaganCanSit) - Turkish
efeaydal - Turkish
+ ### Contributors Many thanks to the photographers [here](https://api.muetab.com/images/photographers) for letting us use their wonderful photographs. diff --git a/index.html b/index.html index fc076809..8b63da51 100644 --- a/index.html +++ b/index.html @@ -1,4 +1,4 @@ - + @@ -23,7 +23,7 @@ *, a { color: white; - background: #2f3640 !important; + background: #0a0a0a !important; } } diff --git a/package.json b/package.json index 5426cc4b..6e113275 100644 --- 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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3e0c043b..a4d9ba98 100644 --- 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: diff --git a/src/components/modals/main/marketplace/Item.jsx b/src/components/modals/main/marketplace/Item.jsx index bb01b4e5..c6e4d292 100644 --- 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 })} > this.setState({ shareModal: false })} /> @@ -266,7 +272,7 @@ class Item extends PureComponent { {' '} {variables.getMessage( - 'modals.main.addons.create.types.' + this.props.data.data.type, + 'modals.main.marketplace.' + this.getName(this.props.data.data.type), ) || 'marketplace'} diff --git a/src/components/modals/main/marketplace/sections/Added.jsx b/src/components/modals/main/marketplace/sections/Added.jsx index 9038f8db..a0343994 100644 --- 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++; diff --git a/src/components/modals/main/marketplace/sections/Marketplace.jsx b/src/components/modals/main/marketplace/sections/Marketplace.jsx index 3ea0c40c..7120bec4 100644 --- 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( <> - {variables.getMessage('modals.main.marketplace.offline.title')} + + {variables.getMessage('modals.main.marketplace.offline.title')} + {variables.getMessage('modals.main.marketplace.offline.description')} @@ -302,7 +304,9 @@ class Marketplace extends PureComponent { {errorMessage( <> - {variables.getMessage('modals.main.addons.empty.title')} + + {variables.getMessage('modals.main.addons.empty.title')} + {variables.getMessage('modals.main.marketplace.no_items')} diff --git a/src/components/modals/main/scss/index.scss b/src/components/modals/main/scss/index.scss index 51576fbd..690b7f82 100644 --- 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; diff --git a/src/components/modals/main/scss/marketplace/_main.scss b/src/components/modals/main/scss/marketplace/_main.scss index 1ba06328..1c41f5e4 100644 --- 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; } diff --git a/src/components/modals/main/scss/modules/_tab-content.scss b/src/components/modals/main/scss/modules/_tab-content.scss index 4f064d0f..c988c617 100644 --- 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; diff --git a/src/components/modals/main/settings/Header.jsx b/src/components/modals/main/settings/Header.jsx index 9f4414ed..a835e689 100644 --- a/src/components/modals/main/settings/Header.jsx +++ b/src/components/modals/main/settings/Header.jsx @@ -63,47 +63,34 @@ class Header extends PureComponent { )} {this.props.title} - {this.props.switch && ( - - )} - -
- {/* - window.open( - variables.constants.KNOWLEDGEBASE + - '/settings/' + - this.props.setting.toLowerCase().replace('enabled', ''), - '_blank', - ) - } - > - {variables.getMessage('modals.main.settings.sections.header.more_info')} - */} - - window.open( - variables.constants.BUG_REPORT + this.props.title.split(' ').join('+'), - '_blank', - ) - } - > - {variables.getMessage('modals.main.settings.sections.header.report_issue')} - + {this.props.switch && ( + + )} +
{this.props.zoomSetting && ( ) : ( - <> - {/* - {this.state.backgroundCategories.map((category) => ( - - {category.name.charAt(0).toUpperCase() + category.name.slice(1)} ( - {category.count}) - - ))} - */} - - + )} ) : null} - {this.state.backgroundSettingsSection ? ( + {this.state.backgroundSettingsSection && ( <> - ) : null} + )} {(this.state.backgroundType === 'api' || this.state.backgroundType === 'custom' || this.state.marketplaceEnabled) && diff --git a/src/components/modals/main/settings/sections/background/Custom.jsx b/src/components/modals/main/settings/sections/background/Custom.jsx index 8cc79441..8b7135d3 100644 --- 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 {
{'Custom - {this.videoCheck(url) && } + {videoCheck(url) && } {this.state.customBackground.length > 0 && ( )}
- - {(showExtraInfo || other) && info.description - ? info.description.length > 40 - ? info.description.substring(0, 40) + '...' - : info.description - : info.location?.split(',').slice(-2).join(', ').trim()} - - - {photo} {credit} - +
+ + {(showExtraInfo || other) && info.description + ? info.description.length > 40 + ? info.description.substring(0, 40) + '...' + : info.description + : info.location?.split(',').slice(-2).join(', ').trim()} + + + {photo} {credit} + +
{info.views && info.downloads !== null ? (
diff --git a/src/components/widgets/background/scss/_photoinformation.scss b/src/components/widgets/background/scss/_photoinformation.scss index a7a464a0..34e3a0b3 100644 --- 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; +} diff --git a/src/modules/constants.js b/src/modules/constants.js index 36315645..9909cbc3 100644 --- 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='; diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index b2856322..a76215fe 100644 --- 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);