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

Style updates and default fixes

Browse Source
This commit is contained in:
Sean Edmunds
2025-04-22 15:14:47 -05:00
parent c3495bd674
commit 74893ac68d
6 changed files with 118 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/hooks/useCommonHooks.ts
View File

@@ -73,12 +73,12 @@ export function useCommonHooks() {
});
const modalStyle = {
'--color-text-pri': theme.primaryColor,
'--color-text-acc': theme.accentColor,
'--color-background': theme.backgroundColor,
'--color-border': theme.borderColor,
'--color-search-background': theme.searchColor,
'--image-background': `url(${theme.backgroundImage})`,
'--color-text-pri': theme?.primaryColor,
'--color-text-acc': theme?.accentColor,
'--color-background': theme?.backgroundColor,
'--color-border': theme?.borderColor,
'--color-search-background': theme?.searchColor,
'--image-background': `url(${theme?.backgroundImage})`,
};
const urlPattern = new RegExp(

7
src/pages/homepage/Homepage.tsx
View File

@@ -15,7 +15,7 @@ import Bookmarks from './components/Bookmarks/Bookmarks';
import Header from './components/Header/Header';
import LargeHeader from './components/Header/LargeHeader';
import Search from './components/Search/Search';
import SettingsButton from './components/SettingsButton';
import SettingsButton from './components/SettingsButton/SettingsButton';
export function Homepage() {
const { data: personal, isFetched: personalIsFetched } = useQueryAPI({
@@ -80,8 +80,9 @@ export function Homepage() {
});
}
}, [messages, personalData, isMessagesFetching]);
const { data: weatherMetadata } = useOSMAPI({ address: personal?.[0].physicalAddress });
const { data: weatherMetadata } = useOSMAPI({
address: personal?.[0]?.physicalAddress,
});
const { data: points } = useWeatherAPI({
endpoint: 'points',
lat: weatherMetadata?.[0].lat ?? currentLocation.lat,

43
src/pages/homepage/components/SettingsButton.tsx → src/pages/homepage/components/SettingsButton/SettingsButton.tsx
View File

@@ -78,17 +78,6 @@ function SettingsButton() {
});
};
const marks = [
{ value: 1, label: '1' },
{ value: 2, label: '2' },
{ value: 3, label: '3' },
{ value: 4, label: '4' },
{ value: 5, label: '5' },
{ value: 6, label: '6' },
{ value: 7, label: '7' },
{ value: 8, label: '8' },
];
const queryClient = useQueryClient();
const handleRefresh = () => {
@@ -143,7 +132,7 @@ function SettingsButton() {
: theme.backgroundColor,
}}
>
<Group p={'1rem'} gap={24}>
<Group p={'1rem'} gap={12}>
<Stack display={'flex'} align='center'>
<Stack
gap={0}
@@ -202,7 +191,7 @@ function SettingsButton() {
style={{ aspectRatio: '1/1' }}
>
<Menu.Label pb={'.25rem'}>Themes</Menu.Label>
<Group mt={'-1rem'} mb={'-.75rem'} w={'95%'} justify='space-between'>
<Group mt={'-1.5rem'} mb={'-.25rem'} w={'95%'} justify='space-between'>
<Tooltip label='Shuffle Themes' color={theme.primaryColor} withArrow>
<ActionIcon
className={actionIconClasses.menuActions}
@@ -300,6 +289,7 @@ function SettingsButton() {
<Stack
gap={0}
align='center'
justify='space-between'
className={stackClasses.menuStack}
classNames={stackClasses}
pos={'relative'}
@@ -313,7 +303,7 @@ function SettingsButton() {
paddingBottom: 2,
borderRadius: 8,
position: 'absolute',
left: '-20px',
left: '-12px',
top: '-8px',
backgroundColor: theme.primaryColor,
color: theme.backgroundColor,
@@ -321,10 +311,10 @@ function SettingsButton() {
>
Apps
</Text>
<Text fz={14} mt={16}>
Density
</Text>
<Stack m={0} p={0} gap={0} w={'90%'}>
<Text fz={14} mt={16}>
Density
</Text>
<Slider
className={sliderClasses.default}
classNames={sliderClasses}
@@ -333,10 +323,9 @@ function SettingsButton() {
onChange={(value) => setAppDensity(value)}
min={1}
max={8}
marks={marks}
/>
</Stack>
<Group justify='space-between' px={'.5rem'}>
<Group justify='center' mb={'.25rem'}>
<MultiSelect
label='Filter'
data={
@@ -363,7 +352,6 @@ function SettingsButton() {
placeholder='Sort Applications...'
value={appSort}
data={['Custom', 'A>Z', 'Z>A', 'Newest', 'Oldest']}
w={'45%'}
classNames={{
input: selectClasses.menuSelectInput,
label: selectClasses.menuSelectLabel,
@@ -380,6 +368,7 @@ function SettingsButton() {
<Stack
gap={0}
align='center'
justify='space-between'
className={stackClasses.menuStack}
classNames={stackClasses}
pos={'relative'}
@@ -393,7 +382,7 @@ function SettingsButton() {
paddingBottom: 2,
borderRadius: 8,
position: 'absolute',
left: '-20px',
left: '-12px',
top: '-8px',
backgroundColor: theme.primaryColor,
color: theme.backgroundColor,
@@ -401,10 +390,10 @@ function SettingsButton() {
>
Bookmarks
</Text>
<Text fz={14} mt={16}>
Density
</Text>
<Stack m={0} p={0} gap={0} w={'90%'}>
<Text fz={14} mt={16}>
Density
</Text>
<Slider
className={sliderClasses.default}
classNames={sliderClasses}
@@ -413,10 +402,9 @@ function SettingsButton() {
onChange={(value) => setBookmarkDensity(value)}
min={1}
max={8}
marks={marks}
/>
</Stack>
<Group justify='space-between' px={'.5rem'}>
<Group justify='center' mb={'.25rem'}>
<MultiSelect
label='Filter'
data={
@@ -443,7 +431,6 @@ function SettingsButton() {
placeholder='Sort Bookmarks...'
value={bookmarkSort}
data={['Custom', 'A>Z', 'Z>A', 'Newest', 'Oldest']}
w={'45%'}
classNames={{
input: selectClasses.menuSelectInput,
label: selectClasses.menuSelectLabel,
@@ -459,7 +446,7 @@ function SettingsButton() {
</Stack>
</Stack>
</Group>
<Group w={'100%'} align='center' justify='center'>
<Group mt={'-.75rem'} w={'100%'} align='center' justify='center'>
<Button
leftSection={<FiSettings />}
onClick={() => navigate(`/${import.meta.env.VITE_BASE_URL}/settings`)}

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

@@ -16,4 +16,8 @@
display: none;
}
}
.label {
color: var(--color-background);
background-color: var(--color-text-pri);
}
}