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

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`)}