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

Style uniformity

Browse Source
This commit is contained in:
Sean Edmunds
2025-06-12 16:33:42 -05:00
parent fb70df76f1
commit 29514d3290
47 changed files with 316 additions and 377 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/pages/homepage/components/Applications/AppItem.tsx
View File

@@ -44,12 +44,12 @@ function AppItem({ url, icon, name }: { url: string; icon: string; name: string
style={{
height: '64px',
width: isMobile ? '100%' : undefined,
marginRight: isMobile ? '0' : '1em',
marginLeft: isMobile ? '0' : '1em',
paddingTop: isMobile ? '0' : '15px',
marginRight: isMobile ? 0 : '1rem',
marginLeft: isMobile ? 0 : '1rem',
paddingTop: isMobile ? 0 : '1rem',
}}
>
{Icon && <Icon style={{ height: '32px', width: '32px' }} />}
{Icon && <Icon style={{ height: '2rem', width: '2rem' }} />}
</Stack>
<Stack
style={{

2
src/pages/homepage/components/Bookmarks/BookmarkGroups.tsx
View File

@@ -10,7 +10,7 @@ function BookmarkGroups({
return (
<Stack
style={{
marginBottom: '0em',
marginBottom: 0,
display: 'block',
lineHeight: '1.5rem',
overflow: 'hidden',

5
src/pages/homepage/components/Bookmarks/BookmarkItem.tsx
View File

@@ -9,11 +9,6 @@ function BookmarkItem({ bookmark }: { bookmark: Bookmark }) {
classNames={textClasses}
component='a'
href={bookmark.url}
style={{
textOverflow: 'ellipsis',
overflow: 'hidden',
width: '100%',
}}
>
{bookmark.name}
</Text>

6
src/pages/homepage/components/Header/Header.tsx
View File

@@ -138,15 +138,15 @@ function Header({
component='h2'
className={textClasses.dateTime}
classNames={textClasses}
mr={4}
mr={'.25rem'}
>
{current.temperature}°F
</Text>
<Text
className={textClasses.dateTime}
classNames={textClasses}
fz={14}
mb={6}
fz={'.875rem'}
mb={'.375rem'}
>
{current.highTemp}°F/{current.lowTemp}°F
</Text>

6
src/pages/homepage/components/Header/LargeHeader.tsx
View File

@@ -70,7 +70,7 @@ function LargeHeader({
<Text
className={textClasses.greeting}
classNames={textClasses}
fz={isMobile ? 24 : 96}
fz={isMobile ? '2rem' : '6rem'}
>
{greet
.replace('$firstName', currentUser.firstName)
@@ -79,7 +79,7 @@ function LargeHeader({
.replace('$^lastName', currentUser.lastName.toUpperCase())}
</Text>
<Text
fz={36}
fz={'2.25rem'}
className={textClasses.dateTime}
classNames={textClasses}
m={0}
@@ -88,7 +88,7 @@ function LargeHeader({
{date}
</Text>
<Text
fz={96}
fz={'6rem'}
fw={400}
m={0}
className={textClasses.dateTime}

190
src/pages/homepage/components/Search/Search.tsx
View File

@@ -75,10 +75,6 @@ export default function Search({
open(`${url}${option.searchTerm}`, '_self');
};
const handleAppSearchItem = (item: any) => {
open(`https://${item.option.url}`, '_self');
};
const handleKeyPress = (item: any) => {
let option = '';
let subtext = '';
@@ -278,115 +274,23 @@ export default function Search({
function RenderOption(item: any) {
const [showFillButton, setShowFillButton] = useState(false);
if (item.option.searchTerm !== undefined) {
const m = new Date(item.option.dateTimeStamp);
const year = `${m.getUTCFullYear()}`.slice(-2);
const month = `0${m.getUTCMonth() + 1}`.slice(-2);
const day = `0${m.getUTCDate()}`.slice(-2);
const hours = `0${m.getUTCHours()}`.slice(-2);
const minutes = `0${m.getUTCMinutes()}`.slice(-2);
const dateString = isMobile
? `${month}/${day}/${year}`
: `${month}/${day}/${year} ${hours}:${minutes}`;
return (
<Group
w={'100%'}
display={'flex'}
justify={'space-between'}
gap={0}
onClick={() => {
handleSearchHistoryItem(item);
}}
onMouseEnter={() => {
setShowFillButton(true);
}}
onMouseLeave={() => {
setShowFillButton(false);
}}
>
<Group m={0} p={0} miw={'160px'} style={{ overflow: 'hidden' }}>
<Text
style={{
backgroundColor: `${theme.primaryColor}33`,
fontWeight: 600,
borderRadius: '15px',
padding: '5px',
}}
>
{item.option.provider}
</Text>
{showFillButton && (
<ActionIcon
className={actionIconClasses.selectOptionActions}
classNames={actionIconClasses}
onClick={(e) => {
e.stopPropagation();
setSearchValue(`${item.option.prefix} ${item.option.searchTerm}`);
}}
>
<FiEdit />
</ActionIcon>
)}
</Group>
<Group
m={0}
p={0}
gap={0}
justify='space-between'
w={'65%'}
style={{
whiteSpace: 'nowrap',
overflow: 'hidden',
boxSizing: 'border-box',
position: 'relative',
}}
>
<Text
w={'75%'}
c={'var(--mantine-color-primary-0)'}
style={{
overflow: 'hidden',
textOverflow: 'ellipsis',
}}
>
{item.option.searchTerm}
</Text>
<Text
w={'25%'}
style={{
color: `${theme.primaryColor}55`,
textAlign: 'right',
}}
>
{dateString}
</Text>
</Group>
<Group m={0} p={0} right={16} w={'24px'}>
{showFillButton && (
<ActionIcon
className={actionIconClasses.selectOptionActions}
classNames={actionIconClasses}
onClick={(e) => {
e.stopPropagation();
mutateAsync({
method: 'DELETE',
endpoint: searchEndpoint,
body: { id: item.option.id },
});
}}
>
<FiTrash />
</ActionIcon>
)}
</Group>
</Group>
);
}
const m = new Date(item.option.dateTimeStamp);
const year = `${m.getUTCFullYear()}`.slice(-2);
const month = `0${m.getUTCMonth() + 1}`.slice(-2);
const day = `0${m.getUTCDate()}`.slice(-2);
const hours = `0${m.getUTCHours()}`.slice(-2);
const minutes = `0${m.getUTCMinutes()}`.slice(-2);
const dateString = isMobile
? `${month}/${day}/${year}`
: `${month}/${day}/${year} ${hours}:${minutes}`;
return (
<Group
w={'100%'}
display={'flex'}
justify={'space-between'}
gap={0}
onClick={() => {
handleAppSearchItem(item);
handleSearchHistoryItem(item);
}}
onMouseEnter={() => {
setShowFillButton(true);
@@ -395,28 +299,81 @@ export default function Search({
setShowFillButton(false);
}}
>
<Group w={'15%'}>
<Group m={0} p={0} miw={'160px'} style={{ overflow: 'hidden' }}>
<Text
style={{
backgroundColor: `${theme.primaryColor}33`,
fontWeight: 600,
borderRadius: '15px',
padding: '5px',
padding: '.25rem',
}}
>
{item.option.label}
{item.option.provider}
</Text>
{showFillButton && (
<ActionIcon
className={actionIconClasses.selectOptionActions}
classNames={actionIconClasses}
onClick={(e) => {
e.stopPropagation();
setSearchValue(`${item.option.prefix} ${item.option.searchTerm}`);
}}
>
<FiEdit />
</ActionIcon>
)}
</Group>
<Group justify='space-between' w={'80%'}>
<Text c={'var(--mantine-color-primary-0)'}>{item.option.searchTerm}</Text>
<Group
m={0}
p={0}
gap={0}
justify='space-between'
w={'65%'}
style={{
whiteSpace: 'nowrap',
overflow: 'hidden',
boxSizing: 'border-box',
position: 'relative',
}}
>
<Text
w={'75%'}
c={'var(--mantine-color-primary-0)'}
style={{
overflow: 'hidden',
textOverflow: 'ellipsis',
}}
>
{item.option.searchTerm}
</Text>
<Text
w={'25%'}
style={{
color: `${theme.primaryColor}55`,
textAlign: 'right',
}}
>
{item.option.value}
{dateString}
</Text>
</Group>
<Group m={0} p={0} right={'1rem'} w={'24px'}>
{showFillButton && (
<ActionIcon
className={actionIconClasses.selectOptionActions}
classNames={actionIconClasses}
onClick={(e) => {
e.stopPropagation();
mutateAsync({
method: 'DELETE',
endpoint: searchEndpoint,
body: { id: item.option.id },
});
}}
>
<FiTrash />
</ActionIcon>
)}
</Group>
</Group>
);
}
@@ -465,6 +422,7 @@ export default function Search({
.slice(0, 10);
setFilteredHistory(filtered);
}, [searchValue]);
return (
<Stack
style={{
@@ -472,7 +430,7 @@ export default function Search({
backgroundColor: 'transparent',
textAlign: 'center',
position: 'relative',
padding: '.3em',
padding: '.3rem',
display: 'inline-block',
gap: 0,
}}

36
src/pages/homepage/components/SettingsButton/SettingsButton.tsx
View File

@@ -255,11 +255,11 @@ function SettingsButton() {
</ActionIcon>
</Tooltip>
</Group>
<Text fw={'bold'} fz={18}>
<Text fw={'bold'} fz={'1.125rem'}>
Currently:{' '}
</Text>
{theme.name}
<Text fw={'bold'} fz={18}>
<Text fw={'bold'} fz={'1.125rem'}>
Playlist:{' '}
</Text>
<Select
@@ -325,22 +325,22 @@ function SettingsButton() {
>
<Text
style={{
fontSize: 12,
paddingLeft: 8,
paddingRight: 8,
paddingTop: 2,
paddingBottom: 2,
fontSize: '.75rem',
paddingLeft: '.5rem',
paddingRight: '.5rem',
paddingTop: '.125rem',
paddingBottom: '.125rem',
borderRadius: 8,
position: 'absolute',
left: '-12px',
top: '-8px',
left: -12,
top: -8,
backgroundColor: 'var(--mantine-color-primary-0)',
color: 'var(--mantine-color-background-0)',
}}
>
Apps
</Text>
<Text fz={14} mt={16}>
<Text fz={'.875rem'} mt={'1rem'}>
Density
</Text>
<Stack m={0} p={0} gap={0} w={'90%'}>
@@ -409,22 +409,22 @@ function SettingsButton() {
>
<Text
style={{
fontSize: 12,
paddingLeft: 8,
paddingRight: 8,
paddingTop: 2,
paddingBottom: 2,
fontSize: '.75rem',
paddingLeft: '.5rem',
paddingRight: '.5rem',
paddingTop: '.125rem',
paddingBottom: '.125rem',
borderRadius: 8,
position: 'absolute',
left: '-12px',
top: '-8px',
left: -12,
top: -8,
backgroundColor: 'var(--mantine-color-primary-0)',
color: 'var(--mantine-color-background-0)',
}}
>
Bookmarks
</Text>
<Text fz={14} mt={16}>
<Text fz={'.875rem'} mt={'1rem'}>
Density
</Text>
<Stack m={0} p={0} gap={0} w={'90%'}>