[fix] fix table pagination and createIcon (#257)

someengineering · Jun 19, 2024 · 1e34d29 · 1e34d29
1 parent bb16659
commit 1e34d29
Show file tree

Hide file tree

Showing 23 changed files with 264 additions and 174 deletions.
diff --git a/src/assets/icons/aws-logo.svg b/src/assets/icons/aws-logo.svg
diff --git a/src/assets/icons/azure-logo.svg b/src/assets/icons/azure-logo.svg
diff --git a/src/assets/icons/createIcon.tsx b/src/assets/icons/createIcon.tsx
@@ -3,14 +3,17 @@ import { FC, FunctionComponent, SVGProps, forwardRef } from 'react'
 
 type SvgIconProps = SVGProps<SVGSVGElement> & { title?: string; nonce?: string }
 
-export const createIcon = (Icon: FunctionComponent<SvgIconProps>) => {
+export const createIcon = (Icon: FunctionComponent<SvgIconProps>, colors?: [string, string?]) => {
+  const whiteColor = colors?.[0]
+  const darkColor = colors?.[1]
   const SvgIconComp: FC<SvgIconProps> = forwardRef(({ color, fill, ...props }, ref) => {
     const { palette } = useTheme()
     type KeyOfPalette = 'common'
     type PaletteAsObject = Palette[KeyOfPalette]
     type KeyOfPaletteAsObject = keyof PaletteAsObject
-    let iconColor = fill || color || palette.primary.main
-    const [firstColorKey, secondColorKey] = (color?.split('.') ?? []) as KeyOfPalette[]
+    let iconColor =
+      fill || color || (colors ? (palette.mode === 'dark' ? darkColor || whiteColor : whiteColor) : undefined) || palette.common.black
+    const [firstColorKey, secondColorKey] = (iconColor?.split('.') ?? []) as KeyOfPalette[]
     if (
       !fill &&
       firstColorKey &&
@@ -20,7 +23,7 @@ export const createIcon = (Icon: FunctionComponent<SvgIconProps>) => {
     ) {
       iconColor = palette[firstColorKey][secondColorKey as KeyOfPaletteAsObject]
     }
-    return <Icon {...props} ref={ref} fill={iconColor} />
+    return <Icon key={iconColor} {...props} ref={ref} fill={iconColor} />
   })
   SvgIconComp.displayName = Icon.displayName || Icon.name
   return SvgIconComp

diff --git a/src/assets/icons/index.ts b/src/assets/icons/index.ts
@@ -1,4 +1,5 @@
 import AwsLogoComp from './aws-logo.svg?react'
+import AzureLogoComp from './azure-logo.svg?react'
 import { createIcon } from './createIcon'
 import CrownComp from './crown.svg?react'
 import DiscordIconComp from './discord-icon.svg?react'
@@ -22,6 +23,7 @@ export const DiscordWithTextLogo = createIcon(DiscordWithTextLogoComp)
 export const FixBetaLogo = createIcon(FixBetaLogoComp)
 export const FixLogo = createIcon(FixLogoComp)
 export const GcpLogo = createIcon(GcpLogoComp)
+export const AzureLogo = createIcon(AzureLogoComp)
 export const GithubSEBIcon = createIcon(GithubSEBIconComp)
 export const GoogleSEBIcon = createIcon(GoogleSEBIconComp)
 export const LogoWhiteNoBackground = createIcon(LogoWhiteNoBackgroundComp)