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

Style updates and bugfixes

Browse Source
This commit is contained in:
Sean Edmunds
2025-07-17 17:01:31 -05:00
parent ea216e9da2
commit 5e5a077ec3
48 changed files with 565 additions and 524 deletions
Download Patch File Download Diff File Expand all files Collapse all files

227
src/pages/settings/components/Theming/Themes/ThemeModalContent.tsx Normal file
View File

@@ -0,0 +1,227 @@
import { Select, Stack, Text } from '@mantine/core';
import SearchSelectItem from 'pages/homepage/components/Search/SearchSelectItem';
import { selectClasses } from 'styles';
import type { Theme } from 'types';
import { ThemeExampleApp } from './ThemeExampleApp';
export function ThemeModalContent({ selectedTheme }: { selectedTheme: Theme }) {
return (
<Stack
style={{
backgroundImage:
selectedTheme?.backgroundImage.toLocaleLowerCase() !== 'none'
? `linear-gradient(${selectedTheme?.backgroundColor}33, ${selectedTheme?.backgroundColor}33), url(../../api/backgroundImages/${selectedTheme?.backgroundImage})`
: undefined,
backgroundSize:
selectedTheme?.backgroundImage.toLocaleLowerCase() !== 'none'
? 'cover'
: undefined,
backgroundColor:
selectedTheme?.backgroundImage.toLocaleLowerCase() === 'none'
? selectedTheme?.backgroundColor
: undefined,
backgroundPosition: 'center',
borderRadius: '10px',
border: '2px solid var(--mantine-color-primary-0)',
padding: '1rem',
}}
align='center'
>
<Select
disabled
w={'80%'}
classNames={selectClasses}
className={selectClasses.searchExample}
styles={{
input: {
color: selectedTheme?.primaryColor,
borderBottom: `thin solid ${selectedTheme?.borderColor}`,
backgroundColor: `color-mix(in srgb, ${selectedTheme?.searchColor}, transparent 50%)`,
},
}}
data={[
{
label: 'Google Search',
value: 'google',
},
]}
searchValue={'example search'}
data-active={true}
dropdownOpened={true}
autoFocus={false}
leftSection={'Google Search'}
rightSection={<div />}
renderOption={(item: any) => {
return (
<SearchSelectItem
item={item}
handleSearchHistoryItem={undefined}
searchEndpoint={undefined}
/>
);
}}
/>
<Stack gap={0} w={'100%'}>
<Text
pl={'1.5rem'}
style={{
textDecoration: 'underline',
fontSize: '1.25rem',
fontWeight: 200,
fontStyle: 'italic',
height: '10px',
textTransform: 'uppercase',
marginTop: '1.25rem',
marginBottom: '1.25rem',
color: selectedTheme?.primaryColor,
}}
>
Applications
</Text>
<Stack
style={{
gap: '.25rem',
backgroundSize: 'cover',
borderBottom: '0px solid',
display: 'grid',
gridColumnGap: '5px',
gridRowGap: '5px',
gridTemplateColumns: '1fr 1fr 1fr',
gridTemplateRows: '64px',
padding: '1rem',
paddingTop: 0,
justifyContent: 'center',
alignContent: 'center',
}}
>
<ThemeExampleApp selectedTheme={selectedTheme} />
<ThemeExampleApp selectedTheme={selectedTheme} />
<ThemeExampleApp selectedTheme={selectedTheme} />
</Stack>
</Stack>
<Stack gap={0} w={'100%'}>
<Text
pl={'1.5rem'}
style={{
textDecoration: 'underline',
fontSize: '1.25rem',
fontWeight: 200,
fontStyle: 'italic',
height: '10px',
textTransform: 'uppercase',
marginTop: '1.25rem',
marginBottom: '1.25rem',
color: selectedTheme?.primaryColor,
}}
>
Bookmarks
</Text>
<Stack
style={{
width: '100%',
display: 'flex',
flexDirection: 'row',
flexWrap: 'nowrap',
gridColumnGap: '20px',
gridRowGap: '0px',
gridTemplateColumns: '1fr 1fr 1fr 1fr 1fr',
gridTemplateRows: 'auto',
}}
>
<Stack
style={{
width: '100%',
marginBottom: 0,
display: 'block',
lineHeight: '1.5rem',
padding: '1rem',
paddingTop: 0,
}}
>
<Text
style={{
fontSize: '.875rem',
height: '10px',
width: 'auto',
color: selectedTheme?.accentColor,
textTransform: 'uppercase',
marginTop: '1.25rem',
marginBottom: '1.25rem',
}}
>
Example Category
</Text>
<Text
style={{
display: 'block',
fontSize: '.875rem',
lineHeight: 2,
color: selectedTheme?.primaryColor,
}}
component='a'
>
{'Bookmark 1'}
</Text>
<Text
style={{
display: 'block',
fontSize: '.875rem',
lineHeight: 2,
color: selectedTheme?.primaryColor,
}}
component='a'
>
{'Bookmark 2'}
</Text>
</Stack>
<Stack
style={{
width: '100%',
marginBottom: 0,
display: 'block',
lineHeight: '1.5rem',
padding: '1rem',
paddingTop: 0,
}}
>
<Text
style={{
fontSize: '.875rem',
height: '10px',
width: 'auto',
color: selectedTheme?.accentColor,
textTransform: 'uppercase',
marginTop: '1.25rem',
marginBottom: '1.25rem',
}}
>
Example Category
</Text>
<Text
style={{
display: 'block',
fontSize: '.875rem',
lineHeight: 2,
color: selectedTheme?.primaryColor,
}}
component='a'
>
{'Bookmark 1'}
</Text>
<Text
style={{
display: 'block',
fontSize: '.875rem',
lineHeight: 2,
color: selectedTheme?.primaryColor,
}}
component='a'
>
{'Bookmark 2'}
</Text>
</Stack>
</Stack>
</Stack>
</Stack>
);
}