Misc tweaks

TODO.txt

@@ -4,10 +4,19 @@ Make Gif
 Get rid of actual address from screenshots
 Cut images, optimize and resize
 
-test on windows
-
 Add analytics to gh pages 
 Should I add linked in?
 Add tags in GitHub 
 
-open mouth
+
+
+don't use exact ips in readme for network address
+192.168-*
+
+
+
+
+can't download image on windows
+
+
+

src/AppShell/Footer/index.scss

@@ -1,5 +1,5 @@
-@import '~styles/extendables';
 @import '~styles/vars';
+@import '~styles/extendables';
 @import '~styles/mixins';
 
 .footer {

src/AppShell/Toolbar/index.scss

@@ -1,5 +1,5 @@
-@import '~styles/extendables';
 @import '~styles/vars';
+@import '~styles/extendables';
 
 .toolbar {
   @extend %center-x-y;

src/common/Loader/index.scss

@@ -1,6 +1,6 @@
 @import '~styles/vars';
-@import '~styles/mixins';
 @import '~styles/extendables';
+@import '~styles/mixins';
 
 .loading {
   @include overlay-bg;

src/common/Pill/index.scss

@@ -1,5 +1,5 @@
-@import '~styles/extendables';
 @import '~styles/vars';
+@import '~styles/extendables';
 
 .pill {
   display: flex;

src/features/Account/Map/index.scss

@@ -1,6 +1,6 @@
+@import '~styles/vars';
 @import '~styles/extendables';
 @import '~styles/mixins';
-@import '~styles/vars';
 
 .preview-map {
   position: relative;

src/features/Account/index.scss

@@ -1,5 +1,6 @@
 @import '~styles/vars';
 @import '~styles/extendables';
+@import '~styles/mixins';
 
 .account {
   padding-bottom: 25px;
@@ -10,7 +11,7 @@
     margin-bottom: -15px;
 
     .btn-close {
-      @extend %clickable-button;
+      @include highlight(35px, 35px);
 
       .icon {
         font-size: 25px;

src/features/Camera/PhotoCapture/index.scss

@@ -37,7 +37,7 @@
       padding: 15px;
 
       .btn {
-        @include icon-shadow($color-red);
+        @include highlight(45px, 45px);
       }
     }
 
@@ -60,6 +60,7 @@
 
     footer {
       @extend %app-width;
+      @extend %center-x-y;
       position: absolute;
       left: 0;
       bottom: 0;
@@ -73,7 +74,7 @@
         }
 
         .btn-download {
-          @include icon-shadow($color-red);
+          @include highlight(60px, 60px);
         }
       }
 

src/features/Camera/index.scss

@@ -8,6 +8,7 @@
 
 .camera {
   width: 100%;
+  height: 100vh;
   overflow: hidden;
   position: absolute;
   top: 0;
@@ -23,11 +24,10 @@
 
   .open-mouth {
     position: absolute;
-    top: 50px;
+    top: 135px;
     right: 5%;
     color: $color-white;
     font-size: 20px;
-    font-weight: bold;
     text-align: center;
     transform: rotate(10deg);
     z-index: 1;
@@ -73,7 +73,6 @@
     .btn-filters {
       font-size: 25px;
       margin: -12.5px 0 0 50px;
-      border-radius: 100%;
     }
 
     .filters {
@@ -136,11 +135,8 @@
         margin: 0 10px;
 
         &.btn-close {
+          @include highlight(35px, 35px);
           margin: 0 25px;
-
-          .icon {
-            @extend %clickable-button;
-          }
         }
       }
     }

src/features/Camera/index.tsx

@@ -166,7 +166,7 @@ const Camera: React.FC<Props> = ({ setFooterType, pickPhoto }) => {
               setShowFilterButtons(true);
               setFooterType('none');
               // Load the center filter on the button list by default
-              onAnimationComplete(() => switchFilter(filters[2]), 100); // 100ms filter button container animation
+              onAnimationComplete(() => switchFilter(filters[2]), 100);
             }}
           />
         )}

src/features/Chat/index.scss

@@ -1,5 +1,6 @@
-@import '~styles/extendables';
 @import '~styles/vars';
+@import '~styles/extendables';
+@import '~styles/mixins';
 
 $header-height: 65px;
 $footer-height: 70px;
@@ -37,7 +38,7 @@ $footer-height: 70px;
       }
 
       .btn-arrow {
-        @extend %clickable-button;
+        @include highlight(35px, 35px);
         font-size: 23px;
       }
     }

src/features/Snap/index.scss

@@ -50,7 +50,26 @@
   }
 
   .image-container {
-    @extend %image-cover;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    overflow: hidden;
+    height: 100vh;
+
+    img {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: auto;
+      height: auto;
+      max-height: none;
+      max-width: none;
+      min-height: 100%;
+      min-width: 100%;
+      transform: translate(-50%, -50%);
+    }
 
     .caption {
       font-size: 18px;

src/features/SnapMap/Header/index.scss

@@ -16,10 +16,10 @@
 
   .btn {
     margin-right: 3px;
-  }
 
-  .btn-close {
-    @extend %clickable;
+    &.btn-close {
+      @include highlight(35px, 35px);
+    }
   }
 
   .left,

src/features/SnapMap/index.scss

@@ -67,7 +67,7 @@
 
 @keyframes shadow-pulse {
   0% {
-    box-shadow: 0 0 0 0px rgba($color-black, 0.2);
+    box-shadow: 0 0 0 0 rgba($color-black, 0.2);
   }
   100% {
     box-shadow: 0 0 0 35px rgba($color-black, 0);

src/styles/_extendables.scss

@@ -14,46 +14,8 @@
   object-fit: cover;
 }
 
-%image-cover {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  overflow: hidden;
-  height: 100vh;
-
-  img {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: auto;
-    height: auto;
-    max-height: none;
-    max-width: none;
-    min-height: 100%;
-    min-width: 100%;
-    transform: translate(-50%, -50%);
-  }
-}
-
 %center-x-y {
   display: flex;
   align-items: center;
   justify-content: center;
 }
-
-%clickable {
-  box-shadow: 0 0 18px $color-red;
-}
-
-%clickable-button {
-  @extend %clickable;
-  border-radius: 100%;
-  min-width: 25px;
-  min-height: 25px;
-
-  .icon {
-    margin: 0;
-  }
-}

src/styles/_mixins.scss

@@ -11,3 +11,15 @@
   background: rgba($color-black, $opacity);
   color: $color-white;
 }
+
+@mixin highlight($width, $height) {
+  box-shadow: 0 0 15px $color-red;
+  border: 1px solid rgba($color-red, 0.5);
+  border-radius: 100%;
+  width: $width;
+  height: $height;
+
+  .icon {
+    margin: 0;
+  }
+}