Updated top navigation [SCI-8540]

app/assets/stylesheets/navigation/top_menu.scss

@@ -8,11 +8,11 @@
 .sci--navigation--top-menu-container {
   align-items: center;
   background-color: $color-white;
-  box-shadow: $flyout-shadow;
+  border-bottom: 1px solid var(--sn-sleepy-grey);
   display: flex;
-  gap: .5em;
+  gap: 1rem;
   height: 100%;
-  padding: 0 2em;
+  padding: 0 1rem;
 
   .sci--navigation--top-menu-logo {
     a {
@@ -29,25 +29,10 @@
   }
 
   .sci--navigation--top-menu-search {
-    margin-left: auto;
-    margin-right: 1em;
-    width: 240px;
+    width: 300px;
   }
 
   .sci--navigation--top-menu-user {
-    align-items: center;
-    cursor: pointer;
-    display: flex;
-    gap: 1em;
-    margin-left: .75em;
-
-    span {
-      max-width: 200px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-
     .avatar {
       border-radius: 50%;
     }

app/assets/stylesheets/shared_styles/elements/buttons.scss

@@ -19,10 +19,6 @@
   transition: .3s;
   user-select: none;
 
-  img {
-    padding-bottom: 3px;
-  }
-
   &:hover {
     text-decoration: none;
   }

app/javascript/vue/navigation/top_menu.vue

@@ -1,7 +1,10 @@
 <template>
   <div class="sci--navigation--top-menu-container">
-
-    <div v-if="currentTeam" class="w-64">
+    <div v-if="user" class="sci--navigation--top-menu-search left-icon sci-input-container-v2" :class="{'disabled' : !currentTeam}">
+      <input type="text" :placeholder="i18n.t('nav.search')" @change="searchValue"/>
+      <i class="sn-icon sn-icon-search"></i>
+    </div>
+    <div v-if="currentTeam" class="mr-auto w-64">
       <Select
         :value="currentTeam"
         :options="teams"
@@ -11,10 +14,6 @@
         @change="switchTeam"
       ></Select>
     </div>
-    <div v-if="user" class="sci--navigation--top-menu-search left-icon sci-input-container-v2" :class="{'disabled' : !currentTeam}">
-      <input type="text" :placeholder="i18n.t('nav.search')" @change="searchValue"/>
-      <i class="sn-icon sn-icon-search"></i>
-    </div>
     <div v-if="user" class="dropdown">
       <button class="btn btn-light icon-btn" data-toggle="dropdown">
         <i class="sn-icon sn-icon-help"></i>
@@ -61,9 +60,8 @@
         @close="notificationsOpened = false" />
     </div>
     <div v-if="user" class="dropdown">
-      <div class="sci--navigation--top-menu-user" data-toggle="dropdown">
-        <span>{{ i18n.t('nav.user_greeting', { full_name: user.name })}}</span>
-        <img class="avatar" :src="user.avatar_url">
+      <div class="sci--navigation--top-menu-user btn btn-light icon-btn" data-toggle="dropdown">
+        <img class="avatar w-6 h-6" :src="user.avatar_url">
       </div>
       <div class="dropdown-menu dropdown-menu-right top-menu-user-dropdown">
         <li v-for="(item, i) in userMenu" :key="i">
@@ -145,7 +143,6 @@
         if (this.currentTeam == team) return;
 
         let newTeam = this.teams.find(e => e[0] == team);
-        console.log(newTeam)
 
         if (!newTeam) return;