From 289c92cb002f9f5ee862c7451d8a5188ff3590f0 Mon Sep 17 00:00:00 2001
From: Anton <anton@scinote.net>
Date: Fri, 16 Jun 2023 12:38:09 +0200
Subject: [PATCH] UX fixes
 [SCI-8658][SCI-8667][SCI-8668][SCI-8669][SCI-8672][SCI-8660][SCI-8662]

---
 app/assets/javascripts/dashboard/calendar.js  |  4 +--
 .../javascripts/repository_columns/index.js   | 12 ++++----
 .../javascripts/sitewide/show_password.js     |  8 ++---
 .../stylesheets/dashboard/current_tasks.scss  |  1 +
 app/assets/stylesheets/experiment/table.scss  |  1 +
 app/assets/stylesheets/extend/datatable.scss  | 30 +++++++++----------
 app/assets/stylesheets/repositories.scss      | 10 ++-----
 .../repository/repository_table.scss          |  2 +-
 .../stylesheets/repository_columns/index.scss | 12 ++------
 app/assets/stylesheets/shared/datatable.scss  | 10 +++++++
 .../shared_styles/constants/fonts.scss        |  8 +++++
 app/assets/stylesheets/tailwind/buttons.css   |  2 +-
 app/assets/stylesheets/themes/scinote.scss    |  2 +-
 app/assets/stylesheets/tiny_mce.scss          |  7 +++++
 app/javascript/vue/navigation/top_menu.vue    |  2 +-
 .../vue/repository_search/container.vue       |  4 +--
 app/services/toolbars/repositories_service.rb |  2 +-
 app/views/dashboards/_current_tasks.html.erb  |  2 +-
 .../experiments/_task_view_dropdowns.html.erb | 10 +++----
 .../repositories/_toolbar_buttons.html.erb    |  4 +--
 vendor/assets/stylesheets/datatables.css      | 19 +++++++-----
 21 files changed, 86 insertions(+), 66 deletions(-)

