From 97d0e83ddf1b399c06b48e2d64519b7d58f79a8d Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Wed, 11 Nov 2020 23:18:55 -0800 Subject: [PATCH] Migrate some components to Sass --- src/components/CharacterGrid/{index.css => index.scss} | 2 +- src/components/CharacterGrid/index.tsx | 2 +- src/components/CharacterResult/{index.css => index.scss} | 0 src/components/CharacterResult/index.tsx | 2 +- src/components/CharacterUnit/{index.css => index.scss} | 5 ++++- src/components/CharacterUnit/index.tsx | 2 +- src/components/Header/{index.css => index.scss} | 0 src/components/Header/index.tsx | 2 +- src/components/WeaponGrid/{index.css => index.scss} | 0 src/components/WeaponGrid/index.tsx | 2 +- src/components/WeaponUnit/{index.css => index.scss} | 5 ++++- src/components/WeaponUnit/index.tsx | 2 +- 12 files changed, 15 insertions(+), 9 deletions(-) rename src/components/CharacterGrid/{index.css => index.scss} (95%) rename src/components/CharacterResult/{index.css => index.scss} (100%) rename src/components/CharacterUnit/{index.css => index.scss} (96%) rename src/components/Header/{index.css => index.scss} (100%) rename src/components/WeaponGrid/{index.css => index.scss} (100%) rename src/components/WeaponUnit/{index.css => index.scss} (97%) diff --git a/src/components/CharacterGrid/index.css b/src/components/CharacterGrid/index.scss similarity index 95% rename from src/components/CharacterGrid/index.css rename to src/components/CharacterGrid/index.scss index 74ae5816..c2bb63fc 100644 --- a/src/components/CharacterGrid/index.css +++ b/src/components/CharacterGrid/index.scss @@ -9,7 +9,7 @@ flex-wrap: wrap; margin: 0; padding: 0; - width: 752px; + width: 761px; } #grid_characters > * { diff --git a/src/components/CharacterGrid/index.tsx b/src/components/CharacterGrid/index.tsx index cb2d3eb3..cb19fcb9 100644 --- a/src/components/CharacterGrid/index.tsx +++ b/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, diff --git a/src/components/CharacterResult/index.css b/src/components/CharacterResult/index.scss similarity index 100% rename from src/components/CharacterResult/index.css rename to src/components/CharacterResult/index.scss diff --git a/src/components/CharacterResult/index.tsx b/src/components/CharacterResult/index.tsx index 8126f452..c83a506e 100644 --- a/src/components/CharacterResult/index.tsx +++ b/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 diff --git a/src/components/CharacterUnit/index.css b/src/components/CharacterUnit/index.scss similarity index 96% rename from src/components/CharacterUnit/index.css rename to src/components/CharacterUnit/index.scss index 84d2cd64..feca9dc0 100644 --- a/src/components/CharacterUnit/index.css +++ b/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 { diff --git a/src/components/CharacterUnit/index.tsx b/src/components/CharacterUnit/index.tsx index e0ca2abf..253aa9c7 100644 --- a/src/components/CharacterUnit/index.tsx +++ b/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' diff --git a/src/components/Header/index.css b/src/components/Header/index.scss similarity index 100% rename from src/components/Header/index.css rename to src/components/Header/index.scss diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index 12985aa1..b84df4bb 100644 --- a/src/components/Header/index.tsx +++ b/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 diff --git a/src/components/WeaponGrid/index.css b/src/components/WeaponGrid/index.scss similarity index 100% rename from src/components/WeaponGrid/index.css rename to src/components/WeaponGrid/index.scss diff --git a/src/components/WeaponGrid/index.tsx b/src/components/WeaponGrid/index.tsx index c9fe3e0f..a9b5cd88 100644 --- a/src/components/WeaponGrid/index.tsx +++ b/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 { diff --git a/src/components/WeaponUnit/index.css b/src/components/WeaponUnit/index.scss similarity index 97% rename from src/components/WeaponUnit/index.css rename to src/components/WeaponUnit/index.scss index 57d53fa9..92766685 100644 --- a/src/components/WeaponUnit/index.css +++ b/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 { diff --git a/src/components/WeaponUnit/index.tsx b/src/components/WeaponUnit/index.tsx index 1799028a..2790276f 100644 --- a/src/components/WeaponUnit/index.tsx +++ b/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