Eva icons on login amended

src/components/user/loginPage.vue

@@ -8,38 +8,48 @@
             <h4>Login</h4>
           </div>
           <div class="row">
-            <div>
-              <eva-icon name="lock-outline" fill="#60CBEB"></eva-icon>
-            </div>
-            <div class="col-md-11">
-              <input
-                class="form-control"
-                v-model="username"
-                placeholder="Username"
-                type="text"
-                name="username"
-                value
-              />
-            </div>
-            <div>
-              <eva-icon
-                v-if="!showPassword"
-                name="eye-off"
-                fill="#60CBEB"
-                @click="togglePassword()"
-              ></eva-icon>
-              <eva-icon v-else name="eye" fill="#60CBEB" @click="passwordToggled()"></eva-icon>
-            </div>
-            <div class="col-md-11">
-              <input
-                class="form-control"
-                :type="isPasswordShown"
-                v-model="password"
-                id="password"
-                placeholder="Password"
-                name="password"
-                value
-              />
+            <div class="col-md-11" style="margin-bottom: 1em">
+              <div class="input-group mb-3">
+                <div class="input-group-prepend">
+                  <span class="input-group-text">
+                    <eva-icon name="person" fill="#60CBEB"></eva-icon>
+                  </span>
+                  <input
+                    class="form-control"
+                    type="text"
+                    name="username"
+                    placeholder="Username"
+                    value
+                  />
+                </div>
+              </div>
+              <div class="input-group mb-3">
+                <div class="input-group-prepend">
+                  <span class="input-group-text">
+                    <eva-icon name="lock" fill="#60CBEB"></eva-icon>
+                  </span>
+                  <input
+                    class="form-control"
+                    :type="isPasswordShown"
+                    v-model="password"
+                    id="password"
+                    placeholder="Password"
+                    name="password"
+                    value
+                  />
+                  <div class="input-group-append">
+                    <span class="input-group-text">
+                      <eva-icon
+                        v-if="!showPassword"
+                        name="eye-off"
+                        fill="#60CBEB"
+                        @click="togglePassword()"
+                      ></eva-icon>
+                      <eva-icon v-else name="eye" fill="#60CBEB" @click="passwordToggled()"></eva-icon>
+                    </span>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
           <div class="form-group row"></div>
@@ -53,9 +63,10 @@
           <h5>Trouble signing in?</h5>
           <div>
             <div class="row">
-              <eva-icon name="email" fill="#60CBEB"></eva-icon>
-
-              <div class="col-md-11">
+              <div class="input-group-prepend">
+                <span class="input-group-text">
+                  <eva-icon name="email" fill="#60CBEB"></eva-icon>
+                </span>
                 <input class="form-control" placeholder="Your Email" type="text" name="email" value />
               </div>
             </div>