github-starred/actual
2
0
Fork 0
mirror of https://github.com/actualbudget/actual.git synced 2026-03-22 12:30:06 -05:00
Code Issues 250 Packages Projects Releases 53 Wiki Activity

Refactor ColorPalette and ThemeInstaller components for improved layout and responsiveness

Browse Source
This commit is contained in:
Matiss Janis Aboltins
2026-03-21 20:44:35 +00:00
parent c857fc9d0f
commit edc406e3c4
2 changed files with 12 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/desktop-client/src/components/settings/ColorPalette.tsx
View File

@@ -17,7 +17,8 @@ export function ColorPalette({ colors }: ColorPaletteProps) {
gridTemplateColumns: 'repeat(3, 1fr)',
gridTemplateRows: 'repeat(2, 1fr)',
width: '100%',
height: 60,
flex: 1,
minHeight: 0,
borderRadius: 4,
overflow: 'hidden',
}}

15
packages/desktop-client/src/components/settings/ThemeInstaller.tsx
View File

@@ -8,6 +8,7 @@ import { AnimatedLoading } from '@actual-app/components/icons/AnimatedLoading';
import { baseInputStyle } from '@actual-app/components/input';
import { SpaceBetween } from '@actual-app/components/space-between';
import { Text } from '@actual-app/components/text';
import { TextOneLine } from '@actual-app/components/text-one-line';
import { theme as themeStyle } from '@actual-app/components/theme';
import { View } from '@actual-app/components/view';
@@ -310,7 +311,7 @@ export function ThemeInstaller({
...style,
display: 'flex',
gap: THEME_ITEM_GAP,
padding: `0 ${THEME_ITEM_PADDING}px`,
padding: `0 ${THEME_ITEM_PADDING}px ${THEME_ITEM_GAP}px`,
}}
>
{rowThemes.map((theme, themeIndex) => {
@@ -334,6 +335,7 @@ export function ThemeInstaller({
width: itemWidth,
height: itemWidth,
padding: 8,
overflow: 'hidden',
borderRadius: 6,
border: `2px solid ${
hasError
@@ -383,23 +385,26 @@ export function ThemeInstaller({
/>
</View>
<ColorPalette colors={theme.colors} />
<Text
<TextOneLine
style={{
fontSize: 12,
fontWeight: 500,
textAlign: 'center',
width: '100%',
}}
title={theme.name}
>
{theme.name}
</Text>
</TextOneLine>
<SpaceBetween
direction="horizontal"
align="center"
wrap={false}
gap={4}
style={{ fontSize: 10 }}
>
<Text
<TextOneLine
style={{
color: themeStyle.pageTextSubdued,
}}
@@ -408,7 +413,7 @@ export function ThemeInstaller({
<Text style={{ fontWeight: 'bold' }}>
{extractRepoOwner(theme.repo)}
</Text>
</Text>
</TextOneLine>
<Link
variant="external"
to={normalizeGitHubRepo(theme.repo)}