Lots of tweaks

cypress/integration/snapmap.spec.ts

@@ -56,13 +56,13 @@ describe('Snap Map', () => {
   });
 
   it('shows image snap', () => {
-    cy.get('@snapMapDrawer').find('[data-test=marker]').eq(1).click();
+    cy.get('@snapMapDrawer').find('[data-test=marker]').eq(2).click();
     cy.get('[data-test=snap-drawer]').as('snapDrawer');
     cy.get('@snapDrawer').find('[data-test=image]').should('be.visible');
   });
 
   it('displays image caption', () => {
-    cy.get('@snapMapDrawer').find('[data-test=marker]').eq(1).click();
+    cy.get('@snapMapDrawer').find('[data-test=marker]').eq(2).click();
     cy.get('[data-test=snap-drawer]').as('snapDrawer');
     cy.get('@snapDrawer').find('[data-test=caption]').should('be.visible');
     cy.get('@snapDrawer')

public/api/snaps.json

@@ -9,33 +9,6 @@
       "url": "./video/street-tour.mp4",
       "caption": null
     },
-    {
-      "location": null,
-      "lat": null,
-      "lon": null,
-      "time": 1593736863689,
-      "type": "photo",
-      "url": "./images/snaps/food.jpg",
-      "caption": "Hmm can't wait to dig in!! 😋"
-    },
-    {
-      "location": null,
-      "lat": null,
-      "lon": null,
-      "time": 1593489600000,
-      "type": "photo",
-      "url": "./images/snaps/cake.jpg",
-      "caption": "hmmmm 🤔🎂"
-    },
-    {
-      "location": null,
-      "lat": null,
-      "lon": null,
-      "time": 1593662400000,
-      "type": "photo",
-      "url": "./images/snaps/hookah.jpg",
-      "caption": "Pregaaaaaaaaame!"
-    },
     {
       "location": null,
       "lat": null,
@@ -49,16 +22,16 @@
       "location": null,
       "lat": null,
       "lon": null,
-      "time": 1592798400000,
+      "time": 1593489600000,
       "type": "photo",
-      "url": "./images/snaps/concert.jpg",
-      "caption": null
+      "url": "./images/snaps/cake.jpg",
+      "caption": "hmmmm 🤔🎂"
     },
     {
       "location": null,
       "lat": null,
       "lon": null,
-      "time": 1593230400000,
+      "time": 1593662400000,
       "type": "video",
       "url": "./video/skate-park.mp4",
       "caption": null
@@ -67,10 +40,10 @@
       "location": null,
       "lat": null,
       "lon": null,
-      "time": 1593576000000,
+      "time": 1593736863689,
       "type": "photo",
-      "url": "./images/snaps/dog-walk.jpg",
-      "caption": null
+      "url": "./images/snaps/food.jpg",
+      "caption": "Hmm can't wait to dig in!! 😋"
     },
     {
       "location": null,

src/AppShell/Footer/index.scss

@@ -32,7 +32,7 @@
       font-size: 25px;
 
       &:not(.new-msg) {
-        @include icon-shadow($color-black);
+        @include icon-shadow($color-grey-shade-2);
       }
     }
   }

src/AppShell/Toolbar/index.scss

@@ -18,7 +18,7 @@
 
   .left {
     time {
-      font-family: $font-arial;
+      font-family: $font-work-sans;
     }
   }
 

src/common/Input/index.scss

@@ -28,6 +28,7 @@
   &.dark {
     input[type='text'] {
       background: rgba($color-black, 0.1);
+      border: 0;
 
       &::placeholder {
         color: $color-grey-shade-3;
@@ -36,21 +37,24 @@
   }
 
   input[type='text'] {
-    border: 0;
-    outline: 0;
     width: 100%;
     background: rgba($color-black, 0.2);
-    padding: 10px 5px;
+    border: 1px solid rgba($color-grey-shade-2, 0.3);
     border-radius: 20px;
+    padding: 10px 5px;
     text-indent: 10px;
+    font-weight: bold;
+    outline: 0;
+    -webkit-appearance: none;
+    appearance: none;
 
     &.has-left-icon {
       text-indent: 25px;
     }
 
     &::placeholder {
-      color: $color-white;
-      font-weight: bold;
+      font: bold 15px $font-work-sans;
+      color: $color-grey-shade-3;
     }
   }
 

src/common/Loader/index.scss

@@ -22,8 +22,7 @@
 
     span {
       display: block;
-      font-weight: bold;
-      font-size: 18px;
+      font: bold 18px $font-arial;
     }
 
     .sk-cube-grid {

src/features/Account/index.scss

@@ -3,15 +3,16 @@
 @import '~styles/mixins';
 
 .account {
-  padding-bottom: 25px;
+  padding-bottom: 15px;
 
   > header {
+    @extend %center-x-y;
     display: flex;
     padding: 10px 10px;
     margin-bottom: -15px;
 
     .btn-close {
-      @include highlight(35px, 35px);
+      @include highlight(35px, 35px, 10px);
 
       .icon {
         font-size: 25px;
@@ -30,8 +31,9 @@
   .logo {
     text-align: center;
 
-    .ico-brand {
-      font-size: 100px;
+    img {
+      width: 100px;
+      margin-bottom: 5px;
     }
 
     strong {

src/features/Account/index.tsx

@@ -37,7 +37,7 @@ const Account: React.FC<Props> = ({
       <Icon icon="faCog" className="ico-gear" />
     </header>
     <div className="logo">
-      <Icon icon="faSnapchatSquare" className="ico-brand" />
+      <img src="./images/logo.svg" alt="" />
       <strong>{session.username}</strong>
     </div>
     <Widget header="Stories" transparent>

src/features/Camera/index.scss

@@ -38,6 +38,7 @@
 
     strong {
       display: block;
+      font-family: $font-arial;
       text-shadow: 0 0 1px $color-black;
     }
   }
@@ -56,7 +57,7 @@
       left: 50%;
 
       .icon {
-        @include icon-shadow($color-black);
+        @include icon-shadow($color-grey-shade-1);
         border-radius: 100%;
       }
     }

src/features/Chat/index.scss

@@ -26,7 +26,10 @@ $footer-height: 70px;
 
     .avatar {
       width: 50px;
-      margin-right: 5px;
+    }
+
+    h2 {
+      font-family: $font-verdana;
     }
 
     .right {
@@ -38,7 +41,7 @@ $footer-height: 70px;
       }
 
       .btn-arrow {
-        @include highlight(35px, 35px);
+        @include highlight(35px, 35px, 10px);
         font-size: 23px;
       }
     }
@@ -141,7 +144,11 @@ $footer-height: 70px;
         }
 
         input[type='text'] {
+          font-weight: normal;
+          border: 0;
+
           &::placeholder {
+            font: normal 14px $font-lato;
             color: $color-grey-shade-3;
           }
         }