Merge pull request #5594 from aignatov-bio/ai-sci-8558-add-new-buttons-ui

Add new button style [SCI-8558]

app/assets/javascripts/experiments/table.js

@@ -102,7 +102,7 @@ var ExperimnetTable = {
       $.each(data.columns, (_i, cell) => {
         let hidden = '';
 
-        if ($(`.table-display-modal .fa-eye-slash[data-column="${cell.column_type}"]`).length === 1) {
+        if ($(`.table-display-modal .sn-icon-visibility-hide[data-column="${cell.column_type}"]`).length === 1) {
           hidden = 'hidden';
         }
 
@@ -509,30 +509,30 @@ var ExperimnetTable = {
     return null;
   },
   initManageColumnsModal: function() {
-    $.each($('.table-display-modal .fa-eye-slash'), (_i, column) => {
+    $.each($('.table-display-modal .sn-icon-visibility-hide'), (_i, column) => {
       $(column).parent().removeClass('visible');
     });
     $('.experiment-table')[0].style
-      .setProperty('--columns-count', $('.table-display-modal .fa-eye:not(.disabled)').length + 1);
+      .setProperty('--columns-count', $('.table-display-modal .sn-icon-visibility-show:not(.disabled)').length + 1);
 
-    $('.table-display-modal').on('click', '.column-container .fas', (e) => {
+    $('.table-display-modal').on('click', '.column-container .sn-icon', (e) => {
       let icon = $(e.target);
-      if (icon.hasClass('fa-eye')) {
+      if (icon.hasClass('sn-icon-visibility-show')) {
         $(`.experiment-table .${icon.data('column')}-column`).addClass('hidden');
-        icon.removeClass('fa-eye').addClass('fa-eye-slash');
+        icon.removeClass('sn-icon-visibility-show').addClass('sn-icon-visibility-hide');
         icon.parent().removeClass('visible');
       } else {
         $(`.experiment-table .${icon.data('column')}-column`).removeClass('hidden');
-        icon.addClass('fa-eye').removeClass('fa-eye-slash');
+        icon.addClass('sn-icon-visibility-show').removeClass('sn-icon-visibility-hide');
         icon.parent().addClass('visible');
       }
 
-      let visibleColumns = $('.table-display-modal .fa-eye').map((_i, col) => col.dataset.column).toArray();
+      let visibleColumns = $('.table-display-modal .sn-icon-visibility-show').map((_i, col) => col.dataset.column).toArray();
       // Update columns on backend - $.post('', { columns: visibleColumns }, () => {});
       $.post($('.table-display-modal').data('column-state-url'), { columns: visibleColumns }, () => {});
 
       $('.experiment-table')[0].style
-        .setProperty('--columns-count', $('.table-display-modal .fa-eye:not(.disabled)').length + 1);
+        .setProperty('--columns-count', $('.table-display-modal .sn-icon-visibility-show:not(.disabled)').length + 1);
     });
   },
   clearRowTaskSelection: function() {

app/assets/stylesheets/application.scss

@@ -12,7 +12,56 @@
 @import "constants";
 
 @import "bootstrap-sprockets";
-@import "bootstrap";
+// Core variables and mixins
+@import "bootstrap/variables";
+@import "bootstrap/mixins";
+
+// Reset and dependencies
+@import "bootstrap/normalize";
+@import "bootstrap/print";
+@import "bootstrap/glyphicons";
+
+// Core CSS
+@import "bootstrap/scaffolding";
+@import "bootstrap/type";
+@import "bootstrap/code";
+@import "bootstrap/grid";
+@import "bootstrap/tables";
+@import "bootstrap/forms";
+
+// Components
+@import "bootstrap/component-animations";
+@import "bootstrap/dropdowns";
+@import "bootstrap/button-groups";
+@import "bootstrap/input-groups";
+@import "bootstrap/navs";
+@import "bootstrap/navbar";
+@import "bootstrap/breadcrumbs";
+@import "bootstrap/pagination";
+@import "bootstrap/pager";
+@import "bootstrap/labels";
+@import "bootstrap/badges";
+@import "bootstrap/jumbotron";
+@import "bootstrap/thumbnails";
+@import "bootstrap/alerts";
+@import "bootstrap/progress-bars";
+@import "bootstrap/media";
+@import "bootstrap/list-group";
+@import "bootstrap/panels";
+@import "bootstrap/responsive-embed";
+@import "bootstrap/wells";
+@import "bootstrap/close";
+
+// Components w/ JavaScript
+@import "bootstrap/modals";
+@import "bootstrap/tooltip";
+@import "bootstrap/popovers";
+@import "bootstrap/carousel";
+
+// Utility classes
+@import "bootstrap/utilities";
+@import "bootstrap/responsive-utilities";
+
 @import "bootstrap-datetimepicker";
 @import "bootstrap-colorselector";
 @import "bootstrap-tagsinput";

app/assets/stylesheets/application.tailwind.css

@@ -1,4 +1,5 @@
 @import "tailwind/inputs";
+@import "tailwind/buttons";
 
 @tailwind base;
 @tailwind components;

app/assets/stylesheets/dashboard/show.scss

@@ -86,6 +86,7 @@
 
 .quick-start-buttons {
   display: flex;
+  position: relative;
 
   .btn {
     margin-right: .25em;

app/assets/stylesheets/projects.scss

@@ -661,6 +661,7 @@ li.module-hover {
 
       .right {
         align-self: flex-end;
+        display: flex;
       }
 
     }

app/assets/stylesheets/shared/content_pane.scss

@@ -135,19 +135,6 @@
     .sort-menu {
       display: inline-block;
 
-      #sortMenu {
-        background: $color-white;
-
-        &:focus,
-        &:active {
-          box-shadow: none;
-        }
-
-        &:hover {
-          background: $color-concrete;
-        }
-      }
-
       .dropdown-menu {
         @include font-button;
         min-width: 200px;

app/assets/stylesheets/shared/datatable.scss

@@ -40,7 +40,7 @@
     align-items: center;
     display: flex;
     flex-wrap: wrap;
-    min-height: var(--datatable-pagination-row);
+    height: var(--datatable-pagination-row);
     position: relative;
     width: 100%;
     z-index: 101;

app/assets/stylesheets/shared_styles/constants/colors.scss

@@ -8,7 +8,7 @@ $colors:  ("sn-white": "#FFFFFF",
           "sn-blue": "#104DA9",
           "sn-science-blue": "#3B99FD",
           "sn-super-light-blue": "#F0F8FF",
-          "sn-blue-hover": "#2D5FAA",
+          "sn-blue-hover": "#254981",
           "sn-science-blue-hover": "#79B4F3",
           "sn-alert-green": "#5EC66F",
           "sn-alert-violet": "#6F2DC1",
@@ -25,6 +25,7 @@ $colors:  ("sn-white": "#FFFFFF",
           "sn-alert-science-blue-disabled": "#9DCCFE",
           "sn-delete-red": "#CE0C24",
           "sn-delete-red-hover": "#AD0015",
+          "sn-delete-red-disabled": "#F5D7DB",
           "sn-coral": "#FB565B",
           "sn-background-blue": "#DBE4F2",
           "sn-background-green": "#E7F7E9",

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

@@ -1,237 +0,0 @@
-// scss-lint:disable NestingDepth
-
-.btn{
-  @include font-button;
-  animation-timing-function: $timing-function-sharp;
-  align-items: center;
-  border-radius: $border-radius-default;
-  cursor: pointer;
-  display: inline-flex;
-  justify-content: center;
-  gap: .25em;
-  height: 36px;
-  line-height: 20px;
-  outline: 0;
-  padding: .5rem;
-  position: relative;
-  text-align: center;
-  text-decoration: none;
-  transition: .3s;
-  user-select: none;
-
-  &:hover {
-    text-decoration: none;
-  }
-
-  &:active,
-  &.active {
-    box-shadow: none;
-    text-decoration: none;
-  }
-
-  &:focus {
-    outline: 0;
-    text-decoration: none;
-  }
-
-  &.btn-primary {
-    background: $brand-primary;
-    border: 1px solid $brand-primary;
-    color: $color-white;
-
-    &:hover {
-      background: $brand-primary-hover;
-      color: $color-white;
-    }
-
-    &:active,
-    &.active {
-      background: $brand-primary-press;
-      color: $color-white;
-    }
-
-    &:focus {
-      box-shadow: 0 0 0 1px $brand-complementary;
-      color: $color-white;
-    }
-  }
-
-  &.btn-secondary {
-    background: $color-white;
-    border: $border-default;
-    color: $color-volcano;
-
-    &:hover {
-      background: $color-concrete;
-      border: $border-secondary;
-      color: $color-volcano;
-    }
-
-    &:active,
-    &.active {
-      background: $color-alto;
-      border: $border-secondary;
-      color: $color-volcano;
-    }
-
-    &:focus {
-      box-shadow: 0 0 0 1px $brand-focus;
-      color: $color-volcano;
-    }
-  }
-
-  &.btn-light {
-    background: transparent;
-    border: $border-transparent;
-    color: $color-volcano;
-
-    &:hover {
-      background: $color-concrete;
-      border: $border-transparent;
-      color: $color-volcano;
-    }
-
-    &:active,
-    &.active {
-      background: $color-alto;
-      border: $border-transparent;
-      color: $color-volcano;
-    }
-
-    &:focus {
-      border-color: $brand-focus;
-      color: $color-volcano;
-    }
-  }
-
-  &.btn-light-link {
-    background: transparent;
-    border: $border-transparent;
-    color: $brand-primary;
-
-    &:hover {
-      background: $color-concrete;
-      border: $border-transparent;
-      color: $brand-primary;
-    }
-
-    &:active,
-    &.active {
-      background: $color-alto;
-      border: $border-transparent;
-      color: $brand-primary;
-    }
-
-    &:focus {
-      box-shadow: 0 0 0 1px $brand-focus;
-      color: $brand-primary;
-    }
-  }
-
-  &.btn-danger {
-    background: $brand-danger;
-    border: $border-danger;
-    color: $color-white;
-
-    &:hover {
-      background: $brand-danger-hover;
-      color: $color-white;
-    }
-
-    &:active,
-    &.active {
-      background: $brand-danger-press;
-      color: $color-white;
-    }
-
-    &:focus {
-      box-shadow: 0 0 0 1px $brand-focus;
-      color: $color-white;
-    }
-  }
-
-  &.btn-dark-background {
-    background: $color-white;
-    border: $border-default;
-    color: $brand-primary;
-
-    &:hover {
-      background: $color-concrete;
-      color: $brand-primary-hover;
-    }
-
-    &:active,
-    &.active {
-      background: $color-alto;
-      color: $brand-primary-press;
-    }
-
-    &:focus {
-      box-shadow: 0 0 0 1px $brand-focus;
-      color: $brand-primary;
-    }
-  }
-
-  &.icon-btn {
-    padding: 0;
-    width: 36px;
-
-    img {
-      margin: 0;
-    }
-  }
-
-  &.btn-large {
-    font-size: $font-size-h2;
-    height: 3.1em;
-    padding: 1em 3em;
-  }
-
-  &.disabled,
-  &:disabled {
-    color: $color-silver-chalice;
-    cursor: auto;
-    opacity: .5;
-    pointer-events: none;
-
-    &.btn-primary,
-    &.btn-danger {
-      background: $color-alto;
-      border: $border-tertiary;
-
-      &:hover {
-        border: $border-tertiary;
-        color: $color-silver-chalice;
-      }
-    }
-
-    &.btn-secondary,
-    &.btn-light,
-    &.btn-light-link,
-    &.btn-dark-background {
-      background: $color-white;
-
-      &:hover {
-        color: $color-silver-chalice;
-      }
-    }
-  }
-}
-
-.sci-btn-group {
-  display: inline-block;
-  position: relative;
-
-  .btn {
-    float: left;
-    margin: 2px 4px 2px 0;
-
-    .fas {
-      margin-right: 8px;
-    }
-
-    &:nth-last-child(1) {
-      margin-right: 0;
-    }
-  }
-}

app/assets/stylesheets/tailwind/buttons.css

@@ -0,0 +1,118 @@
+@layer components {
+  .sci-btn-group {
+    @apply flex items-center gap-2;
+  }
+
+  .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;
+  }
+
+  .btn.icon-btn {
+    @apply px-2 ;
+  }
+
+  .btn.btn-lg {
+    @apply py-2.5 px-[1.125rem] text-base leading-5;
+  }
+
+  .btn.btn-lg.icon-btn {
+    @apply px-2.5;
+  }
+
+  .btn.btn-sm {
+    @apply py-1.5 px-2.5 text-xs leading-5;
+  }
+
+  .btn.btn-sm.icon-btn {
+    @apply px-1.5;
+  }
+
+  .btn.btn-xs {
+    @apply py-0.5 px-2.5 text-xs leading-5;
+  }
+
+  .btn.btn-xs.icon-btn {
+    @apply px-0.5;
+  }
+
+  .btn:hover {
+    @apply no-underline;
+  }
+
+  .btn:focus {
+    @apply no-underline outline-none;
+    box-shadow: 0px 0px 0px 4px var(--sn-science-blue-hover);
+    color: var(--sn-white);
+
+  }
+
+  .btn:disabled,
+  .btn.disabled {
+    @apply cursor-not-allowed pointer-events-none;
+  }
+
+  .btn.btn-primary {
+    background-color: var(--sn-blue);
+    color: var(--sn-white);
+  }
+
+  .btn.btn-primary:hover {
+    background-color: var(--sn-blue-hover);
+    color: var(--sn-white);
+  }
+
+  .btn.btn-primary:disabled,
+  .btn.btn-primary.disabled {
+    background-color: var(--sn-light-grey);
+    border: 1px solid var(--sn-light-grey);
+    color: var(--sn-sleepy-grey);
+  }
+
+  .btn.btn-secondary {
+    background-color: var(--sn-white);
+    border: 1px solid var(--sn-light-grey);
+    color: var(--sn-blue);
+  }
+
+  .btn.btn-secondary:hover {
+    border: 1px solid var(--sn-blue-hover);
+  }
+
+  .btn.btn-secondary:disabled,
+  .btn.btn-secondary.disabled {
+    background-color: var(--sn-white);
+    color: var(--sn-sleepy-grey);
+  }
+
+  .btn.btn-light {
+    background-color: transparent;
+    color: var(--sn-blue);
+  }
+
+  .btn.btn-light.btn-black {
+    color: var(--sb-black);
+  }
+
+  .btn.btn-light:hover {
+    background-color: var(--sn-super-light-grey);
+  }
+
+  .btn.btn-light:disabled,
+  .btn.btn-light.disabled {
+    color: var(--sn-sleepy-grey);
+  }
+
+  .btn.btn-danger {
+    background-color: var(--sn-delete-red);
+    color: var(--sn-white);
+  }
+
+  .btn.btn-danger:hover {
+    background-color: var(--sn-delete-red-hover);
+  }
+
+  .btn.btn-danger:disabled,
+  .btn.btn-danger.disabled {
+    background-color: var(--sn-delete-red-disabled);
+  }
+}

app/javascript/vue/navigation/top_menu.vue

@@ -15,7 +15,7 @@
       ></Select>
     </div>
     <div v-if="user" class="dropdown">
-      <button class="btn btn-light icon-btn" data-toggle="dropdown">
+      <button class="btn btn-light icon-btn btn-black" data-toggle="dropdown">
         <i class="sn-icon sn-icon-help"></i>
       </button>
       <ul v-if="user" class="dropdown-menu dropdown-menu-right">
@@ -27,7 +27,7 @@
       </ul>
     </div>
     <div v-if="user" class="dropdown">
-      <button class="btn btn-light icon-btn" data-toggle="dropdown">
+      <button class="btn btn-light icon-btn btn-black" data-toggle="dropdown">
         <i class="sn-icon sn-icon-settings"></i>
       </button>
       <ul class="dropdown-menu dropdown-menu-right">
@@ -44,7 +44,7 @@
       </ul>
     </div>
     <div v-if="user" class="sci--navigation--notificaitons-flyout-container">
-      <button class="btn btn-light icon-btn"
+      <button class="btn btn-light icon-btn btn-black"
               :class="{ 'has-unseen': unseenNotificationsCount > 0 }"
               :data-unseen="unseenNotificationsCount"
               data-toggle="dropdown"
@@ -60,7 +60,7 @@
         @close="notificationsOpened = false" />
     </div>
     <div v-if="user" class="dropdown">
-      <div class="sci--navigation--top-menu-user btn btn-light icon-btn" data-toggle="dropdown">
+      <div class="sci--navigation--top-menu-user btn btn-light icon-btn btn-black" 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">

app/views/projects/index/_toolbar.html.erb

@@ -84,6 +84,7 @@
               </div>
             </div>
           <% end %>
+        </div>
         <div class="dropdown sort-menu">
           <button class="btn btn-light icon-btn dropdown-toggle" type="button" id="sortMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
             <span><i class="sn-icon sn-icon-sort-down"></i></span>
@@ -102,7 +103,6 @@
             <% end %>
           </ul>
         </div>
-        </div>
       </span>
     </div>
   </div>