refactor: typescript cleanup renderer

src/App.tsx

@@ -1,12 +1,12 @@
-import React, { useEffect } from 'react'
 import { ConfigProvider, Layout, message, Modal, notification, theme } from 'antd'
-import Tabs from 'components/Tabs'
 import { LayoutHeader } from 'components/LayoutHeader'
 import { LayoutSider } from 'components/LayoutSider'
 import { SettingsDrawer } from 'components/SettingsDrawer'
-import { checkForUpdatesNotification } from 'lib/notifications'
-import { Gradient } from 'lib/gradient'
+import Tabs from 'components/Tabs'
 import DB from 'lib/db'
+import { Gradient } from 'lib/gradient'
+import { checkForUpdatesNotification } from 'lib/notifications'
+import React, { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 
 const { getDesignToken } = theme
@@ -101,9 +101,6 @@ const App = () => {
           Notification: {
             width: 450,
           },
-          Search: {
-            colorBgContainer: '#333aaa',
-          },
         },
         algorithm: theme.darkAlgorithm,
       }}

src/components/RelicFilterBar.tsx

@@ -1,24 +1,24 @@
+import { ClearOutlined } from '@ant-design/icons'
 import { Button, Flex, Select, theme, Tooltip, Typography } from 'antd'
-import React, { useEffect, useMemo, useState } from 'react'
-import { RelicScorer } from 'lib/relicScorerPotential'
 import CheckableTag from 'antd/lib/tag/CheckableTag'
 import { HeaderText } from 'components/HeaderText'
-import { TooltipImage } from './TooltipImage'
+import CharacterSelect from 'components/optimizerTab/optimizerForm/CharacterSelect'
+import { SettingOptions } from 'components/SettingsDrawer'
+import { useSubscribe } from 'hooks/useSubscribe'
+import { Assets } from 'lib/assets'
+import { Constants, Sets, SetsRelics, setToId, Stats, UnreleasedSets } from 'lib/constants'
 import DB, { DBMetadataCharacter } from 'lib/db'
 import { Hint } from 'lib/hint'
-import { Utils } from 'lib/utils'
-import { Constants, Sets, SetsRelics, setToId, Stats, UnreleasedSets } from 'lib/constants'
-import { Assets } from 'lib/assets'
-import { useSubscribe } from 'hooks/useSubscribe'
+import { RelicScorer } from 'lib/relicScorerPotential'
 import { Renderer } from 'lib/renderer'
-import CharacterSelect from 'components/optimizerTab/optimizerForm/CharacterSelect'
-import { ClearOutlined } from '@ant-design/icons'
 import { SaveState } from 'lib/saveState'
-import { SettingOptions } from 'components/SettingsDrawer'
+import { TsUtils } from 'lib/TsUtils'
+import { Utils } from 'lib/utils'
+import React, { useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Relic } from 'types/Relic'
 import { ReactElement } from 'types/Components'
-import { TsUtils } from 'lib/TsUtils'
+import { Relic } from 'types/Relic'
+import { TooltipImage } from './TooltipImage'
 
 const { useToken } = theme
 const { Text } = Typography
@@ -115,10 +115,10 @@ export default function RelicFilterBar(props: {
   }
 
   function generateEquippedByTags(arr: string[]) {
-    return arr.map((x: string) => {
+    return arr.map((equippedBy: string) => {
       return {
-        key: x,
-        display: Renderer.renderEquippedBy({ equippedBy: x }),
+        key: equippedBy,
+        display: Renderer.renderEquippedBy(equippedBy),
       }
     })
   }

src/lib/renderer.tsx

@@ -1,10 +1,10 @@
-import { Flex, Image, Tooltip } from 'antd'
 import { CheckCircleFilled, CloseCircleFilled } from '@ant-design/icons'
-import { Constants } from 'lib/constants'
-import { Assets } from 'lib/assets'
-import { Utils } from './utils'
+import { Flex, Image, Tooltip } from 'antd'
 import i18next from 'i18next'
+import { Assets } from 'lib/assets'
+import { Constants } from 'lib/constants'
 import { Relic, Stat } from 'types/Relic'
+import { Utils } from './utils'
 
 export const Renderer = {
   floor: (x: { value: number }) => {
@@ -195,7 +195,7 @@ export const Renderer = {
         : <div style={{ width: 14, height: 14, borderRadius: '50%', background: color }}/>
     )
   },
-  renderEquippedBy: ({ equippedBy }) => {
+  renderEquippedBy: (equippedBy: string) => {
     return (
       equippedBy == 'true'
         ? <CheckCircleFilled style={{ fontSize: '14px', color: '#6de362' }}/>