Merge pull request #402 from meetfranz/feature/welcome-styles

[PR] fix welcome styles
meetfranz · Dec 4, 2017 · f681679 · f681679
2 parents 5a4a7f2 + 6bbb820
commit f681679
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 9 deletions.
diff --git a/src/components/auth/Welcome.js b/src/components/auth/Welcome.js
@@ -55,12 +55,16 @@ export default class Login extends Component {
         </div>
         <div className="welcome__featured-services">
           {recipes.map(recipe => (
-            <img
+            <div
               key={recipe.id}
-              src={recipe.icons.svg}
               className="welcome__featured-service"
-              alt=""
-            />
+            >
+              <img
+                key={recipe.id}
+                src={recipe.icons.svg}
+                alt=""
+              />
+            </div>
           ))}
         </div>
       </div>

diff --git a/src/styles/welcome.scss b/src/styles/welcome.scss
@@ -58,17 +58,32 @@
     }
 
     &__featured-services {
-      margin-top: 150px;
       text-align: center;
-      margin-top: 80px;
+      width: 480px;
+      margin: 80px auto 0 auto;
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      background: #FFF;
+      border-radius: 6px;
+      padding: 20px 20px 5px;
     }
 
     &__featured-service {
       width: 35px;
-      margin-right: 30px;
+      height: 35px;
+      margin: 0 10px 15px;
+      filter: grayscale(1)
+      opacity(0.5);
+      transition: 0.5s filter, 0.5s opacity;
+
+      &:hover {
+        filter: grayscale(0);
+        opacity: (1);
+      }
 
-      &:last-of-type {
-        margin-right: 0;
+      img {
+        width: 35px;
       }
     }
   }