smedmunds/TriggerFrontend
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

Theme changes

Browse Source
This commit is contained in:
Sean Edmunds
2025-04-28 15:59:56 -05:00
parent 19b793fbf9
commit 416c8611ec
53 changed files with 392 additions and 428 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/pages/settings/components/Theming/ThemeCard.tsx
View File

@@ -58,8 +58,8 @@ function ThemeCard({
padding: '8px',
margin: '8px',
borderRadius: '10px',
backgroundColor: 'var(--color-text-acc)',
color: 'var(--color-background)',
backgroundColor: 'var(--mantine-color-accent-0)',
color: 'var(--mantine-color-background-0)',
}}
>{`"${cardTheme.name}"`}</Text>
<Text c='red'>This action cannot be undone!</Text>
@@ -205,12 +205,13 @@ function ThemeCard({
position: 'absolute',
left: 0,
top: 27 - shiftEdit,
backgroundColor: shiftEdit === 0 ? 'white' : 'var(--color-background)',
backgroundColor:
shiftEdit === 0 ? 'white' : 'var(--mantine-color-background-0)',
borderRadius: '50%',
padding: '8px',
margin: '4px',
border: 'solid 2px',
borderColor: shiftEdit === 0 ? 'black' : 'var(--color-text-pri)',
borderColor: shiftEdit === 0 ? 'black' : 'var(--mantine-color-primary-0)',
transition: 'all 0.2s',
}}
>
@@ -221,7 +222,7 @@ function ThemeCard({
style={{
fontSize: '2em',
fontWeight: 'bold',
color: shiftEdit === 0 ? 'black' : 'var(--color-text-pri)',
color: shiftEdit === 0 ? 'black' : 'var(--mantine-color-primary-0)',
}}
/>
</Group>
@@ -241,12 +242,14 @@ function ThemeCard({
position: 'absolute',
right: 0,
top: 27 - shiftShuffle,
backgroundColor: shiftShuffle === 0 ? 'white' : 'var(--color-background)',
backgroundColor:
shiftShuffle === 0 ? 'white' : 'var(--mantine-color-background-0)',
borderRadius: '50%',
padding: '8px',
margin: '4px',
border: 'solid 2px',
borderColor: shiftShuffle === 0 ? 'black' : 'var(--color-text-pri)',
borderColor:
shiftShuffle === 0 ? 'black' : 'var(--mantine-color-primary-0)',
transition: 'all 0.2s',
}}
>
@@ -265,7 +268,7 @@ function ThemeCard({
style={{
fontSize: '2em',
fontWeight: 'bold',
color: shiftShuffle === 0 ? 'black' : 'var(--color-text-pri)',
color: shiftShuffle === 0 ? 'black' : 'var(--mantine-color-primary-0)',
}}
/>
</Group>

30
src/pages/settings/components/Theming/ThemeModal.tsx
View File

@@ -47,7 +47,7 @@ function ThemeModal({
closePicker: () => void;
handleSaveTheme: () => void;
}) {
const { theme, isMobile } = useCommonHooks();
const { isMobile } = useCommonHooks();
const viewportRef = useRef<HTMLDivElement>(null);
const [query, setQuery] = useState('');
const [hovered, setHovered] = useState(-1);
@@ -101,7 +101,7 @@ function ThemeModal({
padding: 8,
marginTop: 34,
borderTopLeftRadius: 4,
color: theme.accentColor,
color: 'var(--mantine-color-accent-0)',
}}
>
{re.exec(item.toUpperCase())?.[1]}
@@ -130,20 +130,12 @@ function ThemeModal({
onClose={handleClose}
fullScreen={isMobile}
centered
style={{
'--color-text-pri': theme.primaryColor,
'--color-text-acc': theme.accentColor,
'--color-background': theme.backgroundColor,
'--color-border': theme.borderColor,
'--color-search-background': theme.searchColor,
'--image-background': `url("${theme.backgroundImage}")`,
}}
>
<Modal.Overlay style={{ backdropFilter: 'blur(5px)' }} />
<Modal.Content>
<Modal.Header style={{ justifyContent: 'center' }}>
<Group pos={'absolute'}>
<Text c={theme.backgroundColor}>Name:</Text>
<Text c={'var(--mantine-color-background-0)'}>Name:</Text>
<TextInput
className={textInputClasses.default}
classNames={textInputClasses}
@@ -153,12 +145,12 @@ function ThemeModal({
}
styles={{
label: {
color: theme.primaryColor,
color: 'var(--mantine-color-primary-0)',
},
input: {
color: theme.primaryColor,
color: 'var(--mantine-color-primary-0)',
border: 'none',
borderBottom: `1px solid ${theme.primaryColor}`,
borderBottom: '1px solid var(--mantine-color-primary-0)',
},
}}
/>
@@ -255,7 +247,7 @@ function ThemeModal({
color={selectedTheme.primaryColor}
style={{
cursor: 'pointer',
border: `2px dashed ${theme.primaryColor}`,
border: '2px dashed var(--mantine-color-primary-0)',
}}
/>
</Group>
@@ -274,7 +266,7 @@ function ThemeModal({
color={selectedTheme.accentColor}
style={{
cursor: 'pointer',
border: `2px dashed ${theme.primaryColor}`,
border: '2px dashed var(--mantine-color-primary-0)',
}}
/>
</Group>
@@ -293,7 +285,7 @@ function ThemeModal({
color={selectedTheme.backgroundColor}
style={{
cursor: 'pointer',
border: `2px dashed ${theme.primaryColor}`,
border: '2px dashed var(--mantine-color-primary-0)',
}}
/>
</Group>
@@ -312,7 +304,7 @@ function ThemeModal({
color={selectedTheme.borderColor}
style={{
cursor: 'pointer',
border: `2px dashed ${theme.primaryColor}`,
border: '2px dashed var(--mantine-color-primary-0)',
}}
/>
</Group>
@@ -331,7 +323,7 @@ function ThemeModal({
color={selectedTheme.searchColor}
style={{
cursor: 'pointer',
border: `2px dashed ${theme.primaryColor}`,
border: '2px dashed var(--mantine-color-primary-0)',
}}
/>
</Group>

18
src/pages/settings/components/Theming/ThemeModalContent.tsx
View File

@@ -5,7 +5,7 @@ import { stackClasses } from 'styles';
import type { Theme } from 'types';
export default function ThemeModalContent({ selectedTheme }: { selectedTheme: Theme }) {
const ExampleApp = ({ theme }: { theme: Theme }) => {
const ExampleApp = () => {
const [textDecoration, setTextDecoration] = useState<string>('none');
return (
@@ -23,7 +23,11 @@ export default function ThemeModalContent({ selectedTheme }: { selectedTheme: Th
paddingTop: '15px',
}}
>
<FiCheck style={{ color: theme.primaryColor }} height={32} width={32} />
<FiCheck
style={{ color: 'var(--mantine-color-primary-0)' }}
height={32}
width={32}
/>
</Stack>
<Stack
style={{
@@ -40,7 +44,7 @@ export default function ThemeModalContent({ selectedTheme }: { selectedTheme: Th
fontWeight: 400,
fontSize: 11,
fontStyle: 'normal',
color: theme.primaryColor,
color: 'var(--mantine-color-primary-0)',
fontFamily:
'-apple-system, Jost, BlinkMacSystemFont, Helvetica Neue, Roboto, sans-serif !important',
margin: 0,
@@ -53,7 +57,7 @@ export default function ThemeModalContent({ selectedTheme }: { selectedTheme: Th
fontWeight: 400,
fontSize: 11,
fontStyle: 'italic',
color: theme.accentColor,
color: 'var(--mantine-color-accent-0)',
fontFamily:
'-apple-system, Jost, BlinkMacSystemFont, Helvetica Neue, Roboto, sans-serif !important',
margin: 0,
@@ -124,9 +128,9 @@ export default function ThemeModalContent({ selectedTheme }: { selectedTheme: Th
alignContent: 'center',
}}
>
<ExampleApp theme={selectedTheme} />
<ExampleApp theme={selectedTheme} />
<ExampleApp theme={selectedTheme} />
<ExampleApp />
<ExampleApp />
<ExampleApp />
</Stack>
<Text
pl={'1.5rem'}

42
src/pages/settings/components/Theming/ThemePlaylistCard.tsx
View File

@@ -58,8 +58,8 @@ function ThemePlaylistCard({
padding: '8px',
margin: '8px',
borderRadius: '10px',
backgroundColor: 'var(--color-text-acc)',
color: 'var(--color-background)',
backgroundColor: 'var(--mantine-color-accent-0)',
color: 'var(--mantine-color-background-0)',
}}
>{`"${cardPlaylist.name}"`}</Text>
<Text c='red'>This action cannot be undone!</Text>
@@ -73,12 +73,12 @@ function ThemePlaylistCard({
left: 6,
paddingRight: 4,
paddingLeft: 4,
backgroundColor: theme.borderColor,
backgroundColor: 'var(--mantine-color-border-0)',
borderRadius: '4px',
color:
theme.borderColor === theme.primaryColor
? theme.accentColor
: theme.backgroundColor,
? 'var(--mantine-color-accent-0)'
: 'var(--mantine-color-background-0)',
zIndex: 3,
}}
>
@@ -92,12 +92,12 @@ function ThemePlaylistCard({
right: 6,
paddingRight: 4,
paddingLeft: 4,
backgroundColor: theme.borderColor,
backgroundColor: 'var(--mantine-color-border-0)',
borderRadius: '4px',
color:
theme.borderColor === theme.primaryColor
? theme.accentColor
: theme.backgroundColor,
? 'var(--mantine-color-accent-0)'
: 'var(--mantine-color-background-0)',
zIndex: 3,
}}
onClick={(event) => {
@@ -160,12 +160,12 @@ function ThemePlaylistCard({
right: 6,
paddingRight: 4,
paddingLeft: 4,
backgroundColor: theme.borderColor,
backgroundColor: 'var(--mantine-color-border-0)',
borderRadius: '4px',
color:
theme.borderColor === theme.primaryColor
? theme.accentColor
: theme.backgroundColor,
? 'var(--mantine-color-accent-0)'
: 'var(--mantine-color-background-0)',
zIndex: 3,
}}
onClick={() => {
@@ -182,12 +182,12 @@ function ThemePlaylistCard({
right: 40,
paddingRight: 4,
paddingLeft: 4,
backgroundColor: theme.borderColor,
backgroundColor: 'var(--mantine-color-border-0)',
borderRadius: '4px',
color:
theme.borderColor === theme.primaryColor
? theme.accentColor
: theme.backgroundColor,
? 'var(--mantine-color-accent-0)'
: 'var(--mantine-color-background-0)',
zIndex: 3,
}}
onClick={() => {
@@ -204,9 +204,9 @@ function ThemePlaylistCard({
h={'320px'}
style={{
backgroundSize: 'cover',
backgroundColor: theme.searchColor,
color: theme.accentColor,
border: `solid ${theme.borderColor}`,
backgroundColor: 'var(--mantine-color-search-0)',
color: 'var(--mantine-color-accent-0)',
border: 'solid var(--mantine-color-border-0)',
}}
onClick={() => {
setCurrentThemePlaylist(cardPlaylist.name);
@@ -222,8 +222,8 @@ function ThemePlaylistCard({
mt={8}
mb={-8}
style={{
color: theme.backgroundColor,
backgroundColor: theme.primaryColor,
color: 'var(--mantine-color-background-0)',
backgroundColor: 'var(--mantine-color-primary-0)',
borderRadius: '4px',
}}
>
@@ -249,8 +249,8 @@ function ThemePlaylistCard({
mt={8}
mb={-8}
style={{
color: theme.backgroundColor,
backgroundColor: theme.primaryColor,
color: 'var(--mantine-color-background-0)',
backgroundColor: 'var(--mantine-color-primary-0)',
borderRadius: '4px',
}}
>

11
src/pages/settings/components/Theming/ThemePlaylistModal.tsx
View File

@@ -33,7 +33,7 @@ function ThemePlaylistModal({
handleSavePlaylist: () => void;
allThemes: Theme[];
}) {
const { theme, isMobile, modalStyle } = useCommonHooks();
const { isMobile } = useCommonHooks();
const [themeList, setThemeList] = useState<any>([]);
useEffect(() => {
@@ -57,13 +57,12 @@ function ThemePlaylistModal({
handleClose();
setThemeList('[]');
}}
style={modalStyle}
>
<Modal.Overlay style={{ backdropFilter: 'blur(5px)' }} />
<Modal.Content>
<Modal.Header style={{ justifyContent: 'center' }}>
<Group pos={'absolute'}>
<Text c={theme.backgroundColor}>Name:</Text>
<Text c={'var(--mantine-color-background-0)'}>Name:</Text>
<TextInput
className={textInputClasses.default}
classNames={textInputClasses}
@@ -74,12 +73,12 @@ function ThemePlaylistModal({
}
styles={{
label: {
color: theme.primaryColor,
color: 'var(--mantine-color-primary-0)',
},
input: {
color: theme.primaryColor,
color: 'var(--mantine-color-primary-0)',
border: 'none',
borderBottom: `1px solid ${theme.primaryColor}`,
borderBottom: '1px solid var(--mantine-color-primary-0)',
},
}}
/>

12
src/pages/settings/components/Theming/ThemePlaylists.tsx
View File

@@ -101,11 +101,11 @@ function ThemePlaylists() {
fontSize: '2em',
fontWeight: 'bold',
borderRadius: '50%',
backgroundColor: theme.borderColor,
backgroundColor: 'var(--mantine-color-border-0)',
color:
theme.borderColor === theme.primaryColor
? theme.accentColor
: theme.backgroundColor,
? 'var(--mantine-color-accent-0)'
: 'var(--mantine-color-background-0)',
}}
/>
)}
@@ -149,11 +149,11 @@ function ThemePlaylists() {
fontSize: '2em',
fontWeight: 'bold',
borderRadius: '50%',
backgroundColor: theme.borderColor,
backgroundColor: 'var(--mantine-color-border-0)',
color:
theme.borderColor === theme.primaryColor
? theme.accentColor
: theme.primaryColor,
? 'var(--mantine-color-accent-0)'
: 'var(--mantine-color-primary-0)',
}}
/>
)}

1
src/pages/settings/components/Theming/ThemeSelect.tsx
View File

@@ -30,7 +30,6 @@ function ThemeSelect({
<Text w={'100px'}>{timeIndex}</Text>
<Select
labelProps={{ display: 'none' }}
comboboxProps={{ withinPortal: false }}
placeholder='Select Theme'
defaultValue={themeList[index]}
data={allThemes?.map((theme: Theme) => {

4
src/pages/settings/components/Theming/Themes.tsx
View File

@@ -121,9 +121,9 @@ function ThemesSettings() {
<Switch
label={
isMobile ? (
<FaDice size={20} color={theme.primaryColor} />
<FaDice size={20} color={'var(--mantine-color-primary-0)'} />
) : (
<Text c={theme.primaryColor}>Random Theme</Text>
<Text c={'var(--mantine-color-primary-0)'}>Random Theme</Text>
)
}
labelPosition='left'