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

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

@@ -44,12 +44,12 @@ function AppItem({ url, icon, name }: { url: string; icon: string; name: string
style={{
height: '64px',
width: isMobile ? '100%' : undefined,
marginRight: isMobile ? '0' : '1em',
marginLeft: isMobile ? '0' : '1em',
paddingTop: isMobile ? '0' : '15px',
marginRight: isMobile ? 0 : '1rem',
marginLeft: isMobile ? 0 : '1rem',
paddingTop: isMobile ? 0 : '1rem',
}}
>
{Icon && <Icon style={{ height: '32px', width: '32px' }} />}
{Icon && <Icon style={{ height: '2rem', width: '2rem' }} />}
</Stack>
<Stack
style={{

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

@@ -10,7 +10,7 @@ function BookmarkGroups({
return (
<Stack
style={{
marginBottom: '0em',
marginBottom: 0,
display: 'block',
lineHeight: '1.5rem',
overflow: 'hidden',

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

@@ -9,11 +9,6 @@ function BookmarkItem({ bookmark }: { bookmark: Bookmark }) {
classNames={textClasses}
component='a'
href={bookmark.url}
style={{
textOverflow: 'ellipsis',
overflow: 'hidden',
width: '100%',
}}
>
{bookmark.name}
</Text>

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

@@ -138,15 +138,15 @@ function Header({
component='h2'
className={textClasses.dateTime}
classNames={textClasses}
mr={4}
mr={'.25rem'}
>
{current.temperature}°F
</Text>
<Text
className={textClasses.dateTime}
classNames={textClasses}
fz={14}
mb={6}
fz={'.875rem'}
mb={'.375rem'}
>
{current.highTemp}°F/{current.lowTemp}°F
</Text>

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

@@ -70,7 +70,7 @@ function LargeHeader({
<Text
className={textClasses.greeting}
classNames={textClasses}
fz={isMobile ? 24 : 96}
fz={isMobile ? '2rem' : '6rem'}
>
{greet
.replace('$firstName', currentUser.firstName)
@@ -79,7 +79,7 @@ function LargeHeader({
.replace('$^lastName', currentUser.lastName.toUpperCase())}
</Text>
<Text
fz={36}
fz={'2.25rem'}
className={textClasses.dateTime}
classNames={textClasses}
m={0}
@@ -88,7 +88,7 @@ function LargeHeader({
{date}
</Text>
<Text
fz={96}
fz={'6rem'}
fw={400}
m={0}
className={textClasses.dateTime}

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

@@ -75,10 +75,6 @@ export default function Search({
open(`${url}${option.searchTerm}`, '_self');
};
const handleAppSearchItem = (item: any) => {
open(`https://${item.option.url}`, '_self');
};
const handleKeyPress = (item: any) => {
let option = '';
let subtext = '';
@@ -278,115 +274,23 @@ export default function Search({
function RenderOption(item: any) {
const [showFillButton, setShowFillButton] = useState(false);
if (item.option.searchTerm !== undefined) {
const m = new Date(item.option.dateTimeStamp);
const year = `${m.getUTCFullYear()}`.slice(-2);
const month = `0${m.getUTCMonth() + 1}`.slice(-2);
const day = `0${m.getUTCDate()}`.slice(-2);
const hours = `0${m.getUTCHours()}`.slice(-2);
const minutes = `0${m.getUTCMinutes()}`.slice(-2);
const dateString = isMobile
? `${month}/${day}/${year}`
: `${month}/${day}/${year} ${hours}:${minutes}`;
return (
<Group
w={'100%'}
display={'flex'}
justify={'space-between'}
gap={0}
onClick={() => {
handleSearchHistoryItem(item);
}}
onMouseEnter={() => {
setShowFillButton(true);
}}
onMouseLeave={() => {
setShowFillButton(false);
}}
>
<Group m={0} p={0} miw={'160px'} style={{ overflow: 'hidden' }}>
<Text
style={{
backgroundColor: `${theme.primaryColor}33`,
fontWeight: 600,
borderRadius: '15px',
padding: '5px',
}}
>
{item.option.provider}
</Text>
{showFillButton && (
<ActionIcon
className={actionIconClasses.selectOptionActions}
classNames={actionIconClasses}
onClick={(e) => {
e.stopPropagation();
setSearchValue(`${item.option.prefix} ${item.option.searchTerm}`);
}}
>
<FiEdit />
</ActionIcon>
)}
</Group>
<Group
m={0}
p={0}
gap={0}
justify='space-between'
w={'65%'}
style={{
whiteSpace: 'nowrap',
overflow: 'hidden',
boxSizing: 'border-box',
position: 'relative',
}}
>
<Text
w={'75%'}
c={'var(--mantine-color-primary-0)'}
style={{
overflow: 'hidden',
textOverflow: 'ellipsis',
}}
>
{item.option.searchTerm}
</Text>
<Text
w={'25%'}
style={{
color: `${theme.primaryColor}55`,
textAlign: 'right',
}}
>
{dateString}
</Text>
</Group>
<Group m={0} p={0} right={16} w={'24px'}>
{showFillButton && (
<ActionIcon
className={actionIconClasses.selectOptionActions}
classNames={actionIconClasses}
onClick={(e) => {
e.stopPropagation();
mutateAsync({
method: 'DELETE',
endpoint: searchEndpoint,
body: { id: item.option.id },
});
}}
>
<FiTrash />
</ActionIcon>
)}
</Group>
</Group>
);
}
const m = new Date(item.option.dateTimeStamp);
const year = `${m.getUTCFullYear()}`.slice(-2);
const month = `0${m.getUTCMonth() + 1}`.slice(-2);
const day = `0${m.getUTCDate()}`.slice(-2);
const hours = `0${m.getUTCHours()}`.slice(-2);
const minutes = `0${m.getUTCMinutes()}`.slice(-2);
const dateString = isMobile
? `${month}/${day}/${year}`
: `${month}/${day}/${year} ${hours}:${minutes}`;
return (
<Group
w={'100%'}
display={'flex'}
justify={'space-between'}
gap={0}
onClick={() => {
handleAppSearchItem(item);
handleSearchHistoryItem(item);
}}
onMouseEnter={() => {
setShowFillButton(true);
@@ -395,28 +299,81 @@ export default function Search({
setShowFillButton(false);
}}
>
<Group w={'15%'}>
<Group m={0} p={0} miw={'160px'} style={{ overflow: 'hidden' }}>
<Text
style={{
backgroundColor: `${theme.primaryColor}33`,
fontWeight: 600,
borderRadius: '15px',
padding: '5px',
padding: '.25rem',
}}
>
{item.option.label}
{item.option.provider}
</Text>
{showFillButton && (
<ActionIcon
className={actionIconClasses.selectOptionActions}
classNames={actionIconClasses}
onClick={(e) => {
e.stopPropagation();
setSearchValue(`${item.option.prefix} ${item.option.searchTerm}`);
}}
>
<FiEdit />
</ActionIcon>
)}
</Group>
<Group justify='space-between' w={'80%'}>
<Text c={'var(--mantine-color-primary-0)'}>{item.option.searchTerm}</Text>
<Group
m={0}
p={0}
gap={0}
justify='space-between'
w={'65%'}
style={{
whiteSpace: 'nowrap',
overflow: 'hidden',
boxSizing: 'border-box',
position: 'relative',
}}
>
<Text
w={'75%'}
c={'var(--mantine-color-primary-0)'}
style={{
overflow: 'hidden',
textOverflow: 'ellipsis',
}}
>
{item.option.searchTerm}
</Text>
<Text
w={'25%'}
style={{
color: `${theme.primaryColor}55`,
textAlign: 'right',
}}
>
{item.option.value}
{dateString}
</Text>
</Group>
<Group m={0} p={0} right={'1rem'} w={'24px'}>
{showFillButton && (
<ActionIcon
className={actionIconClasses.selectOptionActions}
classNames={actionIconClasses}
onClick={(e) => {
e.stopPropagation();
mutateAsync({
method: 'DELETE',
endpoint: searchEndpoint,
body: { id: item.option.id },
});
}}
>
<FiTrash />
</ActionIcon>
)}
</Group>
</Group>
);
}
@@ -465,6 +422,7 @@ export default function Search({
.slice(0, 10);
setFilteredHistory(filtered);
}, [searchValue]);
return (
<Stack
style={{
@@ -472,7 +430,7 @@ export default function Search({
backgroundColor: 'transparent',
textAlign: 'center',
position: 'relative',
padding: '.3em',
padding: '.3rem',
display: 'inline-block',
gap: 0,
}}

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

@@ -255,11 +255,11 @@ function SettingsButton() {
</ActionIcon>
</Tooltip>
</Group>
<Text fw={'bold'} fz={18}>
<Text fw={'bold'} fz={'1.125rem'}>
Currently:{' '}
</Text>
{theme.name}
<Text fw={'bold'} fz={18}>
<Text fw={'bold'} fz={'1.125rem'}>
Playlist:{' '}
</Text>
<Select
@@ -325,22 +325,22 @@ function SettingsButton() {
>
<Text
style={{
fontSize: 12,
paddingLeft: 8,
paddingRight: 8,
paddingTop: 2,
paddingBottom: 2,
fontSize: '.75rem',
paddingLeft: '.5rem',
paddingRight: '.5rem',
paddingTop: '.125rem',
paddingBottom: '.125rem',
borderRadius: 8,
position: 'absolute',
left: '-12px',
top: '-8px',
left: -12,
top: -8,
backgroundColor: 'var(--mantine-color-primary-0)',
color: 'var(--mantine-color-background-0)',
}}
>
Apps
</Text>
<Text fz={14} mt={16}>
<Text fz={'.875rem'} mt={'1rem'}>
Density
</Text>
<Stack m={0} p={0} gap={0} w={'90%'}>
@@ -409,22 +409,22 @@ function SettingsButton() {
>
<Text
style={{
fontSize: 12,
paddingLeft: 8,
paddingRight: 8,
paddingTop: 2,
paddingBottom: 2,
fontSize: '.75rem',
paddingLeft: '.5rem',
paddingRight: '.5rem',
paddingTop: '.125rem',
paddingBottom: '.125rem',
borderRadius: 8,
position: 'absolute',
left: '-12px',
top: '-8px',
left: -12,
top: -8,
backgroundColor: 'var(--mantine-color-primary-0)',
color: 'var(--mantine-color-background-0)',
}}
>
Bookmarks
</Text>
<Text fz={14} mt={16}>
<Text fz={'.875rem'} mt={'1rem'}>
Density
</Text>
<Stack m={0} p={0} gap={0} w={'90%'}>

12
src/pages/settings/components/Applications/AppSettingsItem.tsx
View File

@@ -70,12 +70,12 @@ function AppSettingsItem({
style={{
height: '128px',
width: isMobile ? '100%' : undefined,
marginRight: isMobile ? '0' : '1em',
marginLeft: isMobile ? '0' : '2em',
paddingTop: isMobile ? '0' : '32px',
marginRight: isMobile ? '0' : '1rem',
marginLeft: isMobile ? '0' : '2rem',
paddingTop: isMobile ? '0' : '2rem',
}}
>
{Icon && <Icon style={{ height: '64px', width: '64px' }} />}
{Icon && <Icon style={{ height: '4rem', width: '4rem' }} />}
</Stack>
<Stack
style={{
@@ -87,11 +87,11 @@ function AppSettingsItem({
gap: 0,
}}
>
<Text fz={22} className={textClasses.appName} classNames={textClasses}>
<Text fz={'1.5rem'} className={textClasses.appName} classNames={textClasses}>
{name}
</Text>
<Text
fz={16}
fz={'1rem'}
className={textClasses.appUrl}
classNames={textClasses}
style={{

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

@@ -121,7 +121,6 @@ const ApplicationSettings = () => {
<TextInput
label={'Name'}
className={textInputClasses.settingsItem}
pt={16}
w={'45%'}
classNames={textInputClasses}
defaultValue={newApplication.name}
@@ -135,7 +134,6 @@ const ApplicationSettings = () => {
<TextInput
label={'Base URL'}
className={textInputClasses.settingsItem}
pt={16}
w={'45%'}
classNames={textInputClasses}
defaultValue={newApplication.baseUrl}
@@ -151,7 +149,6 @@ const ApplicationSettings = () => {
<TextInput
label={'URL'}
className={textInputClasses.settingsItem}
pt={16}
w={'100%'}
classNames={textInputClasses}
defaultValue={newApplication.url}
@@ -175,7 +172,7 @@ const ApplicationSettings = () => {
dropdown: selectClasses.dropdown,
}}
w={'45%'}
mt={12}
mt={'.75rem'}
limit={100}
placeholder='Search for an icon...'
data={Object.keys(allIcons).map((icon) => {
@@ -208,7 +205,7 @@ const ApplicationSettings = () => {
<TextInput
label={'Filter'}
className={textInputClasses.settingsItem}
pt={16}
pt={'1rem'}
w={'45%'}
classNames={textInputClasses}
defaultValue={newApplication.filterName}

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

@@ -63,9 +63,9 @@ function DebouncedApplication({
<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)',
@@ -83,8 +83,8 @@ function DebouncedApplication({
>
<ActionIcon
pos={'absolute'}
top={16}
right={16}
top={'1rem'}
right={'1rem'}
color='red'
onClick={() => {
setIsOpen(true);
@@ -106,7 +106,7 @@ function DebouncedApplication({
label={'Enabled'}
labelPosition='left'
pos={'absolute'}
left={16}
left={'1rem'}
defaultChecked={app.enabled === 1}
defaultValue={app.enabled}
onChange={(event) => {
@@ -121,7 +121,6 @@ function DebouncedApplication({
<TextInput
label={'Name'}
className={textInputClasses.settingsItem}
pt={16}
classNames={textInputClasses}
defaultValue={app.name}
onChange={(event) => {
@@ -134,7 +133,6 @@ function DebouncedApplication({
<TextInput
label={'Base URL'}
className={textInputClasses.settingsItem}
pt={16}
classNames={textInputClasses}
defaultValue={app.baseUrl}
onChange={(event) => {
@@ -150,7 +148,6 @@ function DebouncedApplication({
label={'URL'}
className={textInputClasses.settingsItem}
w={isMobile ? undefined : '100%'}
pt={16}
classNames={textInputClasses}
defaultValue={app.url}
onChange={(event) => {
@@ -176,7 +173,7 @@ function DebouncedApplication({
option: selectClasses.menuSelectOption,
dropdown: selectClasses.dropdown,
}}
mt={12}
mt={'.75rem'}
limit={100}
defaultSearchValue={app?.icon}
data={Object.keys(allIcons).map((icon) => {
@@ -209,7 +206,6 @@ function DebouncedApplication({
<TextInput
label={'Filter'}
className={textInputClasses.settingsItem}
pt={16}
classNames={textInputClasses}
defaultValue={app.filterName}
onChange={(event) => {

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

@@ -12,7 +12,7 @@ function BookmarkSettingsItem({ bookmark }: { bookmark: Bookmark }) {
borderRadius: '4px',
color: 'var(--mantine-color-accent-0)',
backgroundColor: 'var(--mantine-color-search-0)',
padding: '8px',
padding: '.5rem',
}}
onMouseEnter={() => setHover(true)}
onMouseLeave={() => setHover(false)}

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

@@ -123,7 +123,6 @@ const BookmarkSettings = () => {
<TextInput
label={'Category Name'}
className={textInputClasses.settingsItem}
pt={16}
classNames={textInputClasses}
defaultValue={newGroup.categoryName}
onChange={(event) => {
@@ -136,7 +135,6 @@ const BookmarkSettings = () => {
<TextInput
label={'Filter Name'}
className={textInputClasses.settingsItem}
pt={16}
classNames={textInputClasses}
defaultValue={newGroup.filterName}
onChange={(event) => {
@@ -241,14 +239,14 @@ const BookmarkSettings = () => {
>
<Group gap={0} align='center' justify='space-between'>
<Stack gap={0}>
<Text c={'var(--mantine-color-accent-0)'} fz={14}>
<Text c={'var(--mantine-color-accent-0)'} fz={'1rem'}>
Name
</Text>
<Text
p={4}
p={'.25rem'}
style={{
borderRadius: '4px',
paddingLeft: '8px',
paddingLeft: '.5rem',
color: 'var(--mantine-color-primary-0)',
backgroundColor: 'var(--mantine-color-search-0)',
}}
@@ -257,14 +255,14 @@ const BookmarkSettings = () => {
</Text>
</Stack>
<Stack gap={0}>
<Text c={'var(--mantine-color-accent-0)'} fz={14}>
<Text c={'var(--mantine-color-accent-0)'} fz={'1rem'}>
Filter Name
</Text>
<Text
p={4}
p={'.25rem'}
style={{
borderRadius: '4px',
paddingLeft: '8px',
paddingLeft: '.5rem',
color: 'var(--mantine-color-primary-0)',
backgroundColor: 'var(--mantine-color-search-0)',
}}

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

@@ -50,9 +50,9 @@ function DebouncedBookmarkItem({
<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 DebouncedBookmarkItem({
>
<ActionIcon
pos={'absolute'}
right={16}
top={16}
right={'1rem'}
top={'1rem'}
color='red'
onClick={() => {
setIsOpen(true);
@@ -86,7 +86,6 @@ function DebouncedBookmarkItem({
<TextInput
label={'Name'}
className={textInputClasses.settingsItem}
pt={16}
classNames={textInputClasses}
defaultValue={bookmark.name}
onChange={(event) => {
@@ -99,7 +98,6 @@ function DebouncedBookmarkItem({
<TextInput
label={'Category'}
className={textInputClasses.settingsItem}
pt={16}
classNames={textInputClasses}
defaultValue={bookmark.category}
onChange={(event) => {
@@ -115,7 +113,6 @@ function DebouncedBookmarkItem({
label={'URL'}
className={textInputClasses.settingsItem}
w={isMobile ? '80%' : '100%'}
pt={16}
classNames={textInputClasses}
defaultValue={bookmark.url}
onChange={(event) => {

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

@@ -109,9 +109,9 @@ function DebouncedGroupSettingsItem({
<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)',
@@ -125,7 +125,7 @@ function DebouncedGroupSettingsItem({
}
/>
<Card.Section
p={16}
p={'1rem'}
bg={'var(--mantine-color-search-0)'}
c={'var(--mantine-color-background-0)'}
>
@@ -174,7 +174,7 @@ function DebouncedGroupSettingsItem({
label={'Delete'}
>
<ActionIcon
mt={24}
mt={'1.5rem'}
size={'lg'}
color='red'
onClick={() => {
@@ -196,7 +196,7 @@ function DebouncedGroupSettingsItem({
top: isMobile ? 140 : 78,
right: 18,
zIndex: 10,
fontSize: 20,
fontSize: '1.25rem',
textAlign: 'center',
textJustify: 'auto',
}}
@@ -205,7 +205,7 @@ function DebouncedGroupSettingsItem({
</Text>
</Stack>
</Card.Section>
<Card.Section mt={16} p={16}>
<Card.Section mt={'1rem'} p={'1rem'}>
<Stack>
<DragDropContext onDragEnd={onDragEnd}>
<Droppable droppableId={`${bookmarkGroup.id}`}>
@@ -274,7 +274,7 @@ function DebouncedGroupSettingsItem({
</Stack>
</Card.Section>
<Card.Section
p={8}
p={'.5rem'}
bg={'var(--mantine-color-search-0)'}
c={'var(--mantine-color-background-0)'}
>
@@ -317,7 +317,7 @@ function DebouncedGroupSettingsItem({
},
}}
className={textInputClasses.settingsItem}
pt={16}
pt={'1rem'}
classNames={textInputClasses}
onChange={(event) => {
setNewBookmark({
@@ -334,7 +334,7 @@ function DebouncedGroupSettingsItem({
},
}}
className={textInputClasses.settingsItem}
pt={16}
pt={'1rem'}
classNames={textInputClasses}
disabled
defaultValue={group.categoryName}
@@ -356,7 +356,7 @@ function DebouncedGroupSettingsItem({
}}
className={textInputClasses.settingsItem}
w={'100%'}
pt={16}
pt={'1rem'}
classNames={textInputClasses}
onChange={(event) => {
setNewBookmark({

9
src/pages/settings/components/Messages/DebouncedMessage.tsx
View File

@@ -30,9 +30,9 @@ function DebouncedMessage({
<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)',
@@ -50,7 +50,7 @@ function DebouncedMessage({
>
<ActionIcon
pos={'absolute'}
right={16}
right={'1rem'}
color='red'
onClick={() => {
openModal();
@@ -62,7 +62,6 @@ function DebouncedMessage({
<TextInput
label={label}
className={textInputClasses.settingsItem}
pt={16}
classNames={textInputClasses}
defaultValue={message.message}
onChange={(event) => {

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

@@ -74,7 +74,7 @@ const PersonalizationSettings = () => {
<Overlay
style={{
borderRadius: '10px',
margin: '-8px',
margin: '-.5rem',
backdropFilter: 'blur(10px) brightness(1.2)',
}}
/>

11
src/pages/settings/components/Search/DebouncedSearchProvider.tsx
View File

@@ -56,9 +56,9 @@ function DebouncedSearchProvider({
<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)',
@@ -76,7 +76,7 @@ function DebouncedSearchProvider({
>
<ActionIcon
pos={'absolute'}
right={16}
right={'1rem'}
color='red'
onClick={() => {
setIsOpen(true);
@@ -91,7 +91,6 @@ function DebouncedSearchProvider({
<TextInput
label={'Name'}
className={textInputClasses.settingsItem}
pt={16}
classNames={textInputClasses}
defaultValue={provider.name}
onChange={(event) => {
@@ -104,7 +103,6 @@ function DebouncedSearchProvider({
<TextInput
label={'Prefix'}
className={textInputClasses.settingsItem}
pt={16}
classNames={textInputClasses}
defaultValue={provider.prefix}
onChange={(event) => {
@@ -119,7 +117,6 @@ function DebouncedSearchProvider({
label={'Url'}
w={isMobile ? '80%' : '100%'}
className={textInputClasses.settingsItem}
pt={16}
classNames={textInputClasses}
defaultValue={provider.url}
onChange={(event) => {

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

@@ -76,7 +76,6 @@ const SearchProviderSettings = () => {
<TextInput
label={'Name'}
className={textInputClasses.settingsItem}
pt={16}
classNames={textInputClasses}
defaultValue={newProvider.name}
onChange={(event) => {
@@ -89,7 +88,6 @@ const SearchProviderSettings = () => {
<TextInput
label={'Prefix'}
className={textInputClasses.settingsItem}
pt={16}
classNames={textInputClasses}
defaultValue={newProvider.prefix}
onChange={(event) => {
@@ -103,7 +101,6 @@ const SearchProviderSettings = () => {
<TextInput
label={'Url'}
className={textInputClasses.settingsItem}
pt={16}
w={isMobile ? '64%' : '100%'}
classNames={textInputClasses}
defaultValue={newProvider.url}

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}

10
src/pages/settings/components/WoL/DebouncedWolClient.tsx
View File

@@ -55,9 +55,9 @@ function DebouncedWolClient({
<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)',
@@ -75,7 +75,7 @@ function DebouncedWolClient({
>
<ActionIcon
pos={'absolute'}
right={16}
right={'1rem'}
color='red'
onClick={() => {
openModal();
@@ -88,7 +88,6 @@ function DebouncedWolClient({
<TextInput
label={'Hostname'}
className={textInputClasses.settingsItem}
pt={16}
classNames={textInputClasses}
defaultValue={client.hostname}
onChange={(event) => {
@@ -101,7 +100,6 @@ function DebouncedWolClient({
<TextInput
label={'MAC Address'}
className={textInputClasses.settingsItem}
pt={16}
classNames={textInputClasses}
defaultValue={client.macAddress}
onChange={(event) => {

4
src/pages/settings/components/WoL/WolClientSettingsItem.tsx
View File

@@ -13,8 +13,8 @@ function WolClientSettingsItem({ client }: { client: WolClient }) {
>
<Stack align='center' gap={0}>
<FaLaptop fontSize={100} />
<Text fz={24}>{client.hostname}</Text>
<Text fz={20}>{client.macAddress}</Text>
<Text fz={'1.5rem'}>{client.hostname}</Text>
<Text fz={'1.25rem'}>{client.macAddress}</Text>
</Stack>
</Card>
);

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

@@ -69,7 +69,6 @@ const WolClientSettings = () => {
<TextInput
label={'Hostname'}
className={textInputClasses.settingsItem}
pt={16}
classNames={textInputClasses}
defaultValue={newWolClient.hostname}
onChange={(event) => {
@@ -82,7 +81,6 @@ const WolClientSettings = () => {
<TextInput
label={'MAC Address'}
className={textInputClasses.settingsItem}
pt={16}
classNames={textInputClasses}
defaultValue={newWolClient.macAddress}
onChange={(event) => {