restyled login page

2 files changed, 50 insertions, 4 deletions

diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue
index 84e4588f..fec889fd 100644
--- a/src/components/AppHeader/AppHeader.vue
+++ b/src/components/AppHeader/AppHeader.vue
@@ -37,7 +37,7 @@
           >
             <img
               class="header-logo"
-              src="@/assets/images/logo-header.svg"
+              src="@/assets/images/logo-header-sila.svg"
               :alt="altLogo"
             />
           </b-navbar-brand>
@@ -101,6 +101,30 @@
             </b-dropdown>
           </li>
         </b-navbar-nav>
+        <!-- <img
+          class="header-clock__icon"
+          src="@/assets/images/login/header-clock.svg"
+        />
+        <span style="color: white">15:54:00</span>
+        <img
+          style="margin-left: 20px"
+          class="header-avatar__icon"
+          src="@/assets/images/login/header-avatar.svg"
+        />
+        <span style="color: white">Маргарита тутова</span>
+        <b-button id="app-header-notification" class="app-header-notification">
+          <img
+            class="header-notification__icon"
+            src="@/assets/images/login/icon-notification.svg"
+          />
+        </b-button>
+        <b-button id="app-header-logout" class="app-header-logout">
+          <img
+            class="header-logout__icon"
+            src="@/assets/images/login/logout-icon.svg"
+            @click="logout"
+          />
+        </b-button> -->
       </b-navbar>
     </header>
     <loading-bar />
@@ -295,7 +319,7 @@ export default {
 
         .nav-link:focus,
         .btn:focus {
-          @include focus-box-shadow($gray-800);
+          @include focus-box-shadow($dark);
         }
       }
 
diff --git a/src/components/Global/InputPasswordToggle.vue b/src/components/Global/InputPasswordToggle.vue
index d2c0d4a6..be4fdc6c 100644
--- a/src/components/Global/InputPasswordToggle.vue
+++ b/src/components/Global/InputPasswordToggle.vue
@@ -16,8 +16,8 @@
 </template>
 
 <script>
-import IconView from '@carbon/icons-vue/es/view/20';
-import IconViewOff from '@carbon/icons-vue/es/view--off/20';
+import IconView from '@carbon/icons-vue/es/view--filled/32';
+import IconViewOff from '@carbon/icons-vue/es/view--off--filled/32';
 
 export default {
   name: 'InputPasswordToggle',
@@ -48,6 +48,28 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.input-action-btn,
+.btn-icon-only {
+  margin: auto;
+  padding: 10px;
+  &:hover {
+    border-radius: 8px;
+    background-color: transparent;
+  }
+  &:focus {
+    box-shadow: none;
+    color: none;
+  }
+  &:active {
+    background-color: transparent;
+  }
+}
+
+.btn-icon-only svg {
+  width: 30px;
+  height: 20px;
+}
+
 .input-password-toggle-container {
   position: relative;
 }