Update darkTheme (#781)

* Update darkTheme

* Add font color variation to IconButton

front/src/generated/graphql.tsx

@@ -327,12 +327,25 @@ export type CommentThreadTargetOrderByRelationAggregateInput = {
   _count?: InputMaybe<SortOrder>;
 };
 
+export type CommentThreadTargetScalarWhereInput = {
+  AND?: InputMaybe<Array<CommentThreadTargetScalarWhereInput>>;
+  NOT?: InputMaybe<Array<CommentThreadTargetScalarWhereInput>>;
+  OR?: InputMaybe<Array<CommentThreadTargetScalarWhereInput>>;
+  commentThreadId?: InputMaybe<StringFilter>;
+  commentableId?: InputMaybe<StringFilter>;
+  commentableType?: InputMaybe<EnumCommentableTypeFilter>;
+  createdAt?: InputMaybe<DateTimeFilter>;
+  id?: InputMaybe<StringFilter>;
+  updatedAt?: InputMaybe<DateTimeFilter>;
+};
+
 export type CommentThreadTargetUpdateManyWithoutCommentThreadNestedInput = {
   connect?: InputMaybe<Array<CommentThreadTargetWhereUniqueInput>>;
   connectOrCreate?: InputMaybe<Array<CommentThreadTargetCreateOrConnectWithoutCommentThreadInput>>;
   create?: InputMaybe<Array<CommentThreadTargetCreateWithoutCommentThreadInput>>;
   createMany?: InputMaybe<CommentThreadTargetCreateManyCommentThreadInputEnvelope>;
   delete?: InputMaybe<Array<CommentThreadTargetWhereUniqueInput>>;
+  deleteMany?: InputMaybe<Array<CommentThreadTargetScalarWhereInput>>;
   disconnect?: InputMaybe<Array<CommentThreadTargetWhereUniqueInput>>;
   set?: InputMaybe<Array<CommentThreadTargetWhereUniqueInput>>;
 };

front/src/modules/ui/button/components/IconButton.tsx

@@ -5,13 +5,18 @@ export type IconButtonVariant = 'transparent' | 'border' | 'shadow' | 'white';
 
 export type IconButtonSize = 'large' | 'medium' | 'small';
 
+export type IconButtonFontColor = 'primary' | 'secondary' | 'tertiary';
+
 export type ButtonProps = {
   icon?: React.ReactNode;
   variant?: IconButtonVariant;
   size?: IconButtonSize;
+  textColor?: IconButtonFontColor;
 } & React.ComponentProps<'button'>;
 
-const StyledIconButton = styled.button<Pick<ButtonProps, 'variant' | 'size'>>`
+const StyledIconButton = styled.button<
+  Pick<ButtonProps, 'variant' | 'size' | 'textColor'>
+>`
   align-items: center;
   background: ${({ theme, variant }) => {
     switch (variant) {
@@ -61,12 +66,12 @@ const StyledIconButton = styled.button<Pick<ButtonProps, 'variant' | 'size'>>`
         return 'none';
     }
   }};
-  color: ${({ theme, disabled }) => {
+  color: ${({ theme, disabled, textColor }) => {
     if (disabled) {
       return theme.font.color.extraLight;
     }
 
-    return theme.font.color.tertiary;
+    return theme.font.color[textColor ?? 'secondary'];
   }};
   cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
   display: flex;
@@ -115,6 +120,7 @@ export function IconButton({
   title,
   variant = 'transparent',
   size = 'medium',
+  textColor = 'tertiary',
   disabled = false,
   ...props
 }: ButtonProps) {
@@ -123,6 +129,7 @@ export function IconButton({
       variant={variant}
       size={size}
       disabled={disabled}
+      textColor={textColor}
       {...props}
     >
       {icon}

front/src/modules/ui/color-scheme/components/ColorSchemeCard.tsx

@@ -8,7 +8,7 @@ import {
 } from 'framer-motion';
 
 import { Checkmark } from '@/ui/checkmark/components/Checkmark';
-import DarkNoise from '@/ui/themes/assets/dark-noise.png';
+import DarkNoise from '@/ui/themes/assets/dark-noise.jpg';
 import LightNoise from '@/ui/themes/assets/light-noise.png';
 import { grayScale } from '@/ui/themes/colors';
 import { ColorScheme } from '~/generated/graphql';

front/src/modules/ui/layout/top-bar/components/TopBar.tsx

@@ -78,6 +78,7 @@ export function TopBar({
             icon={<IconPlus size={16} />}
             size="large"
             data-testid="add-button"
+            textColor="secondary"
             onClick={onAddButtonClick}
             variant="border"
           />

front/src/modules/ui/themes/background.ts

@@ -1,4 +1,4 @@
-import DarkNoise from './assets/dark-noise.png';
+import DarkNoise from './assets/dark-noise.jpg';
 import LightNoise from './assets/light-noise.png';
 import { grayScale, rgba } from './colors';
 
@@ -16,22 +16,22 @@ export const backgroundLight = {
     light: rgba(grayScale.gray100, 0.04),
     lighter: rgba(grayScale.gray100, 0.02),
   },
-  overlay: rgba(grayScale.gray85, 0.8),
+  overlay: rgba(grayScale.gray80, 0.8),
 };
 
 export const backgroundDark = {
   noisy: `url(${DarkNoise.toString()});`,
-  primary: grayScale.gray90,
+  primary: grayScale.gray85,
-  secondary: grayScale.gray85,
+  secondary: grayScale.gray80,
-  tertiary: grayScale.gray80,
+  tertiary: grayScale.gray75,
-  quaternary: grayScale.gray75,
+  quaternary: grayScale.gray70,
   transparent: {
-    primary: rgba(grayScale.gray90, 0.8),
+    primary: rgba(grayScale.gray85, 0.8),
-    secondary: rgba(grayScale.gray85, 0.8),
+    secondary: rgba(grayScale.gray80, 0.8),
-    strong: rgba(grayScale.gray0, 0.09),
+    strong: rgba(grayScale.gray0, 0.14),
-    medium: rgba(grayScale.gray0, 0.06),
+    medium: rgba(grayScale.gray0, 0.1),
-    light: rgba(grayScale.gray0, 0.03),
+    light: rgba(grayScale.gray0, 0.06),
-    lighter: rgba(grayScale.gray0, 0.02),
+    lighter: rgba(grayScale.gray0, 0.03),
   },
-  overlay: rgba(grayScale.gray85, 0.8),
+  overlay: rgba(grayScale.gray80, 0.8),
 };

front/src/modules/ui/themes/border.ts

@@ -22,11 +22,11 @@ export const borderLight = {
 
 export const borderDark = {
   color: {
-    strong: grayScale.gray65,
+    strong: grayScale.gray55,
-    medium: grayScale.gray70,
+    medium: grayScale.gray65,
-    light: grayScale.gray75,
+    light: grayScale.gray70,
-    secondaryInverted: grayScale.gray40,
+    secondaryInverted: grayScale.gray35,
-    inverted: grayScale.gray30,
+    inverted: grayScale.gray20,
   },
   ...common,
 };

front/src/modules/ui/themes/colors.ts

@@ -2,7 +2,6 @@ import hexRgb from 'hex-rgb';
 
 export const grayScale = {
   gray100: '#000000',
-  gray95: '#0f0f0f',
   gray90: '#141414',
   gray85: '#171717',
   gray80: '#1b1b1b',
@@ -18,7 +17,7 @@ export const grayScale = {
   gray30: '#cccccc',
   gray25: '#d6d6d6',
   gray20: '#ebebeb',
-  gray15: '#f5f5f5',
+  gray15: '#f1f1f1',
   gray10: '#fcfcfc',
   gray0: '#ffffff',
 };

front/src/modules/ui/themes/font.ts

@@ -32,11 +32,11 @@ export const fontLight = {
 
 export const fontDark = {
   color: {
-    primary: grayScale.gray30,
+    primary: grayScale.gray20,
-    secondary: grayScale.gray40,
+    secondary: grayScale.gray35,
-    tertiary: grayScale.gray50,
+    tertiary: grayScale.gray45,
-    light: grayScale.gray55,
+    light: grayScale.gray50,
-    extraLight: grayScale.gray60,
+    extraLight: grayScale.gray55,
     inverted: grayScale.gray100,
   },
   ...common,

server/src/database/schema.prisma

@@ -28,7 +28,7 @@ generator nestgraphql {
 
   // CommentThread: Only Allow targets createOrConnect / createMany
   decorate_commentThreadTargets_type      = "*CommentThreadTarget*Input"
-  decorate_commentThreadTargets_field     = "*(update|upsert|updateMany|deleteMany)"
+  decorate_commentThreadTargets_field     = "*(update|upsert|updateMany)"
   decorate_commentThreadTargets_name      = "HideField"
   decorate_commentThreadTargets_from      = "@nestjs/graphql"
   decorate_commentThreadTargets_arguments = "[]"