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

Style uniformity

Browse Source
This commit is contained in:
Sean Edmunds
2025-06-12 16:33:42 -05:00
parent fb70df76f1
commit 29514d3290
47 changed files with 316 additions and 377 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -54,9 +54,9 @@ function ThemeCard({
<Text
style={{
fontWeight: 'bold',
fontSize: '20px',
padding: '8px',
margin: '8px',
fontSize: '1.25rem',
padding: '.5rem',
margin: '.5rem',
borderRadius: '10px',
backgroundColor: 'var(--mantine-color-accent-0)',
color: 'var(--mantine-color-background-0)',
@@ -71,8 +71,8 @@ function ThemeCard({
position: 'absolute',
top: -10,
left: 6,
paddingRight: 4,
paddingLeft: 4,
paddingRight: '.25rem',
paddingLeft: '.25rem',
backgroundColor: cardTheme.borderColor,
borderRadius: '4px',
color:
@@ -115,7 +115,7 @@ function ThemeCard({
<Group justify='space-between'>
<Box
style={{
height: '8px',
height: '.5rem',
width: '100px',
backgroundColor: cardTheme.accentColor,
borderRadius: '4px',
@@ -123,7 +123,7 @@ function ThemeCard({
/>
<Box
style={{
height: '8px',
height: '.5rem',
width: '50px',
backgroundColor: cardTheme.primaryColor,
borderRadius: '4px',
@@ -147,7 +147,7 @@ function ThemeCard({
width: '40px',
borderRadius: '4px',
backdropFilter: 'blur(10px) brightness(1.5)',
fontSize: '6px',
fontSize: '.375rem',
justifyContent: 'center',
alignContent: 'center',
color: cardTheme.primaryColor,
@@ -161,7 +161,7 @@ function ThemeCard({
width: '40px',
borderRadius: '4px',
backdropFilter: 'blur(10px) brightness(1.5)',
fontSize: '6px',
fontSize: '.375rem',
justifyContent: 'center',
alignContent: 'center',
color: cardTheme.primaryColor,
@@ -175,7 +175,7 @@ function ThemeCard({
width: '40px',
borderRadius: '4px',
backdropFilter: 'blur(10px) brightness(1.5)',
fontSize: '6px',
fontSize: '.375rem',
justifyContent: 'center',
alignContent: 'center',
color: cardTheme.primaryColor,
@@ -208,8 +208,8 @@ function ThemeCard({
backgroundColor:
shiftEdit === 0 ? 'white' : 'var(--mantine-color-background-0)',
borderRadius: '50%',
padding: '8px',
margin: '4px',
padding: '.5rem',
margin: '.25rem',
border: 'solid 2px',
borderColor: shiftEdit === 0 ? 'black' : 'var(--mantine-color-primary-0)',
transition: 'all 0.2s',
@@ -217,7 +217,7 @@ function ThemeCard({
>
<FiEdit
style={{
fontSize: '2em',
fontSize: '2rem',
fontWeight: 'bold',
color: shiftEdit === 0 ? 'black' : 'var(--mantine-color-primary-0)',
}}
@@ -250,8 +250,8 @@ function ThemeCard({
backgroundColor:
shiftShuffle === 0 ? 'white' : 'var(--mantine-color-background-0)',
borderRadius: '50%',
padding: '8px',
margin: '4px',
padding: '.5rem',
margin: '.25rem',
border: 'solid 2px',
borderColor:
shiftShuffle === 0 ? 'black' : 'var(--mantine-color-primary-0)',
@@ -260,7 +260,7 @@ function ThemeCard({
>
<FiShuffle
style={{
fontSize: '2em',
fontSize: '2rem',
fontWeight: 'bold',
color: shiftShuffle === 0 ? 'black' : 'var(--mantine-color-primary-0)',
}}
@@ -272,8 +272,8 @@ function ThemeCard({
gap={0}
style={{
zIndex: 2,
padding: '4px',
paddingRight: '0px',
padding: '.25rem',
paddingRight: 0,
position: 'absolute',
right: 3,
backgroundColor: '#ffffff88',
@@ -291,7 +291,7 @@ function ThemeCard({
background: cardTheme.randomEnabled
? 'rgba(255,255,255,1)'
: 'rgba(255,255,255,0.5)',
margin: '2px',
margin: '.125rem',
}}
styles={{
root: {
@@ -301,7 +301,7 @@ function ThemeCard({
icon: {
height: '20px',
width: '20px',
fontSize: '24px',
fontSize: '1.5rem',
margin: 0,
padding: 0,
},
@@ -320,7 +320,7 @@ function ThemeCard({
className={actionIconClasses.themeEditButton}
classNames={actionIconClasses}
onClick={() => handleOpen(cardTheme)}
mb={2}
mb={'.125rem'}
>
<FiEdit color='green' />
</ActionIcon>

2
src/pages/settings/components/Theming/ThemeMiniCard.tsx
View File

@@ -31,7 +31,7 @@ function ThemeMiniCard({
c={theme?.primaryColor}
size='md'
style={{
padding: 4,
padding: '.25rem',
borderRadius: '8px',
}}
>

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

@@ -71,7 +71,7 @@ function ThemeModal({
: undefined,
backgroundSize: item !== 'none' ? 'cover' : undefined,
backgroundColor: item === 'none' ? '#00000088' : undefined,
paddingLeft: 8,
paddingLeft: '.5rem',
alignItems: 'center',
}}
onClick={() =>
@@ -87,7 +87,7 @@ function ThemeModal({
width: 'min-content',
height: 'min-content',
backdropFilter: 'blur(10px) brightness(.25)',
padding: 8,
padding: '.5rem',
borderRadius: 4,
}}
>
@@ -98,8 +98,8 @@ function ThemeModal({
style={{
width: 'min-content',
backdropFilter: 'blur(10px) brightness(.25)',
padding: 8,
marginTop: 34,
padding: '.5rem',
marginTop: '2rem',
borderTopLeftRadius: 4,
color: 'var(--mantine-color-accent-0)',
}}
@@ -174,7 +174,7 @@ function ThemeModal({
onChange={setColorValue}
format={colorId === 'background' ? 'hex' : 'hexa'}
w={'90%'}
mb={colorId === 'background' ? '24px' : undefined}
mb={colorId === 'background' ? '1.5rem' : undefined}
/>
<Group justify='center'>
<TextInput
@@ -342,7 +342,7 @@ function ThemeModal({
justify='center'
>
<Group gap={0}>
<Text mr={8}>Search:</Text>
<Text mr={'.5rem'}>Search:</Text>
<TextInput
className={textInputClasses.default}
classNames={textInputClasses}
@@ -351,7 +351,7 @@ function ThemeModal({
<FiX
style={{
cursor: 'pointer',
margin: '4px',
margin: '.25rem',
}}
onClick={() => {
setQuery('');

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

@@ -18,9 +18,9 @@ export default function ThemeModalContent({ selectedTheme }: { selectedTheme: Th
<Stack
style={{
height: '64px',
marginRight: '1em',
marginLeft: '1em',
paddingTop: '15px',
marginRight: '1rem',
marginLeft: '1rem',
paddingTop: '1rem',
}}
>
<FiCheck style={{ color: selectedTheme.primaryColor }} height={32} width={32} />
@@ -38,7 +38,7 @@ export default function ThemeModalContent({ selectedTheme }: { selectedTheme: Th
<Text
style={{
fontWeight: 400,
fontSize: 11,
fontSize: '.625rem',
fontStyle: 'normal',
color: selectedTheme.primaryColor,
fontFamily:
@@ -51,7 +51,7 @@ export default function ThemeModalContent({ selectedTheme }: { selectedTheme: Th
<Text
style={{
fontWeight: 400,
fontSize: 11,
fontSize: '.625rem',
fontStyle: 'italic',
color: selectedTheme.accentColor,
fontFamily:
@@ -96,13 +96,13 @@ export default function ThemeModalContent({ selectedTheme }: { selectedTheme: Th
pl={'1.5rem'}
style={{
textDecoration: 'underline',
fontSize: '20px',
fontSize: '1.25rem',
fontWeight: 200,
fontStyle: 'italic',
height: '10px',
textTransform: 'uppercase',
marginTop: '20px',
marginBottom: '20px',
marginTop: '1.25rem',
marginBottom: '1.25rem',
color: selectedTheme.primaryColor,
}}
>
@@ -119,7 +119,7 @@ export default function ThemeModalContent({ selectedTheme }: { selectedTheme: Th
gridTemplateColumns: '1fr 1fr 1fr',
gridTemplateRows: '64px',
padding: '1rem',
paddingTop: '0rem',
paddingTop: 0,
justifyContent: 'center',
alignContent: 'center',
}}
@@ -132,13 +132,13 @@ export default function ThemeModalContent({ selectedTheme }: { selectedTheme: Th
pl={'1.5rem'}
style={{
textDecoration: 'underline',
fontSize: '20px',
fontSize: '1.25rem',
fontWeight: 200,
fontStyle: 'italic',
height: '10px',
textTransform: 'uppercase',
marginTop: '20px',
marginBottom: '20px',
marginTop: '1.25rem',
marginBottom: '1.25rem',
color: selectedTheme.primaryColor,
}}
>
@@ -158,23 +158,23 @@ export default function ThemeModalContent({ selectedTheme }: { selectedTheme: Th
<Stack
style={{
width: '100%',
marginBottom: '0em',
marginBottom: 0,
display: 'block',
lineHeight: '1.5rem',
padding: '1rem',
paddingTop: '0rem',
paddingTop: 0,
}}
>
<Text
style={{
fontSize: '14px',
fontSize: '.875rem',
fontWeight: 400,
height: '10px',
width: 'auto',
color: selectedTheme.accentColor,
textTransform: 'uppercase',
marginTop: '20px',
marginBottom: '20px',
marginTop: '1.25rem',
marginBottom: '1.25rem',
}}
>
Example Category
@@ -182,7 +182,7 @@ export default function ThemeModalContent({ selectedTheme }: { selectedTheme: Th
<Text
style={{
display: 'block',
fontSize: '14px',
fontSize: '.875rem',
lineHeight: 2,
color: selectedTheme.primaryColor,
}}
@@ -193,7 +193,7 @@ export default function ThemeModalContent({ selectedTheme }: { selectedTheme: Th
<Text
style={{
display: 'block',
fontSize: '14px',
fontSize: '.875rem',
lineHeight: 2,
color: selectedTheme.primaryColor,
}}
@@ -205,23 +205,23 @@ export default function ThemeModalContent({ selectedTheme }: { selectedTheme: Th
<Stack
style={{
width: '100%',
marginBottom: '0em',
marginBottom: 0,
display: 'block',
lineHeight: '1.5rem',
padding: '1rem',
paddingTop: '0rem',
paddingTop: 0,
}}
>
<Text
style={{
fontSize: '14px',
fontSize: '.875rem',
fontWeight: 400,
height: '10px',
width: 'auto',
color: selectedTheme.accentColor,
textTransform: 'uppercase',
marginTop: '20px',
marginBottom: '20px',
marginTop: '1.25rem',
marginBottom: '1.25rem',
}}
>
Example Category
@@ -229,7 +229,7 @@ export default function ThemeModalContent({ selectedTheme }: { selectedTheme: Th
<Text
style={{
display: 'block',
fontSize: '14px',
fontSize: '.875rem',
lineHeight: 2,
color: selectedTheme.primaryColor,
}}
@@ -240,7 +240,7 @@ export default function ThemeModalContent({ selectedTheme }: { selectedTheme: Th
<Text
style={{
display: 'block',
fontSize: '14px',
fontSize: '.875rem',
lineHeight: 2,
color: selectedTheme.primaryColor,
}}

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

@@ -52,9 +52,9 @@ function ThemePlaylistCard({
<Text
style={{
fontWeight: 'bold',
fontSize: '20px',
padding: '8px',
margin: '8px',
fontSize: '1.25rem',
padding: '.5rem',
margin: '.5rem',
borderRadius: '10px',
backgroundColor: 'var(--mantine-color-accent-0)',
color: 'var(--mantine-color-background-0)',
@@ -69,8 +69,8 @@ function ThemePlaylistCard({
position: 'absolute',
top: -10,
left: 6,
paddingRight: 4,
paddingLeft: 4,
paddingRight: '.25rem',
paddingLeft: '.25rem',
backgroundColor: 'var(--mantine-color-border-0)',
borderRadius: '4px',
color:
@@ -88,8 +88,8 @@ function ThemePlaylistCard({
position: 'absolute',
top: -10,
right: 6,
paddingRight: 4,
paddingLeft: 4,
paddingRight: '.25rem',
paddingLeft: '.25rem',
backgroundColor: 'var(--mantine-color-border-0)',
borderRadius: '4px',
color:
@@ -111,8 +111,8 @@ function ThemePlaylistCard({
position: 'absolute',
top: -10,
right: 40,
paddingRight: 4,
paddingLeft: 4,
paddingRight: '.25rem',
paddingLeft: '.25rem',
backgroundColor: 'var(--mantine-color-border-0)',
borderRadius: '4px',
color:
@@ -143,13 +143,13 @@ function ThemePlaylistCard({
}}
>
{hover && <Overlay opacity={0.5} zIndex={1} />}
<Stack h={'100%'} w={'100%'} align='center' mt={12}>
<Stack h={'100%'} w={'100%'} align='center' mt={'.75rem'}>
{cardPlaylist.name !== 'Time of Day' ? (
<>
<Text
px={8}
mt={8}
mb={-8}
px={'.5rem'}
mt={'.5rem'}
mb={'-.5rem'}
style={{
color: 'var(--mantine-color-background-0)',
backgroundColor: 'var(--mantine-color-primary-0)',
@@ -175,9 +175,9 @@ function ThemePlaylistCard({
) : (
<>
<Text
px={8}
mt={8}
mb={-8}
px={'.5rem'}
mt={'.5rem'}
mb={'-.5rem'}
style={{
color: 'var(--mantine-color-background-0)',
backgroundColor: 'var(--mantine-color-primary-0)',

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

@@ -85,7 +85,7 @@ function ThemePlaylistModal({
</Group>
<Modal.CloseButton />
</Modal.Header>
<Modal.Body pt={8}>
<Modal.Body pt={'.5rem'}>
{selectedPlaylist?.name === 'Time of Day' ? (
<TimeOfDay
createPlaylist={createPlaylist}

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

@@ -114,7 +114,7 @@ function ThemePlaylists() {
position: 'absolute',
left: -14,
zIndex: 10,
fontSize: '2em',
fontSize: '2rem',
fontWeight: 'bold',
borderRadius: '50%',
backgroundColor: 'var(--mantine-color-border-0)',
@@ -145,7 +145,7 @@ function ThemePlaylists() {
position: 'absolute',
left: -14,
zIndex: 10,
fontSize: '2em',
fontSize: '2rem',
fontWeight: 'bold',
borderRadius: '50%',
backgroundColor: 'var(--mantine-color-border-0)',
@@ -176,7 +176,7 @@ function ThemePlaylists() {
position: 'absolute',
left: -14,
zIndex: 10,
fontSize: '2em',
fontSize: '2rem',
fontWeight: 'bold',
borderRadius: '50%',
backgroundColor: 'var(--mantine-color-border-0)',
@@ -207,7 +207,7 @@ function ThemePlaylists() {
position: 'absolute',
left: -14,
zIndex: 10,
fontSize: '2em',
fontSize: '2rem',
fontWeight: 'bold',
borderRadius: '50%',
backgroundColor: 'var(--mantine-color-border-0)',
@@ -265,7 +265,7 @@ function ThemePlaylists() {
position: 'absolute',
left: -14,
zIndex: 10,
fontSize: '2em',
fontSize: '2rem',
fontWeight: 'bold',
borderRadius: '50%',
backgroundColor: 'var(--mantine-color-border-0)',

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

@@ -53,7 +53,7 @@ function ThemeSelect({
}}
styles={{
option: {
padding: 4,
padding: '.25rem',
},
input: {
textAlign: 'center',
@@ -90,7 +90,7 @@ function ThemeSelect({
c={theme?.primaryColor}
size='md'
style={{
padding: 4,
padding: '.25rem',
borderRadius: '8px',
}}
>

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

@@ -157,8 +157,8 @@ function ThemesSettings() {
style={{
zIndex: 190,
borderRadius: '10px',
marginTop: '-15px',
marginBottom: '-10px',
marginTop: '-1rem',
marginBottom: '-1.25rem',
boxShadow: '0px 0px 10px 3px rgba(0, 0, 0, .8)',
}}
pos={'absolute'}
@@ -172,7 +172,7 @@ function ThemesSettings() {
position: 'absolute',
left: -14,
zIndex: 1,
fontSize: '2em',
fontSize: '2rem',
fontWeight: 'bold',
borderRadius: '50%',
backgroundColor: cardTheme.borderColor,
@@ -255,7 +255,7 @@ function ThemesSettings() {
style={{
color: 'var(--mantine-color-primary-0)',
fontWeight: 'bold',
fontSize: '1.2em',
fontSize: '1.2rem',
}}
>
{currentThemePlaylist === 'All' ? 'All' : currentThemePlaylist}