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

Style updates

Browse Source
This commit is contained in:
Sean Edmunds
2025-07-11 18:12:25 -05:00
parent 20fc0cbca7
commit 3d8a5ad7c8
10 changed files with 55 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/pages/settings/components/Applications/Applications.tsx
View File

@@ -199,7 +199,7 @@ const ApplicationSettings = () => {
withAsterisk
/>
</Group>
<Group w={'100%'} justify='center'>
<Group w={'100%'} justify='center' pos={'relative'}>
<Select
key={form.key('icon')}
{...form.getInputProps('icon')}

13
src/pages/settings/components/Applications/DebouncedApplication.tsx
View File

@@ -86,7 +86,11 @@ function DebouncedApplication({
}}
openModal={openModal}
/>
<Group justify='center' style={{ flexDirection: isMobile ? 'column' : 'row' }}>
<Group
justify='center'
pos={'relative'}
style={{ flexDirection: isMobile ? 'column' : 'row' }}
>
<TextInput
label={'Name'}
className={textInputClasses.settingsItem}
@@ -113,7 +117,11 @@ function DebouncedApplication({
}}
/>
</Group>
<Group justify='center' style={{ flexDirection: isMobile ? 'column' : 'row' }}>
<Group
justify='center'
pos={'relative'}
style={{ flexDirection: isMobile ? 'column' : 'row' }}
>
<TextInput
label={'URL'}
className={textInputClasses.settingsItem}
@@ -130,6 +138,7 @@ function DebouncedApplication({
</Group>
<Group
justify='space-between'
pos={'relative'}
style={{ flexDirection: isMobile ? 'column' : 'row' }}
>
<Select

2
src/pages/settings/components/Bookmarks/DebouncedBookmarkItem.tsx
View File

@@ -115,8 +115,8 @@ function DebouncedBookmarkItem({
<TextInput
label={'URL'}
className={textInputClasses.settingsItem}
w={isMobile ? '80%' : '100%'}
classNames={textInputClasses}
w={isMobile ? '80%' : '100%'}
defaultValue={bookmark.url}
onChange={(event) => {
setUpdate({

25
src/pages/settings/components/Bookmarks/DebouncedGroupSettingsItem.tsx
View File

@@ -145,11 +145,6 @@ function DebouncedGroupSettingsItem({
<Group gap={0} align='center' justify='space-between'>
<TextInput
label={'Name'}
labelProps={{
style: {
color: 'var(--mantine-color-primary-0)',
},
}}
w={isMobile ? undefined : '58%'}
className={textInputClasses.settingsItem}
classNames={textInputClasses}
@@ -163,11 +158,6 @@ function DebouncedGroupSettingsItem({
/>
<TextInput
label={'Filter Name'}
labelProps={{
style: {
color: 'var(--mantine-color-primary-0)',
},
}}
w={isMobile ? undefined : '28%'}
className={textInputClasses.settingsItem}
classNames={textInputClasses}
@@ -337,11 +327,6 @@ function DebouncedGroupSettingsItem({
{...form.getInputProps('name')}
label={'Name'}
placeholder='eg. Google'
labelProps={{
style: {
color: 'var(--mantine-color-primary-0)',
},
}}
className={textInputClasses.settingsItem}
pt={'1rem'}
classNames={textInputClasses}
@@ -351,11 +336,6 @@ function DebouncedGroupSettingsItem({
key={form.key('category')}
{...form.getInputProps('category')}
label={'Category'}
labelProps={{
style: {
color: 'var(--mantine-color-primary-0)',
},
}}
className={textInputClasses.settingsItem}
pt={'1rem'}
classNames={textInputClasses}
@@ -369,11 +349,6 @@ function DebouncedGroupSettingsItem({
{...form.getInputProps('url')}
label={'URL'}
placeholder='eg. https://google.com'
labelProps={{
style: {
color: 'var(--mantine-color-primary-0)',
},
}}
className={textInputClasses.settingsItem}
w={'100%'}
pt={'1rem'}

8
src/pages/settings/components/Personalization/Personalization.tsx
View File

@@ -78,7 +78,7 @@ const PersonalizationSettings = () => {
/>
)}
<GridCol span={isMobile ? 12 : 4}>
<Card className={cardClasses.settingsItem} classNames={cardClasses}>
<Card className={cardClasses.settingsItem} classNames={cardClasses} pt={0}>
<TextInput
label={'First Name'}
className={textInputClasses.settingsItem}
@@ -95,7 +95,7 @@ const PersonalizationSettings = () => {
</Card>
</GridCol>
<GridCol span={isMobile ? 12 : 4}>
<Card className={cardClasses.settingsItem} classNames={cardClasses}>
<Card className={cardClasses.settingsItem} classNames={cardClasses} pt={0}>
<TextInput
label={'Last Name'}
className={textInputClasses.settingsItem}
@@ -112,7 +112,7 @@ const PersonalizationSettings = () => {
</Card>
</GridCol>
<GridCol span={isMobile ? 12 : 4}>
<Card className={cardClasses.settingsItem} classNames={cardClasses}>
<Card className={cardClasses.settingsItem} classNames={cardClasses} pt={0}>
<TextInput
label={'Email'}
className={textInputClasses.settingsItem}
@@ -129,7 +129,7 @@ const PersonalizationSettings = () => {
</Card>
</GridCol>
<GridCol span={12}>
<Card className={cardClasses.settingsItem} classNames={cardClasses}>
<Card className={cardClasses.settingsItem} classNames={cardClasses} pt={0}>
<TextInput
label={'Physical Address'}
className={textInputClasses.settingsItem}

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

@@ -26,7 +26,7 @@ function ThemePlaylistCard({
allThemes: Theme[];
}) {
const [hover, setHover] = useState(false);
const { setThemeName, setCurrentThemePlaylist, theme, handleDelete } = useCommonHooks();
const { setThemeName, setCurrentThemePlaylist, handleDelete } = useCommonHooks();
const defaultLists = ['All', 'Backgrounds', 'No Backgrounds'];
const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
const themeList = JSON.parse(
@@ -74,10 +74,7 @@ function ThemePlaylistCard({
paddingLeft: '.25rem',
backgroundColor: 'var(--mantine-color-border-0)',
borderRadius: '4px',
color:
theme.borderColor === theme.primaryColor
? 'var(--mantine-color-accent-0)'
: 'var(--mantine-color-primary-0)',
color: 'var(--mantine-color-background-0)',
zIndex: 3,
}}
>
@@ -93,10 +90,7 @@ function ThemePlaylistCard({
paddingLeft: '.25rem',
backgroundColor: 'var(--mantine-color-border-0)',
borderRadius: '4px',
color:
theme.borderColor === theme.primaryColor
? 'var(--mantine-color-accent-0)'
: 'var(--mantine-color-primary-0)',
color: 'var(--mantine-color-background-0)',
zIndex: 3,
}}
onClick={() => {

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

@@ -121,10 +121,7 @@ function ThemePlaylists() {
fontWeight: 'bold',
borderRadius: '50%',
backgroundColor: 'var(--mantine-color-border-0)',
color:
theme.borderColor === theme.primaryColor
? 'var(--mantine-color-accent-0)'
: 'var(--mantine-color-primary-0)',
color: 'var(--mantine-color-background-0)',
}}
/>
)}

1
src/styles/Card.module.css
View File

@@ -1,5 +1,6 @@
.settingsItem {
&.root {
padding-top: 1.5rem;
color: var(--mantine-color-primary-0);
background-color: transparent;
backdrop-filter: blur(5px) brightness(1.25);

17
src/styles/Select.module.css
View File

@@ -2,11 +2,22 @@
width: 45%;
}
.menuSelectLabel {
margin-bottom: .25rem !important;
color: var(--mantine-color-primary-0) !important;
font-size: .875rem !important;
position: absolute;
font-size: .75rem !important;
padding-left: .5rem;
padding-right: .5rem;
padding-top: .125rem;
padding-bottom: .125rem;
margin-left: -8px;
border-radius: 8px;
background-color: var(--mantine-color-primary-0);
color: var(--mantine-color-background-0);
box-shadow: 2px 2px var(--mantine-color-border-0);
z-index: 1;
top: 18px;
}
.menuSelectInput {
margin-top: 1.75rem;
border-color: var(--mantine-color-border-0) !important;
background-color: var(--mantine-color-background-0) !important;
color: var(--mantine-color-primary-0) !important;

21
src/styles/TextInput.module.css
View File

@@ -23,13 +23,30 @@
.settingsItem {
&.root {
padding-top: 1rem;
.label {
position: relative;
font-size: .75rem;
padding-left: .5rem;
padding-right: .5rem;
padding-top: .125rem;
padding-bottom: .125rem;
margin-left: -8px;
margin-bottom: 8px;
border-radius: 8px;
background-color: var(--mantine-color-primary-0);
color: var(--mantine-color-background-0);
box-shadow: 2px 2px var(--mantine-color-border-0);
z-index: 1;
}
.wrapper {
display: flex;
justify-content: center;
background-color: var(--mantine-color-search-0);
margin-top: -16px;
padding-top: 8px;
.input {
width: 100%;
background-color: transparent;
border: none;
background-color: var(--mantine-color-search-0);
color: var(--mantine-color-primary-0);
font-size: 1.125rem;
}