diff --git a/app/assets/javascripts/dashboard/calendar.js b/app/assets/javascripts/dashboard/calendar.js
index 8a34ab9f4..299b57f2b 100644
--- a/app/assets/javascripts/dashboard/calendar.js
+++ b/app/assets/javascripts/dashboard/calendar.js
@@ -6,11 +6,11 @@ var DasboardCalendarWidget = (function() {
     return `<script id="calendar-template" type="text/template">
               <div class="controls">
                 <div class="clndr-previous-button">
-                  <div class="btn btn-light icon-btn"><i class="sn-icon sn-icon-double-navigate-before"></i></div>
+                  <div class="btn btn-light icon-btn"><i class="sn-icon sn-icon-left"></i></div>
                 </div>
                 <div class="clndr-title"><%= month %> <%= year %></div>
                 <div class="clndr-next-button">
-                  <div class="btn btn-light icon-btn"><i class="sn-icon sn-icon sn-icon-double-navigate-after"></i></div>
+                  <div class="btn btn-light icon-btn"><i class="sn-icon sn-icon sn-icon-right"></i></div>
                 </div>
               </div>
               <div class="days-container">
diff --git a/app/assets/javascripts/repository_columns/index.js b/app/assets/javascripts/repository_columns/index.js
index cf604556e..da755afbf 100644
--- a/app/assets/javascripts/repository_columns/index.js
+++ b/app/assets/javascripts/repository_columns/index.js
@@ -247,14 +247,14 @@ var RepositoryColumns = (function() {
 
       if (column.header.id !== 'row-name') {
         if (column.visible()) {
-          self.addClass('fa-eye-slash');
-          self.removeClass('fa-eye');
+          self.addClass('sn-icon-visibility-hide');
+          self.removeClass('sn-icon-visibility-show');
           li.addClass('col-invisible');
           column.visible(false);
           TABLE.setColumnSearchable(column.index(), false);
         } else {
-          self.addClass('fa-eye');
-          self.removeClass('fa-eye-slash');
+          self.addClass('sn-icon-visibility-show');
+          self.removeClass('sn-icon-visibility-hide');
           li.removeClass('col-invisible');
           column.visible(true);
           TABLE.setColumnSearchable(column.index(), true);
@@ -321,7 +321,9 @@ var RepositoryColumns = (function() {
             <span class="vis sn-icon ${visClass}" title="${visText}"></span>
           </span>
           <span class="text">${generateColumnNameTooltip(thederName)}</span>
-          <span class="column-type pull-right">${getColumnTypeText(el, colId)}</span>
+          <span class="column-type pull-right">${
+            getColumnTypeText(el, colId) || '<i class="sn-icon sn-icon-locked-task"></i>'
+          }</span>
           <span class="sci-btn-group manage-controls pull-right" data-view-mode="active">
             <button class="btn icon-btn btn-light edit-repo-column manage-repo-column"
                     data-action="edit"
diff --git a/app/assets/javascripts/sitewide/show_password.js b/app/assets/javascripts/sitewide/show_password.js
index 5c9499f62..b4747578a 100644
--- a/app/assets/javascripts/sitewide/show_password.js
+++ b/app/assets/javascripts/sitewide/show_password.js
@@ -1,5 +1,5 @@
 function initShowPassword() {
-  $('.fas.fa-eye.show-password').remove();
+  $('.sn-icon.sn-icon-visibility-show.show-password').remove();
   $.each($('input[type="password"]'), function(i, e) {
     $(`<i class="sn-icon sn-icon-visibility-show show-password"
           style="
@@ -17,11 +17,11 @@ $(document).on('turbolinks:load', function() {
 
 $(document).on('click', '.show-password', function() {
   let $icon = $(this);
-  if ($icon.hasClass('fa-eye')) {
-    $icon.removeClass('fa-eye').addClass('fa-eye-slash');
+  if ($icon.hasClass('sn-icon-visibility-show')) {
+    $icon.removeClass('sn-icon-visibility-show').addClass('sn-icon-visibility-hide');
     $icon.parent().find('input[type=password]').attr('type', 'text');
   } else {
-    $icon.removeClass('fa-eye-slash').addClass('fa-eye');
+    $icon.removeClass('sn-icon-visibility-hide').addClass('sn-icon-visibility-show');
     $icon.parent().find('input[type=text]').attr('type', 'password');
   }
 });
diff --git a/app/assets/stylesheets/dashboard/current_tasks.scss b/app/assets/stylesheets/dashboard/current_tasks.scss
index 4a0e9cd69..800387c3d 100644
--- a/app/assets/stylesheets/dashboard/current_tasks.scss
+++ b/app/assets/stylesheets/dashboard/current_tasks.scss
@@ -8,6 +8,7 @@
   }
 
   .actions-container {
+    align-items: center;
     display: flex;
     flex-grow: 1;
     padding-left: 10px;
diff --git a/app/assets/stylesheets/experiment/table.scss b/app/assets/stylesheets/experiment/table.scss
index 1dc2b54a0..2cb80e828 100644
--- a/app/assets/stylesheets/experiment/table.scss
+++ b/app/assets/stylesheets/experiment/table.scss
@@ -33,6 +33,7 @@
     justify-content: space-between;
 
     .toolbar-left-block {
+      align-items: center;
       display: flex;
 
       .btn {
diff --git a/app/assets/stylesheets/extend/datatable.scss b/app/assets/stylesheets/extend/datatable.scss
index ca3c0392a..f69110f64 100644
--- a/app/assets/stylesheets/extend/datatable.scss
+++ b/app/assets/stylesheets/extend/datatable.scss
@@ -137,32 +137,32 @@
     }
 
     &.previous {
+      align-items: center;
+      display: inline-flex;
+
       &::before {
-        @include font-awesome;
-        content: $font-fas-angle-left;
-        left: 0;
-        line-height: 36px;
-        padding: 0 8px;
-        position: absolute;
+        @include font-sn-icon;
+        content: $sn-icon-left;
       }
 
       a {
-        padding-left: 23px;
+        min-height: unset;
+        padding-left: .25rem;
       }
     }
 
     &.next {
-      &::before {
-        @include font-awesome;
-        content: $font-fas-angle-right;
-        line-height: 36px;
-        padding: 0 8px;
-        position: absolute;
-        right: 0;
+      align-items: center;
+      display: inline-flex;
+
+      &::after {
+        @include font-sn-icon;
+        content: $sn-icon-right;
       }
 
       a {
-        padding-right: 23px;
+        min-height: unset;
+        padding-right: .25rem;
       }
     }
   }
diff --git a/app/assets/stylesheets/repositories.scss b/app/assets/stylesheets/repositories.scss
index 33b99261f..5a1d76881 100644
--- a/app/assets/stylesheets/repositories.scss
+++ b/app/assets/stylesheets/repositories.scss
@@ -169,7 +169,10 @@
 }
 
 .breadcrumb.breadcrumb-repository {
+  align-items: center;
   background-color: $color-concrete;
+  display: flex;
+  gap: .5rem;
   margin-bottom: 15px;
 }
 
@@ -424,13 +427,6 @@
   }
 }
 
-.barcode-scanner {
-  cursor: pointer;
-  position: absolute;
-  right: 12px;
-  top: 12px;
-}
-
 .search-container {
   .search-field {
     padding-right: 32px;
diff --git a/app/assets/stylesheets/repository/repository_table.scss b/app/assets/stylesheets/repository/repository_table.scss
index 5108c6203..d79c7f490 100644
--- a/app/assets/stylesheets/repository/repository_table.scss
+++ b/app/assets/stylesheets/repository/repository_table.scss
@@ -73,7 +73,7 @@
     padding: 1px 8px;
     position: relative;
 
-    .fas.fa-pencil-alt {
+    .sn-icon.sn-icon-edit {
       line-height: 35px;
       text-align: center;
       width: 30px;
diff --git a/app/assets/stylesheets/repository_columns/index.scss b/app/assets/stylesheets/repository_columns/index.scss
index f50ad4484..2659b6896 100644
--- a/app/assets/stylesheets/repository_columns/index.scss
+++ b/app/assets/stylesheets/repository_columns/index.scss
@@ -166,14 +166,6 @@
       &:last-of-type {
         border-bottom: 0;
       }
-
-      &:not(.editable) {
-        .column-type::before {
-          @include font-awesome;
-          content: $font-fas-lock;
-          padding-right: 4px;
-        }
-      }
     }
 
     [data-position] {
@@ -218,8 +210,8 @@
         margin-left: 10px;
         margin-right: 5px;
 
-        &:not(.fa-eye):not(.fa-eye-slash) {
-          padding-right: 15px;
+        &:not(.sn-icon-visibility-show):not(.sn-icon-visibility-hide) {
+          padding-right: 1.5rem;
         }
       }
     }
diff --git a/app/assets/stylesheets/shared/datatable.scss b/app/assets/stylesheets/shared/datatable.scss
index 88909bdf0..d00e739a1 100644
--- a/app/assets/stylesheets/shared/datatable.scss
+++ b/app/assets/stylesheets/shared/datatable.scss
@@ -84,6 +84,15 @@
     .pagination-info,
     .pagination-actions {
       flex-grow: 1;
+
+      .pagination,
+      .dataTables_paginate {
+        align-items: center;
+        display: flex;
+        height: 36px;
+        justify-content: flex-end;
+        margin: 0;
+      }
     }
 
     .pagination-info {
@@ -102,6 +111,7 @@
       }
 
       .dataTables_length {
+        height: 2.25rem;
         margin-right: 24px;
         width: 170px;
 
diff --git a/app/assets/stylesheets/shared_styles/constants/fonts.scss b/app/assets/stylesheets/shared_styles/constants/fonts.scss
index e22b72840..58d7a2803 100644
--- a/app/assets/stylesheets/shared_styles/constants/fonts.scss
+++ b/app/assets/stylesheets/shared_styles/constants/fonts.scss
@@ -27,6 +27,9 @@ $font-fas-exclamation-circle: "\f06a";
 $font-fas-caret-up: "\f0d8";
 $font-fas-plus: "\f02b";
 
+$sn-icon-left: "\e932";
+$sn-icon-right: "\e931";
+
 .sn-icon {
   font-size: 24px !important;
   vertical-align: middle;
@@ -68,6 +71,11 @@ $font-fas-plus: "\f02b";
   font-weight: 501;
 }
 
+@mixin font-sn-icon {
+  font-family: "SN-icon-font";
+  font-size: 24px !important;
+}
+
 html {
   font-size: 16px !important;
 }
diff --git a/app/assets/stylesheets/tailwind/buttons.css b/app/assets/stylesheets/tailwind/buttons.css
index ba44d13e0..5354c8af7 100644
--- a/app/assets/stylesheets/tailwind/buttons.css
+++ b/app/assets/stylesheets/tailwind/buttons.css
@@ -4,7 +4,7 @@
   }
 
   .btn {
-    @apply inline-flex items-center shrink-0 gap-2 justify-center leading-5 py-2 px-4 rounded border-0 appearance-none whitespace-nowrap cursor-pointer;
+    @apply relative inline-flex items-center shrink-0 gap-2 justify-center leading-5 py-2 px-4 rounded border-0 appearance-none whitespace-nowrap cursor-pointer;
   }
 
   .btn.icon-btn {
diff --git a/app/assets/stylesheets/themes/scinote.scss b/app/assets/stylesheets/themes/scinote.scss
index 29c5b9760..4fc804ecc 100644
--- a/app/assets/stylesheets/themes/scinote.scss
+++ b/app/assets/stylesheets/themes/scinote.scss
@@ -564,7 +564,7 @@ mark,.mark {
     float: right;
 
     .pagination {
-      margin: 2px 0;
+      margin: 0;
     }
   }
 
diff --git a/app/assets/stylesheets/tiny_mce.scss b/app/assets/stylesheets/tiny_mce.scss
index 13bd54b94..d718dfb58 100644
--- a/app/assets/stylesheets/tiny_mce.scss
+++ b/app/assets/stylesheets/tiny_mce.scss
@@ -71,6 +71,13 @@
 .tinymce-cancel-button.tox-mbtn {
   cursor: pointer;
 
+  button {
+    align-items: center;
+    cursor: pointer;
+    display: flex;
+    gap: .25rem;
+  }
+
   .fas {
     font-family: "Font Awesome 5 Free";
     font-weight: 900;
diff --git a/app/javascript/vue/navigation/top_menu.vue b/app/javascript/vue/navigation/top_menu.vue
index 887d804a7..37e519e9e 100644
--- a/app/javascript/vue/navigation/top_menu.vue
+++ b/app/javascript/vue/navigation/top_menu.vue
@@ -147,7 +147,7 @@
         if (!newTeam) return;
 
         $.post(this.teamSwitchUrl, {team_id: team}, (result) => {
-          this.currentTeam = result.currentTeam
+          this.currentTeam = result.current_team
           dropdownSelector.selectValues('#sciNavigationTeamSelector', this.currentTeam);
           $('body').attr('data-current-team-id', this.currentTeam);
           window.open(this.rootUrl, '_self')
diff --git a/app/javascript/vue/repository_search/container.vue b/app/javascript/vue/repository_search/container.vue
index bf9acd806..867911f14 100644
--- a/app/javascript/vue/repository_search/container.vue
+++ b/app/javascript/vue/repository_search/container.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex items-center mr-3 flex-nowrap">
-    <button v-if="!searchOpened" class="btn btn-light icon-btn" @click="openSearch">
+    <button v-if="!searchOpened" class="btn btn-light btn-black icon-btn" @click="openSearch">
       <i class="sn-icon sn-icon-search"></i>
     </button>
     <div v-if="searchOpened || barcodeSearchOpened" class="w-52 flex">
@@ -27,7 +27,7 @@
         <i class='sn-icon sn-icon-barcode barcode-scanner'></i>
       </div>
     </div>
-    <button v-if="!barcodeSearchOpened" class="btn btn-light icon-btn ml-2" @click="openBarcodeSearch">
+    <button v-if="!barcodeSearchOpened" class="btn btn-light btn-black icon-btn ml-2" @click="openBarcodeSearch">
       <i class='sn-icon sn-icon-barcode barcode-scanner'></i>
     </button>
   </div>
diff --git a/app/services/toolbars/repositories_service.rb b/app/services/toolbars/repositories_service.rb
index f9de4d8a3..d9b4de1ca 100644
--- a/app/services/toolbars/repositories_service.rb
+++ b/app/services/toolbars/repositories_service.rb
@@ -75,7 +75,7 @@ module Toolbars
       {
         name: 'share',
         label: I18n.t('repositories.index.share_inventory'),
-        icon: 'sn-icon sn-icon-user-menu-plus',
+        icon: 'sn-icon sn-icon-shared',
         button_class: 'share-repository-button',
         path: team_repository_share_modal_path(@current_team, repository_id: @repository),
         type: 'remote-modal'
diff --git a/app/views/dashboards/_current_tasks.html.erb b/app/views/dashboards/_current_tasks.html.erb
index 2f2953729..d07c84728 100644
--- a/app/views/dashboards/_current_tasks.html.erb
+++ b/app/views/dashboards/_current_tasks.html.erb
@@ -3,7 +3,7 @@
     <div class="widget-title"><%= t("dashboard.current_tasks.title") %></div>
     <div class="actions-container">
       <div class="filter-container dropdown">
-        <div class="btn btn-light icon-btn filter-button" data-toggle="dropdown"><i class="sn-icon sn-icon-filter"></i></div>
+        <div class="btn btn-light btn-sm icon-btn filter-button" data-toggle="dropdown"><i class="sn-icon sn-icon-filter"></i></div>
         <div class="dropdown-menu current-tasks-filters" role="menu" data-team-id="<%= current_team.id %>">
           <div class="header">
             <div class="title"><%= t("dashboard.current_tasks.filter.title") %></div>
diff --git a/app/views/experiments/_task_view_dropdowns.html.erb b/app/views/experiments/_task_view_dropdowns.html.erb
index 3fee1b833..aa63b5da4 100644
--- a/app/views/experiments/_task_view_dropdowns.html.erb
+++ b/app/views/experiments/_task_view_dropdowns.html.erb
@@ -6,7 +6,7 @@
         <%= button_to(view_type_experiment_path(@experiment, view_mode: 'archived'),
                       method: :put,
                       remote: true,
-                      class: "btn button-to #{ action_name == 'table' ? 'btn-primary' : 'btn-light' } prevent-shrink",
+                      class: "btn button-to #{ action_name == 'table' ? 'btn-primary' : 'btn-light' } prevent-shrink justify-start",
                       form_class: 'change-my-modules-view-type-form',
                       params: { experiment: { view_type: 'table', id: @experiment.id  } }) do %>
           <span class="<%= 'text-light' if action_name == 'table' %>">
@@ -18,7 +18,7 @@
         <%= button_to(view_type_experiment_path(@experiment, view_mode: 'archived'),
                       method: :put,
                       remote: true,
-                      class: "btn button-to #{ action_name == 'module_archive' ? 'btn-primary' : 'btn-light'} prevent-shrink",
+                      class: "btn button-to #{ action_name == 'module_archive' ? 'btn-primary' : 'btn-light'} prevent-shrink justify-start",
                       form_class: 'change-my-modules-view-type-form',
                       params: { experiment: { view_type: 'canvas', id: @experiment.id } }) do %>
           <span class="<%= 'text-light' if action_name == 'module_archive' %>">
@@ -31,7 +31,7 @@
         <%= button_to(view_type_experiment_path(@experiment),
                       method: :put,
                       remote: true,
-                      class: "btn button-to #{ action_name == 'table' ? 'btn-primary text-light' : 'btn-light' } prevent-shrink",
+                      class: "btn button-to #{ action_name == 'table' ? 'btn-primary text-light' : 'btn-light' } prevent-shrink justify-start",
                       form_class: 'change-my-modules-view-type-form',
                       params: { experiment: { view_type: 'table', id: @experiment.id  } }) do %>
           <span class="<%= 'text-light' if action_name == 'table' %>">
@@ -43,7 +43,7 @@
       <%= button_to(view_type_experiment_path(@experiment),
                     method: :put,
                     remote: true,
-                    class: "btn button-to #{ action_name == 'canvas' ? 'btn-primary text-light' : 'btn-light'} prevent-shrink",
+                    class: "btn button-to #{ action_name == 'canvas' ? 'btn-primary text-light' : 'btn-light'} prevent-shrink justify-start",
                     form_class: 'change-my-modules-view-type-form',
                     params: { experiment: { view_type: 'canvas', id: @experiment.id } }) do %>
           <span class="<%= 'text-light' if action_name == 'canvas' %>">
@@ -53,7 +53,7 @@
       </li>
     <% end %>
   <% end %>
-  
+
   <%= render partial: 'shared/state_view_switch', locals: {
     disabled: false,
     switchable: true,
diff --git a/app/views/repositories/_toolbar_buttons.html.erb b/app/views/repositories/_toolbar_buttons.html.erb
index 8a8526b07..211d9e77b 100644
--- a/app/views/repositories/_toolbar_buttons.html.erb
+++ b/app/views/repositories/_toolbar_buttons.html.erb
@@ -27,7 +27,7 @@
       <% end %>
 
       <span id="saveCancel" data-toggle="buttons" style="display:none">
-        <button type="button" class="btn btn-success prevent-shrink" id="saveRecord" data-view-mode="active">
+        <button type="button" class="btn btn-primary prevent-shrink" id="saveRecord" data-view-mode="active">
           <span class="fas fa-save"></span>
           <%= t("repositories.save_record") %>
         </button>
@@ -77,7 +77,7 @@
       </div>
     <% end %>
     <div class="repo-datatables-buttons">
-      <button class="btn btn-light manage-repo-column-index"
+      <button class="btn btn-light btn-black icon-btn manage-repo-column-index"
               data-modal-url="<%= repository_repository_columns_path(@repository) %>"
               data-action="new">
         <span class="sn-icon sn-icon sn-icon-reports">
diff --git a/vendor/assets/stylesheets/datatables.css b/vendor/assets/stylesheets/datatables.css
index 78a9dfd7f..496dee47a 100644
--- a/vendor/assets/stylesheets/datatables.css
+++ b/vendor/assets/stylesheets/datatables.css
@@ -102,24 +102,27 @@ table.dataTable thead .sorting_asc:after,
 table.dataTable thead .sorting_desc:after,
 table.dataTable thead .sorting_asc_disabled:after,
 table.dataTable thead .sorting_desc_disabled:after {
-  position: absolute;
-  bottom: 8px;
-  right: 8px;
-  display: block;
-  font-family: 'Glyphicons Halflings';
+  bottom: 12px;
+  display: inline-block;
+  font-family: 'SN-icon-font' !important;
+  font-size: 24px;
+  height: 24px;
   opacity: 0.5;
+  position: absolute;
+  right: 4px;
+  width: 24px;
 }
 table.dataTable thead .sorting:after {
   opacity: 0.2;
-  content: "\e150";
+  content: "\e915";
   /* sort */
 }
 table.dataTable thead .sorting_asc:after {
-  content: "\e155";
+  content: "\e916";
   /* sort-by-attributes */
 }
 table.dataTable thead .sorting_desc:after {
-  content: "\e156";
+  content: "\e917";
   /* sort-by-attributes-alt */
 }
 table.dataTable thead .sorting_asc_disabled:after,