Merge pull request microsoft#27 from olgamarti/master

Changed icons of Apps mobile in home
jmutchek-msft · May 7, 2019 · 3e04af1 · 3e04af1
2 parents dbd0945 + 2a683b2
commit 3e04af1
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 23 deletions.
diff --git a/Source/SmartHotel360.Website/ClientApp/src/components/Home.js b/Source/SmartHotel360.Website/ClientApp/src/components/Home.js
@@ -19,20 +19,30 @@ class Home extends Component {
             <div className='sh-hero'>
                 <div className='sh-hero-wrapper'>
                     <div className='sh-hero-title'>The future of intelligent hospitality and connected workplace</div>
+                    <div className='sh-hero-subtitle'>Download the App</div>
                     <ul className='sh-hero-buttons'>
                         <li className='sh-hero-button'>
-                            <a href="https://aka.ms/smarthotel360uwp">
-                                <div className='sh-hero-download_app sh-hero-download_app--win'></div>
+                            <a className='sh-hero-button-link' href="https://aka.ms/smarthotel360uwp">
+                                <div className='sh-hero-download_app'>
+                                    <div className='sh-hero-download_app-subtitle'>Get it now for</div>
+                                    Windows 10
+                                    </div>
                             </a>
                         </li>
                         <li className='sh-hero-button'>
-                            <a href="https://aka.ms/smarthotel360ios">
-                                <div className='sh-hero-download_app sh-hero-download_app--apple'></div>
+                            <a className='sh-hero-button-link' href="https://aka.ms/smarthotel360ios">
+                                <div className='sh-hero-download_app'>
+                                    <div className='sh-hero-download_app-subtitle'>Get it now for</div>
+                                    Android
+                                    </div>
                             </a>
                         </li>
                         <li className='sh-hero-button'>
-                            <a href="https://aka.ms/smarthotel360android">
-                                <div className='sh-hero-download_app sh-hero-download_app--google'></div>
+                            <a className='sh-hero-button-link' href="https://aka.ms/smarthotel360android">
+                                <div className='sh-hero-download_app'>
+                                    <div className='sh-hero-download_app-subtitle'>Get it now for</div>
+                                    iOS
+                                 </div>
                             </a>
                         </li>
                     </ul>

diff --git a/Source/SmartHotel360.Website/ClientApp/src/scss/components/_sh-hero.scss b/Source/SmartHotel360.Website/ClientApp/src/scss/components/_sh-hero.scss
@@ -6,10 +6,12 @@
     height: 43rem;
     width: 100%;
 
+
+
     &-buttons {
         display: flex;
         list-style: none;
-        margin-top: 7rem;
+        margin-top: 2rem;
         padding: 0;
     }
 
@@ -24,31 +26,33 @@
             background-color: rgba($color-background-brighter, .25);
             transition: background-color $animation-speed-default ease;
         }
+
+        &-link {
+            &:hover {
+                text-decoration: none;
+            }
+        }
     }
 
     &-download_app {
-        background-position-x: center;
-        background-position-y: center;
-        background-repeat: no-repeat;
-        background-size: contain;
-        height: 1rem;
+        height: 2rem;
         width: 6rem;
+        justify-content: center;
+        color: $color-foreground-brighter;
+        font-size: $font-size-m;
 
-        @media screen and (min-width: $media-screen-m) {
-            height: 1.5rem;
+        @media screen and (min-width: $media-screen-s) {
+            height: 2rem;
             width: 7.5rem;
+            font-size: $font-size-l;
         }
 
-        &--win {
-            background-image: url('/assets/images/windows.png');
-        }
-
-        &--apple {
-            background-image: url('/assets/images/app_store.png');
-        }
+        &-subtitle {
+            font-size: $font-size-xxs;
 
-        &--google {
-            background-image: url('/assets/images/google_play.png');
+            @media screen and (min-width: $media-screen-s) {
+                font-size: $font-size-xs;
+            }
         }
     }
 
@@ -66,6 +70,14 @@
         }
     }
 
+    &-subtitle {
+        text-transform: uppercase;
+        color: $color-background-brighter;
+        font-size: $font-size-xl;
+        font-weight: $font-weight-light;
+        margin-top: 4rem;
+    }
+
     &-wrapper {
         $distance: 14rem;