Fix buttons

dodona-edu · Jun 21, 2023 · 6661fbf · 6661fbf
1 parent b3a5c91
commit 6661fbf
Show file tree

Hide file tree

Showing 26 changed files with 80 additions and 94 deletions.
diff --git a/app/assets/javascripts/components/course_labels_search_bar.ts b/app/assets/javascripts/components/course_labels_search_bar.ts
@@ -104,7 +104,7 @@ export class CourseLabelsSearchBar extends ShadowlessLitElement {
                         @input=${e => this.handleInput(e)}
                         placeholder="${I18n.t("js.course_labels_search_bar.placeholder")}"
                     ></d-datalist-input>
-                    <a type="button" class="btn btn-primary add-button" @click="${this.addLabel}">${I18n.t("js.course_labels_search_bar.add")}</a>
+                    <a type="button" class="btn btn-filled add-button" @click="${this.addLabel}">${I18n.t("js.course_labels_search_bar.add")}</a>
                 </div>
                 <span class="help-block">${I18n.t("js.course_labels_search_bar.edit_explanation")}</span>
             </div>

diff --git a/app/assets/javascripts/components/saved_annotations/edit_saved_annotation.ts b/app/assets/javascripts/components/saved_annotations/edit_saved_annotation.ts
@@ -59,13 +59,13 @@ export class EditSavedAnnotation extends modalMixin(ShadowlessLitElement) {
             ></d-saved-annotation-form>
         `, html`
             <d-delete-saved-annotation .savedAnnotationId=${this.savedAnnotation.id}></d-delete-saved-annotation>
-            <button class="btn btn-danger btn-text" @click=${() => this.deleteSavedAnnotation()}>
+            <button class="btn d-btn-danger btn-text" @click=${() => this.deleteSavedAnnotation()}>
                 ${I18n.t("js.saved_annotation.edit.delete")}
             </button>
-            <button class="btn btn-primary btn-text" @click=${() => this.hideModal()}>
+            <button class="btn btn-text" @click=${() => this.hideModal()}>
                 ${I18n.t("js.saved_annotation.edit.cancel")}
             </button>
-            <button class="btn btn-primary" @click=${() => this.updateSavedAnnotation()}>
+            <button class="btn btn-filled" @click=${() => this.updateSavedAnnotation()}>
                 ${I18n.t("js.saved_annotation.edit.save")}
             </button>
         `);

diff --git a/app/assets/javascripts/components/saved_annotations/new_saved_annotation.ts b/app/assets/javascripts/components/saved_annotations/new_saved_annotation.ts
@@ -78,7 +78,7 @@ export class NewSavedAnnotation extends modalMixin(ShadowlessLitElement) {
                 @change=${e => this.savedAnnotation = e.detail}
             ></d-saved-annotation-form>
         `, html`
-            <button class="btn btn-primary btn-text" @click=${() => this.createSavedAnnotation()}>
+            <button class="btn btn-text" @click=${() => this.createSavedAnnotation()}>
                 ${I18n.t("js.saved_annotation.new.save")}
             </button>
         `);

diff --git a/app/assets/javascripts/components/sign_in_search_bar.ts b/app/assets/javascripts/components/sign_in_search_bar.ts
@@ -62,7 +62,7 @@ export class SignInSearchBar extends ShadowlessLitElement {
                     @input=${e => this.handleInput(e)}
                     placeholder="${I18n.t("js.sign_in_search_bar.institution_search")}"
                 ></d-datalist-input>
-                <a class="btn btn-primary btn-lg login-button ${this.selected_provider == "" ? "disabled": ""}"
+                <a class="btn btn-filled btn-lg login-button ${this.selected_provider == "" ? "disabled": ""}"
                    href=${this.link}>
                     ${I18n.t("js.sign_in_search_bar.log_in")}
                 </a>

diff --git a/app/assets/javascripts/exercise.ts b/app/assets/javascripts/exercise.ts
@@ -341,10 +341,10 @@ function initExerciseShow(exerciseId: number, programmingLanguage: string, logge
         const icon = fab.children[0];
         icon.classList.remove("mdi-pencil");
         if (status === "correct") {
-            fab.classList.add("correct");
+            fab.classList.add("d-btn-success");
             icon.classList.add(getPositiveEmoji());
         } else {
-            fab.classList.add("wrong");
+            fab.classList.add("d-btn-danger");
             icon.classList.add("mdi-emoticon-sad-outline");
         }
         setTimeout(resetFABStatus, 4000);
@@ -353,7 +353,7 @@ function initExerciseShow(exerciseId: number, programmingLanguage: string, logge
     function resetFABStatus(): void {
         const fab = document.getElementById("submission-copy-btn");
         const icon = fab.children[0];
-        fab.classList.remove("correct", "wrong");
+        fab.classList.remove("d-btn-success", "d-btn-danger");
         icon.classList.remove(...icon.classList);
         icon.classList.add("mdi", "mdi-pencil");
     }

diff --git a/app/assets/javascripts/repository.ts b/app/assets/javascripts/repository.ts
@@ -74,7 +74,7 @@ function initAdminsEdit(): void {
         deleteButton.innerHTML = "<i class='mdi mdi-delete'></i>";
         deleteButton.classList.add("remove-admin");
         deleteButton.classList.add("btn-icon-filled");
-        deleteButton.classList.add("bg-danger");
+        deleteButton.classList.add("d-btn-danger");
         deleteButton.addEventListener("click", onRemoveClick);
         document.querySelector("#admin-table-wrapper table tbody").append(newRow);
         addButton.classList.add("invisible");
@@ -158,7 +158,7 @@ function initCoursesEdit(): void {
         deleteButton.innerHTML = "<i class='mdi mdi-delete'></i>";
         deleteButton.classList.add("remove-course");
         deleteButton.classList.add("btn-icon-filled");
-        deleteButton.classList.add("bg-danger");
+        deleteButton.classList.add("d-btn-danger");
         deleteButton.addEventListener("click", onRemoveClick);
         document.querySelector("#allowed-courses-table-wrapper table tbody").append(newRow);
         addButton.classList.add("invisible");

diff --git a/app/assets/stylesheets/bootstrap_variable_overrides.css.scss b/app/assets/stylesheets/bootstrap_variable_overrides.css.scss
@@ -21,11 +21,6 @@
 // inputs
 $input-border-color: var(--d-outline);
 
-// pagination
-$pagination-bg: var(--d-surface);
-$pagination-hover-bg: var(--d-surface);
-$pagination-disabled-bg: var(--d-background);
-//
 //$modal-content-bg: $surface;
 //
 //$form-check-input-checked-bg-color: $secondary;

diff --git a/app/assets/stylesheets/components/btn.css.scss b/app/assets/stylesheets/components/btn.css.scss
@@ -43,20 +43,29 @@
     opacity: 0.38;
     pointer-events: none;
   }
+
+  // define the default button colors
+  // makes it easier to combine with other classes such as d-btn-danger, d-btn-success, etc.
+  --d-btn-color: var(--d-primary);
+  --d-btn-color-rgb: var(--d-primary-rgb);
+  --d-on-btn-color: var(--d-on-primary);
 }
 
 .btn.btn-filled {
-  background: var(--d-primary);
-  color: var(--d-on-primary);
+  background: var(--d-btn-color);
+  color: var(--d-on-btn-color);
 
   &:hover {
     @include shadow-z2;
   }
 }
 
 .btn.btn-tonal {
-  background: var(--d-secondary-container);
-  color: var(--d-on-secondary-container);
+  --d-btn-color: var(--d-secondary-container);
+  --d-on-btn-color: var(--d-on-secondary-container);
+
+  background: var(--d-btn-color);
+  color: var(--d-on-btn-color);
 
   &:hover {
     @include shadow-z1;
@@ -74,13 +83,13 @@
 .btn.btn-text,
 .btn.btn-outline {
   background: none;
-  color: var(--d-primary);
+  color: var(--d-btn-color);
 
   &:hover,
   &:focus,
   &:active {
     opacity: 1;
-    background: rgba(var(--d-primary-rgb), 0.1);
+    background: rgba(var(--d-btn-color-rgb), 0.1);
   }
 }
 
@@ -116,7 +125,7 @@
   &:hover,
   &:focus,
   &:active {
-    border-color: var(--d-primary);
+    border-color: var(--d-btn-color);
   }
 
   &:disabled {
@@ -129,7 +138,7 @@
 .btn.btn-icon {
   width: 40px;
   padding: 0;
-  color: var(--d-primary);
+  color: var(--d-btn-color);
 
   // enable pointer events to enable tooltips to be shown on disabled buttons
   &.disabled-with-tooltip {
@@ -142,12 +151,12 @@
     &:focus,
     &:active {
       opacity: 1;
-      background: rgba(var(--d-primary-rgb), 0.1);
+      background: rgba(var(--d-btn-color-rgb), 0.1);
     }
   }
 
   &.btn-icon-inverted {
-    color: var(--d-on-primary);
+    color: var(--d-on-btn-color);
 
     &:hover,
     &:focus,
@@ -169,23 +178,25 @@
   }
 
   &.btn-icon-filled {
-    color: var(--d-on-primary);
+    color: var(--d-on-btn-color);
+    background: var(--d-btn-color);
 
     &:hover,
     &:focus,
     &:active {
-      opacity: 1;
-      filter: brightness(0.95);
+      @include shadow-z2;
     }
   }
 }
 
-.btn.btn-fab {
-  height: 56px;
-  width: 56px;
-  border-radius: 16px;
-  background: var(--d-secondary-container);
-  color: var(--d-on-secondary-container);
+.btn.btn-fab,
+.btn.btn-fab-small,
+.btn.btn-fab-small-extended {
+  --d-btn-color: var(--d-secondary-container);
+  --d-on-btn-color: var(--d-on-secondary-container);
+
+  background: var(--d-btn-color);
+  color: var(--d-on-btn-color);
 
   @include shadow-z2;
 
@@ -199,56 +210,24 @@
 
     @include shadow-z3;
   }
+}
 
-  &.correct {
-    background-color: var(--d-success);
-  }
-
-  &.wrong {
-    background-color: var(--d-danger);
-  }
+.btn.btn-fab {
+  height: 56px;
+  width: 56px;
+  border-radius: 16px;
 }
 
 .btn.btn-fab-small {
   height: 40px;
   width: 40px;
   border-radius: 12px;
-  background: var(--d-secondary-container);
-  color: var(--d-on-secondary-container);
   padding: 6px;
-
-  @include shadow-z2;
-
-  &:hover,
-  &:focus,
-  &:active,
-  &:disabled,
-  &.disabled {
-    opacity: 1;
-    filter: brightness(0.95);
-
-    @include shadow-z3;
-  }
 }
 
 .btn.btn-fab-small-extended {
   height: 40px;
   border-radius: 12px;
-  background: var(--d-secondary-container);
-  color: var(--d-on-secondary-container);
-
-  @include shadow-z2;
-
-  &:hover,
-  &:focus,
-  &:active,
-  &:disabled,
-  &.disabled {
-    opacity: 1;
-    filter: brightness(0.95);
-
-    @include shadow-z3;
-  }
 }
 
 .btn-group {
@@ -265,11 +244,11 @@
     &:hover,
     &:focus,
     &:active {
-      background: rgba(var(--d-primary-rgb), 0.1);
+      background: rgba(var(--d-btn-color-rgb), 0.1);
     }
 
     &.active {
-      background: rgba(var(--d-primary-rgb), 0.2);
+      background: rgba(var(--d-btn-color-rgb), 0.2);
     }
   }
 }
@@ -366,3 +345,15 @@
   color: unset;
   transition: background-color 0s;
 }
+
+.btn.d-btn-danger {
+  --d-btn-color: var(--d-danger);
+  --d-btn-color-rgb: var(--d-danger-rgb);
+  --d-on-btn-color: var(--d-on-danger);
+}
+
+.btn.d-btn-success {
+  --d-btn-color: var(--d-success);
+  --d-btn-color-rgb: var(--d-success-rgb);
+  --d-on-btn-color: var(--d-on-success);
+}
diff --git a/app/views/announcements/_announcement_table.html.erb b/app/views/announcements/_announcement_table.html.erb
@@ -57,7 +57,7 @@
             <% end %>
           <% end %>
           <% if policy(announcement).destroy? %>
-            <%= link_to announcement, method: :delete, data: {confirm: t("general.are_you_sure")}, class: "btn btn-icon btn-icon-filled bg-danger" do %>
+            <%= link_to announcement, method: :delete, data: {confirm: t("general.are_you_sure")}, class: "btn btn-icon btn-icon-filled d-btn-danger" do %>
               <i class="mdi mdi-delete"></i>
             <% end %>
           <% end %>

diff --git a/app/views/announcements/edit.html.erb b/app/views/announcements/edit.html.erb
@@ -11,7 +11,7 @@
       </div>
       <div class="card-actions card-border">
         <% if policy(@announcement).destroy? %>
-          <%= link_to @announcement, method: :delete, data: { confirm: t("general.are_you_sure") }, class: "btn btn-filled with-icon  bg-danger" do %>
+          <%= link_to @announcement, method: :delete, data: { confirm: t("general.are_you_sure") }, class: "btn btn-filled with-icon  d-btn-danger" do %>
             <i class="mdi mdi-delete"></i>
             <%= t ".destroy" %>
           <% end %>

diff --git a/app/views/api_tokens/_table.html.erb b/app/views/api_tokens/_table.html.erb
@@ -15,7 +15,7 @@
         <td><%= token.description %></td>
         <td><%= l token.created_at %></td>
         <td class="text-end">
-          <%= button_to api_token_path(token), method: :delete, remote: true, class: 'btn btn-icon btn-icon-filled bg-danger' do %>
+          <%= button_to api_token_path(token), method: :delete, remote: true, class: 'btn btn-icon btn-icon-filled d-btn-danger' do %>
             <i class="mdi mdi-delete"></i>
           <% end %>
         </td>

diff --git a/app/views/auth/confirm_new_user.html.erb b/app/views/auth/confirm_new_user.html.erb
@@ -13,7 +13,7 @@
         <%= markdown t(".message_personal_p2") %>
       <% end %>
       <div>
-        <%= link_to t(".create_new_account"), confirm_new_user_path, method: :post, class: "btn btn-primary" %>
+        <%= link_to t(".create_new_account"), confirm_new_user_path, method: :post, class: "btn btn-filled" %>
       </div>
     </div>
     <% @users.each do |user| %>

diff --git a/app/views/auth/privacy_prompt.html.erb b/app/views/auth/privacy_prompt.html.erb
@@ -10,10 +10,10 @@
         </div>
       </div>
       <div class="card-actions card-border">
-        <%= link_to root_path, class: "btn btn-danger" do %>
+        <%= link_to root_path, class: "btn d-btn-danger" do %>
           <%= t ".decline_button" %>
         <% end %>
-        <%= link_to privacy_prompt_path, method: :post, class: "btn btn-primary" do %>
+        <%= link_to privacy_prompt_path, method: :post, class: "btn btn-filled" do %>
           <%= t ".accept_button" %>
         <% end %>
       </div>

diff --git a/app/views/course_members/_course_membership_buttons.html.erb b/app/views/course_members/_course_membership_buttons.html.erb
@@ -11,7 +11,7 @@
                 remote: true,
                 params: {user: user.id, status: 'unsubscribed'},
                 title: t('users.index.decline'),
-                class: 'btn btn-icon btn-icon-filled bg-danger' do %>
+                class: 'btn btn-icon btn-icon-filled d-btn-danger' do %>
     <i class="mdi mdi-delete" aria-hidden='true'></i>
   <% end %>
 <% when 'student' %>

diff --git a/app/views/courses/edit.html.erb b/app/views/courses/edit.html.erb
@@ -34,7 +34,7 @@
       </div>
       <% if policy(@course).destroy? %>
         <div class="card-actions card-border">
-          <%= link_to @course, method: :delete, data: {confirm: t("general.are_you_sure")}, class: "btn btn-filled bg-danger", title: t(".delete.button") do %>
+          <%= link_to @course, method: :delete, data: {confirm: t("general.are_you_sure")}, class: "btn btn-filled d-btn-danger", title: t(".delete.button") do %>
             <%= t('.delete.button') %>
           <% end %>
         </div>

diff --git a/app/views/judges/index.html.erb b/app/views/judges/index.html.erb
@@ -37,7 +37,7 @@
                     <% end %>
                   <% end %>
                   <% if policy(judge).destroy? %>
-                    <%= link_to judge, method: :delete, data: {confirm: t("general.are_you_sure")}, class: "btn btn-icon btn-icon-filled bg-danger" do %>
+                    <%= link_to judge, method: :delete, data: {confirm: t("general.are_you_sure")}, class: "btn btn-icon btn-icon-filled d-btn-danger" do %>
                       <i class="mdi mdi-delete"></i>
                     <% end %>
                   <% end %>

diff --git a/app/views/labels/_labels_table.html.erb b/app/views/labels/_labels_table.html.erb
@@ -24,7 +24,7 @@
             <% end %>
           <% end %>
           <% if policy(Label).destroy? %>
-            <%= link_to label, method: :delete, data: {confirm: t("general.are_you_sure")}, class: "btn btn-icon btn-icon-filled bg-danger" do %>
+            <%= link_to label, method: :delete, data: {confirm: t("general.are_you_sure")}, class: "btn btn-icon btn-icon-filled d-btn-danger" do %>
               <i class="mdi mdi-delete"></i>
             <% end %>
           <% end %>

diff --git a/app/views/notifications/_notifications_table.html.erb b/app/views/notifications/_notifications_table.html.erb
@@ -23,7 +23,7 @@
         <span class="btn btn-icon read-toggle-button" >
           <i class="mdi mdi-circle-medium read-indicator" title="<%= n.read ? t('js.mark_as_unread') : t('js.mark_as_read') %>"></i>
         </span>
-        <span class="btn btn-icon btn-icon-filled bg-danger delete-button" title="<%= t('notifications.index.delete') %>">
+        <span class="btn btn-icon btn-icon-filled d-btn-danger delete-button" title="<%= t('notifications.index.delete') %>">
           <i class="mdi mdi-delete"></i>
         </span>
       </td>