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

Fixes to styles

Browse Source
This commit is contained in:
Sean Edmunds
2024-12-30 15:09:20 -06:00
parent db54171a5a
commit 2174b1d7be
4 changed files with 61 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.tsx
View File

@@ -43,7 +43,7 @@ function App() {
const temp = data.find((t: any) => t.name === themeName); const temp = data.find((t: any) => t.name === themeName);
setTheme(temp); setTheme(temp);
} else { } else {
let enabled = data.filter((t: any) => t.randomEnabled); const enabled = data.filter((t: any) => t.randomEnabled);
if (enabled.length === 0) { if (enabled.length === 0) {
setTheme(data[0]); setTheme(data[0]);
} else { } else {

73
src/pages/settings/components/Themes.tsx
View File

@@ -6,7 +6,9 @@ import {
ColorSwatch, ColorSwatch,
Divider, Divider,
Group, Group,
Image,
Modal, Modal,
OptionalPortal,
Select, Select,
Stack, Stack,
Text, Text,
@@ -19,7 +21,13 @@ import { FiCheck, FiEdit, FiPlus, FiSave, FiTrash, FiX } from 'react-icons/fi';
import '@mantine/core/styles/ModalBase.css'; import '@mantine/core/styles/ModalBase.css';
import '@mantine/core/styles/Modal.css'; import '@mantine/core/styles/Modal.css';
import { modals } from '@mantine/modals'; import { modals } from '@mantine/modals';
import { actionIconClasses, buttonClasses, modalClasses, textClasses } from 'styles'; import {
actionIconClasses,
buttonClasses,
modalClasses,
selectClasses,
textClasses,
} from 'styles';
import ThemeModalContent from './ThemeModalContent'; import ThemeModalContent from './ThemeModalContent';
function ThemesSettings({ theme }: any) { function ThemesSettings({ theme }: any) {
const [opened, { open, close }] = useDisclosure(false); const [opened, { open, close }] = useDisclosure(false);
@@ -35,9 +43,9 @@ function ThemesSettings({ theme }: any) {
}); });
const { data: backgrounds, isFetched: isBackgroundFetched } = useQueryAPI({ const { data: backgrounds, isFetched: isBackgroundFetched } = useQueryAPI({
endpoint: 'api/backgrounds', endpoint: 'api/backgrounds',
}) });
const [themesList, setThemesList] = useState([]); const [themesList, setThemesList] = useState([]);
const [backgroundList, setBackgroundList] = useState<any>(["None"]); const [backgroundList, setBackgroundList] = useState<any>(['None']);
const [selectedTheme, setSelectedTheme] = useState<any>({}); const [selectedTheme, setSelectedTheme] = useState<any>({});
const { mutateAsync: createTheme } = useMutationAPI(); const { mutateAsync: createTheme } = useMutationAPI();
const { mutateAsync: deleteTheme } = useMutationAPI(); const { mutateAsync: deleteTheme } = useMutationAPI();
@@ -50,7 +58,7 @@ function ThemesSettings({ theme }: any) {
useEffect(() => { useEffect(() => {
if (backgrounds && isBackgroundFetched) { if (backgrounds && isBackgroundFetched) {
setBackgroundList(["None", ...backgrounds]); setBackgroundList(['None', ...backgrounds]);
} }
}, [backgrounds, isBackgroundFetched]); }, [backgrounds, isBackgroundFetched]);
@@ -132,7 +140,7 @@ function ThemesSettings({ theme }: any) {
<Divider color='black' my='sm' /> <Divider color='black' my='sm' />
<Group w={'100%'} h={'100%'} gap={0}> <Group w={'100%'} h={'100%'} gap={0}>
<Stack w={'50%'}> <Stack w={'50%'}>
<Group c={'black'} justify='space-between'> <Group justify='space-between'>
<Text className={textClasses.label} classNames={textClasses}> <Text className={textClasses.label} classNames={textClasses}>
Primary Color Primary Color
</Text> </Text>
@@ -148,7 +156,7 @@ function ThemesSettings({ theme }: any) {
style={{ cursor: 'pointer' }} style={{ cursor: 'pointer' }}
/> />
</Group> </Group>
<Group c={'black'} justify='space-between'> <Group justify='space-between'>
<Text className={textClasses.label} classNames={textClasses}> <Text className={textClasses.label} classNames={textClasses}>
Accent Color Accent Color
</Text> </Text>
@@ -164,7 +172,7 @@ function ThemesSettings({ theme }: any) {
style={{ cursor: 'pointer' }} style={{ cursor: 'pointer' }}
/> />
</Group> </Group>
<Group c={'black'} justify='space-between'> <Group justify='space-between'>
<Text className={textClasses.label} classNames={textClasses}> <Text className={textClasses.label} classNames={textClasses}>
Background Color Background Color
</Text> </Text>
@@ -180,7 +188,7 @@ function ThemesSettings({ theme }: any) {
style={{ cursor: 'pointer' }} style={{ cursor: 'pointer' }}
/> />
</Group> </Group>
<Group c={'black'} justify='space-between'> <Group justify='space-between'>
<Text className={textClasses.label} classNames={textClasses}> <Text className={textClasses.label} classNames={textClasses}>
Border Color Border Color
</Text> </Text>
@@ -196,7 +204,7 @@ function ThemesSettings({ theme }: any) {
style={{ cursor: 'pointer' }} style={{ cursor: 'pointer' }}
/> />
</Group> </Group>
<Group c={'black'} justify='space-between'> <Group justify='space-between'>
<Text className={textClasses.label} classNames={textClasses}> <Text className={textClasses.label} classNames={textClasses}>
Search Background Color Search Background Color
</Text> </Text>
@@ -212,23 +220,36 @@ function ThemesSettings({ theme }: any) {
style={{ cursor: 'pointer' }} style={{ cursor: 'pointer' }}
/> />
</Group> </Group>
<Group c={'black'} justify='space-between'> <Group justify='space-between'>
<Select <OptionalPortal withinPortal={false}>
data={backgroundList} <Select
label='Background Image' data={backgroundList}
value={selectedTheme.backgroundImage} className={selectClasses.select}
onChange={(value) => classNames={selectClasses}
setSelectedTheme({ label='Background Image'
...selectedTheme, value={selectedTheme.backgroundImage}
backgroundImage: value, renderOption={(value) => {
}) return (
} <Group h={'100%'} w={'100%'} justify='space-between'>
styles={{ {value.option.value}
label: { {value.option.value && value.option.value !== 'None' && (
color: theme.primaryColor, <Image
}, h={'28px'}
}} w={'50px'}
/> src={`/backgrounds/${value.option.value}`}
/>
)}
</Group>
);
}}
onChange={(value) =>
setSelectedTheme({
...selectedTheme,
backgroundImage: value,
})
}
/>
</OptionalPortal>
</Group> </Group>
</Stack> </Stack>
<Stack h={'100%'} w={'50%'} align='center' justify='center'> <Stack h={'100%'} w={'50%'} align='center' justify='center'>

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

@@ -27,7 +27,7 @@
color: var(--color-text-pri); color: var(--color-text-pri);
background-color: var(--color-background); background-color: var(--color-background);
.header { .header {
color: white; color: var(--color-text-pri);
background-color: var(--color-text-acc); background-color: var(--color-text-acc);
.close { .close {
color: white; color: white;

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

@@ -1,6 +1,6 @@
.label { .label {
margin-bottom: 5px !important; margin-bottom: 5px !important;
color: light-dark(var(--mantine-color-appGray-8), white) !important; color: var(--color-text-pri) !important;
font-size: 14px !important; font-size: 14px !important;
} }
.input { .input {
@@ -14,21 +14,26 @@
.options { .options {
.option { .option {
color: var(--color-text-pri) !important; color: black !important;
font-size: 14px !important; font-size: 14px !important;
/* applies styles to selected item */ /* applies styles to selected item */
&[data-checked] { &[data-checked] {
background-color: var(--color-text-pri) !important; background-color: gray !important;
&, &:hover { color: white !important;
background-color: var(--color-text-acc) !important; &:hover {
background-color: black !important;
color: white !important; color: white !important;
} }
} }
/* applies styles to hovered item (with mouse or keyboard) */ /* applies styles to hovered item (with mouse or keyboard) */
&:hover { &:hover {
background-color: var(--color-text-acc) !important; background-color: black !important;
color: var(--color-text-pri) !important; color: white !important;
} }
} }
}
.dropdown {
background-color: white !important;
} }