fix annoying welcome styles

2 files changed, 28 insertions, 9 deletions

diff --git a/src/components/auth/Welcome.js b/src/components/auth/Welcome.js
index 06b10ecfe..eb9fbb847 100644
--- 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
index 5365921fb..cfdcc80ad 100644
--- 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;
       }
     }
   }