Bug fixes and style updates to theme builder
This commit is contained in:
Sean Edmunds
@@ -85,7 +85,7 @@ function ThemingCard({ wolEnabled }: { wolEnabled: number }) {
|
||||
>
|
||||
<Stack gap={0} h={'fit-content'} w={'73%'}>
|
||||
<Text className={textClasses.currentTheme} classNames={textClasses}>
|
||||
Current theme:
|
||||
Current:
|
||||
</Text>
|
||||
<Text
|
||||
w={'100%'}
|
||||
@@ -204,7 +204,7 @@ function ThemingCard({ wolEnabled }: { wolEnabled: number }) {
|
||||
wrapper: selectClasses.menuSelectWrapper,
|
||||
root: selectClasses.menuSelectRoot,
|
||||
input: selectClasses.menuSelectInput,
|
||||
label: selectClasses.menuSelectLabel,
|
||||
label: selectClasses.menuSelectLabelNoOverflow,
|
||||
options: selectClasses.menuSelectOptions,
|
||||
option: selectClasses.menuSelectOption,
|
||||
}}
|
||||
|
||||
@@ -120,8 +120,8 @@ export function ThemeModal({
|
||||
color: 'var(--mantine-color-primary-0)',
|
||||
},
|
||||
input: {
|
||||
color: designerTheme.primaryColor,
|
||||
backgroundColor: designerTheme.backgroundColor,
|
||||
color: selectedTheme.primaryColor,
|
||||
backgroundColor: selectedTheme.backgroundColor,
|
||||
border: 'none',
|
||||
borderBottom: '1px solid var(--mantine-color-primary-0)',
|
||||
},
|
||||
|
||||
@@ -20,9 +20,9 @@ import { notifications } from '@mantine/notifications';
|
||||
import { useCommonHooks } from 'hooks';
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import FontPicker from 'react-fontpicker-ts';
|
||||
import { FaClipboard, FaFont, FaGoogle } from 'react-icons/fa';
|
||||
import { FaCheck, FaClipboard, FaFont, FaGoogle } from 'react-icons/fa';
|
||||
import { FaShuffle } from 'react-icons/fa6';
|
||||
import { FiImage, FiSave, FiShuffle, FiX } from 'react-icons/fi';
|
||||
import { FiImage, FiRefreshCcw, FiSave, FiShuffle, FiX } from 'react-icons/fi';
|
||||
import {
|
||||
buttonClasses,
|
||||
colorSwatchClasses,
|
||||
@@ -68,6 +68,11 @@ export function ThemeEditor({
|
||||
const viewportRef = useRef<HTMLDivElement>(null);
|
||||
const [colorId, setColorId] = useState<string>('');
|
||||
const [colorValue, setColorValue] = useState('#000000');
|
||||
const [rgba, setRgba] = useState<{ r: number; g: number; b: number; a?: number }>({
|
||||
r: 0,
|
||||
g: 0,
|
||||
b: 0,
|
||||
});
|
||||
const [font, setFont] = useState<Theme['themeFont']>();
|
||||
const [customFontEnabled, setCustomFontEnabled] = useState<boolean>(false);
|
||||
const re = /(?:\.([^.]+))?$/;
|
||||
@@ -146,13 +151,17 @@ export function ThemeEditor({
|
||||
});
|
||||
|
||||
const handleSwatchClick = (colorId: string, colorValue: string) => {
|
||||
setRgba({
|
||||
r: Number.parseInt(colorValue.substring(1, 3), 16),
|
||||
g: Number.parseInt(colorValue.substring(3, 5), 16),
|
||||
b: Number.parseInt(colorValue.substring(5, 7), 16),
|
||||
a: Number.parseInt(colorValue.substring(7, 9), 16) || undefined,
|
||||
});
|
||||
setColorId(colorId || '');
|
||||
setColorValue(colorValue || '');
|
||||
closeBackgroundPicker();
|
||||
openPicker();
|
||||
setDesignerTheme(designerTheme);
|
||||
};
|
||||
|
||||
const randomColor = (withAlpha?: boolean) => {
|
||||
const letters = '0123456789ABCDEF';
|
||||
let color = '#';
|
||||
@@ -181,7 +190,16 @@ export function ThemeEditor({
|
||||
setFont(designerTheme.themeFont);
|
||||
}
|
||||
}, [selectedTheme]);
|
||||
|
||||
useEffect(() => {
|
||||
if (colorValue) {
|
||||
setRgba({
|
||||
r: Number.parseInt(colorValue.substring(1, 3), 16),
|
||||
g: Number.parseInt(colorValue.substring(3, 5), 16),
|
||||
b: Number.parseInt(colorValue.substring(5, 7), 16),
|
||||
a: Number.parseInt(colorValue.substring(7, 9), 16) || undefined,
|
||||
});
|
||||
}
|
||||
}, [colorValue]);
|
||||
return (
|
||||
<>
|
||||
<Group p={'2rem'} w={'100%'} justify='space-between'>
|
||||
@@ -325,7 +343,7 @@ export function ThemeEditor({
|
||||
setColorValue(e);
|
||||
setDesignerTheme({
|
||||
...designerTheme,
|
||||
backgroundColor: e,
|
||||
[colorId]: e,
|
||||
});
|
||||
}}
|
||||
format={'hexa'}
|
||||
@@ -347,53 +365,168 @@ export function ThemeEditor({
|
||||
mb={'1.5rem'}
|
||||
/>
|
||||
)}
|
||||
<TextInput
|
||||
className={textInputClasses.default}
|
||||
classNames={textInputClasses}
|
||||
w={'90%'}
|
||||
value={colorValue}
|
||||
onChange={(e) => setColorValue(e.target.value)}
|
||||
/>
|
||||
<Group mt={'auto'} justify='center'>
|
||||
<Button
|
||||
c={'white'}
|
||||
onClick={() => {
|
||||
const rc = randomColor(colorId === 'searchColor');
|
||||
setColorValue(rc);
|
||||
setDesignerTheme({
|
||||
...designerTheme,
|
||||
[colorId]: rc,
|
||||
});
|
||||
}}
|
||||
<Stack w={'90%'} gap={0}>
|
||||
<TextInput
|
||||
className={textInputClasses.colorSwatchInput}
|
||||
classNames={textInputClasses}
|
||||
label={'Hex Value'}
|
||||
value={colorValue}
|
||||
onChange={(e) => setColorValue(e.target.value)}
|
||||
/>
|
||||
<Group gap={0} w={'100%'} justify='space-between'>
|
||||
<TextInput
|
||||
className={textInputClasses.colorSwatchInput}
|
||||
classNames={textInputClasses}
|
||||
label={'Red'}
|
||||
w={'23%'}
|
||||
value={rgba.r}
|
||||
onChange={(e) => {
|
||||
if (e.target.value) {
|
||||
setRgba({
|
||||
...rgba,
|
||||
r: Number.parseInt(e.target.value, 10),
|
||||
});
|
||||
setColorValue(
|
||||
`${colorValue.substring(0, 1)}${Number.parseInt(e.target.value, 10).toString(16).padStart(2, '0')}${colorValue.substring(3)}`,
|
||||
);
|
||||
} else {
|
||||
setRgba({
|
||||
...rgba,
|
||||
r: 0,
|
||||
});
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<TextInput
|
||||
className={textInputClasses.colorSwatchInput}
|
||||
classNames={textInputClasses}
|
||||
label={'Green'}
|
||||
w={'23%'}
|
||||
value={rgba.g}
|
||||
onChange={(e) => {
|
||||
if (e.target.value) {
|
||||
setRgba({
|
||||
...rgba,
|
||||
g: Number.parseInt(e.target.value, 10),
|
||||
});
|
||||
setColorValue(
|
||||
`${colorValue.substring(0, 3)}${Number.parseInt(e.target.value, 10).toString(16).padStart(2, '0')}${colorValue.substring(5)}`,
|
||||
);
|
||||
} else {
|
||||
setRgba({
|
||||
...rgba,
|
||||
g: 0,
|
||||
});
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<TextInput
|
||||
className={textInputClasses.colorSwatchInput}
|
||||
classNames={textInputClasses}
|
||||
label={'Blue'}
|
||||
w={'23%'}
|
||||
value={rgba.b}
|
||||
onChange={(e) => {
|
||||
if (e.target.value) {
|
||||
setRgba({
|
||||
...rgba,
|
||||
b: Number.parseInt(e.target.value, 10),
|
||||
});
|
||||
setColorValue(
|
||||
`${colorValue.substring(0, 5)}${Number.parseInt(e.target.value, 10).toString(16).padStart(2, '0')}${colorValue.substring(7)}`,
|
||||
);
|
||||
} else {
|
||||
setRgba({
|
||||
...rgba,
|
||||
b: 0,
|
||||
});
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<TextInput
|
||||
disabled={colorId !== 'searchColor'}
|
||||
className={textInputClasses.colorSwatchInput}
|
||||
classNames={textInputClasses}
|
||||
label={'Alpha'}
|
||||
w={'23%'}
|
||||
value={rgba.a}
|
||||
onChange={(e) => {
|
||||
if (e.target.value) {
|
||||
setRgba({
|
||||
...rgba,
|
||||
a: Number.parseInt(e.target.value, 10),
|
||||
});
|
||||
setColorValue(
|
||||
`${colorValue.substring(0, 7)}${Number.parseInt(e.target.value, 10).toString(16).padStart(2, '0')}`,
|
||||
);
|
||||
} else {
|
||||
setRgba({
|
||||
...rgba,
|
||||
a: 0,
|
||||
});
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Group>
|
||||
</Stack>
|
||||
<Group mt={'auto'} justify='center' mih={'36px'} pb={'1.5rem'}>
|
||||
<Tooltip
|
||||
label={'Random Color'}
|
||||
className={toolTipClasses.default}
|
||||
classNames={toolTipClasses}
|
||||
>
|
||||
<FiShuffle />
|
||||
</Button>
|
||||
<Button
|
||||
color={'green'}
|
||||
onClick={() => {
|
||||
setDesignerTheme({
|
||||
...designerTheme,
|
||||
[colorId]: colorValue,
|
||||
});
|
||||
<Button
|
||||
c={'white'}
|
||||
onClick={() => {
|
||||
const rc = randomColor(colorId === 'searchColor');
|
||||
setColorValue(rc);
|
||||
setDesignerTheme({
|
||||
...designerTheme,
|
||||
[colorId]: rc,
|
||||
});
|
||||
}}
|
||||
>
|
||||
<FiShuffle />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<Tooltip
|
||||
label={'Reset Color'}
|
||||
className={toolTipClasses.default}
|
||||
classNames={toolTipClasses}
|
||||
>
|
||||
<Button
|
||||
color={'red'}
|
||||
styles={{ label: { color: 'black' } }}
|
||||
onClick={() => {
|
||||
setColorValue(defaultTheme[colorId as keyof Theme] as string);
|
||||
setDesignerTheme({
|
||||
...designerTheme,
|
||||
[colorId]: defaultTheme[colorId as keyof Theme],
|
||||
});
|
||||
}}
|
||||
>
|
||||
<FiRefreshCcw />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<Tooltip
|
||||
label={'Done'}
|
||||
className={toolTipClasses.default}
|
||||
classNames={toolTipClasses}
|
||||
>
|
||||
<Button
|
||||
color={'green'}
|
||||
onClick={() => {
|
||||
setDesignerTheme({
|
||||
...designerTheme,
|
||||
[colorId]: colorValue,
|
||||
});
|
||||
|
||||
closePicker();
|
||||
}}
|
||||
>
|
||||
<FiSave />
|
||||
</Button>
|
||||
<Button
|
||||
color={'red'}
|
||||
styles={{ label: { color: 'black' } }}
|
||||
onClick={() => {
|
||||
closePicker();
|
||||
setDesignerTheme({
|
||||
...designerTheme,
|
||||
[colorId]: designerTheme[colorId as keyof Theme],
|
||||
});
|
||||
}}
|
||||
>
|
||||
<FiX />
|
||||
</Button>
|
||||
closePicker();
|
||||
}}
|
||||
>
|
||||
<FaCheck />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</Group>
|
||||
</Stack>
|
||||
)}
|
||||
@@ -710,14 +843,22 @@ export function ThemeEditor({
|
||||
gap={0}
|
||||
key={key}
|
||||
>
|
||||
<Group w={'100%'} justify='space-between'>
|
||||
<Group
|
||||
w={'100%'}
|
||||
justify='space-between'
|
||||
pos={'relative'}
|
||||
>
|
||||
<Text
|
||||
w={'100%'}
|
||||
key={key}
|
||||
pl={2}
|
||||
style={{
|
||||
color: 'var(--mantine-color-primary-0)',
|
||||
backgroundColor:
|
||||
'var(--mantine-color-background-0)',
|
||||
overflow: 'clip',
|
||||
whiteSpace: 'nowrap',
|
||||
textOverflow: 'ellipsis',
|
||||
}}
|
||||
>
|
||||
{
|
||||
@@ -745,245 +886,234 @@ export function ThemeEditor({
|
||||
[key]: defaultTheme[key as keyof Theme],
|
||||
});
|
||||
}}
|
||||
pos={'absolute'}
|
||||
right={0}
|
||||
>
|
||||
<FiX />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
</Group>
|
||||
{key === 'name' && (
|
||||
<Group
|
||||
w={'100%'}
|
||||
justify='center'
|
||||
bg='var(--mantine-color-accent-0)'
|
||||
style={{ borderRadius: 8, overflow: 'clip' }}
|
||||
h={48}
|
||||
>
|
||||
<Text>{defaultTheme[key as keyof Theme]}</Text>
|
||||
<Text>→</Text>
|
||||
<Text>{designerTheme[key as keyof Theme]}</Text>
|
||||
</Group>
|
||||
)}
|
||||
{key.includes('Shadow') && (
|
||||
<Group
|
||||
w={'100%'}
|
||||
justify='center'
|
||||
bg='var(--mantine-color-accent-0)'
|
||||
style={{ borderRadius: 8, overflow: 'clip' }}
|
||||
h={48}
|
||||
>
|
||||
{defaultTheme[key as keyof Theme] === 0 ? (
|
||||
<Text>Off</Text>
|
||||
) : (
|
||||
<Text>On</Text>
|
||||
)}
|
||||
<Text>→</Text>
|
||||
{designerTheme[key as keyof Theme] === 0 ? (
|
||||
<Text>Off</Text>
|
||||
) : (
|
||||
<Text>On</Text>
|
||||
)}
|
||||
</Group>
|
||||
)}
|
||||
{key.includes('Font') && (
|
||||
<Group
|
||||
w={'100%'}
|
||||
justify='center'
|
||||
bg='var(--mantine-color-accent-0)'
|
||||
h={48}
|
||||
style={{ borderRadius: 8, overflow: 'clip' }}
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
fontFamily:
|
||||
(defaultTheme[
|
||||
key as keyof Theme
|
||||
] as string) ?? undefined,
|
||||
fontSize: 18,
|
||||
}}
|
||||
>
|
||||
{defaultTheme[key as keyof Theme] ||
|
||||
`Default (${currentUser.defaultFont})`}
|
||||
</Text>
|
||||
<Text>→</Text>
|
||||
<Text
|
||||
style={{
|
||||
fontFamily:
|
||||
designerTheme.themeFont ?? undefined,
|
||||
fontSize: 18,
|
||||
}}
|
||||
>
|
||||
{designerTheme[key as keyof Theme] ||
|
||||
`Default (${currentUser.defaultFont})`}
|
||||
</Text>
|
||||
</Group>
|
||||
)}
|
||||
{key === 'backgroundImage' && (
|
||||
<Group
|
||||
w={'100%'}
|
||||
justify='center'
|
||||
gap={4}
|
||||
bg='var(--mantine-color-accent-0)'
|
||||
style={{ borderRadius: 8, overflow: 'clip' }}
|
||||
>
|
||||
<Image
|
||||
w={'40%'}
|
||||
src={
|
||||
(
|
||||
defaultTheme[key as keyof Theme] as string
|
||||
).toLocaleLowerCase() === 'none'
|
||||
? 'https://placehold.co/540x360?text=None'
|
||||
: `../../api/backgroundImages/thumbs/${defaultTheme[key as keyof Theme] as string}`
|
||||
}
|
||||
/>
|
||||
<Text>→</Text>
|
||||
<Image
|
||||
w={'40%'}
|
||||
src={
|
||||
(
|
||||
designerTheme[key as keyof Theme] as string
|
||||
).toLocaleLowerCase() === 'none'
|
||||
? 'https://placehold.co/540x360?text=None'
|
||||
: `../../api/backgroundImages/thumbs/${designerTheme[key as keyof Theme] as string}`
|
||||
}
|
||||
/>
|
||||
</Group>
|
||||
)}
|
||||
{key.includes('Color') && (
|
||||
<Group
|
||||
w={'100%'}
|
||||
justify='space-between'
|
||||
bg='var(--mantine-color-accent-0)'
|
||||
style={{ borderRadius: 8, overflow: 'clip' }}
|
||||
>
|
||||
<Tooltip
|
||||
label='Copy color code'
|
||||
classNames={toolTipClasses}
|
||||
className={toolTipClasses.default}
|
||||
>
|
||||
<ColorSwatch
|
||||
h={50}
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(
|
||||
defaultTheme[key as keyof Theme] as string,
|
||||
);
|
||||
notifications.show({
|
||||
title: (
|
||||
<Text
|
||||
fw={600}
|
||||
c={'var(--mantine-color-accent-0)'}
|
||||
>
|
||||
Copied{' '}
|
||||
{
|
||||
ThemeProperties[
|
||||
key as keyof typeof ThemeProperties
|
||||
]
|
||||
}
|
||||
</Text>
|
||||
),
|
||||
message: (
|
||||
<Text
|
||||
c={'var(--mantine-color-primary-0)'}
|
||||
>
|
||||
{
|
||||
defaultTheme[
|
||||
key as keyof Theme
|
||||
] as string
|
||||
}
|
||||
</Text>
|
||||
),
|
||||
autoClose: true,
|
||||
withCloseButton: true,
|
||||
icon: <FaClipboard size={24} />,
|
||||
});
|
||||
}}
|
||||
color={
|
||||
defaultTheme[key as keyof Theme] as string
|
||||
}
|
||||
<Group
|
||||
w={'100%'}
|
||||
justify={
|
||||
key.includes('Color') ? 'space-between' : 'center'
|
||||
}
|
||||
gap={key.includes('Color') ? 4 : 0}
|
||||
bg='var(--mantine-color-accent-0)'
|
||||
c='var(--mantine-color-background-0)'
|
||||
style={{ borderRadius: 8, overflow: 'clip' }}
|
||||
h={48}
|
||||
>
|
||||
{key === 'name' && (
|
||||
<>
|
||||
<Text>{defaultTheme[key as keyof Theme]}</Text>
|
||||
<Text>→</Text>
|
||||
<Text>{designerTheme[key as keyof Theme]}</Text>
|
||||
</>
|
||||
)}
|
||||
{key.includes('Shadow') && (
|
||||
<>
|
||||
{defaultTheme[key as keyof Theme] === 0 ? (
|
||||
<Text>Off</Text>
|
||||
) : (
|
||||
<Text>On</Text>
|
||||
)}
|
||||
<Text>→</Text>
|
||||
{designerTheme[key as keyof Theme] === 0 ? (
|
||||
<Text>Off</Text>
|
||||
) : (
|
||||
<Text>On</Text>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{key.includes('Font') && (
|
||||
<>
|
||||
<Text
|
||||
style={{
|
||||
cursor: 'pointer',
|
||||
fontFamily:
|
||||
(defaultTheme[
|
||||
key as keyof Theme
|
||||
] as string) ?? undefined,
|
||||
fontSize: 18,
|
||||
}}
|
||||
styles={{
|
||||
alphaOverlay: {
|
||||
borderRadius: '0px',
|
||||
},
|
||||
colorOverlay: {
|
||||
borderRadius: '0px',
|
||||
},
|
||||
shadowOverlay: {
|
||||
borderRadius: '0px',
|
||||
},
|
||||
childrenOverlay: {
|
||||
borderRadius: '0px',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
<Text>→</Text>
|
||||
<Tooltip
|
||||
label='Copy color code'
|
||||
classNames={toolTipClasses}
|
||||
className={toolTipClasses.default}
|
||||
>
|
||||
<ColorSwatch
|
||||
h={50}
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(
|
||||
defaultTheme[key as keyof Theme] as string,
|
||||
);
|
||||
notifications.show({
|
||||
title: (
|
||||
<Text
|
||||
fw={600}
|
||||
c={'var(--mantine-color-accent-0)'}
|
||||
>
|
||||
Copied{' '}
|
||||
{
|
||||
ThemeProperties[
|
||||
key as keyof typeof ThemeProperties
|
||||
]
|
||||
}
|
||||
</Text>
|
||||
),
|
||||
message: (
|
||||
<Text
|
||||
c={'var(--mantine-color-primary-0)'}
|
||||
>
|
||||
{
|
||||
designerTheme[
|
||||
key as keyof Theme
|
||||
] as string
|
||||
}
|
||||
</Text>
|
||||
),
|
||||
autoClose: true,
|
||||
withCloseButton: true,
|
||||
icon: <FaClipboard size={24} />,
|
||||
});
|
||||
}}
|
||||
color={
|
||||
designerTheme[key as keyof Theme] as string
|
||||
}
|
||||
>
|
||||
{defaultTheme[key as keyof Theme] ||
|
||||
`Default (${currentUser.defaultFont})`}
|
||||
</Text>
|
||||
<Text>→</Text>
|
||||
<Text
|
||||
style={{
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
styles={{
|
||||
alphaOverlay: {
|
||||
borderRadius: '0px',
|
||||
},
|
||||
colorOverlay: {
|
||||
borderRadius: '0px',
|
||||
},
|
||||
shadowOverlay: {
|
||||
borderRadius: '0px',
|
||||
},
|
||||
childrenOverlay: {
|
||||
borderRadius: '0px',
|
||||
},
|
||||
fontFamily:
|
||||
designerTheme.themeFont ?? undefined,
|
||||
fontSize: 18,
|
||||
}}
|
||||
>
|
||||
{designerTheme[key as keyof Theme] ||
|
||||
`Default (${currentUser.defaultFont})`}
|
||||
</Text>
|
||||
</>
|
||||
)}
|
||||
{key === 'backgroundImage' && (
|
||||
<>
|
||||
<Image
|
||||
w={'40%'}
|
||||
src={
|
||||
(
|
||||
defaultTheme[key as keyof Theme] as string
|
||||
).toLocaleLowerCase() === 'none'
|
||||
? 'https://placehold.co/540x360?text=None'
|
||||
: `../../api/backgroundImages/thumbs/${defaultTheme[key as keyof Theme] as string}`
|
||||
}
|
||||
/>
|
||||
</Tooltip>
|
||||
</Group>
|
||||
)}
|
||||
<Text>→</Text>
|
||||
<Image
|
||||
w={'40%'}
|
||||
src={
|
||||
(
|
||||
designerTheme[key as keyof Theme] as string
|
||||
).toLocaleLowerCase() === 'none'
|
||||
? 'https://placehold.co/540x360?text=None'
|
||||
: `../../api/backgroundImages/thumbs/${designerTheme[key as keyof Theme] as string}`
|
||||
}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
{key.includes('Color') && (
|
||||
<>
|
||||
<Tooltip
|
||||
label='Copy color code'
|
||||
classNames={toolTipClasses}
|
||||
className={toolTipClasses.default}
|
||||
>
|
||||
<ColorSwatch
|
||||
h={50}
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(
|
||||
defaultTheme[
|
||||
key as keyof Theme
|
||||
] as string,
|
||||
);
|
||||
notifications.show({
|
||||
title: (
|
||||
<Text
|
||||
fw={600}
|
||||
c={'var(--mantine-color-accent-0)'}
|
||||
>
|
||||
Copied{' '}
|
||||
{
|
||||
ThemeProperties[
|
||||
key as keyof typeof ThemeProperties
|
||||
]
|
||||
}
|
||||
</Text>
|
||||
),
|
||||
message: (
|
||||
<Text
|
||||
c={'var(--mantine-color-primary-0)'}
|
||||
>
|
||||
{
|
||||
defaultTheme[
|
||||
key as keyof Theme
|
||||
] as string
|
||||
}
|
||||
</Text>
|
||||
),
|
||||
autoClose: true,
|
||||
withCloseButton: true,
|
||||
icon: <FaClipboard size={24} />,
|
||||
});
|
||||
}}
|
||||
color={
|
||||
defaultTheme[key as keyof Theme] as string
|
||||
}
|
||||
style={{
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
styles={{
|
||||
alphaOverlay: {
|
||||
borderRadius: '0px',
|
||||
},
|
||||
colorOverlay: {
|
||||
borderRadius: '0px',
|
||||
},
|
||||
shadowOverlay: {
|
||||
borderRadius: '0px',
|
||||
},
|
||||
childrenOverlay: {
|
||||
borderRadius: '0px',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
<Text>→</Text>
|
||||
<Tooltip
|
||||
label='Copy color code'
|
||||
classNames={toolTipClasses}
|
||||
className={toolTipClasses.default}
|
||||
>
|
||||
<ColorSwatch
|
||||
h={50}
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(
|
||||
defaultTheme[
|
||||
key as keyof Theme
|
||||
] as string,
|
||||
);
|
||||
notifications.show({
|
||||
title: (
|
||||
<Text
|
||||
fw={600}
|
||||
c={'var(--mantine-color-accent-0)'}
|
||||
>
|
||||
Copied{' '}
|
||||
{
|
||||
ThemeProperties[
|
||||
key as keyof typeof ThemeProperties
|
||||
]
|
||||
}
|
||||
</Text>
|
||||
),
|
||||
message: (
|
||||
<Text
|
||||
c={'var(--mantine-color-primary-0)'}
|
||||
>
|
||||
{
|
||||
designerTheme[
|
||||
key as keyof Theme
|
||||
] as string
|
||||
}
|
||||
</Text>
|
||||
),
|
||||
autoClose: true,
|
||||
withCloseButton: true,
|
||||
icon: <FaClipboard size={24} />,
|
||||
});
|
||||
}}
|
||||
color={
|
||||
designerTheme[key as keyof Theme] as string
|
||||
}
|
||||
style={{
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
styles={{
|
||||
alphaOverlay: {
|
||||
borderRadius: '0px',
|
||||
},
|
||||
colorOverlay: {
|
||||
borderRadius: '0px',
|
||||
},
|
||||
shadowOverlay: {
|
||||
borderRadius: '0px',
|
||||
},
|
||||
childrenOverlay: {
|
||||
borderRadius: '0px',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
</>
|
||||
)}
|
||||
</Group>
|
||||
</Stack>
|
||||
)
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user