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

Updates to styles; misc bugfixes

Browse Source
This commit is contained in:
Sean Edmunds
2025-07-10 14:37:44 -05:00
parent 9ef9cde336
commit c0b020a569
34 changed files with 475 additions and 459 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
package-lock.json generated
View File

@@ -13,26 +13,26 @@
"@mantine/form": "^8.1.3",
"@mantine/hooks": "^8.1.3",
"@mantine/notifications": "^8.1.3",
"@tanstack/react-query": "^5.81.5",
"@tanstack/react-query-devtools": "^5.81.5",
"@tanstack/react-query-persist-client": "^5.81.5",
"@tanstack/react-query": "^5.82.0",
"@tanstack/react-query-devtools": "^5.82.0",
"@tanstack/react-query-persist-client": "^5.82.0",
"idb-keyval": "^6.2.2",
"jotai": "^2.12.5",
"react": "^19.1.0",
"react-dom": "^19.1.0",
"react-icons": "^5.5.0",
"react-router-dom": "^7.6.3",
"recharts": "^3.0.2"
"recharts": "^3.1.0"
},
"devDependencies": {
"@types/node": "^24.0.10",
"@types/node": "^24.0.12",
"@types/react": "^19.1.8",
"@types/react-dom": "^19.1.6",
"@vitejs/plugin-react": "^4.6.0",
"@vitest/coverage-v8": "^3.2.4",
"@vitest/ui": "^3.2.4",
"typescript": "^5.8.3",
"vite": "^7.0.2",
"vite": "^7.0.4",
"vite-plugin-dts": "~4.5.4",
"vite-tsconfig-paths": "^5.1.4",
"vitest": "^3.2.4"
@@ -1630,9 +1630,9 @@
"license": "MIT"
},
"node_modules/@tanstack/query-core": {
"version": "5.81.5",
"resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.81.5.tgz",
"integrity": "sha512-ZJOgCy/z2qpZXWaj/oxvodDx07XcQa9BF92c0oINjHkoqUPsmm3uG08HpTaviviZ/N9eP1f9CM7mKSEkIo7O1Q==",
"version": "5.82.0",
"resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.82.0.tgz",
"integrity": "sha512-JrjoVuaajBQtnoWSg8iaPHaT4mW73lK2t+exxHNOSMqy0+13eKLqJgTKXKImLejQIfdAHQ6Un0njEhOvUtOd5w==",
"license": "MIT",
"funding": {
"type": "github",
@@ -1650,12 +1650,12 @@
}
},
"node_modules/@tanstack/query-persist-client-core": {
"version": "5.81.5",
"resolved": "https://registry.npmjs.org/@tanstack/query-persist-client-core/-/query-persist-client-core-5.81.5.tgz",
"integrity": "sha512-imiMWYXf8KuXavOgVRc5IDixqP0VKEN6IxZ/vyuX87Wk0eX7QmRtjLn1AD4Hz7GxYPM3RalRzP5Bshc30hgOcg==",
"version": "5.82.0",
"resolved": "https://registry.npmjs.org/@tanstack/query-persist-client-core/-/query-persist-client-core-5.82.0.tgz",
"integrity": "sha512-lcjS9Zj9YKo5HNNB/GilPNZos9jKpNqpxmgPkJx2NsKEbgiVfyzWVxKAa09bkhKyWMQ/gMp8kx2RPuh/tG2wSw==",
"license": "MIT",
"dependencies": {
"@tanstack/query-core": "5.81.5"
"@tanstack/query-core": "5.82.0"
},
"funding": {
"type": "github",
@@ -1663,12 +1663,12 @@
}
},
"node_modules/@tanstack/react-query": {
"version": "5.81.5",
"resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.81.5.tgz",
"integrity": "sha512-lOf2KqRRiYWpQT86eeeftAGnjuTR35myTP8MXyvHa81VlomoAWNEd8x5vkcAfQefu0qtYCvyqLropFZqgI2EQw==",
"version": "5.82.0",
"resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.82.0.tgz",
"integrity": "sha512-mnk8/ofKEthFeMdhV1dV8YXRf+9HqvXAcciXkoo755d/ocfWq7N/Y9jGOzS3h7ZW9dDGwSIhs3/HANWUBsyqYg==",
"license": "MIT",
"dependencies": {
"@tanstack/query-core": "5.81.5"
"@tanstack/query-core": "5.82.0"
},
"funding": {
"type": "github",
@@ -1679,9 +1679,9 @@
}
},
"node_modules/@tanstack/react-query-devtools": {
"version": "5.81.5",
"resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.81.5.tgz",
"integrity": "sha512-lCGMu4RX0uGnlrlLeSckBfnW/UV+KMlTBVqa97cwK7Z2ED5JKnZRSjNXwoma6sQBTJrcULvzgx2K6jEPvNUpDw==",
"version": "5.82.0",
"resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.82.0.tgz",
"integrity": "sha512-MC05Zq3zr/59jhgF7dL6JSGPg1krbasDSizmRxjNcvxgh/sUTwRFD9CGN10YYX7LB6jq0ZpFtCjSVGdLiFrKAA==",
"license": "MIT",
"dependencies": {
"@tanstack/query-devtools": "5.81.2"
@@ -1691,24 +1691,24 @@
"url": "https://github.com/sponsors/tannerlinsley"
},
"peerDependencies": {
"@tanstack/react-query": "^5.81.5",
"@tanstack/react-query": "^5.82.0",
"react": "^18 || ^19"
}
},
"node_modules/@tanstack/react-query-persist-client": {
"version": "5.81.5",
"resolved": "https://registry.npmjs.org/@tanstack/react-query-persist-client/-/react-query-persist-client-5.81.5.tgz",
"integrity": "sha512-ZV69n636C22RkbFK0rzel80oWjyWbMKiUwUE2MKhYWTSr42+JmqoehDwJ5sWcO8CxHNm4vWF8pyG+goRzluMYw==",
"version": "5.82.0",
"resolved": "https://registry.npmjs.org/@tanstack/react-query-persist-client/-/react-query-persist-client-5.82.0.tgz",
"integrity": "sha512-5gzGHxq7XerI8SWSj19DHS4YrivlszumeyP4fPPhrfB3Awky/3c4lI3WBc1mDFsH21rKb0aXF15FSDsnNeN60w==",
"license": "MIT",
"dependencies": {
"@tanstack/query-persist-client-core": "5.81.5"
"@tanstack/query-persist-client-core": "5.82.0"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/tannerlinsley"
},
"peerDependencies": {
"@tanstack/react-query": "^5.81.5",
"@tanstack/react-query": "^5.82.0",
"react": "^18 || ^19"
}
},
@@ -1847,9 +1847,9 @@
"license": "MIT"
},
"node_modules/@types/node": {
"version": "24.0.10",
"resolved": "https://registry.npmjs.org/@types/node/-/node-24.0.10.tgz",
"integrity": "sha512-ENHwaH+JIRTDIEEbDK6QSQntAYGtbvdDXnMXnZaZ6k13Du1dPMmprkEHIL7ok2Wl2aZevetwTAb5S+7yIF+enA==",
"version": "24.0.12",
"resolved": "https://registry.npmjs.org/@types/node/-/node-24.0.12.tgz",
"integrity": "sha512-LtOrbvDf5ndC9Xi+4QZjVL0woFymF/xSTKZKPgrrl7H7XoeDvnD+E2IclKVDyaK9UM756W/3BXqSU+JEHopA9g==",
"dev": true,
"license": "MIT",
"dependencies": {
@@ -3785,9 +3785,9 @@
}
},
"node_modules/recharts": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/recharts/-/recharts-3.0.2.tgz",
"integrity": "sha512-eDc3ile9qJU9Dp/EekSthQPhAVPG48/uM47jk+PF7VBQngxeW3cwQpPHb/GHC1uqwyCRWXcIrDzuHRVrnRryoQ==",
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/recharts/-/recharts-3.1.0.tgz",
"integrity": "sha512-NqAqQcGBmLrfDs2mHX/bz8jJCQtG2FeXfE0GqpZmIuXIjkpIwj8sd9ad0WyvKiBKPd8ZgNG0hL85c8sFDwascw==",
"license": "MIT",
"dependencies": {
"@reduxjs/toolkit": "1.x.x || 2.x.x",
@@ -4517,9 +4517,9 @@
}
},
"node_modules/vite": {
"version": "7.0.2",
"resolved": "https://registry.npmjs.org/vite/-/vite-7.0.2.tgz",
"integrity": "sha512-hxdyZDY1CM6SNpKI4w4lcUc3Mtkd9ej4ECWVHSMrOdSinVc2zYOAppHeGc/hzmRo3pxM5blMzkuWHOJA/3NiFw==",
"version": "7.0.4",
"resolved": "https://registry.npmjs.org/vite/-/vite-7.0.4.tgz",
"integrity": "sha512-SkaSguuS7nnmV7mfJ8l81JGBFV7Gvzp8IzgE8A8t23+AxuNX61Q5H1Tpz5efduSN7NHC8nQXD3sKQKZAu5mNEA==",
"dev": true,
"license": "MIT",
"dependencies": {

12
package.json
View File

@@ -15,26 +15,26 @@
"@mantine/form": "^8.1.3",
"@mantine/hooks": "^8.1.3",
"@mantine/notifications": "^8.1.3",
"@tanstack/react-query": "^5.81.5",
"@tanstack/react-query-devtools": "^5.81.5",
"@tanstack/react-query-persist-client": "^5.81.5",
"@tanstack/react-query": "^5.82.0",
"@tanstack/react-query-devtools": "^5.82.0",
"@tanstack/react-query-persist-client": "^5.82.0",
"idb-keyval": "^6.2.2",
"jotai": "^2.12.5",
"react": "^19.1.0",
"react-dom": "^19.1.0",
"react-icons": "^5.5.0",
"react-router-dom": "^7.6.3",
"recharts": "^3.0.2"
"recharts": "^3.1.0"
},
"devDependencies": {
"@types/node": "^24.0.10",
"@types/node": "^24.0.12",
"@types/react": "^19.1.8",
"@types/react-dom": "^19.1.6",
"@vitejs/plugin-react": "^4.6.0",
"@vitest/coverage-v8": "^3.2.4",
"@vitest/ui": "^3.2.4",
"typescript": "^5.8.3",
"vite": "^7.0.2",
"vite": "^7.0.4",
"vite-plugin-dts": "~4.5.4",
"vite-tsconfig-paths": "^5.1.4",
"vitest": "^3.2.4"

125
src/components/Applications/AppItem.tsx Normal file
View File

@@ -0,0 +1,125 @@
import { ActionIcon, Box, Stack, Text, Tooltip } from '@mantine/core';
import { useElementSize } from '@mantine/hooks';
import { useCommonHooks } from 'hooks';
import { useState } from 'react';
import * as fa6 from 'react-icons/fa6';
import { FiAlertCircle } from 'react-icons/fi';
import * as si from 'react-icons/si';
import * as vsc from 'react-icons/vsc';
import { actionIconClasses, boxClasses, textClasses } from 'styles';
export function AppItem({
url,
icon,
name,
enabled,
scale,
linksActive,
}: {
url: string;
icon: string;
name: string;
enabled: number | null;
scale: number;
linksActive: boolean;
}) {
const { ref, width, height } = useElementSize();
const allIcons: any = { ...fa6, ...vsc, ...si };
const Icon = allIcons[icon];
const { isMobile } = useCommonHooks();
const [textDecoration, setTextDecoration] = useState<string>('none');
const [hover, setHover] = useState<boolean>(false);
const validUrl =
url.startsWith('http://') || url.startsWith('https://') ? url : `http://${url}`;
return (
<Box
component='a'
href={linksActive ? validUrl : undefined}
onMouseOver={() => {
setTextDecoration('underline');
setHover(true);
}}
onMouseOut={() => {
setTextDecoration('none');
setHover(false);
}}
className={boxClasses.appItemBox}
h={scale * 64}
ref={ref}
style={{
justifyContent: width / height < 2 ? 'center' : undefined,
}}
>
{enabled === 0 && (
<Tooltip
c={'var(--mantine-color-primary-0)'}
bg={'var(--mantine-color-background-0)'}
label='This app is disabled.'
>
<ActionIcon
className={actionIconClasses.settingsTooltip}
classNames={actionIconClasses}
pos={'absolute'}
right={0}
size={'xl'}
variant='subtle'
style={{ zIndex: 1 }}
>
<FiAlertCircle color='red' />
</ActionIcon>
</Tooltip>
)}
{hover && (
<svg
style={{ position: 'absolute', borderRadius: '6px' }}
height='100%'
width='100%'
xmlns='http://www.w3.org/2000/svg'
>
<rect
rx={(scale * 64) / 8}
ry={(scale * 64) / 8}
height='100%'
width='100%'
strokeLinejoin='round'
/>
</svg>
)}
<Stack
// align={isMobile ? 'center' : undefined}
justify={isMobile ? 'center' : undefined}
style={{
marginRight: scale * 16,
marginLeft: scale * 16,
paddingTop: isMobile ? scale : scale * 16,
}}
>
{Icon && <Icon style={{ height: scale * 32, width: scale * 32 }} />}
</Stack>
{width / height > 2 && (
<Stack
justify='center'
style={{
overflow: 'hidden',
whiteSpace: 'nowrap',
gap: 0,
}}
>
<Text fz={scale * 11} className={textClasses.appName} classNames={textClasses}>
{name}
</Text>
<Text
fz={scale * 11}
className={textClasses.appUrl}
classNames={textClasses}
style={{
textDecoration: textDecoration,
}}
>
{url}
</Text>
</Stack>
)}
</Box>
);
}

1
src/components/index.ts
View File

@@ -1,3 +1,4 @@
export { AppItem } from './Applications/AppItem';
export { HelpModal } from './HelpModal/HelpModal';
export { Loading } from './Loading';
export { MainLayout } from './MainLayout';

12
src/hooks/useCommonHooks.ts
View File

@@ -25,6 +25,10 @@ export function useCommonHooks() {
key: 'appDensity',
defaultValue: 6,
});
const [appScale, setAppScale] = useLocalStorage<number>({
key: 'appScale',
defaultValue: 1,
});
const [bookmarkSort, setBookmarkSort] = useLocalStorage<string>({
key: 'bookmarkSort',
defaultValue: 'A>Z',
@@ -37,6 +41,10 @@ export function useCommonHooks() {
key: 'bookmarkDensity',
defaultValue: 6,
});
const [bookmarkScale, setBookmarkScale] = useLocalStorage<number>({
key: 'bookmarkScale',
defaultValue: 1,
});
const [currentTheme, setCurrentTheme] = useLocalStorage<string>({
key: 'theme',
defaultValue: 'random',
@@ -134,12 +142,16 @@ export function useCommonHooks() {
setAppSort,
appDensity,
setAppDensity,
appScale,
setAppScale,
bookmarkSort,
setBookmarkSort,
bookmarkFilter,
setBookmarkFilter,
bookmarkDensity,
setBookmarkDensity,
bookmarkScale,
setBookmarkScale,
currentTheme,
setCurrentTheme,
currentThemePlaylist,

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

@@ -1,80 +0,0 @@
import { Box, Stack, Text } from '@mantine/core';
import { useCommonHooks } from 'hooks';
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 { boxClasses, textClasses } from 'styles';
function AppItem({ url, icon, name }: { url: string; icon: string; name: string }) {
const allIcons: any = { ...fa6, ...vsc, ...si };
const Icon = allIcons[icon];
const { isMobile } = useCommonHooks();
const [textDecoration, setTextDecoration] = useState<string>('none');
const [hover, setHover] = useState<boolean>(false);
const validUrl =
url.startsWith('http://') || url.startsWith('https://') ? url : `http://${url}`;
return (
<Box
component='a'
href={validUrl}
onMouseOver={() => {
setTextDecoration('underline');
setHover(true);
}}
onMouseOut={() => {
setTextDecoration('none');
setHover(false);
}}
className={boxClasses.appItemBox}
h={'64px'}
>
{hover && (
<svg
style={{ position: 'absolute', borderRadius: '6px' }}
height='100%'
width='100%'
xmlns='http://www.w3.org/2000/svg'
>
<rect rx='8' ry='8' height='100%' width='100%' strokeLinejoin='round' />
</svg>
)}
<Stack
align={isMobile ? 'center' : undefined}
justify={isMobile ? 'center' : undefined}
style={{
width: isMobile ? '100%' : undefined,
marginRight: isMobile ? 0 : '1rem',
marginLeft: isMobile ? 0 : '1rem',
paddingTop: isMobile ? 0 : '1rem',
}}
>
{Icon && <Icon style={{ height: '2rem', width: '2rem' }} />}
</Stack>
<Stack
justify='center'
style={{
overflow: 'hidden',
whiteSpace: 'nowrap',
gap: 0,
flex: 1,
}}
>
<Text className={textClasses.appName} classNames={textClasses}>
{name}
</Text>
<Text
className={textClasses.appUrl}
classNames={textClasses}
style={{
textDecoration: textDecoration,
}}
>
{url}
</Text>
</Stack>
</Box>
);
}
export default AppItem;

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

@@ -1,15 +1,15 @@
import { Stack, Text } from '@mantine/core';
import { AppItem } from 'components';
import { useCommonHooks, useQueryAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { textClasses } from 'styles';
import type { Application } from 'types';
import AppItem from './AppItem';
function Applications({ contentType }: { contentType: string[] }) {
const { data: applicationData, isFetching: isApplicationDataFetching } = useQueryAPI({
endpoint: 'api/enabledApplications',
});
const { appSort, appDensity } = useCommonHooks();
const { appSort, appDensity, appScale } = useCommonHooks();
const [applications, setApplications] = useState<Application[]>([]);
useEffect(() => {
@@ -42,7 +42,11 @@ function Applications({ contentType }: { contentType: string[] }) {
<>
{applications.length > 0 && contentType.length > 0 && (
<Stack gap={0}>
<Text className={textClasses.sectionTitle} classNames={textClasses}>
<Text
fz={appScale * 20}
className={textClasses.sectionTitle}
classNames={textClasses}
>
Applications
</Text>
<Stack
@@ -65,6 +69,9 @@ function Applications({ contentType }: { contentType: string[] }) {
name={application.name}
url={application.url}
icon={application.icon}
enabled={application.enabled}
scale={appScale}
linksActive
/>
);
})}

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

@@ -6,9 +6,11 @@ import BookmarkItem from './BookmarkItem';
function BookmarkGroups({
bookmarks,
category,
bookmarkScale,
}: {
bookmarks: Bookmark[];
category: string;
bookmarkScale: number;
}) {
return (
<Stack
@@ -18,13 +20,21 @@ function BookmarkGroups({
whiteSpace: 'nowrap',
}}
>
<Text className={textClasses.bookmarkCategory} classNames={textClasses}>
<Text
fz={bookmarkScale * 14}
className={textClasses.bookmarkCategory}
classNames={textClasses}
>
{category}
</Text>
{bookmarks
?.toSorted((a: Bookmark, b: Bookmark) => (a.index > b.index ? 1 : -1))
.map((bookmark: Bookmark) => (
<BookmarkItem key={bookmark.name} bookmark={bookmark} />
<BookmarkItem
key={bookmark.name}
bookmark={bookmark}
bookmarkScale={bookmarkScale}
/>
))}
</Stack>
);

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

@@ -2,13 +2,20 @@ import { Text } from '@mantine/core';
import { textClasses } from 'styles';
import type { Bookmark } from 'types';
function BookmarkItem({ bookmark }: { bookmark: Bookmark }) {
function BookmarkItem({
bookmark,
bookmarkScale,
}: {
bookmark: Bookmark;
bookmarkScale: number;
}) {
return (
<Text
className={textClasses.bookmarkItem}
classNames={textClasses}
component='a'
href={bookmark.url}
fz={bookmarkScale * 14}
>
{bookmark.name}
</Text>

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

@@ -12,7 +12,7 @@ function Bookmarks({ contentType }: { contentType: string[] }) {
const { data: groupData, isFetched: groupsIsFetched } = useQueryAPI({
endpoint: 'api/bookmarkCategories',
});
const { bookmarkSort, bookmarkDensity } = useCommonHooks();
const { bookmarkSort, bookmarkDensity, bookmarkScale } = useCommonHooks();
const [bookmarks, setBookmarks] = useState<Bookmark[]>([]);
const [groups, setGroups] = useState<BookmarkGroup[]>([]);
@@ -59,7 +59,11 @@ function Bookmarks({ contentType }: { contentType: string[] }) {
groups?.length > 0 &&
contentType.length > 0 && (
<Stack gap={0}>
<Text className={textClasses.sectionTitle} classNames={textClasses}>
<Text
fz={bookmarkScale * 20}
className={textClasses.sectionTitle}
classNames={textClasses}
>
Bookmarks
</Text>
<Stack
@@ -85,6 +89,7 @@ function Bookmarks({ contentType }: { contentType: string[] }) {
(bookmark: Bookmark) =>
bookmark.category === category.categoryName,
)}
bookmarkScale={bookmarkScale}
/>
);
})}

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

@@ -1,4 +1,4 @@
import { Button, Group, Menu, Stack } from '@mantine/core';
import { Box, Button, Group, Menu, Overlay, Stack } from '@mantine/core';
import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { FiMenu, FiSettings } from 'react-icons/fi';
@@ -31,12 +31,16 @@ function SettingsButton() {
setAppSort,
appDensity,
setAppDensity,
appScale,
setAppScale,
bookmarkSort,
setBookmarkSort,
bookmarkFilter,
setBookmarkFilter,
bookmarkDensity,
setBookmarkDensity,
bookmarkScale,
setBookmarkScale,
} = useCommonHooks();
const handleWakeRequest = () => {
@@ -96,12 +100,20 @@ function SettingsButton() {
width: isMobile ? '100%' : undefined,
}}
>
<Box
pos={'relative'}
style={{ filter: wolClients.length === 0 ? 'grayscale(1)' : undefined }}
>
{wolClients.length === 0 && (
<Overlay opacity={0.75} style={{ borderRadius: '10px' }} />
)}
<WakeOnLan
wolClients={wolClients}
selectedClient={selectedClient}
setSelectedClient={setSelectedClient}
handleWakeRequest={handleWakeRequest}
/>
</Box>
<ThemingCard />
</Stack>
<Stack>
@@ -114,6 +126,8 @@ function SettingsButton() {
setSort={setAppSort}
density={appDensity}
setDensity={setAppDensity}
scale={appScale}
setScale={setAppScale}
/>
<SettingsCard
categories={categories}
@@ -124,6 +138,8 @@ function SettingsButton() {
setSort={setBookmarkSort}
density={bookmarkDensity}
setDensity={setBookmarkDensity}
scale={bookmarkScale}
setScale={setBookmarkScale}
/>
</Stack>
</Group>

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

@@ -18,6 +18,8 @@ function SettingsCard({
setSort,
density,
setDensity,
scale,
setScale,
}: {
categories: ComboboxItem[];
sectionTitle: string;
@@ -27,6 +29,8 @@ function SettingsCard({
setSort: any;
density: any;
setDensity: any;
scale: any;
setScale: any;
}) {
return (
<Stack
@@ -53,10 +57,11 @@ function SettingsCard({
>
{sectionTitle}
</Text>
<Group w={'100%'} justify='center'>
<Stack w={scale !== undefined ? '60%' : '90%'} align='center'>
<Text fz={'.875rem'} mt={'1rem'}>
Density
</Text>
<Stack m={0} p={0} gap={0} w={'90%'}>
<Slider
className={sliderClasses.default}
classNames={sliderClasses}
@@ -64,8 +69,29 @@ function SettingsCard({
onChange={(value) => setDensity(value)}
min={1}
max={8}
marks={[{ value: 6, label: 'Default' }]}
onDoubleClick={() => setDensity(6)}
/>
</Stack>
{scale !== undefined && (
<Stack w={'33%'} align='center'>
<Text fz={'.875rem'} mt={'1rem'}>
Scale
</Text>
<Slider
className={sliderClasses.default}
classNames={sliderClasses}
value={scale}
onChange={(value) => setScale(value)}
step={0.1}
min={0.5}
max={2}
marks={[{ value: 1, label: 'Default' }]}
onDoubleClick={() => setScale(1)}
/>
</Stack>
)}
</Group>
<Group justify='center' mb={'.25rem'}>
<MultiSelect
label='Filter'

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

@@ -27,7 +27,7 @@ function WakeOnLan({
<Button
classNames={buttonClasses}
className={buttonClasses.wakeButton}
disabled={!wolClients?.length || selectedClient === null}
disabled={!wolClients?.length || selectedClient?.macAddress === undefined}
onClick={() => {
handleWakeRequest();
}}

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

@@ -1,109 +0,0 @@
import { ActionIcon, Box, Stack, Text, Tooltip } from '@mantine/core';
import { useCommonHooks } from 'hooks';
import { useState } from 'react';
import { FiAlertCircle } from 'react-icons/fi';
import { actionIconClasses, boxClasses, textClasses } from 'styles';
function AppSettingsItem({
url,
icon,
name,
enabled,
allIcons,
}: {
url: string;
icon: string;
name: string;
enabled: number;
allIcons: any;
}) {
const Icon = allIcons[icon];
const [textDecoration, setTextDecoration] = useState<string>('none');
const [hover, setHover] = useState<boolean>(false);
const { isMobile } = useCommonHooks();
return (
<Box pos={'relative'}>
{enabled === 0 && (
<Tooltip
c={'var(--mantine-color-primary-0)'}
bg={'var(--mantine-color-background-0)'}
label='This app is disabled.'
>
<ActionIcon
className={actionIconClasses.settingsTooltip}
classNames={actionIconClasses}
pos={'absolute'}
right={0}
size={'xl'}
variant='subtle'
style={{ zIndex: 1 }}
>
<FiAlertCircle color='red' />
</ActionIcon>
</Tooltip>
)}
<Box
component='a'
onMouseOver={() => {
setTextDecoration('underline');
setHover(true);
}}
onMouseOut={() => {
setTextDecoration('none');
setHover(false);
}}
className={boxClasses.appItemBox}
>
{hover && (
<svg
style={{ position: 'absolute', borderRadius: '6px' }}
height='100%'
width='100%'
xmlns='http://www.w3.org/2000/svg'
>
<rect rx='16' ry='16' height='100%' width='100%' strokeLinejoin='round' />
</svg>
)}
<Stack
align={isMobile ? 'center' : undefined}
justify={isMobile ? 'center' : undefined}
style={{
height: '128px',
width: isMobile ? '100%' : undefined,
marginRight: isMobile ? '0' : '1rem',
marginLeft: isMobile ? '0' : '2rem',
paddingTop: isMobile ? '0' : '2rem',
}}
>
{Icon && <Icon style={{ height: '4rem', width: '4rem' }} />}
</Stack>
<Stack
style={{
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
flex: 1,
overflow: 'hidden',
gap: 0,
}}
>
<Text fz={'1.5rem'} className={textClasses.appName} classNames={textClasses}>
{name}
</Text>
<Text
fz={'1rem'}
className={textClasses.appUrl}
classNames={textClasses}
style={{
textDecoration: textDecoration,
}}
>
{url}
</Text>
</Stack>
</Box>
</Box>
);
}
export default AppSettingsItem;

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

@@ -15,6 +15,7 @@ import {
} from '@mantine/core';
import { isNotEmpty, useForm } from '@mantine/form';
import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
import { AppItem } from 'components';
import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
import { useEffect, useState } from 'react';
import * as fa6 from 'react-icons/fa6';
@@ -25,7 +26,6 @@ import type { Application } from 'types';
import AddItemModal from '../Shared/AddItemModal';
import NoItemsFound from '../Shared/NoItemsFound';
import SettingsHeader from '../Shared/SettingsHeader';
import AppSettingsItem from './AppSettingsItem';
import DebouncedApplication from './DebouncedApplication';
const ApplicationSettings = () => {
@@ -267,7 +267,11 @@ const ApplicationSettings = () => {
}
/>
<DragDropContext onDragEnd={onDragEnd}>
<Stack mb={isMobile ? '6rem' : '1rem'} align='center'>
<Stack
mt={isMobile ? '10rem' : '6rem'}
mb={isMobile ? '6rem' : '1rem'}
align='center'
>
{applications.length > 0 ? (
<Droppable droppableId={'groupList'}>
{(provided) => (
@@ -303,12 +307,14 @@ const ApplicationSettings = () => {
>
#{index + 1}
</Text>
<AppSettingsItem
<AppItem
key={application.name}
name={application.name}
url={application.url}
icon={application.icon}
name={application.name}
enabled={application.enabled}
allIcons={allIcons}
scale={2}
linksActive={false}
/>
</Box>
</Box>
@@ -331,12 +337,14 @@ const ApplicationSettings = () => {
e.stopPropagation();
}}
>
<AppSettingsItem
<AppItem
key={application.name}
name={application.name}
url={application.url}
icon={application.icon}
name={application.name}
enabled={application.enabled}
allIcons={allIcons}
scale={2}
linksActive={false}
/>
</Box>
</Popover.Target>

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

@@ -1,23 +1,20 @@
import {
ActionIcon,
Card,
type ComboboxItem,
type ComboboxLikeRenderOptionInput,
Group,
Select,
Stack,
Switch,
Text,
TextInput,
Tooltip,
} from '@mantine/core';
import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
import { useCommonHooks, useMutationAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { FiPower, FiTrash } from 'react-icons/fi';
import { cardClasses, selectClasses, switchClasses, textInputClasses } from 'styles';
import { cardClasses, selectClasses, textInputClasses } from 'styles';
import type { Application } from 'types';
import DeleteItemModal from '../Shared/DeleteItemModal';
import ManagementPill from '../Shared/ManagementPill';
function DebouncedApplication({
application,
@@ -79,70 +76,16 @@ function DebouncedApplication({
</Stack>
}
/>
<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)',
}}
>
<Tooltip
c={'var(--mantine-color-primary-0)'}
bg={'var(--mantine-color-background-0)'}
bd={'solid 1px var(--mantine-color-border-0)'}
label={'Enabled'}
refProp='rootRef'
styles={{
tooltip: { marginTop: '-.5rem' },
arrow: { border: 'solid 1px var(--mantine-color-accent-0)' },
}}
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) => {
<ManagementPill
enabled={app.enabled}
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
setUpdate({
...app,
enabled: event.target.checked ? 1 : 0,
});
}}
openModal={openModal}
/>
</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'}

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

@@ -10,7 +10,7 @@ function BookmarkSettingsItem({ bookmark }: { bookmark: Bookmark }) {
style={{
cursor: 'pointer',
borderRadius: '4px',
color: 'var(--mantine-color-accent-0)',
color: 'var(--mantine-color-primary-0)',
backgroundColor: 'var(--mantine-color-search-0)',
padding: '.5rem',
}}

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

@@ -203,7 +203,11 @@ const BookmarkSettings = () => {
/>
{dragging ? (
<DragDropContext onDragEnd={onDragEnd}>
<Stack mb={isMobile ? '6rem' : '1rem'} align='center'>
<Stack
mt={isMobile ? '10rem' : '6rem'}
mb={isMobile ? '6rem' : '1rem'}
align='center'
>
<Droppable droppableId={'groupList'}>
{(provided) => (
<Stack
@@ -279,7 +283,11 @@ const BookmarkSettings = () => {
</Stack>
</DragDropContext>
) : (
<Stack mb={isMobile ? '6rem' : '1rem'} align='center'>
<Stack
mt={isMobile ? '10rem' : '6rem'}
mb={isMobile ? '6rem' : '1rem'}
align='center'
>
<Group w={isMobile ? undefined : '80%'} align='start' justify='center'>
{groups.length > 0 ? (
groups?.map((group: BookmarkGroup) => (

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

@@ -1,19 +1,10 @@
import {
ActionIcon,
Card,
Group,
Stack,
Switch,
Text,
TextInput,
Tooltip,
} from '@mantine/core';
import { Card, Stack, Text, TextInput } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';
import { useCommonHooks } from 'hooks';
import { FiPower, FiTrash } from 'react-icons/fi';
import { cardClasses, switchClasses, textInputClasses } from 'styles';
import { cardClasses, textInputClasses } from 'styles';
import type { Message } from 'types';
import DeleteItemModal from '../Shared/DeleteItemModal';
import ManagementPill from '../Shared/ManagementPill';
function DebouncedMessage({
label,
@@ -56,72 +47,16 @@ function DebouncedMessage({
</Stack>
}
/>
<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)',
}}
>
<Tooltip
c={'var(--mantine-color-primary-0)'}
bg={'var(--mantine-color-background-0)'}
bd={'solid 1px var(--mantine-color-border-0)'}
label={message.customGreeting === 1 ? 'Enabled' : 'Disabled'}
refProp='rootRef'
styles={{
tooltip: { marginTop: '-.5rem' },
arrow: { border: 'solid 1px var(--mantine-color-accent-0)' },
}}
withArrow
>
<Switch
className={switchClasses.enable}
classNames={switchClasses}
defaultChecked={message.customGreeting === 1}
defaultValue={message.customGreeting}
thumbIcon={
<FiPower
style={{
color:
message.customGreeting === 1
? 'var(--mantine-color-accent-0)'
: 'red',
}}
/>
}
onChange={(event) => {
<ManagementPill
enabled={message.customGreeting}
onChange={() => {
setMessage({
...message,
customGreeting: event.target.checked ? 1 : 0,
customGreeting: message.customGreeting === 1 ? 0 : 1,
});
}}
openModal={openModal}
/>
</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={() => {
openModal();
}}
>
<FiTrash color='black' />
</ActionIcon>
</Tooltip>
</Group>
<TextInput
label={label}
disabled={message.customGreeting === 0}

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

@@ -120,7 +120,11 @@ const MessageSettings = () => {
</Stack>
}
/>
<Stack mb={isMobile ? '6rem' : undefined} align='center'>
<Stack
mt={isMobile ? '10rem' : '6rem'}
mb={isMobile ? '6rem' : undefined}
align='center'
>
<Grid w={'75%'}>
{messages.length > 0 ? (
messages?.map((message: Message) => (

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

@@ -66,7 +66,7 @@ const PersonalizationSettings = () => {
isLoading={false}
setIsLoading={() => {}}
/>
<Stack align='center'>
<Stack align='center' mt={'6rem'}>
<Grid w={'75%'}>
{personalIsFetching && (
<Overlay

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

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

76
src/pages/settings/components/Shared/ManagementPill.tsx Normal file
View File

@@ -0,0 +1,76 @@
import { ActionIcon, Group, Switch, Tooltip } from '@mantine/core';
import { FiPower, FiTrash } from 'react-icons/fi';
import { switchClasses } from 'styles';
function ManagementPill({
enabled,
onChange,
openModal,
}: {
enabled: number;
onChange: any;
openModal: () => void;
}) {
return (
<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)',
}}
>
<Tooltip
c={'var(--mantine-color-primary-0)'}
bg={'var(--mantine-color-background-0)'}
bd={'solid 1px var(--mantine-color-border-0)'}
label={enabled === 1 ? 'Enabled' : 'Disabled'}
refProp='rootRef'
styles={{
tooltip: { marginTop: '-.5rem' },
arrow: { border: 'solid 1px var(--mantine-color-accent-0)' },
}}
withArrow
>
<Switch
className={switchClasses.enable}
classNames={switchClasses}
defaultChecked={enabled === 1}
defaultValue={enabled}
thumbIcon={
<FiPower
style={{
color: enabled === 1 ? 'var(--mantine-color-accent-0)' : 'red',
}}
/>
}
onChange={onChange}
/>
</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={() => {
openModal();
}}
>
<FiTrash color='black' />
</ActionIcon>
</Tooltip>
</Group>
);
}
export default ManagementPill;

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

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

11
src/pages/settings/components/Theming/BackgroundModal.tsx
View File

@@ -12,7 +12,7 @@ import {
Text,
TextInput,
} from '@mantine/core';
import { useDebouncedValue } from '@mantine/hooks';
import { useDebouncedValue, useElementSize } from '@mantine/hooks';
import { useCommonHooks } from 'hooks';
import { useFileUploadAPI } from 'hooks/useAPI';
import { useEffect, useState } from 'react';
@@ -38,6 +38,7 @@ function BackgroundModal({
backgroundList: string[];
inUseBackgrounds: string[];
}) {
const { ref, width } = useElementSize();
const [background, setBackground] = useState<File | null>(null);
const [fileName, setFileName] = useState<string>('');
const [newFileName, setNewFileName] = useState<string>('');
@@ -173,7 +174,7 @@ function BackgroundModal({
backgroundFilter: 'blur(5px)',
}}
>
<SimpleGrid w={'100%'} cols={3} p={'.5rem'}>
<SimpleGrid w={'100%'} cols={3} p={'.75rem'}>
{backgroundList
.filter((background) => background !== 'None')
.filter(
@@ -195,11 +196,17 @@ function BackgroundModal({
top: '-.5rem',
left: 0,
zIndex: 3,
boxShadow: '2px -2px var(--mantine-color-primary-0)',
textOverflow: 'ellipsis',
overflow: 'hidden',
whiteSpace: 'nowrap',
maxWidth: width,
}}
>
{background}
</Text>
<Card
ref={ref}
style={{
aspectRatio: '16/9',
width: '100%',

11
src/pages/settings/components/Theming/ThemeCard.tsx
View File

@@ -1,5 +1,5 @@
import { ActionIcon, Box, Button, Group, Overlay, Stack, Text } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';
import { useDisclosure, useElementSize } from '@mantine/hooks';
import { useCommonHooks, useMutationAPI } from 'hooks';
import { useState } from 'react';
import { FiEdit, FiShuffle, FiTrash, FiX } from 'react-icons/fi';
@@ -18,6 +18,7 @@ function ThemeCard({
allThemes: Theme[];
themePlaylists: ThemePlaylist[];
}) {
const { ref, width } = useElementSize();
const [hover, setHover] = useState(false);
const [shiftEdit, setShiftEdit] = useState<number>(0);
const [shiftShuffle, setShiftShuffle] = useState<number>(0);
@@ -73,18 +74,24 @@ function ThemeCard({
left: 6,
paddingRight: '.25rem',
paddingLeft: '.25rem',
backgroundColor: cardTheme.borderColor,
backgroundColor: cardTheme.backgroundColor,
borderRadius: '4px',
color:
cardTheme.borderColor === cardTheme.primaryColor
? cardTheme.accentColor
: cardTheme.primaryColor,
zIndex: 3,
boxShadow: `2px -2px ${cardTheme.borderColor}`,
textOverflow: 'ellipsis',
overflow: 'hidden',
whiteSpace: 'nowrap',
maxWidth: width,
}}
>
{cardTheme.name}
</Text>
<Button
ref={ref}
w={'275px'}
h={'115px'}
disabled={currentTheme === 'random'}

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

@@ -171,7 +171,7 @@ function ThemeModal({
</Modal.Header>
<Modal.Body>
<Group p={'2rem'} w={'100%'} align='flex-start' justify='space-between'>
<Stack display={'flex'} pos={'relative'} w={'70%'}>
<Stack display={'flex'} pos={'relative'} w={isMobile ? '100%' : '70%'}>
<ThemeModalContent selectedTheme={designerTheme} />
<Tooltip
label={'Change Primary Color'}
@@ -242,7 +242,7 @@ function ThemeModal({
bd={`1px solid ${selectedTheme.primaryColor}`}
pos={'absolute'}
top={'4.5rem'}
right={'7rem'}
right={'15%'}
/>
</Tooltip>
<Tooltip
@@ -260,7 +260,7 @@ function ThemeModal({
bd={`1px solid ${selectedTheme.primaryColor}`}
pos={'absolute'}
top={'3.25rem'}
left={'14.5rem'}
left={'6.5rem'}
/>
</Tooltip>
<Tooltip
@@ -282,7 +282,7 @@ function ThemeModal({
</Tooltip>
</Stack>
<Stack
w={'28%'}
w={isMobile ? '100%' : '28%'}
h={'436px'}
p={'1rem'}
style={{

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

@@ -97,7 +97,7 @@ function ThemePlaylists() {
isLoading={isLoading}
setIsLoading={setIsLoading}
/>
<Stack>
<Stack mt={isMobile ? '10rem' : '6rem'}>
{allThemeData && (
<>
<Group justify='center' align='center' pos={'relative'}>

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

@@ -170,7 +170,7 @@ function ThemesSettings() {
isLoading={isLoading}
setIsLoading={setIsLoading}
/>
<Stack mt={'1rem'} align='center'>
<Stack mt={isMobile ? '11rem' : '7rem'} align='center'>
<Group
w={'85%'}
justify='center'
@@ -258,24 +258,34 @@ function ThemesSettings() {
bottom: isMobile ? '3.25rem' : 0,
}}
>
<Group w={isMobile ? undefined : '100%'} justify='space-between'>
<Group w={'100%'} justify={isMobile ? 'center' : 'space-between'}>
<Text
miw={isMobile ? 100 : undefined}
w={'fit-content'}
className={textClasses.settingsSubTitle}
classNames={textClasses}
fz={isMobile ? '1rem' : undefined}
style={
isMobile
? {
position: 'absolute',
top: -16,
left: 4,
padding: '.25rem',
backgroundColor: 'var(--mantine-color-background-0)',
backdropFilter: 'blur(5px) brightness(.25)',
borderRadius: '10px',
boxShadow: '2px -2px var(--mantine-color-accent-0)',
}
: undefined
}
>
Current Settings:
</Text>
<Group
pos={isMobile ? undefined : 'absolute'}
w={isMobile ? undefined : '100%'}
justify='center'
>
<Group>
<Group>
<Text
style={{
color: 'var(--mantine-color-accent-0)',
color: 'var(--mantine-color-primary-0)',
fontWeight: 'bold',
}}
>

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

@@ -127,7 +127,12 @@ const WolClientSettings = () => {
isLoading={isLoading}
setIsLoading={setIsLoading}
/>
<Stack mb={isMobile ? '6rem' : '1rem'} w={'100%'} align='center'>
<Stack
mt={isMobile ? '10rem' : '6rem'}
mb={isMobile ? '6rem' : '1rem'}
w={'100%'}
align='center'
>
<Grid columns={18} w={'75%'}>
{wolClients.length > 0 ? (
wolClients?.map((client: WolClient) => (
@@ -143,12 +148,7 @@ const WolClientSettings = () => {
offset={isMobile ? -100 : 0}
>
<Popover.Target>
<Group
onClick={(e) => {
e.stopPropagation();
}}
justify='center'
>
<Group justify='center'>
<WolClientSettingsItem client={client} />
</Group>
</Popover.Target>

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

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

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

@@ -1,4 +1,5 @@
.default {
width: 100%;
.trackContainer {
.track::before {
background-color: var(--mantine-color-border-0);

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

@@ -1,13 +1,4 @@
.default {
@media (max-width: 600px) {
&.root {
.label {
position: absolute;
top: -22px;
left: -8px;
}
}
}
&.root {
.label {
font-size: 1rem;

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

@@ -29,13 +29,10 @@
.sectionTitle {
&.root {
text-decoration: underline;
font-size: 1.25rem;
font-weight: 200;
font-style: italic;
height: 10px;
text-transform: uppercase;
margin-top: 1.25rem;
margin-bottom: 1.25rem;
color: var(--mantine-color-primary-0);
}
}
@@ -53,6 +50,8 @@
color: var(--mantine-color-primary-0);
font-family: "Jost", sans-serif;
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
}
}
@@ -63,12 +62,13 @@
text-transform: uppercase;
color: var(--mantine-color-accent-0);
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
}
}
.bookmarkCategory {
&.root {
font-size: .875rem;
color: var(--mantine-color-accent-0);
text-transform: uppercase;
margin-top: 1rem;
@@ -80,7 +80,6 @@
.bookmarkItem {
&.root {
display: block;
font-size: .875rem;
line-height: 2;
color: var(--mantine-color-primary-0);
text-overflow: ellipsis;