Migrate some components to Sass

src/components/CharacterGrid/index.scss

@@ -9,7 +9,7 @@
     flex-wrap: wrap;
     margin: 0;
     padding: 0;
-    width: 752px;
+    width: 761px;
 }
 
 #grid_characters > * {

src/components/CharacterGrid/index.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import CharacterUnit from '~components/CharacterUnit'
 
-import './index.css'
+import './index.scss'
 
 export enum GridType {
     Class,

src/components/CharacterResult/index.tsx

@@ -3,7 +3,7 @@ import WeaponLabelIcon from '~components/WeaponLabelIcon'
 
 import images from '../../images/chara-grid/*.jpg'
 
-import './index.css'
+import './index.scss'
 
 interface Props {
     data: Character

src/components/CharacterUnit/index.scss

@@ -56,10 +56,13 @@
 
 .CharacterImage .icon {
     position: absolute;
-    color: #c9c9c9;
     height: 20px;
     width: 20px;
     z-index: 1;
+
+    svg {
+        fill: #c9c9c9;
+    }
 }
 
 .CharacterImage:hover .icon {

src/components/CharacterUnit/index.tsx

@@ -5,7 +5,7 @@ import { useModal as useModal } from '~utils/useModal'
 import SearchModal from '~components/SearchModal'
 import UncapIndicator from '~components/UncapIndicator'
 
-import './index.css'
+import './index.scss'
 
 import images from '../../images/chara-main/*.jpg'
 import Plus from '../../../assets/plus.svg'

src/components/Header/index.tsx

@@ -5,7 +5,7 @@ import { useCookies } from 'react-cookie'
 import Button from '~components/Button'
 import HeaderMenu from '~components/HeaderMenu'
 
-import './index.css'
+import './index.scss'
 
 interface Props {
     navigate: (pathname: string) => void

src/components/WeaponGrid/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import WeaponUnit from '~components/WeaponUnit'
 
-import './index.css'
+import './index.scss'
 
 // GridType
 export enum GridType {

src/components/WeaponUnit/index.scss

@@ -51,10 +51,13 @@
 
 .WeaponImage .icon {
     position: absolute;
-    color: #c9c9c9;
     height: 20px;
     width: 20px;
     z-index: 1;
+
+    svg {
+        fill: #c9c9c9;
+    }
 }
 
 .WeaponImage:hover .icon {

src/components/WeaponUnit/index.tsx

@@ -9,7 +9,7 @@ import mainImages from '../../images/weapon-main/*.jpg'
 import gridImages from '../../images/weapon-grid/*.jpg'
 import Plus from '../../../assets/plus.svg'
 
-import './index.css'
+import './index.scss'
 
 interface Props {
     onReceiveData: (weapon: Weapon, position: number) => void