Merge pull request #12 from mxdi9i7/peterz/icon-display

Adjusted icon library styles
mxdi9i7 · May 25, 2020 · 3ec8cea · 3ec8cea
2 parents 01579f8 + 78a4c9b
commit 3ec8cea
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 8 deletions.
diff --git a/src/components/Icons/index.stories.js b/src/components/Icons/index.stories.js
@@ -10,7 +10,7 @@ export default {
 
 export const AllIcons = () => (
   <div className='icons-container'>
-    <h1>Basic Icons</h1>
+    <h1>{IconsConfig.basic.length} Basic Icons</h1>
     <div className='icon-group'>
       {IconsConfig.basic.map((v, i) => (
         <div className='icon-block' key={i}>
@@ -19,7 +19,7 @@ export const AllIcons = () => (
         </div>
       ))}
     </div>
-    <h1>Outline Icons</h1>
+    <h1>{IconsConfig.outline.length} Outline Icons</h1>
     <div className='icon-group'>
       {IconsConfig.outline.map((v, i) => (
         <div className='icon-block' key={i}>
@@ -28,7 +28,7 @@ export const AllIcons = () => (
         </div>
       ))}
     </div>
-    <h1>Filled Icons</h1>
+    <h1>{IconsConfig.filled.length} Filled Icons</h1>
     <div className='icon-group'>
       {IconsConfig.filled.map((v, i) => (
         <div className='icon-block' key={i}>

diff --git a/src/styles/stories.scss b/src/styles/stories.scss
@@ -1,3 +1,5 @@
+@import './colors.scss';
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica,
@@ -64,25 +66,44 @@ body {
     justify-content: center;
     align-items: center;
     text-align: center;
-    width: 150px;
+    height: 125px;
+    width: 125px;
     margin: 15px;
     border-radius: 25px;
     padding: 12px 8px;
     background-color: #fff;
-    transition-duration: 0.2s;
+    transition-duration: 0.4s;
     box-shadow: 2px 2px 5px #eee;
 
+    * {
+      transition-duration: 0.2s;
+    }
+
+    i {
+      font-size: 42px !important;
+      color: $black !important;
+    }
+
     &:hover {
       background-color: #fff;
-      box-shadow: 2px 2px 20px #eee;
+      box-shadow: 4px 4px 50px #eee;
       cursor: pointer;
+
+      i {
+        color: $primary !important;
+      }
+
+      .icon-name {
+        color: $primary;
+      }
     }
   }
 
   .icon-name {
-    font-size: 14px;
+    color: $black;
+    font-size: 12px;
     display: block;
-    margin-top: 5px;
+    margin-top: 15px;
     font-weight: 100;
   }
 }