From a49780f5f00d240cfc8b564c6f2c81526a3eaa65 Mon Sep 17 00:00:00 2001
From: Griffithtp <griffithtp@gmail.com>
Date: Fri, 5 Jul 2019 22:06:33 +0100
Subject: [PATCH] refactor: remove scss from PackageList component

---
 src/components/PackageList/PackageList.tsx  |  3 +--
 src/components/PackageList/packageList.scss | 12 ------------
 src/components/PackageList/styles.ts        | 17 +++++++++++++++++
 3 files changed, 18 insertions(+), 14 deletions(-)
 delete mode 100644 src/components/PackageList/packageList.scss
 create mode 100644 src/components/PackageList/styles.ts

diff --git a/src/components/PackageList/PackageList.tsx b/src/components/PackageList/PackageList.tsx
index ef281a4..835d10d 100644
--- a/src/components/PackageList/PackageList.tsx
+++ b/src/components/PackageList/PackageList.tsx
@@ -7,8 +7,7 @@ import Help from '../Help';
 import { formatLicense } from '../../utils/package';
 import { PackageInterface } from '../Package/Package';
 
-// @ts-ignore
-import classes from './packageList.scss';
+import * as classes from './styles';
 
 interface Props {
   packages: PackageInterface[];
diff --git a/src/components/PackageList/packageList.scss b/src/components/PackageList/packageList.scss
deleted file mode 100644
index 26d77bf..0000000
--- a/src/components/PackageList/packageList.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-@import '../../styles/mixins';
-
-.pkgContainer {
-  margin: 0;
-  padding: 0;
-
-  .listTitle {
-    font-weight: $font-weight-regular;
-    font-size: $font-size-xl;
-    margin: 0 0 10px 0;
-  }
-}
diff --git a/src/components/PackageList/styles.ts b/src/components/PackageList/styles.ts
new file mode 100644
index 0000000..6eb05f5
--- /dev/null
+++ b/src/components/PackageList/styles.ts
@@ -0,0 +1,17 @@
+import { css } from 'emotion';
+import { fontWeight, fontSize } from '../../utils/styles/sizes';
+
+export const listTitle = css({
+  fontWeight: fontWeight.regular,
+  fontSize: fontSize.xl,
+  margin: `0 0 10px 0`,
+});
+
+export const pkgContainer = css`
+  margin: 0;
+  padding: 0;
+
+  & .listTitle {
+    ${listTitle}
+  }
+`;