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

Style changes

Browse Source
This commit is contained in:
Sean Edmunds
2025-04-03 15:42:16 -05:00
parent 8d2700174c
commit d098753ac6
12 changed files with 163 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/pages/settings/Settings.tsx
View File

@@ -26,8 +26,8 @@ export function Settings() {
const navigate = useNavigate();
const { tabValue } = useParams();
return (
<Stack h={'100%'}>
<Group gap={0} pl={'2rem'}>
<Stack h={'100%'} gap={0}>
<Group gap={0} pb={'1rem'} pl={'2rem'}>
<ActionIcon
className={actionIconClasses.backButton}
classNames={actionIconClasses}
@@ -47,7 +47,7 @@ export function Settings() {
classNames={tabClasses}
keepMounted={false}
value={tabValue}
h={'100%'}
h={isMobile ? undefined : '100%'}
onChange={(value) =>
navigate(`/${import.meta.env.VITE_BASE_URL}/settings/${value}`)
}

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

@@ -240,7 +240,12 @@ const ApplicationSettings = () => {
/>
{dragging ? (
<DragDropContext onDragEnd={onDragEnd}>
<Stack mt={'6rem'} mb={'1rem'} w={'100%'} align='center'>
<Stack
mt={isMobile ? '9rem' : '6rem'}
mb={isMobile ? '6rem' : '1rem'}
w={'100%'}
align='center'
>
<Droppable droppableId={'groupList'}>
{(provided) => (
<Stack
@@ -316,7 +321,12 @@ const ApplicationSettings = () => {
</Stack>
</DragDropContext>
) : (
<Stack mt={'6rem'} mb={'1rem'} w={'100%'} align='center'>
<Stack
mt={isMobile ? '9rem' : '6rem'}
mb={isMobile ? '6rem' : '1rem'}
w={'100%'}
align='center'
>
<Grid columns={18} w={'75%'}>
{applicationData?.map((application: Application) => (
<GridCol span={6} key={application.id}>
@@ -340,7 +350,7 @@ const ApplicationSettings = () => {
/>
</Box>
</Popover.Target>
<Popover.Dropdown>
<Popover.Dropdown w={isMobile ? '100%' : undefined}>
<DebouncedApplication
application={application}
setIsOpen={setIsOpen}

16
src/pages/settings/components/Bookmarks/Bookmarks.tsx
View File

@@ -182,7 +182,12 @@ const BookmarkSettings = () => {
/>
{dragging ? (
<DragDropContext onDragEnd={onDragEnd}>
<Stack mt={'6rem'} mb={'1rem'} w={'100%'} align='center'>
<Stack
mt={isMobile ? '9rem' : '6rem'}
mb={isMobile ? '6rem' : '1rem'}
w={'100%'}
align='center'
>
<Droppable droppableId={'groupList'}>
{(provided) => (
<Stack
@@ -258,8 +263,13 @@ const BookmarkSettings = () => {
</Stack>
</DragDropContext>
) : (
<Stack mt={'6rem'} mb={'1rem'} w={'100%'} align='center'>
<Group w={isMobile ? undefined : '75%'} align='start'>
<Stack
mt={isMobile ? '9rem' : '6rem'}
mb={isMobile ? '6rem' : '1rem'}
w={'100%'}
align='center'
>
<Group w={isMobile ? undefined : '75%'} align='start' justify='center'>
{groups?.map((group: BookmarkGroup) => (
<DebouncedGroupSettingsItem
key={group.id}

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

@@ -234,6 +234,7 @@ function DebouncedGroupSettingsItem({
</Box>
</Popover.Target>
<Popover.Dropdown
w={isMobile ? '100%' : undefined}
style={{
'--color-text-pri': theme.primaryColor,
'--color-text-acc': theme.accentColor,
@@ -290,6 +291,7 @@ function DebouncedGroupSettingsItem({
</Button>
</Popover.Target>
<Popover.Dropdown
w={isMobile ? '100%' : undefined}
style={{
'--color-text-pri': theme.primaryColor,
'--color-text-acc': theme.accentColor,

7
src/pages/settings/components/Messages/Messages.tsx
View File

@@ -107,7 +107,12 @@ const MessageSettings = () => {
</Stack>
}
/>
<Stack mt={'6rem'} mb={'1rem'} w={'100%'} align='center'>
<Stack
mt={isMobile ? '9rem' : '6rem'}
mb={isMobile ? '6rem' : '1rem'}
w={'100%'}
align='center'
>
<Grid w={'75%'}>
{messages?.map((message: Message) => (
<GridCol span={isMobile ? 12 : 6} key={message.id}>

9
src/pages/settings/components/Search/SearchProviders.tsx
View File

@@ -148,7 +148,12 @@ const SearchProviderSettings = () => {
searchValue={searchValue}
setSearchValue={setSearchValue}
/>
<Stack mt={'6rem'} mb={'1rem'} w={'100%'} align='center'>
<Stack
mt={isMobile ? '9rem' : '6rem'}
mb={isMobile ? '6rem' : '1rem'}
w={'100%'}
align='center'
>
<Grid columns={18} w={'75%'}>
{providerData?.map((provider: Provider) => (
<GridCol span={isMobile ? 18 : 6} key={provider.id}>
@@ -167,7 +172,7 @@ const SearchProviderSettings = () => {
<SearchProviderSettingsItem provider={provider} />
</Box>
</Popover.Target>
<Popover.Dropdown>
<Popover.Dropdown w={isMobile ? '100%' : undefined}>
<DebouncedSearchProvider
searchProvider={provider}
setIsOpen={setIsOpen}

12
src/pages/settings/components/Shared/SettingsHeader.tsx
View File

@@ -32,10 +32,14 @@ function SettingsHeader({
mt={0}
justify='center'
pos={'absolute'}
style={{ backdropFilter: 'blur(10px) brightness(.5)', zIndex: 1 }}
style={{ backdropFilter: 'blur(10px) brightness(.5)', zIndex: 99 }}
>
<Group w={isMobile ? undefined : '100%'}>
<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
<Text
miw={isMobile ? 100 : undefined}
className={textClasses.settingsSubTitle}
classNames={textClasses}
>
{title}
</Text>
<Popover withArrow withOverlay withinPortal={true}>
@@ -51,7 +55,7 @@ function SettingsHeader({
style={{
color: theme.primaryColor,
backgroundColor: theme.backgroundColor,
width: '500px',
width: isMobile ? '95%' : '500px',
}}
>
<Stack>
@@ -108,7 +112,7 @@ function SettingsHeader({
labelPosition='left'
pos={'absolute'}
right={isMobile ? '2rem' : '1rem'}
top={isMobile ? '10rem' : undefined}
top={isMobile ? '3.5rem' : undefined}
onChange={(e) => {
setDragging(e.target.checked);
}}

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

@@ -21,7 +21,8 @@ function ThemePlaylists() {
const { mutateAsync } = useMutationAPI();
const [opened, { open, close }] = useDisclosure(false);
const [selectedPlaylist, setSelectedPlaylist] = useState<any>({});
const { currentThemePlaylist, setCurrentThemePlaylist, theme } = useCommonHooks();
const { currentThemePlaylist, setCurrentThemePlaylist, theme, isMobile } =
useCommonHooks();
const [searchValue, setSearchValue] = useState('');
const [debouncedSearch] = useDebouncedValue(searchValue, 500);
@@ -118,7 +119,12 @@ function ThemePlaylists() {
User Made
</Text>
</Group>
<Group justify='center' align='center' pos={'relative'}>
<Group
justify='center'
align='center'
pos={'relative'}
mb={isMobile ? '6rem' : undefined}
>
{themePlaylists
?.filter((playlist: ThemePlaylist) => playlist.default === 0)
?.filter((a: ThemePlaylist) =>

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

@@ -58,7 +58,7 @@ function ThemesSettings() {
}
}, [backgroundData, isBackgroundFetched]);
return (
<Stack>
<Stack w={'100%'} align='center'>
<ThemeModal
opened={opened}
handleClose={handleClose}
@@ -75,7 +75,6 @@ function ThemesSettings() {
closePicker={closePicker}
handleSaveTheme={handleSaveTheme}
/>
<Stack h={'100%'} w={'100%'}>
<SettingsHeader
setDragging={undefined}
openModal={open}
@@ -100,7 +99,7 @@ function ThemesSettings() {
labelPosition='left'
pos={'absolute'}
right={isMobile ? '2rem' : '1rem'}
top={isMobile ? '9.5rem' : '2rem'}
top={isMobile ? '3.5rem' : '2rem'}
checked={currentTheme === 'random'}
onChange={(e) => {
setCurrentTheme(e.target.checked ? 'random' : theme.name);
@@ -108,10 +107,17 @@ function ThemesSettings() {
}}
color={theme.primaryColor}
style={{
zIndex: 1,
zIndex: 100,
}}
/>
<Group justify='center' align='center' pos={'relative'} mt={'10rem'}>
<Group
w={'85%'}
justify='center'
align='center'
pos={'relative'}
mt={isMobile ? '10rem' : '7rem'}
mb={isMobile ? '6rem' : '1rem'}
>
<Overlay
display={currentTheme === 'random' ? 'flex' : 'none'}
blur={5}
@@ -149,9 +155,7 @@ function ThemesSettings() {
<Box
style={{
zIndex:
currentTheme === 'random' && cardTheme.name === theme.name
? 200
: 0,
currentTheme === 'random' && cardTheme.name === theme.name ? 200 : 0,
}}
>
<ThemeCard
@@ -165,7 +169,6 @@ function ThemesSettings() {
))}
</Group>
</Stack>
</Stack>
);
}
export default ThemesSettings;

9
src/pages/settings/components/WoL/WolClients.tsx
View File

@@ -131,7 +131,12 @@ const WolClientSettings = () => {
searchValue={searchValue}
setSearchValue={setSearchValue}
/>
<Stack mt={'6rem'} mb={'1rem'} w={'100%'} align='center'>
<Stack
mt={isMobile ? '9rem' : '6rem'}
mb={isMobile ? '6rem' : '1rem'}
w={'100%'}
align='center'
>
<Grid columns={18} w={'75%'}>
{wolClients?.map((client: WolClient) => (
<GridCol w={'100%'} span={isMobile ? 18 : 6} key={client.id}>
@@ -151,7 +156,7 @@ const WolClientSettings = () => {
<WolClientSettingsItem client={client} />
</Group>
</Popover.Target>
<Popover.Dropdown>
<Popover.Dropdown w={isMobile ? '100%' : undefined}>
<DebouncedWolClient wolClient={client} setIsOpen={setIsOpen} />
</Popover.Dropdown>
</Popover>

2
src/styles/Tabs.module.css
View File

@@ -2,6 +2,7 @@
@media (max-width: 600px) {
.panel {
padding-left: 0 !important;
height: 100%;
}
}
.panel {
@@ -22,7 +23,6 @@
border-top: solid 2px var(--color-text-acc);
padding-left: 2rem;
padding-top: 2rem;
height: 100%;
}
.list::before {
border-color: var(--color-text-acc);

8
src/styles/Text.module.css
View File

@@ -98,8 +98,12 @@
&.root {
font-size: 32px;
font-weight: bold;
padding-top: 1.5rem;
color: var(--color-text-pri);
margin-top: 1.5rem;
color: var(--color-text-acc);
background-color: var(--color-search-background);
border-radius: 12px;
padding-left: 12px;
padding-right: 12px;
}
}