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

Style bugfixes and updates

Browse Source
This commit is contained in:
Sean Edmunds
2025-07-07 16:33:30 -05:00
parent dcea54ffaa
commit 9ef9cde336
32 changed files with 271 additions and 414 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/pages/homepage/components/Applications/AppItem.tsx
View File

@@ -4,7 +4,7 @@ import { useState } from 'react';
import * as fa6 from 'react-icons/fa6';
import * as si from 'react-icons/si';
import * as vsc from 'react-icons/vsc';
import { stackClasses, textClasses } from 'styles';
import { boxClasses, textClasses } from 'styles';
function AppItem({ url, icon, name }: { url: string; icon: string; name: string }) {
const allIcons: any = { ...fa6, ...vsc, ...si };
@@ -26,7 +26,8 @@ function AppItem({ url, icon, name }: { url: string; icon: string; name: string
setTextDecoration('none');
setHover(false);
}}
className={stackClasses.appItemBox}
className={boxClasses.appItemBox}
h={'64px'}
>
{hover && (
<svg
@@ -51,13 +52,12 @@ function AppItem({ url, icon, name }: { url: string; icon: string; name: string
{Icon && <Icon style={{ height: '2rem', width: '2rem' }} />}
</Stack>
<Stack
justify='center'
style={{
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
flex: 1,
overflow: 'hidden',
whiteSpace: 'nowrap',
gap: 0,
flex: 1,
}}
>
<Text className={textClasses.appName} classNames={textClasses}>

7
src/pages/homepage/components/Applications/Applications.tsx
View File

@@ -41,20 +41,15 @@ function Applications({ contentType }: { contentType: string[] }) {
return (
<>
{applications.length > 0 && contentType.length > 0 && (
<Stack style={{ gap: 0 }}>
<Stack gap={0}>
<Text className={textClasses.sectionTitle} classNames={textClasses}>
Applications
</Text>
<Stack
style={{
gap: '.25rem',
backgroundSize: 'cover',
borderBottom: '0px solid',
display: 'grid',
gridColumnGap: '5px',
gridRowGap: '5px',
gridTemplateColumns: `repeat(${appDensity}, 1fr)`,
gridTemplateRows: '64px',
}}
>
{applications

2
src/pages/homepage/components/Bookmarks/BookmarkGroups.tsx
View File

@@ -13,9 +13,7 @@ function BookmarkGroups({
return (
<Stack
style={{
marginBottom: 0,
display: 'block',
lineHeight: '1.5rem',
overflow: 'hidden',
whiteSpace: 'nowrap',
}}

5
src/pages/homepage/components/Bookmarks/Bookmarks.tsx
View File

@@ -58,18 +58,15 @@ function Bookmarks({ contentType }: { contentType: string[] }) {
bookmarksIsFetched &&
groups?.length > 0 &&
contentType.length > 0 && (
<Stack style={{ gap: 0 }}>
<Stack gap={0}>
<Text className={textClasses.sectionTitle} classNames={textClasses}>
Bookmarks
</Text>
<Stack
style={{
display: 'grid',
flexWrap: 'nowrap',
gridColumnGap: '20px',
gridRowGap: '0px',
gridTemplateColumns: `repeat(${bookmarkDensity}, 1fr)`,
gridTemplateRows: 'auto',
}}
>
{groups

29
src/pages/homepage/components/Header/Header.tsx
View File

@@ -71,20 +71,10 @@ function Header({
return (
<Stack
style={{
borderBottom: '0px solid',
zIndex: 1,
clear: 'both',
display: 'flex',
flexDirection: isMobile ? 'column' : 'row',
gap: 0,
}}
>
<Stack
style={{
display: 'grid',
width: '100%',
}}
>
<Stack w={'100%'}>
<Text
className={textClasses.greeting}
classNames={textClasses}
@@ -99,10 +89,6 @@ function Header({
</Stack>
<Stack
style={{
display: 'flex',
float: 'right',
justifyContent: 'right',
width: 'auto',
gap: 0,
flexDirection: isMobile ? 'row' : 'column',
}}
@@ -119,27 +105,20 @@ function Header({
position: 'relative',
justifyContent: isMobile ? 'right' : 'space-between',
width: '100%',
gap: 0,
}}
>
<Group
align='end'
style={{
display: 'flex',
position: 'absolute',
bottom: isMobile ? -32 : 0,
right: 16,
right: 4,
cursor: 'pointer',
gap: 0,
}}
onClick={openWeatherModal}
>
<Text
component='h2'
className={textClasses.dateTime}
classNames={textClasses}
mr={'.25rem'}
>
<Text className={textClasses.dateTime} classNames={textClasses} mr={'.25rem'}>
{current.temperature}°F
</Text>
<Text
@@ -151,7 +130,7 @@ function Header({
{current.highTemp}°F/{current.lowTemp}°F
</Text>
</Group>
<Text component='h2' className={textClasses.dateTime} classNames={textClasses}>
<Text className={textClasses.dateTime} classNames={textClasses}>
{`${
time.getHours() === 0
? 12

8
src/pages/homepage/components/Header/LargeHeader.tsx
View File

@@ -87,13 +87,7 @@ function LargeHeader({
>
{date}
</Text>
<Text
fz={'6rem'}
fw={400}
m={0}
className={textClasses.dateTime}
classNames={textClasses}
>
<Text fz={'6rem'} m={0} className={textClasses.dateTime} classNames={textClasses}>
{`${
time.getHours() === 0
? 12

2
src/pages/homepage/components/Search/Search.tsx
View File

@@ -323,7 +323,7 @@ export default function Search({
return (
<>
{dropdownOpened && <Overlay pos={'absolute'} h={'100%'} w={'100%'} blur={5} />}
{dropdownOpened && <Overlay blur={5} />}
<Stack
style={{
height: '100px',

2
src/pages/homepage/components/Search/SearchSelectItem.tsx
View File

@@ -33,7 +33,7 @@ function SearchSelectItem({ item, handleSearchHistoryItem, searchEndpoint }: any
setShowFillButton(false);
}}
>
<Group m={0} p={0} miw={'160px'} style={{ overflow: 'hidden' }}>
<Group m={0} p={0} miw={'160px'}>
<Text
style={{
backgroundColor: `${theme.primaryColor}33`,

10
src/pages/homepage/components/SettingsButton/SettingsButton.tsx
View File

@@ -62,10 +62,11 @@ function SettingsButton() {
setWolClients(wolClientData);
}
}, [wolClientData, wolClientDataIsFetched]);
return (
<Menu
classNames={menuClasses}
width={isMobile ? '98%' : 'auto'}
width={isMobile ? '98%' : undefined}
withArrow
shadow='md'
position='top'
@@ -90,10 +91,7 @@ function SettingsButton() {
>
<Group p={'1rem'} gap={12}>
<Stack
justify='center'
align='center'
style={{
display: 'flex',
flexDirection: isMobile ? 'row' : 'column',
width: isMobile ? '100%' : undefined,
}}
@@ -106,7 +104,7 @@ function SettingsButton() {
/>
<ThemingCard />
</Stack>
<Stack display={'flex'} align='center'>
<Stack>
<SettingsCard
categories={categories}
sectionTitle={'Applications'}
@@ -129,7 +127,7 @@ function SettingsButton() {
/>
</Stack>
</Group>
<Group mt={'-.75rem'} w={'100%'} align='center' justify='center'>
<Group mt={'-.75rem'} justify='center'>
<Button
leftSection={<FiSettings />}
onClick={() => navigate(`/${import.meta.env.VITE_BASE_URL}/settings`)}

2
src/pages/homepage/components/SettingsButton/SettingsCard.tsx
View File

@@ -31,7 +31,6 @@ function SettingsCard({
return (
<Stack
gap={0}
align='center'
justify='space-between'
className={stackClasses.menuStack}
classNames={stackClasses}
@@ -61,7 +60,6 @@ function SettingsCard({
<Slider
className={sliderClasses.default}
classNames={sliderClasses}
restrictToMarks
value={density}
onChange={(value) => setDensity(value)}
min={1}

4
src/pages/homepage/components/SettingsButton/ThemingCard.tsx
View File

@@ -29,6 +29,7 @@ function ThemingCard() {
}
}, [allThemeData, allThemeDataIsFetched]);
const {
isMobile,
currentTheme,
setCurrentTheme,
setThemeName,
@@ -40,10 +41,9 @@ function ThemingCard() {
return (
<Stack
gap={0}
align='center'
className={stackClasses.menuStack}
classNames={stackClasses}
style={{ aspectRatio: '1/1' }}
style={{ aspectRatio: isMobile ? undefined : '1/1' }}
>
<Menu.Label pb={'.25rem'}>Themes</Menu.Label>
<Group mt={'-1.5rem'} mb={'-.25rem'} w={'95%'} justify='space-between'>

11
src/pages/homepage/components/SettingsButton/WakeOnLanCard.tsx
View File

@@ -1,4 +1,5 @@
import { Button, type ComboboxItem, Menu, Select, Stack } from '@mantine/core';
import { useCommonHooks } from 'hooks';
import { FiPower } from 'react-icons/fi';
import { buttonClasses, selectClasses, stackClasses } from 'styles';
import type { WolClient } from 'types';
@@ -14,13 +15,13 @@ function WakeOnLan({
setSelectedClient: any;
handleWakeRequest: () => void;
}) {
const { isMobile } = useCommonHooks();
return (
<Stack
gap={0}
align='center'
className={stackClasses.menuStack}
classNames={stackClasses}
style={{ aspectRatio: '1/1' }}
style={{ aspectRatio: isMobile ? undefined : '1/1' }}
>
<Menu.Label>Wake on LAN</Menu.Label>
<Button
@@ -31,12 +32,9 @@ function WakeOnLan({
handleWakeRequest();
}}
>
<Stack gap={0} align='center'>
<FiPower size={32} />
</Stack>
<FiPower size={32} />
</Button>
<Select
labelProps={{ display: 'none' }}
placeholder='Pick a host...'
defaultValue={wolClients?.[0]?.hostname}
onChange={(_, option: any) => {
@@ -45,6 +43,7 @@ function WakeOnLan({
macAddress: option?.macAddress,
});
}}
withCheckIcon={false}
data={
wolClients
?.map((wolClient: WolClient) => {

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

@@ -80,7 +80,6 @@ export function Settings() {
</Tabs.List>
<Tabs.Panel value='personalization'>
<ScrollArea
h={'100%'}
className={scrollAreaClasses.default}
classNames={scrollAreaClasses}
>
@@ -89,7 +88,6 @@ export function Settings() {
</Tabs.Panel>
<Tabs.Panel value='messages'>
<ScrollArea
h={'100%'}
className={scrollAreaClasses.default}
classNames={scrollAreaClasses}
>
@@ -98,7 +96,6 @@ export function Settings() {
</Tabs.Panel>
<Tabs.Panel value='applications'>
<ScrollArea
h={'100%'}
className={scrollAreaClasses.default}
classNames={scrollAreaClasses}
>
@@ -107,7 +104,6 @@ export function Settings() {
</Tabs.Panel>
<Tabs.Panel value='bookmarks'>
<ScrollArea
h={'100%'}
className={scrollAreaClasses.default}
classNames={scrollAreaClasses}
>
@@ -116,7 +112,6 @@ export function Settings() {
</Tabs.Panel>
<Tabs.Panel value='themes'>
<ScrollArea
h={'100%'}
className={scrollAreaClasses.default}
classNames={scrollAreaClasses}
>
@@ -125,7 +120,6 @@ export function Settings() {
</Tabs.Panel>
<Tabs.Panel value='themePlaylists'>
<ScrollArea
h={'100%'}
className={scrollAreaClasses.default}
classNames={scrollAreaClasses}
>
@@ -134,7 +128,6 @@ export function Settings() {
</Tabs.Panel>
<Tabs.Panel value='providers'>
<ScrollArea
h={'100%'}
className={scrollAreaClasses.default}
classNames={scrollAreaClasses}
>
@@ -143,7 +136,6 @@ export function Settings() {
</Tabs.Panel>
<Tabs.Panel value='wolClients'>
<ScrollArea
h={'100%'}
className={scrollAreaClasses.default}
classNames={scrollAreaClasses}
>

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

@@ -118,7 +118,35 @@ const ApplicationSettings = () => {
}
}, [applicationList]);
return (
<Stack w={'100%'}>
<Stack>
<SettingsHeader
setDragging={applications.length > 0 ? setDragging : undefined}
openModal={openModal}
title={'Applications'}
tooltip={{
title:
'Applications are the app buttons that will be displayed on the homepage.',
highlightList: [
'Applications',
'applicationData',
'application',
'app',
'apps',
'name',
'base url',
'url',
'icon',
'filter',
],
description:
'Applications contain a name, base url, url, icon and filter. URLs can contain either http(s):// or not. Base URLs should start with /, otherwise they will cause errors.',
}}
searchValue={searchValue}
setSearchValue={setSearchValue}
searchPlaceholder={'Search Applications...'}
isLoading={isLoading}
setIsLoading={setIsLoading}
/>
<AddItemModal
modalOpened={modalOpened}
handleClose={handleClose}
@@ -238,41 +266,8 @@ const ApplicationSettings = () => {
</form>
}
/>
<SettingsHeader
setDragging={applications.length > 0 ? setDragging : undefined}
openModal={openModal}
title={'Applications'}
tooltip={{
title:
'Applications are the app buttons that will be displayed on the homepage.',
highlightList: [
'Applications',
'applicationData',
'application',
'app',
'apps',
'name',
'base url',
'url',
'icon',
'filter',
],
description:
'Applications contain a name, base url, url, icon and filter. URLs can contain either http(s):// or not. Base URLs should start with /, otherwise they will cause errors.',
}}
searchValue={searchValue}
setSearchValue={setSearchValue}
searchPlaceholder={'Search Applications...'}
isLoading={isLoading}
setIsLoading={setIsLoading}
/>
<DragDropContext onDragEnd={onDragEnd}>
<Stack
mt={isMobile ? '10rem' : '6rem'}
mb={isMobile ? '6rem' : '1rem'}
w={'100%'}
align='center'
>
<Stack mb={isMobile ? '6rem' : '1rem'} align='center'>
{applications.length > 0 ? (
<Droppable droppableId={'groupList'}>
{(provided) => (
@@ -301,12 +296,9 @@ const ApplicationSettings = () => {
style={{
color: 'var(--mantine-color-primary-0)',
zIndex: 1,
alignContent: 'center',
fontSize: '1.5em',
position: 'absolute',
right: 0,
paddingRight: '1rem',
height: '100%',
right: 4,
bottom: 0,
}}
>
#{index + 1}

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

@@ -14,7 +14,7 @@ import {
import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
import { useCommonHooks, useMutationAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { FiTrash } from 'react-icons/fi';
import { FiPower, FiTrash } from 'react-icons/fi';
import { cardClasses, selectClasses, switchClasses, textInputClasses } from 'styles';
import type { Application } from 'types';
import DeleteItemModal from '../Shared/DeleteItemModal';
@@ -79,48 +79,70 @@ function DebouncedApplication({
</Stack>
}
/>
<Tooltip
c={'var(--mantine-color-primary-0)'}
bg={'var(--mantine-color-background-0)'}
bd={'solid 1px var(--mantine-color-border-0)'}
label={'Delete'}
<Group
style={{
position: 'absolute',
right: '1rem',
top: '.5rem',
width: 'fit-content',
backgroundColor:
'color-mix(in srgb, var(--mantine-color-background-0), transparent 50%)',
padding: '.5rem',
borderRadius: '10px',
color: 'var(--mantine-color-search-0)',
backdropFilter: 'brightness(0.5)',
}}
>
<ActionIcon
pos={'absolute'}
top={'1rem'}
right={'1rem'}
color='red'
onClick={() => {
setIsOpen(true);
openModal();
}}
>
<FiTrash color='black' />
</ActionIcon>
</Tooltip>
<Tooltip
c={'var(--mantine-color-primary-0)'}
bg={'var(--mantine-color-background-0)'}
bd={'solid 1px var(--mantine-color-border-0)'}
label={'Enabled'}
>
<Switch
className={switchClasses.default}
classNames={switchClasses}
<Tooltip
c={'var(--mantine-color-primary-0)'}
bg={'var(--mantine-color-background-0)'}
bd={'solid 1px var(--mantine-color-border-0)'}
label={'Enabled'}
labelPosition='left'
pos={'absolute'}
left={'1rem'}
defaultChecked={app.enabled === 1}
defaultValue={app.enabled}
onChange={(event) => {
setUpdate({
...app,
enabled: event.target.checked ? 1 : 0,
});
refProp='rootRef'
styles={{
tooltip: { marginTop: '-.5rem' },
arrow: { border: 'solid 1px var(--mantine-color-accent-0)' },
}}
/>
</Tooltip>
withArrow
>
<Switch
className={switchClasses.enable}
classNames={switchClasses}
defaultChecked={app.enabled === 1}
defaultValue={app.enabled}
thumbIcon={
<FiPower
style={{
color: app.enabled === 1 ? 'var(--mantine-color-accent-0)' : 'red',
}}
/>
}
onChange={(event) => {
setUpdate({
...app,
enabled: event.target.checked ? 1 : 0,
});
}}
/>
</Tooltip>
|
<Tooltip
c={'var(--mantine-color-primary-0)'}
bg={'var(--mantine-color-background-0)'}
bd={'solid 1px var(--mantine-color-border-0)'}
label={'Delete'}
>
<ActionIcon
color='red'
onClick={() => {
setIsOpen(true);
openModal();
}}
>
<FiTrash color='black' />
</ActionIcon>
</Tooltip>
</Group>
<Group justify='center' style={{ flexDirection: isMobile ? 'column' : 'row' }}>
<TextInput
label={'Name'}

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

@@ -203,12 +203,7 @@ const BookmarkSettings = () => {
/>
{dragging ? (
<DragDropContext onDragEnd={onDragEnd}>
<Stack
mt={isMobile ? '10rem' : '6rem'}
mb={isMobile ? '6rem' : '1rem'}
w={'100%'}
align='center'
>
<Stack mb={isMobile ? '6rem' : '1rem'} align='center'>
<Droppable droppableId={'groupList'}>
{(provided) => (
<Stack
@@ -284,12 +279,7 @@ const BookmarkSettings = () => {
</Stack>
</DragDropContext>
) : (
<Stack
mt={isMobile ? '10rem' : '6rem'}
mb={isMobile ? '6rem' : '1rem'}
w={'100%'}
align='center'
>
<Stack mb={isMobile ? '6rem' : '1rem'} align='center'>
<Group w={isMobile ? undefined : '80%'} align='start' justify='center'>
{groups.length > 0 ? (
groups?.map((group: BookmarkGroup) => (
@@ -303,9 +293,7 @@ const BookmarkSettings = () => {
/>
))
) : (
<Group w={'100%'} style={{ display: 'flex', justifyContent: 'center' }}>
<NoItemsFound />
</Group>
<NoItemsFound />
)}
</Group>
</Stack>

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

@@ -80,7 +80,7 @@ const MessageSettings = () => {
handleClose={handleClose}
title={'Add a new message'}
body={
<Stack gap={0} w={'100%'} align='center'>
<Stack gap={0} align='center'>
<TextInput
label='Message text'
autoFocus={!isMobile}
@@ -120,12 +120,7 @@ const MessageSettings = () => {
</Stack>
}
/>
<Stack
mt={isMobile ? '10rem' : '6rem'}
mb={isMobile ? '6rem' : '1rem'}
w={'100%'}
align='center'
>
<Stack mb={isMobile ? '6rem' : undefined} align='center'>
<Grid w={'75%'}>
{messages.length > 0 ? (
messages?.map((message: Message) => (
@@ -138,11 +133,7 @@ const MessageSettings = () => {
</GridCol>
))
) : (
<GridCol
w={'100%'}
span={12}
style={{ display: 'flex', justifyContent: 'center' }}
>
<GridCol style={{ display: 'flex', justifyContent: 'center' }}>
<NoItemsFound />
</GridCol>
)}

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

@@ -66,11 +66,8 @@ const PersonalizationSettings = () => {
isLoading={false}
setIsLoading={() => {}}
/>
<Stack
align='center'
style={{ marginTop: '6rem', marginBottom: '1rem', width: '100%' }}
>
<Grid w={'75%'} pos={'relative'}>
<Stack align='center'>
<Grid w={'75%'}>
{personalIsFetching && (
<Overlay
style={{

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

@@ -152,12 +152,7 @@ const SearchProviderSettings = () => {
isLoading={isLoading}
setIsLoading={setIsLoading}
/>
<Stack
mt={isMobile ? '10rem' : '6rem'}
mb={isMobile ? '6rem' : '1rem'}
w={'100%'}
align='center'
>
<Stack mb={isMobile ? '6rem' : '1rem'} w={'100%'} align='center'>
<Grid columns={18} w={'75%'}>
{providers.length > 0 ? (
providers?.map((provider: Provider) => (

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

@@ -58,10 +58,6 @@ function SettingsHeader({
paddingTop: '1.5rem',
paddingBottom: '1.5rem',
paddingLeft: '1rem',
height: 'min-content',
width: '100%',
marginTop: 0,
position: 'absolute',
}}
>
<Group w={isMobile ? undefined : '100%'}>

35
src/pages/settings/components/Theming/ThemeExampleApp.tsx
View File

@@ -1,7 +1,7 @@
import { Box, Stack, Text } from '@mantine/core';
import { useState } from 'react';
import { FiCheck } from 'react-icons/fi';
import { stackClasses } from 'styles';
import { boxClasses, textClasses } from 'styles';
import type { Theme } from 'types';
function ExampleApp({ selectedTheme }: { selectedTheme: Theme }) {
@@ -12,50 +12,33 @@ function ExampleApp({ selectedTheme }: { selectedTheme: Theme }) {
component='a'
onMouseOver={() => setTextDecoration('underline')}
onMouseOut={() => setTextDecoration('none')}
className={stackClasses.appItemBox}
className={boxClasses.appItemBox}
h={'64px'}
>
<Stack
style={{
height: '64px',
marginRight: '1rem',
marginLeft: '1rem',
paddingTop: '1rem',
}}
justify='center'
>
<FiCheck style={{ color: selectedTheme?.primaryColor }} height={32} width={32} />
<FiCheck style={{ color: selectedTheme?.primaryColor }} />
</Stack>
<Stack
style={{
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
flex: 1,
overflow: 'hidden',
textOverflow: 'ellipsis',
gap: 0,
}}
>
<Text
style={{
fontWeight: 400,
fontSize: '.625rem',
fontStyle: 'normal',
color: selectedTheme?.primaryColor,
fontFamily:
'-apple-system, Jost, BlinkMacSystemFont, Helvetica Neue, Roboto, sans-serif !important',
margin: 0,
}}
>
<Text className={textClasses.appName} classNames={textClasses}>
{'Example App'}
</Text>
<Text
className={textClasses.appUrl}
classNames={textClasses}
style={{
fontWeight: 400,
fontSize: '.625rem',
fontStyle: 'italic',
color: selectedTheme?.accentColor,
fontFamily:
'-apple-system, Jost, BlinkMacSystemFont, Helvetica Neue, Roboto, sans-serif !important',
margin: 0,
textDecoration: textDecoration,
}}
>

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

@@ -141,7 +141,6 @@ export default function ThemeModalContent({ selectedTheme }: { selectedTheme: Th
<Text
style={{
fontSize: '.875rem',
fontWeight: 400,
height: '10px',
width: 'auto',
color: selectedTheme?.accentColor,
@@ -188,7 +187,6 @@ export default function ThemeModalContent({ selectedTheme }: { selectedTheme: Th
<Text
style={{
fontSize: '.875rem',
fontWeight: 400,
height: '10px',
width: 'auto',
color: selectedTheme?.accentColor,

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

@@ -108,25 +108,21 @@ function ThemePlaylistCard({
)}
{cardPlaylist.default === 0 && (
<ActionIcon
color='red'
style={{
position: 'absolute',
top: -10,
right: 40,
paddingRight: '.25rem',
paddingLeft: '.25rem',
backgroundColor: 'var(--mantine-color-border-0)',
borderRadius: '4px',
color:
theme.borderColor === theme.primaryColor
? 'var(--mantine-color-accent-0)'
: 'var(--mantine-color-red-6)',
zIndex: 3,
}}
onClick={() => {
openModal();
}}
>
<FiTrash />
<FiTrash color='black' />
</ActionIcon>
)}
<Button

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

@@ -81,31 +81,26 @@ function ThemePlaylists() {
allThemes={allThemeData}
createPlaylist={mutateAsync}
/>
<Stack h={'100%'} w={'100%'}>
<SettingsHeader
setDragging={undefined}
openModal={open}
title={'Theme Playlists'}
tooltip={{
title: 'Theme playlists can be created here and applied to the homepage.',
highlightList: ['theme', 'themes', 'homepage', 'playlist'],
description:
'Playlists are lists of themes. They can be enabled either here or in the settings button on the homepage. When a playlist is enabled, it will shuffle the included themes on the homepage. If a theme is part of a playlist, it will appear while the playlist is active, regardless of random/shuffle.',
}}
searchValue={searchValue}
setSearchValue={setSearchValue}
searchPlaceholder={'Search Theme Playlists...'}
isLoading={isLoading}
setIsLoading={setIsLoading}
/>
<SettingsHeader
setDragging={undefined}
openModal={open}
title={'Theme Playlists'}
tooltip={{
title: 'Theme playlists can be created here and applied to the homepage.',
highlightList: ['theme', 'themes', 'homepage', 'playlist'],
description:
'Playlists are lists of themes. They can be enabled either here or in the settings button on the homepage. When a playlist is enabled, it will shuffle the included themes on the homepage. If a theme is part of a playlist, it will appear while the playlist is active, regardless of random/shuffle.',
}}
searchValue={searchValue}
setSearchValue={setSearchValue}
searchPlaceholder={'Search Theme Playlists...'}
isLoading={isLoading}
setIsLoading={setIsLoading}
/>
<Stack>
{allThemeData && (
<>
<Group
mt={isMobile ? '10rem' : '6rem'}
justify='center'
align='center'
pos={'relative'}
>
<Group justify='center' align='center' pos={'relative'}>
<Text
p={0}
className={textClasses.settingsSubTitle}

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

@@ -136,7 +136,7 @@ function ThemesSettings() {
}, [allThemes]);
return (
<Stack w={'100%'} align='center'>
<Stack>
<ThemeModal
opened={themeModalOpened}
handleClose={handleClose}
@@ -170,80 +170,81 @@ function ThemesSettings() {
isLoading={isLoading}
setIsLoading={setIsLoading}
/>
<Group
w={'85%'}
justify='center'
align='center'
pos={'relative'}
display={'flex'}
mt={isMobile ? '11.5rem' : '7rem'}
mb={isMobile ? '100%' : '6.5rem'}
>
<Overlay
display={currentTheme === 'random' && debouncedSearch === '' ? 'flex' : 'none'}
blur={5}
style={{
zIndex: 190,
borderRadius: '10px',
marginTop: '-1rem',
marginBottom: '-1.25rem',
boxShadow: '0px 0px 10px 3px rgba(0, 0, 0, .8)',
}}
pos={'absolute'}
/>
{allThemes.length > 0 ? (
allThemes.map((cardTheme: Theme) => (
<Group key={cardTheme.name} pos={'relative'}>
{cardTheme.name === currentTheme && (
<FiChevronRight
<Stack mt={'1rem'} align='center'>
<Group
w={'85%'}
justify='center'
pos={'relative'}
mb={isMobile ? '10rem' : '7.5rem'}
>
<Overlay
display={
currentTheme === 'random' && debouncedSearch === '' ? 'flex' : 'none'
}
blur={5}
style={{
zIndex: 190,
borderRadius: '10px',
marginTop: '-1rem',
marginBottom: '-1rem',
boxShadow: '0px 0px 10px 3px rgba(0, 0, 0, .8)',
}}
pos={'absolute'}
/>
{allThemes.length > 0 ? (
allThemes.map((cardTheme: Theme) => (
<Group key={cardTheme.name} pos={'relative'}>
{cardTheme.name === currentTheme && (
<FiChevronRight
style={{
position: 'absolute',
left: -14,
zIndex: 1,
fontSize: '2rem',
fontWeight: 'bold',
borderRadius: '50%',
backgroundColor: cardTheme.borderColor,
color:
cardTheme.borderColor === cardTheme.primaryColor
? cardTheme.accentColor
: cardTheme.primaryColor,
}}
/>
)}
<Box
style={{
position: 'absolute',
left: -14,
zIndex: 1,
fontSize: '2rem',
fontWeight: 'bold',
borderRadius: '50%',
backgroundColor: cardTheme.borderColor,
color:
cardTheme.borderColor === cardTheme.primaryColor
? cardTheme.accentColor
: cardTheme.primaryColor,
zIndex:
currentTheme === 'random' &&
(themePlaylists
.filter(
(t: ThemePlaylist) =>
t.name.toLowerCase() === currentThemePlaylist.toLowerCase(),
)[0]
?.themeList.includes(`${cardTheme.id}`) ||
cardTheme.name === theme.name)
? 195
: 0,
}}
/>
)}
<Box
style={{
zIndex:
currentTheme === 'random' &&
(themePlaylists
.filter(
(t: ThemePlaylist) =>
t.name.toLowerCase() === currentThemePlaylist.toLowerCase(),
)[0]
?.themeList.includes(`${cardTheme.id}`) ||
cardTheme.name === theme.name)
? 195
: 0,
}}
>
<ThemeCard
allThemes={allThemeData}
cardTheme={cardTheme}
handleOpen={handleOpen}
themePlaylists={themePlaylists}
/>
</Box>
>
<ThemeCard
allThemes={allThemeData}
cardTheme={cardTheme}
handleOpen={handleOpen}
themePlaylists={themePlaylists}
/>
</Box>
</Group>
))
) : (
<Group
w={'100%'}
style={{ zIndex: 1000, display: 'flex', justifyContent: 'center' }}
>
<NoItemsFound />
</Group>
))
) : (
<Group
w={'100%'}
style={{ zIndex: 1000, display: 'flex', justifyContent: 'center' }}
>
<NoItemsFound />
</Group>
)}
</Group>
)}
</Group>
</Stack>
<Group
style={{
backdropFilter: 'blur(5px) brightness(.75)',
@@ -271,7 +272,7 @@ function ThemesSettings() {
w={isMobile ? undefined : '100%'}
justify='center'
>
<Group align='center' justify='center'>
<Group>
<Text
style={{
color: 'var(--mantine-color-accent-0)',

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

@@ -127,12 +127,7 @@ const WolClientSettings = () => {
isLoading={isLoading}
setIsLoading={setIsLoading}
/>
<Stack
mt={isMobile ? '10rem' : '6rem'}
mb={isMobile ? '6rem' : '1rem'}
w={'100%'}
align='center'
>
<Stack mb={isMobile ? '6rem' : '1rem'} w={'100%'} align='center'>
<Grid columns={18} w={'75%'}>
{wolClients.length > 0 ? (
wolClients?.map((client: WolClient) => (

7
src/styles/Box.module.css
View File

@@ -13,15 +13,14 @@
.appItemBox {
display: flex;
flex-direction: row;
flex-wrap: wrap;
height: 128px;
flex: 1;
margin: 0;
backdrop-filter: blur(5px) brightness(1.2);
border-radius: 6px;
font-size: 2rem;
font-weight: 400;
text-transform: uppercase;
overflow: hidden;
text-overflow: ellipsis;
}
.appItemBox rect {

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

@@ -1,4 +1,5 @@
.default {
height: 100%;
.thumb {
background-color: var(--mantine-color-primary-0);
z-index: 1000;

36
src/styles/Stack.module.css
View File

@@ -12,45 +12,11 @@
height: auto;
}
.appItemBox {
display: flex;
flex-direction: row;
flex-wrap: wrap;
height: 64px;
margin: 0;
backdrop-filter: blur(5px) brightness(1.2);
border-radius: 6px;
font-size: 1rem;
font-weight: 400;
text-transform: uppercase;
}
.appItemBox rect {
border-radius: 6px;
stroke-dasharray: 260;
stroke-width: 10px;
fill: transparent;
stroke: var(--mantine-color-search-0);
animation: svgAnimation 1.5s linear infinite;
}
.appItemBox rect::after {
filter: blur(5px);
}
@keyframes svgAnimation {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: 1000;
}
}
.menuStack {
height: 150px;
background-color: var(--mantine-color-search-0);
border-radius: 10px;
align-items: center !important;
}
.fadeAway {

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

@@ -6,7 +6,6 @@
padding: 0;
text-align: left;
font-size: 3.5rem;
font-weight: 400;
width: max-content;
color: var(--mantine-color-accent-0);
}
@@ -49,7 +48,6 @@
.appName {
&.root {
font-weight: 400;
font-size: .6875rem;
font-style: normal;
color: var(--mantine-color-primary-0);
@@ -61,7 +59,6 @@
.appUrl {
&.root {
font-size: .6875rem;
font-weight: 400;
font-style: italic;
text-transform: uppercase;
color: var(--mantine-color-accent-0);
@@ -72,15 +69,11 @@
.bookmarkCategory {
&.root {
font-size: .875rem;
font-weight: 400;
color: var(--mantine-color-accent-0);
text-transform: uppercase;
margin-top: 1.25rem;
margin-bottom: .625rem;
margin-top: 1rem;
text-overflow: ellipsis;
overflow: hidden;
width: 100%;
height: fit-content;
}
}
@@ -92,7 +85,6 @@
color: var(--mantine-color-primary-0);
text-overflow: ellipsis;
overflow: hidden;
width: 100%;
&:hover {
text-decoration: underline;
}