CSS tweaks

src/AppShell/Drawer/index.scss

@@ -49,7 +49,13 @@
       -webkit-overflow-scrolling: touch;
 
       .header {
-        margin-top: 0;
+        margin: 0 0 5px;
+
+        .right {
+          .icon {
+            filter: none;
+          }
+        }
       }
     }
   }

src/AppShell/Toolbar/index.scss

@@ -1,5 +1,6 @@
 @import '~styles/vars';
 @import '~styles/extendables';
+@import '~styles/mixins';
 
 .toolbar {
   @extend %center-x-y;
@@ -14,11 +15,17 @@
   .left,
   .right {
     width: 50%;
+
+    .icon {
+      @include icon-shadow($color-grey-shade-2, 1px);
+    }
   }
 
   .left {
     time {
       margin-right: 3px;
+      font-weight: $font-bold;
+      text-shadow: 0 0 1px $color-grey-shade-0;
     }
 
     .icon-location {
@@ -37,8 +44,18 @@
   &.dark {
     color: $color-black;
 
-    .icon {
-      color: $color-black;
+    .left,
+    .right {
+      .icon {
+        filter: none;
+        color: $color-black;
+      }
+    }
+
+    .left {
+      time {
+        text-shadow: none;
+      }
     }
   }
 }

src/common/Button/index.scss

@@ -6,6 +6,7 @@
   background: none;
   border: 0;
   padding: 0;
+  line-height: normal;
 
   &.round {
     background: rgba($color-black, 0.3);
@@ -22,6 +23,10 @@
 
   &.plain {
     color: $color-grey-shade-1;
+
+    strong {
+      font-size: 15px;
+    }
   }
 
   &.purple {

src/common/Header/index.scss

@@ -1,5 +1,6 @@
 @import '~styles/vars';
 @import '~styles/extendables';
+@import '~styles/mixins';
 
 .header {
   @extend %center-x-y;
@@ -11,11 +12,11 @@
 
   .btn-user {
     .icon {
-      font-size: 30px;
+      font-size: 35px;
     }
 
     img {
-      width: 30px;
+      width: 35px;
     }
   }
 
@@ -25,7 +26,8 @@
 
   .right {
     .icon {
-      font-size: 20px;
+      @include icon-shadow($color-grey-shade-2, 1px);
+      font-size: 23px;
     }
   }
 }

src/common/Input/index.scss

@@ -1,5 +1,6 @@
 @import '~styles/vars';
 @import '~styles/extendables';
+@import '~styles/mixins';
 
 .input {
   position: relative;
@@ -14,18 +15,11 @@
     }
   }
 
-  &.disabled {
-    &:after {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
+  &.dark {
+    .icon {
+      filter: none;
     }
-  }
 
-  &.dark {
     input[type='text'] {
       background: rgba($color-black, 0.1);
       border: 0;
@@ -38,12 +32,13 @@
 
   input[type='text'] {
     width: 100%;
-    background: rgba($color-black, 0.2);
-    border: 1px solid rgba($color-grey-shade-2, 0.3);
-    border-radius: 20px;
-    padding: 10px 5px;
+    background: rgba($color-grey-shade-1, 0.2);
+    border: 1px solid rgba($color-grey-shade-1, 0.2);
+    border-radius: 50px;
+    padding: 10.5px 5px;
     text-indent: 10px;
     font-weight: $font-semi-bold;
+    line-height: normal;
     outline: 0;
     -webkit-appearance: none;
     appearance: none;
@@ -52,17 +47,22 @@
       text-indent: 25px;
     }
 
+    &:disabled {
+      opacity: 1;
+    }
+
     &::placeholder {
       font-size: 15px;
-      color: $color-grey-shade-3;
+      color: $color-grey-shade-5;
     }
   }
 
-  .left-icon,
-  .right-icon {
+  .icon {
+    @include icon-shadow($color-grey-shade-2, 1px);
     position: absolute;
     top: 50%;
-    margin-top: -7px;
+    margin-top: -8px;
+    font-size: 15px;
   }
 
   .left-icon {

src/common/Input/index.tsx

@@ -50,7 +50,7 @@ const Input: React.FC<Props> = ({
   return (
     <div
       onClick={onClick}
-      className={classNames('input', { animate, full, disabled, dark })}
+      className={classNames('input', { animate, full, dark })}
       data-test="input"
     >
       {leftIcon && <Icon icon={leftIcon} className="left-icon" />}

src/common/Loader/index.scss

@@ -12,12 +12,18 @@
     height: 100vh;
   }
 
+  &.message {
+    .center {
+      width: 200px;
+      margin: -75px 0 0 -100px;
+    }
+  }
+
   .center {
     position: absolute;
     top: 50%;
     left: 50%;
-    width: 200px;
-    margin: -75px 0 0 -100px;
+    margin: -15px 0 0 -20px;
     text-align: center;
 
     span {

src/common/Loader/index.tsx

@@ -8,7 +8,7 @@ interface Props {
 }
 
 const Loader: React.FC<Props> = ({ fixed, message }) => (
-  <div className={classNames('loading', { fixed })}>
+  <div className={classNames('loading', { fixed, message })}>
     <div className="center">
       <div className="sk-cube-grid">
         {new Array(9).fill(null).map((val, index) => (

src/common/Widget/index.scss

@@ -4,7 +4,7 @@
   margin-bottom: 20px;
 
   > header {
-    font-weight: $font-bold;
+    font-weight: $font-semi-bold;
     font-size: 16px;
     color: $color-grey-shade-1;
     margin-bottom: 8px;

src/features/Account/index.scss

@@ -19,11 +19,8 @@
       }
     }
 
-    .icon {
-      font-size: 20px;
-    }
-
     .ico-gear {
+      font-size: 20px;
       margin-left: auto;
     }
   }
@@ -43,10 +40,10 @@
   }
 
   footer {
-    padding: 10px 100px 35px;
+    padding: 10px 0 35px;
 
     p {
-      font-size: 11px;
+      font-size: 12px;
       font-weight: $font-semi-bold;
       color: $color-grey-shade-4;
       text-align: center;

src/features/Chat/index.scss

@@ -137,6 +137,7 @@ $footer-height: 70px;
 
         .icon {
           margin-top: -10px;
+          filter: none;
         }
 
         input[type='text'] {

src/features/Search/index.scss

@@ -4,17 +4,13 @@
   padding-bottom: 25px;
 
   > header {
-    padding: 0 5px 7px 0;
-    margin-bottom: 10px;
-    background: $color-grey-shade-6;
+    display: flex;
+    justify-content: flex-end;
+    padding-right: 5px;
+    margin-bottom: 20px;
 
-    form {
-      display: flex;
-      justify-content: flex-end;
-
-      .input {
-        margin-right: 7px;
-      }
+    .input {
+      margin-right: 7px;
     }
   }
 

src/features/Search/index.tsx

@@ -35,23 +35,21 @@ const Search: React.FC<Props> = ({ friends = [], show, hideDrawer }) => {
   return (
     <main className="search">
       <header>
-        <form>
-          <Input
-            placeholder="Search"
-            leftIcon="faSearch"
-            value={query}
-            onChange={(e) => setQuery(e.currentTarget.value)}
-            focus={show}
-            animate
-            dark
-          />
-          <Button
-            label="Cancel"
-            plain
-            onclick={() => hideDrawer('search')}
-            testId="btn-cancel"
-          />
-        </form>
+        <Input
+          placeholder="Search"
+          leftIcon="faSearch"
+          value={query}
+          onChange={(e) => setQuery(e.currentTarget.value)}
+          focus={show}
+          animate
+          dark
+        />
+        <Button
+          label="Cancel"
+          plain
+          onclick={() => hideDrawer('search')}
+          testId="btn-cancel"
+        />
       </header>
       <section>
         <Animated
@@ -84,9 +82,7 @@ const Search: React.FC<Props> = ({ friends = [], show, hideDrawer }) => {
   );
 };
 
-const mapStateToProps = ({ user }) => ({
-  friends: user.friends
-});
+const mapStateToProps = ({ user }) => ({ friends: user.friends });
 
 const mapDispatchToProps = (dispatch) => ({
   hideDrawer: (component) => dispatch(hideDrawer(component))

src/features/SnapMap/Header/index.scss

@@ -16,6 +16,7 @@
 
   .btn-close {
     @include highlight(35px, 35px, 10px);
+    border: 1px solid rgba($color-red, 0.1);
     margin-right: 10px;
   }
 

src/styles/_mixins.scss

@@ -18,6 +18,7 @@
   border-radius: 100%;
   width: $width;
   height: $height;
+  line-height: normal;
 
   .icon {
     margin: 0;