Last min tweaks

README.md

@@ -274,7 +274,7 @@
         <img src="public/readme/redux-extension.png" />
         <p>
           <strong>Redux Devtools Extension</strong> is implemented in the app,
-          it makes things like viewing the state, state flow and debugging much
+          it makes things like viewing the state tree, state flow and debugging much
           easier, to use it you need to install the browser extension
           <a
             href="https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en"

package.json

@@ -37,10 +37,11 @@
     "install-filter-deps": "cd public/filters && npm i && git clone [email protected]:jeeliz/jeelizFaceFilter.git && cd jeelizFaceFilter && git reset --hard bd3cdcd0ca01ced09d836c55af82c36047d82dac && cd .. && npm run gulp",
     "build": "react-scripts build",
     "test": "react-scripts test",
+    "coverage": "react-scripts test --watchAll=false --coverage",
     "e2e": "cypress open",
     "e2e-headless": "cypress run",
     "eject": "react-scripts eject",
-    "cleanup": "rm -rf node_modules && cd public/filters && rm -rf node_modules jeelizFaceFilter build coverage",
+    "cleanup": "rm -rf node_modules build coverage public/filters/node_modules public/filters/jeelizFaceFilter",
     "precommit": "pretty-quick --staged && react-scripts test --watchAll=false",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",

src/AppShell/Drawer/index.scss

@@ -40,12 +40,12 @@
       background: $color-grey-shade-6;
       overflow-x: hidden;
       overflow-y: scroll;
-      backface-visibility: hidden;
-      perspective: 1000;
-      transform: translate3d(0, 0, 0);
       -webkit-backface-visibility: hidden;
+      backface-visibility: hidden;
       -webkit-perspective: 1000;
+      perspective: 1000;
       -webkit-transform: translate3d(0, 0, 0);
+      transform: translate3d(0, 0, 0);
       -webkit-overflow-scrolling: touch;
 
       .header {

src/common/Input/index.scss

@@ -32,8 +32,8 @@
 
   input[type='text'] {
     width: 100%;
-    background: rgba($color-grey-shade-1, 0.2);
-    border: 1px solid rgba($color-grey-shade-1, 0.2);
+    background: rgba($color-grey-shade-1, 0.3);
+    border: 1px solid rgba($color-grey-shade-2, 0.3);
     border-radius: 50px;
     padding: 10.5px 5px;
     text-indent: 10px;

src/common/SkeletonFrame/index.scss

@@ -5,9 +5,9 @@ $card-height: 250px;
 $card-skeleton: linear-gradient($color-white $card-height, transparent 0);
 $desc-line-height: 10px;
 $desc-line-skeleton: linear-gradient(lightgrey $desc-line-height, transparent 0);
-$desc-line-1-width: 160px;
+$desc-line-1-width: 80%;
 $desc-line-1-position: $card-padding 202px;
-$desc-line-2-width: 80px;
+$desc-line-2-width: 50%;
 $desc-line-2-position: $card-padding 220px;
 $blur-width: 220px;
 $blur-size: $blur-width $card-height;

src/features/Chat/index.scss

@@ -119,7 +119,7 @@ $footer-height: 70px;
       position: relative;
       display: flex;
       height: 100%;
-      padding: 10px 0;
+      padding: 10px;
       background: $color-white;
 
       .btn-camera {
@@ -154,6 +154,7 @@ $footer-height: 70px;
         @extend %center-x-y;
 
         .btn-archive {
+          display: flex;
           margin: 0 5px;
 
           .icon {

src/features/SnapMap/index.tsx

@@ -13,8 +13,6 @@ import Header from './Header';
 import Loader from 'common/Loader';
 import './index.scss';
 
-mapboxgl.accessToken = process.env.REACT_APP_MAP_BOX_API_KEY as string;
-
 interface Props {
   snaps: Snap[];
   weather: Weather;

src/styles/app.scss

@@ -1,18 +1,6 @@
 @import 'vars';
 @import 'extendables';
 
-html {
-  box-sizing: border-box;
-}
-
-html,
-body {
-  height: 100%;
-  overflow: hidden;
-  user-select: none;
-  touch-action: none;
-}
-
 *,
 *:before,
 *:after {
@@ -27,8 +15,16 @@ body {
   outline-style: none;
 }
 
-img {
-  align-self: center;
+html {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  height: 100%;
+  overflow: hidden;
+  user-select: none;
+  touch-action: none;
 }
 
 body {
@@ -45,6 +41,10 @@ a {
   text-decoration: none;
 }
 
+img {
+  align-self: center;
+}
+
 .wrapper {
   @extend %app-width;
   height: 100vh;