mirrors/mue
1
0
Fork 0
mirror of https://github.com/mue/mue.git synced 2026-07-17 14:04:09 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix(modal): update styles for modal and buttons, improve theme handling

Browse Source
This commit is contained in:
alexsparkes
2026-01-24 15:20:08 +00:00
parent 66fe285fb1
commit f58ad986da
5 changed files with 78 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/Elements/MainModal/scss/index.scss
View File

@@ -89,13 +89,14 @@
height: 80vh;
width: clamp(60vw, 1400px, 90vw);
background-color: rgba(1, 1, 1, 0.7);
-webkit-backdrop-filter: blur(16px) saturate(180%);
backdrop-filter: blur(16px) saturate(180%);
overflow: hidden;
border-radius: 12px;
// @include themed {
// background-color: t($modal-background);
// }
@include themed {
background-color: t($modal-background);
}
}
/* fixes for font size on extension */

51
src/components/Elements/MainModal/scss/marketplace/modules/_buttons.scss
View File

@@ -26,50 +26,37 @@
@include modal-button(standard);
padding: 10px 20px;
border-radius: 16px !important;
transition: all 0.3s cubic-bezier(0.47, 1.64, 0.41, 0.8);
border-radius: 12px !important;
transition: all 0.2s ease;
position: relative;
@include themed {
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
background: rgba(255, 255, 255, 0.1) !important;
border: 1px solid rgba(209, 213, 219, 0.2) !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
@media (prefers-color-scheme: dark) {
background: rgba(255, 255, 255, 0.05) !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
}
}
.light & {
background: rgba(255, 255, 255, 0.1) !important;
border: 1px solid rgba(209, 213, 219, 0.2) !important;
background: transparent !important;
border: none !important;
}
.dark & {
background: rgba(255, 255, 255, 0.05) !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
background: transparent !important;
border: none !important;
}
&:hover {
@include themed {
backdrop-filter: blur(18px) saturate(190%);
-webkit-backdrop-filter: blur(18px) saturate(190%);
background: rgba(255, 255, 255, 0.15) !important;
background: rgba(0, 0, 0, 0.04) !important;
}
.light & {
background: rgba(255, 255, 255, 0.15) !important;
background: rgba(0, 0, 0, 0.04) !important;
}
.dark & {
background: rgba(255, 255, 255, 0.08) !important;
}
svg {
filter: brightness(1.1);
background: rgba(255, 255, 255, 0.06) !important;
}
}
@@ -96,22 +83,18 @@
.btn-navigation-active {
@include themed {
backdrop-filter: blur(20px) saturate(200%) !important;
-webkit-backdrop-filter: blur(20px) saturate(200%) !important;
background: rgba(255, 255, 255, 0.2) !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
background: rgba(0, 0, 0, 0.06) !important;
box-shadow: none !important;
}
.light & {
background: rgba(255, 255, 255, 0.25) !important;
border: 1px solid rgba(209, 213, 219, 0.3) !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
background: rgba(0, 0, 0, 0.06) !important;
border: none !important;
}
.dark & {
background: rgba(255, 255, 255, 0.12) !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
background: rgba(255, 255, 255, 0.1) !important;
border: none !important;
}
}

7
src/components/Elements/MainModal/scss/modules/_topBar.scss
View File

