Skip to content

Commit

Permalink
fix: adjust dimmed colors for dark theme [800]
Browse files Browse the repository at this point in the history
  • Loading branch information
@DaniilVysotskiy
DaniilVysotskiy committed Jan 17, 2025
1 parent 20ef767 commit 8084ba4
Show file tree
Hide file tree
Showing 4 changed files with 39 additions and 15 deletions.
12 changes: 7 additions & 5 deletions Sigrun/app/components/GameListing.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@

import { GameResult, Player } from '../clients/proto/atoms.pb';
import { CSSProperties } from 'react';
import { Anchor, Badge, Button, Group, List, Stack, Text } from '@mantine/core';
import { Anchor, Badge, Button, Group, List, Stack, Text, useMantineColorScheme } from '@mantine/core';
import { useMediaQuery } from '@mantine/hooks';
import { PlayerAvatar } from './PlayerAvatar';
import * as React from 'react';
Expand All @@ -26,6 +26,7 @@ import { useI18n } from '../hooks/i18n';
import { makeLog } from '../helpers/gameLog';
import { IconShare } from '@tabler/icons-react';
import { YakitoriIndicator } from './YakitoriIndicator';
import { calcDimmedColors } from 'helpers/theme';

type GameListingProps = {
eventId: string;
Expand All @@ -52,6 +53,7 @@ export const GameListing: React.FC<GameListingProps> = ({
const largeScreen = useMediaQuery('(min-width: 768px)');
const DataCmp = largeScreen ? Group : Stack;
const winds = ['東', '南', '西', '北'];
const isDark = useMantineColorScheme().colorScheme === 'dark';

const outcomes = { ron: 0, tsumo: 0, draw: 0, chombo: 0, nagashi: 0 };
const yakitori = withYakitori
Expand Down Expand Up @@ -123,8 +125,8 @@ export const GameListing: React.FC<GameListingProps> = ({
pr={0}
pl={5}
size='lg'
color={isDimmed ? '#edf2f7' : '#e3fafc'}
c={isDimmed ? '#40678c' : '#228be6'}
color={calcDimmedColors(isDimmed, isDark, true)}
c={calcDimmedColors(isDimmed, isDark, false)}
radius='xl'
style={{ fontSize: '16px' }}
rightSection={
Expand Down Expand Up @@ -169,8 +171,8 @@ export const GameListing: React.FC<GameListingProps> = ({
<Badge
w={65}
size='lg'
color={isDimmed ? '#edf2f7' : '#e3fafc'}
c={isDimmed ? '#40678c' : '#228be6'}
color={calcDimmedColors(isDimmed, isDark, true)}
c={calcDimmedColors(isDimmed, isDark, false)}
radius='sm'
style={{ padding: 0 }}
>
Expand Down
20 changes: 20 additions & 0 deletions Sigrun/app/helpers/theme.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,3 +147,23 @@ export function getThemeOptions(isDimmed = false): MantineThemeOverride {

return themeOptions;
}

export function calcDimmedColors(isDimmed = false, isDark = false, isBackground = false, isSpecial = false): string {
if (!isDark && isBackground) {
return isDimmed ? '#edf2f7' : isSpecial ? '#e7f5ff' : '#e3fafc';
}

if (!isDark && !isBackground) {
return isDimmed ? '#40678c' : '#228be6';
}

if (isDark && isBackground) {
return isDimmed ? '#14283a' : '#14283a';
}

if (isDark && !isBackground) {
return isDimmed ? '#40678c' : '#228be6';
}

return isDimmed ? '#edf2f7' : '#e3fafc';
}
9 changes: 5 additions & 4 deletions Sigrun/app/pages/PlayerStats.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ import { IconChevronLeft, IconChevronRight, IconInfoCircle, IconX } from '@table
import { useEvent } from '../hooks/useEvent';
import { Meta } from '../components/Meta';
import { useStorage } from 'hooks/storage';
import { calcDimmedColors } from 'helpers/theme';

const HandsGraph = React.lazy(() => import('../components/HandsGraph'));
const YakuGraph = React.lazy(() => import('../components/YakuGraph'));
Expand Down Expand Up @@ -234,8 +235,8 @@ export const PlayerStats: React.FC<{ params: { eventId: string; playerId: string
<Badge
w={50}
size='xl'
color={isDimmed ? '#edf2f7' : '#e7f5ff'}
c={isDimmed ? '#40678c' : '#228be6'}
color={calcDimmedColors(isDimmed, isDark, true, true)}
c={calcDimmedColors(isDimmed, isDark, false)}
radius='sm'
style={{ padding: 0, fontSize: '22px' }}
>
Expand Down Expand Up @@ -267,8 +268,8 @@ export const PlayerStats: React.FC<{ params: { eventId: string; playerId: string
<Badge
w={65}
size='lg'
color={isDimmed ? '#edf2f7' : '#e3fafc'}
c={isDimmed ? '#40678c' : '#228be6'}
color={calcDimmedColors(isDimmed, isDark, true)}
c={calcDimmedColors(isDimmed, isDark, false)}
radius='sm'
style={{ padding: 0 }}
>
Expand Down
13 changes: 7 additions & 6 deletions Sigrun/app/pages/RatingTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ import { TeamTable } from '../components/TeamTable';
import { Meta } from '../components/Meta';
import { authCtx } from '../hooks/auth';
import { useStorage } from 'hooks/storage';
import { calcDimmedColors } from 'helpers/theme';

export const RatingTable: React.FC<{
params: {
Expand Down Expand Up @@ -303,8 +304,8 @@ export const RatingTable: React.FC<{
<Badge
size='lg'
radius='sm'
color={isDimmed ? '#edf2f7' : '#e3fafc'}
c={isDimmed ? '#40678c' : '#228be6'}
color={calcDimmedColors(isDimmed, isDark, true)}
c={calcDimmedColors(isDimmed, isDark, false)}
variant={orderBy === 'avg_place' ? 'filled' : 'light'}
component={'a'}
pl={5}
Expand Down Expand Up @@ -414,8 +415,8 @@ export const RatingTable: React.FC<{
<Badge
w={50}
size='xl'
color={isDimmed ? '#edf2f7' : '#e7f5ff'}
c={isDimmed ? '#40678c' : '#228be6'}
color={calcDimmedColors(isDimmed, isDark, true, true)}
c={calcDimmedColors(isDimmed, isDark, false)}
radius='sm'
style={{ padding: 0 }}
>
Expand Down Expand Up @@ -478,8 +479,8 @@ export const RatingTable: React.FC<{
<Badge
w={45}
size='lg'
color={isDimmed ? '#edf2f7' : '#e3fafc'}
c={isDimmed ? '#40678c' : '#228be6'}
color={calcDimmedColors(isDimmed, isDark, true)}
c={calcDimmedColors(isDimmed, isDark, false)}
variant={orderBy === 'avg_place' ? 'filled' : 'light'}
radius='sm'
style={{ padding: 0 }}
Expand Down

0 comments on commit 8084ba4

Please sign in to comment.