fix: refactoring

hackforplay · Nov 19, 2019 · 70f9172 · 70f9172
1 parent 78cded2
commit 70f9172
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 53 deletions.
diff --git a/src/StoreView.tsx b/src/StoreView.tsx
@@ -3,9 +3,9 @@ import * as React from 'react';
 import { useDispatch } from 'react-redux';
 import { IconButton } from './Button';
 import './completion';
-import view from './styles/code-view.scss';
-import flex from './styles/flex.scss';
 import { actions, EditorMode } from './store';
+import flex from './styles/flex.scss';
+import style from './styles/store-view.scss';
 
 export interface StoreViewProps {}
 
@@ -29,21 +29,21 @@ export function Installer({ needPayment }: Installer) {
   }, []);
 
   return (
-    <div className={view.installer}>
-      <div className={classNames(view.header, flex.horizontal)}>
+    <div className={style.installer}>
+      <div className={classNames(style.header, flex.horizontal)}>
         <img
           src="https://assets.hackforplay.xyz/img/93a1462a4800cccde0887f580ef46298.png"
           alt=""
         />
-        <h2 className={view.name}>ASSET NAME</h2>
-        <span className={view.paid}>PAID ITEM</span>
+        <h2 className={style.name}>ASSET NAME</h2>
+        <span className={style.paid}>PAID ITEM</span>
         <img
           src="https://i.gyazo.com/476dade56d5b2c344a83de22d66a7d17.gif"
           alt=""
-          className={view.gif}
+          className={style.gif}
         />
       </div>
-      <div className={view.description}>
+      <div className={style.description}>
         ASSET DESCRIPTION ASSET DESCRIPTION ASSET DESCRIPTION ASSET DESCRIPTION
       </div>
       <IconButton
@@ -58,7 +58,7 @@ export function Installer({ needPayment }: Installer) {
       {needPayment ? (
         <>
           <h2>How can I use this item?</h2>
-          <div className={view.description}>
+          <div className={style.description}>
             Join paid plan to get all items now
           </div>
           <IconButton name="open_in_new" lg accent>

diff --git a/src/styles/code-view.scss b/src/styles/code-view.scss
@@ -1,8 +1,6 @@
 @import 'color';
 @import 'shadow';
 
-$padding: 4px;
-
 .header {
   position: sticky;
   position: -webkit-sticky;
@@ -25,45 +23,3 @@ $padding: 4px;
     color: $textColor;
   }
 }
-
-.installer {
-  width: 50%;
-  padding-left: $padding;
-
-  .header {
-    height: 64px;
-    margin-left: -$padding;
-
-    img {
-      max-height: 100%;
-    }
-
-    .name {
-      flex-shrink: 0;
-    }
-
-    .paid {
-      color: $alterColor;
-      background-color: $paidColor;
-      font-size: 12px;
-      padding: 4px 8px;
-      border-radius: 2px;
-      flex-shrink: 0;
-      margin-left: 16px;
-    }
-
-    .gif {
-      flex-shrink: 100;
-      margin-left: 16px;
-    }
-  }
-
-  .description {
-    margin: 6px 0px 16px 0px;
-  }
-
-  button {
-    @include shadow(1);
-    margin-left: 0px !important;
-  }
-}
diff --git a/src/styles/store-view.scss b/src/styles/store-view.scss
@@ -0,0 +1,46 @@
+@import 'color';
+@import 'shadow';
+
+$padding: 4px;
+
+.installer {
+  width: 50%;
+  padding-left: $padding;
+
+  .header {
+    height: 64px;
+    margin-left: -$padding;
+
+    img {
+      max-height: 100%;
+    }
+
+    .name {
+      flex-shrink: 0;
+    }
+
+    .paid {
+      color: $alterColor;
+      background-color: $paidColor;
+      font-size: 12px;
+      padding: 4px 8px;
+      border-radius: 2px;
+      flex-shrink: 0;
+      margin-left: 16px;
+    }
+
+    .gif {
+      flex-shrink: 100;
+      margin-left: 16px;
+    }
+  }
+
+  .description {
+    margin: 6px 0px 16px 0px;
+  }
+
+  button {
+    @include shadow(1);
+    margin-left: 0px !important;
+  }
+}