@@ -10,10 +10,13 @@
padding: 1.5rem 1.5rem;
// width: 100%;
background-color: rgba(1, 1, 1, 0.9);
-webkit-backdrop-filter: blur(16px) saturate(180%);
backdrop-filter: blur(16px) saturate(180%);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
@include themed {
background-color: t($modal-background);
border-bottom: 1px solid t($modal-sidebarActive);
}
.topBarLeft {
display: flex;

22
src/features/misc/sections/Changelog.jsx
View File

@@ -1,15 +1,29 @@
import variables from 'config/variables';
import { useState } from 'react';
import { useState, useRef } from 'react';
import { MdOutlineWifiOff } from 'react-icons/md';
const Changelog = () => {
const [isLoading, setIsLoading] = useState(true);
const iframeRef = useRef(null);
const offlineMode = localStorage.getItem('offlineMode') === 'true';
const isOffline = navigator.onLine === false || offlineMode;
const handleLoad = () => {
setIsLoading(false);
// Send theme to iframe after it loads
if (iframeRef.current?.contentWindow) {
const theme = localStorage.getItem('theme') || 'auto';
const blogOrigin = new URL(variables.constants.CHANGELOG_URL).origin;
iframeRef.current.contentWindow.postMessage(
{
type: 'mue:theme',
payload: { theme },
},
blogOrigin
);
}
};
// Show offline error message if offline
@@ -45,7 +59,11 @@ const Changelog = () => {
</div>
)}
<iframe
src={variables.constants.CHANGELOG_URL + '?embed=true'}
ref={iframeRef}
src={(() => {
const theme = localStorage.getItem('theme') || 'auto';
return `${variables.constants.CHANGELOG_URL}?embed=true&theme=${theme}`;
})()}
onLoad={handleLoad}
style={{
width: '100%',

36
src/features/misc/views/Discover.jsx
View File

@@ -38,13 +38,17 @@ function DiscoverContent({ category, onBreadcrumbsChange }) {
onBreadcrumbsChange([]);
}
// Get current theme
const theme = localStorage.getItem('theme') || 'auto';
const themeParam = `&theme=${theme}`;
// Update iframe src with category
if (iframeRef.current) {
// Collections use path-based routing, others use query params
if (category === 'collections') {
iframeRef.current.src = `${MARKETPLACE_URL}/collections?embed=true${previewParam}`;
iframeRef.current.src = `${MARKETPLACE_URL}/collections?embed=true${previewParam}${themeParam}`;
} else {
iframeRef.current.src = `${MARKETPLACE_URL}?embed=true&type=${category}${previewParam}`;
iframeRef.current.src = `${MARKETPLACE_URL}?embed=true&type=${category}${previewParam}${themeParam}`;
}
}
}, [category, onBreadcrumbsChange, previewParam]);
@@ -59,6 +63,10 @@ function DiscoverContent({ category, onBreadcrumbsChange }) {
if (itemId && iframeRef.current) {
setIsLoading(true);
// Get current theme
const theme = localStorage.getItem('theme') || 'auto';
const themeParam = `&theme=${theme}`;
// Get item from localStorage to determine type
const installed = JSON.parse(localStorage.getItem('installed')) || [];
const item = installed.find((i) => i.name === itemId);
@@ -75,10 +83,10 @@ function DiscoverContent({ category, onBreadcrumbsChange }) {
const itemIdToUse = item.id || itemId;
// Navigate to /packs/{id} or /presets/{id}
iframeRef.current.src = `${MARKETPLACE_URL}/${pathSegment}/${itemIdToUse}?embed=true${previewParam}`;
iframeRef.current.src = `${MARKETPLACE_URL}/${pathSegment}/${itemIdToUse}?embed=true${previewParam}${themeParam}`;
} else {
// Fallback if item not found in localStorage
iframeRef.current.src = `${MARKETPLACE_URL}/packs/${itemId}?embed=true${previewParam}`;
iframeRef.current.src = `${MARKETPLACE_URL}/packs/${itemId}?embed=true${previewParam}${themeParam}`;
}
}
};
@@ -186,6 +194,18 @@ function DiscoverContent({ category, onBreadcrumbsChange }) {
const handleLoad = () => {
setIsLoading(false);
// Send theme to iframe after it loads
if (iframeRef.current?.contentWindow) {
const theme = localStorage.getItem('theme') || 'auto';
iframeRef.current.contentWindow.postMessage(
{
type: 'marketplace:theme',
payload: { theme },
},
MARKETPLACE_URL
);
}
};
// Show offline error message if offline
@@ -232,7 +252,13 @@ function DiscoverContent({ category, onBreadcrumbsChange }) {
)}
<iframe
ref={iframeRef}
src={category === 'collections' ? `${MARKETPLACE_URL}/collections?embed=true${previewParam}` : `${MARKETPLACE_URL}?embed=true&type=${category}${previewParam}`}
src={(() => {
const theme = localStorage.getItem('theme') || 'auto';
const themeParam = `&theme=${theme}`;
return category === 'collections'
? `${MARKETPLACE_URL}/collections?embed=true${previewParam}${themeParam}`
: `${MARKETPLACE_URL}?embed=true&type=${category}${previewParam}${themeParam}`;
})()}
onLoad={handleLoad}
scrolling="no"
style={{