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

2
src/components/HelpModal/HelpModal.tsx
View File

@@ -56,7 +56,7 @@ export function HelpModal({
};
})}
/>
<Divider my={8} color={'var(--mantine-color-accent-0)'} />
<Divider my={'.5rem'} color={'var(--mantine-color-accent-0)'} />
<HelpSection
name={'Available Applications'}
items={applicationData.map((application: Application) => {

8
src/components/HelpModal/HelpSection.tsx
View File

@@ -8,9 +8,9 @@ function HelpSection({ name, items }: { name: string; items: SearchShortcut[] })
<h3
style={{
zIndex: 0,
padding: '8px',
padding: '.5rem',
marginTop: 0,
marginBottom: -32,
marginBottom: '-2rem',
borderRadius: '8px',
color: 'var(--mantine-color-background-0)',
backgroundColor: 'var(--mantine-color-border-0)',
@@ -18,13 +18,13 @@ function HelpSection({ name, items }: { name: string; items: SearchShortcut[] })
>
{name}
</h3>
<Divider py={8} color={'var(--mantine-color-accent-0)'} />
<Divider py={'.5rem'} color={'var(--mantine-color-accent-0)'} />
<Group
style={{
width: '100%',
backgroundColor: 'var(--mantine-color-search-0)',
borderRadius: '8px',
padding: '24px',
padding: '1.5rem',
justifyItems: 'center',
}}
>

6
src/components/HelpModal/HintItem.tsx
View File

@@ -8,7 +8,7 @@ function HintItem({ command, name }: { command: string; name: string }) {
justify='center'
style={{
display: 'flex',
padding: '8px',
padding: '.5rem',
borderRadius: '10px',
backgroundColor: 'var(--mantine-color-background-0)',
}}
@@ -17,7 +17,7 @@ function HintItem({ command, name }: { command: string; name: string }) {
style={{
color: 'var(--mantine-color-background-0)',
backgroundColor: 'var(--mantine-color-primary-0)',
padding: '8px',
padding: '.5rem',
borderTopLeftRadius: '10px',
borderBottomLeftRadius: '10px',
}}
@@ -28,7 +28,7 @@ function HintItem({ command, name }: { command: string; name: string }) {
style={{
color: 'var(--mantine-color-background-0)',
backgroundColor: 'var(--mantine-color-accent-0)',
padding: '8px',
padding: '.5rem',
borderTopRightRadius: '10px',
borderBottomRightRadius: '10px',
}}

6
src/components/WeatherModal/CurrentWeather.tsx
View File

@@ -48,7 +48,7 @@ export default function CurrentWeather({ current }: { current: CW }) {
<Group
gap={0}
justify='space-between'
style={{ width: '100%', paddingLeft: 16 }}
style={{ width: '100%', paddingLeft: '1rem' }}
>
<Text
style={{
@@ -85,8 +85,8 @@ export default function CurrentWeather({ current }: { current: CW }) {
style={{
fontSize: '1.375rem',
textAlign: 'right',
marginTop: -32,
marginLeft: 16,
marginTop: '-2rem',
marginLeft: '1rem',
}}
>
{current.temperature === 69 ? 'Nice' : current.textDescription}

5
src/components/WeatherModal/ExtendedForecastCard.tsx
View File

@@ -22,7 +22,10 @@ export default function ExtendedForecastCard({
paddingBottom: '.5rem',
}}
>
<Group gap={0} style={{ width: '100%', marginBottom: '8px', paddingLeft: '16px' }}>
<Group
gap={0}
style={{ width: '100%', marginBottom: '.5rem', paddingLeft: '1rem' }}
>
<Text
style={{
fontSize: '1.375rem',

2
src/components/WeatherModal/WeatherGraphs.tsx
View File

@@ -45,7 +45,7 @@ export default function WeatherGraphs({
style={{
background: 'var(--mantine-color-search-0)',
padding: '.5rem',
borderRadius: '.5rem',
borderRadius: '8px',
}}
>
<ResponsiveContainer width={'100%'} height={150}>

4
src/components/WeatherModal/WeatherModal.tsx
View File

@@ -65,10 +65,10 @@ export function WeatherModal({
gap={8}
style={{ borderBottom: '1px solid var(--mantine-color-border-0)' }}
>
<Text fz={18} fw={200}>
<Text fz={'1.125rem'} fw={200}>
Weather Forecast for{' '}
</Text>
<Text fz={18} fw={600}>
<Text fz={'1.125rem'} fw={600}>
{currentUser.physicalAddress}
</Text>
</Group>

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}

50
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,7 +274,6 @@ 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);
@@ -310,7 +305,7 @@ export default function Search({
backgroundColor: `${theme.primaryColor}33`,
fontWeight: 600,
borderRadius: '15px',
padding: '5px',
padding: '.25rem',
}}
>
{item.option.provider}
@@ -361,7 +356,7 @@ export default function Search({
{dateString}
</Text>
</Group>
<Group m={0} p={0} right={16} w={'24px'}>
<Group m={0} p={0} right={'1rem'} w={'24px'}>
{showFillButton && (
<ActionIcon
className={actionIconClasses.selectOptionActions}
@@ -382,44 +377,6 @@ export default function Search({
</Group>
);
}
return (
<Group
w={'100%'}
onClick={() => {
handleAppSearchItem(item);
}}
onMouseEnter={() => {
setShowFillButton(true);
}}
onMouseLeave={() => {
setShowFillButton(false);
}}
>
<Group w={'15%'}>
<Text
style={{
backgroundColor: `${theme.primaryColor}33`,
fontWeight: 600,
borderRadius: '15px',
padding: '5px',
}}
>
{item.option.label}
</Text>
</Group>
<Group justify='space-between' w={'80%'}>
<Text c={'var(--mantine-color-primary-0)'}>{item.option.searchTerm}</Text>
<Text
style={{
color: `${theme.primaryColor}55`,
}}
>
{item.option.value}
</Text>
</Group>
</Group>
);
}
useEffect(() => {
if (providerData && providerDataIsFetched) {
@@ -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) => {

12
src/styles/ActionIcon.module.css
View File

@@ -6,7 +6,7 @@
height: 2rem;
margin-top: 1.5rem;
.icon {
font-size: 24px;
font-size: 1.5rem;
}
.loader {
display: none;
@@ -22,7 +22,7 @@
&.root {
background-color: white !important;
.icon {
font-size: 24px;
font-size: 1.5rem;
}
.loader {
display: none;
@@ -42,7 +42,7 @@
border-radius: 10px;
border: none;
.icon {
font-size: 24px;
font-size: 1.5rem;
}
.loader {
display: none;
@@ -65,7 +65,7 @@
background-color: transparent;
color: var(--mantine-color-primary-0);
.icon {
font-size: 24px;
font-size: 1.5rem;
}
.loader {
display: none;
@@ -83,7 +83,7 @@
background-color: transparent !important;
color: var(--mantine-color-accent-0) !important;
.icon {
font-size: 24px;
font-size: 1.5rem;
}
.loader {
display: none;
@@ -104,7 +104,7 @@
background-color: transparent;
color: var(--mantine-color-primary-0);
.icon {
font-size: 24px;
font-size: 1.5rem;
}
.loader {
display: none;

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

@@ -19,7 +19,7 @@
margin: 0;
backdrop-filter: blur(10px) brightness(1.2);
border-radius: 6px;
font-size: 2em;
font-size: 2rem;
font-weight: 400;
text-transform: uppercase;
}

16
src/styles/Button.module.css
View File

@@ -2,8 +2,8 @@
&.root {
width: 2rem;
height: 2rem;
padding: 0px;
margin: 0px;
padding: 0;
margin: 0;
position: fixed;
bottom: 10px;
left: 10px;
@@ -21,9 +21,9 @@
.wakeButton {
&.root {
font-size: 1em;
font-size: 1rem;
font-weight: 500;
margin-bottom: 10px;
margin-bottom: .625rem;
width: 72px;
height: 72px;
line-height: 3rem;
@@ -49,8 +49,8 @@
}
width: 2rem;
height: 2rem;
padding: 8px;
margin: 0px;
padding: .5rem;
margin: 0;
background-color: var(--mantine-color-search-0);
color: var(--mantine-color-accent-0);
}
@@ -62,8 +62,8 @@
.settingsMenuButton {
&.root {
padding: 10px;
margin: 0px;
padding: .625rem;
margin: 0;
color: var(--mantine-color-background-0);
background-color: var(--mantine-color-primary-0);
border-radius: 20px;

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

@@ -7,7 +7,7 @@
.header {
color: var(--mantine-color-primary-0);
.title {
font-size: 22px;
font-size: 1.625rem;
}
.close {
color: white;

6
src/styles/MultiSelect.module.css
View File

@@ -1,7 +1,7 @@
.label {
margin-bottom: 5px !important;
margin-bottom: .25rem !important;
color: var(--mantine-color-primary-0) !important;
font-size: 14px !important;
font-size: .875rem !important;
}
.input {
border-color: var(--mantine-color-border-0) !important;
@@ -24,7 +24,7 @@
.option {
color: var(--mantine-color-primary-0) !important;
font-size: 14px !important;
font-size: .875rem !important;
&[data-checked] {
background-color: var(--mantine-color-accent-0) !important;
color: var(--mantine-color-background-0) !important;

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

@@ -2,9 +2,9 @@
width: 45%;
}
.menuSelectLabel {
margin-bottom: 5px !important;
margin-bottom: .25rem !important;
color: var(--mantine-color-primary-0) !important;
font-size: 14px !important;
font-size: .875rem !important;
}
.menuSelectInput {
border-color: var(--mantine-color-border-0) !important;
@@ -27,7 +27,7 @@
.menuSelectOption {
color: var(--mantine-color-primary-0) !important;
font-size: 14px !important;
font-size: .875rem !important;
&[data-checked] {
background-color: var(--mantine-color-accent-0) !important;
color: var(--mantine-color-background-0) !important;
@@ -52,7 +52,7 @@
.option {
transition: all .1s ease !important;
color: var(--mantine-color-accent-0);
font-size: 18px;
font-size: 1.125rem;
&[data-combobox-selected="true"] {
background-color: var(--mantine-color-background-0);
}
@@ -71,12 +71,12 @@
background-color: transparent;
color: var(--mantine-color-primary-0);
font-style: italic;
font-size: 0.8em;
font-size: 0.8rem;
height: 3.5em;
transition: all 0.4s ease;
width: 50%;
padding-left: 1em;
padding-right: 1em;
padding-left: 1rem;
padding-right: 1rem;
text-align: center;
&[data-active="true"] {
background-color: color-mix(in srgb, var(--mantine-color-search-0), transparent 50%);
@@ -85,7 +85,7 @@
color: var(--mantine-color-primary-0);
font-style: normal;
font-weight: 500;
font-size: 1.2em;
font-size: 1.2rem;
letter-spacing: .2em;
width: 100%;
border-top-left-radius: .25em;
@@ -110,7 +110,7 @@
color: var(--mantine-color-primary-0);
font-style: normal;
font-weight: 500;
font-size: 1.2em;
font-size: 1.2rem;
letter-spacing: .2em;
width: 100%;
border-top-left-radius: .25em;
@@ -124,7 +124,7 @@
color: var(--mantine-color-primary-0);
font-style: normal;
font-weight: 500;
font-size: 1.2em;
font-size: 1.2rem;
letter-spacing: .2em;
width: 100%;
border-top-left-radius: .25em;

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

@@ -20,7 +20,7 @@
margin: 0;
backdrop-filter: blur(10px) brightness(1.2);
border-radius: 6px;
font-size: 1em;
font-size: 1rem;
font-weight: 400;
text-transform: uppercase;
}

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

@@ -10,7 +10,7 @@
}
&.root {
.label {
font-size: 16px;
font-size: 1rem;
color: var(--mantine-color-primary-0);
}
.track {

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

@@ -1,11 +1,11 @@
.greeting {
&.root {
margin: 0;
margin-left: .5em;
margin-right: .5em;
margin-left: .5rem;
margin-right: .5rem;
padding: 0;
text-align: left;
font-size: 3.5em;
font-size: 3.5rem;
font-weight: 400;
width: max-content;
color: var(--mantine-color-accent-0);
@@ -17,10 +17,10 @@
display: flex;
font-family: -apple-system, Jost, BlinkMacSystemFont, Helvetica Neue, Roboto,
sans-serif !important;
font-size: 28px;
font-size: 1.75rem;
margin: 0;
padding: 0;
margin-right: 1em;
margin-right: 1rem;
text-transform: uppercase;
font-weight: 300;
color: var(--mantine-color-primary-0);
@@ -30,13 +30,13 @@
.sectionTitle {
&.root {
text-decoration: underline;
font-size: 20px;
font-size: 1.25rem;
font-weight: 200;
font-style: italic;
height: 10px;
text-transform: uppercase;
margin-top: 20px;
margin-bottom: 20px;
margin-top: 1.25rem;
margin-bottom: 1.25rem;
color: var(--mantine-color-primary-0);
}
}
@@ -50,7 +50,7 @@
.appName {
&.root {
font-weight: 400;
font-size: 11px;
font-size: .6875rem;
font-style: normal;
color: var(--mantine-color-primary-0);
font-family: "Jost", sans-serif;
@@ -60,7 +60,7 @@
.appUrl {
&.root {
font-size: 11px;
font-size: .6875rem;
font-weight: 400;
font-style: italic;
text-transform: uppercase;
@@ -71,23 +71,28 @@
.bookmarkCategory {
&.root {
font-size: 14px;
font-size: .875rem;
font-weight: 400;
height: 10px;
color: var(--mantine-color-accent-0);
text-transform: uppercase;
margin-top: 20px;
margin-bottom: 20px;
margin-top: 1.25rem;
margin-bottom: .625rem;
text-overflow: ellipsis;
overflow: hidden;
width: 100%;
height: fit-content;
}
}
.bookmarkItem {
&.root {
display: block;
font-size: 14px;
font-size: .875rem;
line-height: 2;
color: var(--mantine-color-primary-0);
width: min-content;
text-overflow: ellipsis;
overflow: hidden;
width: 100%;
&:hover {
text-decoration: underline;
}
@@ -96,20 +101,20 @@
.settingsTitle {
&.root {
font-size: 32px;
font-size: 2rem;
font-weight: bold;
margin-top: 1.5rem;
color: var(--mantine-color-accent-0);
background-color: var(--mantine-color-search-0);
border-radius: 8px;
padding-left: 8px;
padding-right: 8px;
padding-left: .5rem;
padding-right: .5rem;
}
}
.settingsSubTitle {
&.root {
font-size: 24px;
font-size: 1.5rem;
font-weight: bold;
color: var(--mantine-color-primary-0);
}

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

@@ -8,7 +8,7 @@
border: none;
background-color: var(--mantine-color-search-0);
color: var(--mantine-color-primary-0);
font-size: 18px;
font-size: 1.125rem;
}
.section {
color: var(--mantine-color-border-0);
@@ -22,6 +22,7 @@
.settingsItem {
&.root {
padding-top: 1rem;
.wrapper {
display: flex;
justify-content: center;
@@ -30,7 +31,7 @@
border: none;
background-color: var(--mantine-color-search-0);
color: var(--mantine-color-primary-0);
font-size: 18px;
font-size: 1.125rem;
}
.section {
color: var(--mantine-color-border-0);