Fix issue topcoder-platform#337

Author: elfman

src/shared/components/TopcoderFooter/style.scss

@@ -47,7 +47,7 @@
   }
 }
 
-@media only screen and (max-width: 1024px) {
+@include xxs-to-sm {
   .link {
     display: block;
   }

src/shared/components/TopcoderHeader/mobile/Header/style.scss

@@ -55,8 +55,10 @@
   top: 16px;
 }
 
-@media only screen and (min-width: 1024px) {
-  .header-wrapper {
-    display: none;
+.header-wrapper {
+  display: none;
+
+  @include xxs-to-sm {
+    display: block;
   }
 }

src/shared/components/TopcoderHeader/style.scss

@@ -3,7 +3,7 @@
 .auth-buttons {
   display: inline-block;
   position: relative;
-  top: -11px;
+  top: -4px;
 
   a {
     border-radius: 2 * $corner-radius;
@@ -90,7 +90,7 @@
 .right-menu {
   height: 100%;
   position: absolute;
-  right: 0;
+  right: 20px;
   top: 0;
 }
 
@@ -135,17 +135,17 @@
 .search-icon {
   cursor: pointer;
   display: inline-block;
-  height: 100%;
-  margin: 0 24px 0 6px;
+  height: 32px;
+  margin: 11px 4px 11px 6px;
+  padding-left: 12px;
   position: relative;
+  border-left: 1px solid $tc-gray-40;
   width: 36px;
 
   svg {
-    border-left: 1px solid $tc-gray-40;
-    height: 32px;
-    margin: 12px 0 0;
-    padding: 0 0 0 12px;
-    width: 32px;
+    height: 18px;
+    margin-top: 7px;
+    width: 18px;
   }
 
   /* TODO: This code for downward blue arrow is used also
@@ -190,7 +190,7 @@
   position: relative;
 }
 
-@media only screen and (max-width: 1024px) {
+@include xxs-to-sm {
   .auth-buttons {
     top: 16px;
   }

src/shared/components/challenge-listing/Filters/ChallengeSearchBar/style.scss

@@ -41,7 +41,6 @@ $search-input-width: '100% - 56px';
       font-weight: 300;
       font-size: 15px;
       color: $tc-gray-50;
-      line-height: $challenge-space-30 + 5;
       text-transform: none;
       opacity: 1;
     }