Client - update style on user forms

fittrackee_client/src/components/BikePic.vue

@@ -10,12 +10,17 @@
   #bike {
     display: flex;
     justify-content: center;
-
+    margin-top: 180px;
     padding: $default-padding;
-    height: 100%;
 
     .bike-img {
-      max-width: 40%;
+      max-width: 200px;
+    }
+    @media screen and (max-width: $small-limit) {
+      margin-top: $default-margin;
+      .bike-img {
+        max-width: 150px;
+      }
     }
   }
 </style>

fittrackee_client/src/components/User/UserAuthForm.vue

@@ -1,5 +1,10 @@
 <template>
-  <div id="user-auth-form">
+  <div
+    id="user-auth-form"
+    :class="`${
+      ['reset', 'reset-request'].includes(action) ? action : 'user-form'
+    }`"
+  >
     <div id="user-form">
       <div
         class="form-box"
@@ -201,10 +206,6 @@
 
   #user-auth-form {
     display: flex;
-    align-items: center;
-
-    margin: $default-margin 0;
-    height: 100%;
 
     #user-form {
       width: 60%;
@@ -230,13 +231,17 @@
     }
 
     @media screen and (max-width: $medium-limit) {
-      height: auto;
       margin-bottom: 50px;
-
       #user-form {
-        margin-top: $default-margin;
         width: 100%;
       }
     }
   }
+
+  .user-form {
+    margin-top: 200px;
+    @media screen and (max-width: $small-limit) {
+      margin-top: $default-margin;
+    }
+  }
 </style>

fittrackee_client/src/scss/base.scss

@@ -247,10 +247,6 @@ button {
   @media screen and (max-width: $medium-limit) {
     width: 100%;
     margin: 0 auto 50px auto;
-
-    &.with-margin {
-      margin-top: 0;
-    }
   }
 }
 

fittrackee_client/src/views/user/PasswordResetView.vue

@@ -48,7 +48,6 @@
 
       @media screen and (max-width: $small-limit) {
         width: 100%;
-        margin: 0 auto 50px auto;
       }
     }
   }