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);
setTheme(temp);
} else {
let enabled = data.filter((t: any) => t.randomEnabled);
const enabled = data.filter((t: any) => t.randomEnabled);
if (enabled.length === 0) {
setTheme(data[0]);
} else {

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

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

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

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