From 8af68bbe09b04b03559fbe9290bbf076a21c7a45 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mikel=20Mart=C3=ADn?= <mikel@moodle.com>
Date: Thu, 20 Jul 2023 12:18:08 +0200
Subject: [PATCH] MDL-78558 core_courseformat: Activity cards UI improvements

- Fix action menu and completion button size
- New 'Add activity' button styles
- Fix restriction container styles
- Fix action menu and groupmode button styles
- Fix hover styles for action menu and groupmode button
- Fix groupmode spacing styles
- Homogenize completion button colours
- Fix inplaceeditable and badge positioning
- Fix export filesize related behat
- Homogenize activity/section availability
- New add topic styles
---
 .../tests/behat/dataexport.feature            |   2 +-
 .../tests/behat/add_filetypes.feature         |   2 +-
 .../local/content/addsection.mustache         |   4 +-
 .../local/content/availability.mustache       |  13 +-
 .../local/content/cm/activitybadge.mustache   |  10 +-
 .../local/content/cm/availability.mustache    |   2 +-
 .../local/content/cm/cmname.mustache          |   2 +-
 .../local/content/cm/groupmode.mustache       |   4 +-
 .../templates/activitychooserbutton.mustache  |   4 +-
 .../tests/behat/add_custom_file_type.feature  |   2 +-
 theme/boost/scss/moodle/course.scss           |  78 +--
 theme/boost/style/moodle.css                  | 449 +++++++++++++++---
 theme/classic/style/moodle.css                | 449 +++++++++++++++---
 13 files changed, 832 insertions(+), 189 deletions(-)

diff --git a/admin/tool/dataprivacy/tests/behat/dataexport.feature b/admin/tool/dataprivacy/tests/behat/dataexport.feature
index bef9452fca4..7535de26a56 100644
--- a/admin/tool/dataprivacy/tests/behat/dataexport.feature
+++ b/admin/tool/dataprivacy/tests/behat/dataexport.feature
@@ -185,7 +185,7 @@ Feature: Data export from the privacy API
     And I reload the page
     And I should see "Download ready" in the "Victim User 1" "table_row"
     And I open the action menu in "Victim User 1" "table_row"
-    And following "Download" should download between "1" and "167500" bytes
+    And following "Download" should download between "1" and "169000" bytes
     And the following config values are set as admin:
       | privacyrequestexpiry | 1 | tool_dataprivacy |
     And I wait "1" seconds
diff --git a/admin/tool/filetypes/tests/behat/add_filetypes.feature b/admin/tool/filetypes/tests/behat/add_filetypes.feature
index 2d3bf3ccee6..13b1e2acba3 100644
--- a/admin/tool/filetypes/tests/behat/add_filetypes.feature
+++ b/admin/tool/filetypes/tests/behat/add_filetypes.feature
@@ -129,4 +129,4 @@ Feature: Add customised file types
     And I expand all fieldsets
     And I set the field "Show type" to "1"
     And I press "Save and return to course"
-    Then I should see "FROG" in the "div.activitybadge" "css_element"
+    Then I should see "FROG" in the "span.activitybadge" "css_element"
diff --git a/course/format/templates/local/content/addsection.mustache b/course/format/templates/local/content/addsection.mustache
index 06de0f62baf..5a762b9bc57 100644
--- a/course/format/templates/local/content/addsection.mustache
+++ b/course/format/templates/local/content/addsection.mustache
@@ -53,13 +53,13 @@
     {{#addsections}}
     <a
         href="{{{url}}}"
-        class="add-sections"
+        class="add-sections btn btn-link px-0"
         data-add-sections="{{title}}"
         data-new-sections="{{newsection}}"
         data-action="addSection"
         {{#insertafter}} data-id="{{id}}" {{/insertafter}}
     >
-        {{title}}
+        {{#pix}}t/switch_plus, moodle{{/pix}}{{title}}
     </a>
     {{/addsections}}
 </div>
diff --git a/course/format/templates/local/content/availability.mustache b/course/format/templates/local/content/availability.mustache
index ef88b91aef3..e3fc1e81b5f 100644
--- a/course/format/templates/local/content/availability.mustache
+++ b/course/format/templates/local/content/availability.mustache
@@ -28,7 +28,9 @@
     }
 }}
 {{^excerpt}}
-    {{#pix}}t/unlock, core{{/pix}} {{{text}}}
+    <div{{#editing}} class="mt-2"{{/editing}}>
+        {{#pix}}t/unlock, core{{/pix}} {{{text}}}
+    </div>
 {{/excerpt}}
 {{#excerpt}}
     {{< core/showmore }}
@@ -39,14 +41,17 @@
             {{#pix}}t/unlock, core{{/pix}} {{{text}}}
         {{/expandedcontent}}
         {{$buttonextraclasses}}font-weight-bold{{/buttonextraclasses}}
-        {{$collapsedextraclasses}}text-truncate pr-2{{/collapsedextraclasses}}
-        {{$expandedextraclasses}}py-2{{/expandedextraclasses}}
+        {{$collapsedextraclasses}}text-truncate pr-2 {{#editing}}mt-2{{/editing}}{{/collapsedextraclasses}}
+        {{$expandedextraclasses}}
+            {{^editing}}py-2{{/editing}}
+            {{#editing}}mt-2 pb-2{{/editing}}
+        {{/expandedextraclasses}}
     {{/core/showmore }}
 {{/excerpt}}
 {{#editing}}
     {{#editurl}}
         <div class="editavailability border-top mt-2 py-2">
-            <a href="{{editurl}}" class="p-1">{{#pix}} i/edit, core {{/pix}}{{#str}}editsettings, availability{{/str}}</a>
+            <a href="{{editurl}}" class="px-2 py-1">{{#pix}} i/edit, core {{/pix}}{{#str}}editsettings, availability{{/str}}</a>
         </div>
     {{/editurl}}
 {{/editing}}
diff --git a/course/format/templates/local/content/cm/activitybadge.mustache b/course/format/templates/local/content/cm/activitybadge.mustache
index 4c8f0f8af50..76e39c7c680 100644
--- a/course/format/templates/local/content/cm/activitybadge.mustache
+++ b/course/format/templates/local/content/cm/activitybadge.mustache
@@ -39,17 +39,17 @@
         ]
     }
 }}
-<div
+<span
     {{#badgeelementid}}id="{{.}}"{{/badgeelementid}}
-    class="mx-2 d-flex align-items-center"
+    class="ml-1"
     {{#badgeextraattributes}} {{name}}="{{value}}" {{/badgeextraattributes}}
 >
-    <div class="activitybadge badge badge-pill {{badgestyle}}">
+    <span class="activitybadge badge badge-pill {{badgestyle}}">
         {{#badgeurl}}
             <a href="{{.}}">{{badgecontent}}</a>
         {{/badgeurl}}
         {{^badgeurl}}
             {{badgecontent}}
         {{/badgeurl}}
-    </div>
-</div>
+    </span>
+</span>
diff --git a/course/format/templates/local/content/cm/availability.mustache b/course/format/templates/local/content/cm/availability.mustache
index 633dd907c3b..98ea2b2d5b5 100644
--- a/course/format/templates/local/content/cm/availability.mustache
+++ b/course/format/templates/local/content/cm/availability.mustache
@@ -36,7 +36,7 @@
 }}
 {{#hasmodavailability}}
     {{#info}}
-        <div class="activity-availability availabilityinfo small {{classes}}" data-region="availabilityinfo">
+        <div class="activity-availability availabilityinfo {{classes}}" data-region="availabilityinfo">
         {{^isrestricted}}
             <span class="badge badge-pill badge-warning">{{{text}}}</span>
         {{/isrestricted}}
diff --git a/course/format/templates/local/content/cm/cmname.mustache b/course/format/templates/local/content/cm/cmname.mustache
index 34346542741..7df6ed914d2 100644
--- a/course/format/templates/local/content/cm/cmname.mustache
+++ b/course/format/templates/local/content/cm/cmname.mustache
@@ -58,7 +58,7 @@
     <div class="activity-name-area activity-instance d-flex flex-column mr-2 ">
         <div class="activitytitle media {{textclasses}} modtype_{{modname}} position-relative align-self-start">
             <div class="media-body align-self-center">
-                <div class="activityname d-flex">
+                <div class="activityname">
                     {{#activityname}}
                         {{$ core/inplace_editable }}
                             {{> core/inplace_editable }}
diff --git a/course/format/templates/local/content/cm/groupmode.mustache b/course/format/templates/local/content/cm/groupmode.mustache
index 737f1c37f9a..b469ef28d3e 100644
--- a/course/format/templates/local/content/cm/groupmode.mustache
+++ b/course/format/templates/local/content/cm/groupmode.mustache
@@ -31,7 +31,7 @@
         {{< core/local/dropdown/status}}
             {{$ buttonclasses }}
                 {{#autohide}} v-parent-focus {{/autohide}}
-                groupmode-information btn pt-1 icon-no-margin
+                groupmode-information btn btn-icon icon-no-margin
             {{/ buttonclasses }}
             {{$ buttoncontent }}
                 {{{groupicon}}}
@@ -44,7 +44,7 @@
     <div
     data-region="groupmode-information"
     data-activityname="{{activityname}}"
-    class="groupmode-information d-flex align-items-center"
+    class="groupmode-information d-flex align-items-center justify-content-center icon-no-margin"
 >
     {{#groupicon}}{{{groupicon}}}{{/groupicon}}
     {{#groupalt}}
diff --git a/course/templates/activitychooserbutton.mustache b/course/templates/activitychooserbutton.mustache
index 04ecfa0ddd1..91615f7065f 100644
--- a/course/templates/activitychooserbutton.mustache
+++ b/course/templates/activitychooserbutton.mustache
@@ -29,9 +29,9 @@
         "sectionreturn": 0
     }
 }}
-<button class="btn btn-link text-decoration-none section-modchooser section-modchooser-link activity-add bulk-hidden d-flex align-items-center p-3 mb-3"
+<button class="btn btn-link text-decoration-none section-modchooser section-modchooser-link activity-add bulk-hidden d-flex align-items-center p-3 mb-5"
      data-action="open-chooser" data-sectionid="{{sectionid}}" data-sectionreturnid="{{sectionreturn}}">
-    <span class="pluscontainer icon-no-margin icon-size-3 d-flex p-2 mr-3">
+    <span class="pluscontainer icon-no-margin icon-size-3 d-flex p-2 mr-2">
         {{#pix}} t/add, core {{/pix}}
     </span>
     <span class="activity-add-text">{{#str}}addresourceoractivity, core{{/str}}</span>
diff --git a/files/tests/behat/add_custom_file_type.feature b/files/tests/behat/add_custom_file_type.feature
index 3454859a255..c5aa2c8ce8b 100644
--- a/files/tests/behat/add_custom_file_type.feature
+++ b/files/tests/behat/add_custom_file_type.feature
@@ -36,5 +36,5 @@ Feature: Add a new custom file type
       | Display resource description | 1             |
     And I am on "Course 1" course homepage
     Then I should see "Test file"
-    And I should see "MDLR" in the "div.activitybadge" "css_element"
+    And I should see "MDLR" in the "span.activitybadge" "css_element"
     And I should not see "MDLR" in the "span.resourcelinkdetails" "css_element"
diff --git a/theme/boost/scss/moodle/course.scss b/theme/boost/scss/moodle/course.scss
index 89b2127008a..baac40466db 100644
--- a/theme/boost/scss/moodle/course.scss
+++ b/theme/boost/scss/moodle/course.scss
@@ -1274,7 +1274,8 @@ $activity-add-hover: theme-color-level('primary', -10) !default;
 // Activity completion button custom styling mixin.
 @mixin completion-button() {
     &.btn {
-        border: $border-width solid $gray-400;
+        @include button-variant($white, $gray-400, $gray-600);
+        min-height: map-get($iconsizes, 5);
         font-weight: bold;
         @include border-radius();
         .icon {
@@ -1284,7 +1285,11 @@ $activity-add-hover: theme-color-level('primary', -10) !default;
     @each $color, $value in $theme-colors {
         &.btn-#{$color} {
             $bg-color: theme-color-level($color, $alert-bg-level);
-            @include alert-variant($bg-color, $bg-color, $value);
+            @include button-variant($bg-color, $bg-color, $value);
+            color: $value;
+            &:hover {
+                color: color-yiq($value);
+            }
         }
     }
 }
@@ -1297,6 +1302,9 @@ $activity-add-hover: theme-color-level('primary', -10) !default;
     border-width: $border-width;
     .pluscontainer {
         border: $border-width solid $primary-light-border;
+        border-radius: 50%;
+        width: map-get($iconsizes, 5);
+        height: map-get($iconsizes, 5);
     }
     &:hover {
         cursor: pointer;
@@ -1316,10 +1324,19 @@ $activity-add-hover: theme-color-level('primary', -10) !default;
     @include border-radius($activity-item-border-radius);
 }
 
+/* Add section */
+
 .changenumsections {
     border-top: $border-width solid $primary-light-border;
 }
 
+.add-sections {
+    .icon {
+        margin-right: map-get($spacers, 1);
+        font-size: inherit;
+    }
+}
+
 /* Section Expand all/Collapse all */
 
 .section-collapsemenu {
@@ -1367,11 +1384,6 @@ $activity-add-hover: theme-color-level('primary', -10) !default;
         }
     }
 
-    .inplaceeditable {
-        display: flex;
-        align-items: center;
-    }
-
     .summarytext {
         // Add rounded borders to images.
         img {
@@ -1384,20 +1396,21 @@ $activity-add-hover: theme-color-level('primary', -10) !default;
         margin-top: map-get($spacers, 2);
         padding: map-get($spacers, 1) map-get($spacers, 3);
         background-color: $gray-200;
+        @include font-size($small-font-size);
         @include border-radius($activity-item-border-radius);
-
         .editavailability {
-            padding: map-get($spacers, 1) map-get($spacers, 3);
-            @include border-radius(1rem);
-
-            :hover {
-                background-color: $gray-400;
-            }
-
             a {
                 @include border-radius(0.5rem);
                 color: $body-color;
                 text-decoration: none;
+                font-weight: bold;
+                &:hover {
+                    background-color: $gray-400;
+                }
+                .icon {
+                    font-size: inherit;
+                    margin-right: map-get($spacers, 1);
+                }
             }
         }
     }
@@ -1539,8 +1552,9 @@ $activity-add-hover: theme-color-level('primary', -10) !default;
         }
         // Override '.btn.btn-icon' styles from buttons.scss to make action menu buttons smaller.
         .action-menu .btn.btn-icon {
-            height: ($icon-width + 15px);
-            width: ($icon-width + 15px);
+            height: map-get($iconsizes, 5);
+            width: map-get($iconsizes, 5);
+            @include border-radius();
         }
     }
 
@@ -1559,7 +1573,6 @@ $activity-add-hover: theme-color-level('primary', -10) !default;
             margin-top: map-get($spacers, 2);
         }
     }
-
     .activity-name-area {
         grid-area: name;
         // Prevent bootstrap strech-link from covering the inplace editable button using z-index.
@@ -1568,6 +1581,7 @@ $activity-add-hover: theme-color-level('primary', -10) !default;
                 margin-left: 0.5rem;
             }
             .inplaceeditable .quickeditlink {
+                position: relative;
                 z-index: 2;
                 margin-left: 0.5rem;
             }
@@ -1622,19 +1636,31 @@ $activity-add-hover: theme-color-level('primary', -10) !default;
         grid-area: groupmode;
         justify-self: end;
         .groupmode-information {
-            height: ($icon-width + 15px);
-            .groupmode-icon-info {
-                display: none;
-            }
+            height: map-get($iconsizes, 5);
+            width: map-get($iconsizes, 5);
+            @include border-radius();
+        }
+        .groupmode-icon-info {
+            display: none;
         }
         @include media-breakpoint-down(xs) {
             width: 100%;
             margin-top: map-get($spacers, 2);
             padding-top: map-get($spacers, 2);
             border-top: $border-width solid $border-color;
-            .groupmode-information .groupmode-icon-info {
+            .groupmode-information {
+                width: auto;
+                font-size: inherit;
+                padding: 0 map-get($spacers, 2);
+            }
+            .groupmode-icon-info {
                 display: inline;
             }
+            // Disable v-parent-focus behaviour on small devices to always show the groupmode button.
+            .v-parent-focus {
+                opacity: 1;
+                visibility: visible;
+            }
         }
     }
 
@@ -1676,12 +1702,6 @@ $activity-add-hover: theme-color-level('primary', -10) !default;
         border-top: $border-width solid $border-color;
     }
 
-    .inplaceeditable {
-        display: flex;
-        flex: 0 1 auto;
-        max-width: 100%;
-    }
-
     .no-overflow {
         width: 100%;
     }
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index 114f1d174a7..96438708826 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -29034,6 +29034,9 @@ span.editinstructions .alert-link {
 .activity-add .pluscontainer,
 .block-add .pluscontainer {
   border: 1px solid #3584c9;
+  border-radius: 50%;
+  width: 32px;
+  height: 32px;
 }
 .activity-add:hover,
 .block-add:hover {
@@ -29053,10 +29056,16 @@ span.editinstructions .alert-link {
   border-radius: 1rem;
 }
 
+/* Add section */
 .changenumsections {
   border-top: 1px solid #3584c9;
 }
 
+.add-sections .icon {
+  margin-right: 0.25rem;
+  font-size: inherit;
+}
+
 /* Section Expand all/Collapse all */
 .section-collapsemenu .collapseall {
   display: block;
@@ -29089,10 +29098,6 @@ span.editinstructions .alert-link {
 .course-section .section_action_menu .dropdown-toggle::after {
   display: none;
 }
-.course-section .inplaceeditable {
-  display: flex;
-  align-items: center;
-}
 .course-section .summarytext img {
   border-radius: 1rem;
 }
@@ -29100,19 +29105,21 @@ span.editinstructions .alert-link {
   margin-top: 0.5rem;
   padding: 0.25rem 1rem;
   background-color: #e9ecef;
+  font-size: 0.875em;
   border-radius: 1rem;
 }
-.course-section .availabilityinfo .editavailability {
-  padding: 0.25rem 1rem;
-  border-radius: 1rem;
-}
-.course-section .availabilityinfo .editavailability :hover {
-  background-color: #ced4da;
-}
 .course-section .availabilityinfo .editavailability a {
   border-radius: 0.5rem;
   color: #1d2125;
   text-decoration: none;
+  font-weight: bold;
+}
+.course-section .availabilityinfo .editavailability a:hover {
+  background-color: #ced4da;
+}
+.course-section .availabilityinfo .editavailability a .icon {
+  font-size: inherit;
+  margin-right: 0.25rem;
 }
 .course-section.section-summary {
   padding-left: 1rem;
@@ -29214,8 +29221,9 @@ span.editinstructions .alert-link {
   display: none;
 }
 .activity-item .activity-actions .action-menu .btn.btn-icon {
-  height: 31px;
-  width: 31px;
+  height: 32px;
+  width: 32px;
+  border-radius: 0.5rem;
 }
 .activity-item .activity-icon {
   grid-area: icon;
@@ -29240,6 +29248,7 @@ span.editinstructions .alert-link {
   margin-left: 0.5rem;
 }
 .activity-item .activity-name-area .activityname .inplaceeditable .quickeditlink {
+  position: relative;
   z-index: 2;
   margin-left: 0.5rem;
 }
@@ -29254,125 +29263,419 @@ span.editinstructions .alert-link {
 }
 .activity-item .activity-completion button.btn,
 .activity-item .activity-completion a[role=button].btn {
-  border: 1px solid #ced4da;
+  color: #1d2125;
+  background-color: #fff;
+  border-color: #ced4da;
+  min-height: 32px;
   font-weight: bold;
   border-radius: 0.5rem;
 }
+.activity-item .activity-completion button.btn:hover,
+.activity-item .activity-completion a[role=button].btn:hover {
+  color: #fff;
+  background-color: #6a737b;
+  border-color: #b1bbc4;
+}
+.activity-item .activity-completion button.btn:focus, .activity-item .activity-completion button.btn.focus,
+.activity-item .activity-completion a[role=button].btn:focus,
+.activity-item .activity-completion a[role=button].btn.focus {
+  color: #fff;
+  background-color: #6a737b;
+  border-color: #b1bbc4;
+  box-shadow: 0 0 0 0.2rem rgba(179, 185, 191, 0.5);
+}
+.activity-item .activity-completion button.btn.disabled, .activity-item .activity-completion button.btn:disabled,
+.activity-item .activity-completion a[role=button].btn.disabled,
+.activity-item .activity-completion a[role=button].btn:disabled {
+  color: #1d2125;
+  background-color: #fff;
+  border-color: #ced4da;
+}
+.activity-item .activity-completion button.btn:not(:disabled):not(.disabled):active, .activity-item .activity-completion button.btn:not(:disabled):not(.disabled).active, .show > .activity-item .activity-completion button.btn.dropdown-toggle,
+.activity-item .activity-completion a[role=button].btn:not(:disabled):not(.disabled):active,
+.activity-item .activity-completion a[role=button].btn:not(:disabled):not(.disabled).active,
+.show > .activity-item .activity-completion a[role=button].btn.dropdown-toggle {
+  color: #1d2125;
+  background-color: #e6e6e6;
+  border-color: #aab4bf;
+}
+.activity-item .activity-completion button.btn:not(:disabled):not(.disabled):active:focus, .activity-item .activity-completion button.btn:not(:disabled):not(.disabled).active:focus, .show > .activity-item .activity-completion button.btn.dropdown-toggle:focus,
+.activity-item .activity-completion a[role=button].btn:not(:disabled):not(.disabled):active:focus,
+.activity-item .activity-completion a[role=button].btn:not(:disabled):not(.disabled).active:focus,
+.show > .activity-item .activity-completion a[role=button].btn.dropdown-toggle:focus {
+  box-shadow: 0 0 0 0.2rem rgba(179, 185, 191, 0.5);
+}
 .activity-item .activity-completion button.btn .icon,
 .activity-item .activity-completion a[role=button].btn .icon {
   font-size: inherit;
 }
 .activity-item .activity-completion button.btn-primary,
 .activity-item .activity-completion a[role=button].btn-primary {
+  color: #1d2125;
+  background-color: #cfe2f2;
+  border-color: #cfe2f2;
   color: #0f6cbf;
+}
+.activity-item .activity-completion button.btn-primary:hover,
+.activity-item .activity-completion a[role=button].btn-primary:hover {
+  color: #fff;
+  background-color: #0f6cbf;
+  border-color: #a7cae7;
+}
+.activity-item .activity-completion button.btn-primary:focus, .activity-item .activity-completion button.btn-primary.focus,
+.activity-item .activity-completion a[role=button].btn-primary:focus,
+.activity-item .activity-completion a[role=button].btn-primary.focus {
+  color: #fff;
+  background-color: #0f6cbf;
+  border-color: #a7cae7;
+  box-shadow: 0 0 0 0.2rem rgba(180, 197, 211, 0.5);
+}
+.activity-item .activity-completion button.btn-primary.disabled, .activity-item .activity-completion button.btn-primary:disabled,
+.activity-item .activity-completion a[role=button].btn-primary.disabled,
+.activity-item .activity-completion a[role=button].btn-primary:disabled {
+  color: #1d2125;
   background-color: #cfe2f2;
   border-color: #cfe2f2;
 }
-.activity-item .activity-completion button.btn-primary hr,
-.activity-item .activity-completion a[role=button].btn-primary hr {
-  border-top-color: #bbd6ed;
+.activity-item .activity-completion button.btn-primary:not(:disabled):not(.disabled):active, .activity-item .activity-completion button.btn-primary:not(:disabled):not(.disabled).active, .show > .activity-item .activity-completion button.btn-primary.dropdown-toggle,
+.activity-item .activity-completion a[role=button].btn-primary:not(:disabled):not(.disabled):active,
+.activity-item .activity-completion a[role=button].btn-primary:not(:disabled):not(.disabled).active,
+.show > .activity-item .activity-completion a[role=button].btn-primary.dropdown-toggle {
+  color: #1d2125;
+  background-color: #a7cae7;
+  border-color: #9dc4e4;
 }
-.activity-item .activity-completion button.btn-primary .alert-link,
-.activity-item .activity-completion a[role=button].btn-primary .alert-link {
-  color: #0b5190;
+.activity-item .activity-completion button.btn-primary:not(:disabled):not(.disabled):active:focus, .activity-item .activity-completion button.btn-primary:not(:disabled):not(.disabled).active:focus, .show > .activity-item .activity-completion button.btn-primary.dropdown-toggle:focus,
+.activity-item .activity-completion a[role=button].btn-primary:not(:disabled):not(.disabled):active:focus,
+.activity-item .activity-completion a[role=button].btn-primary:not(:disabled):not(.disabled).active:focus,
+.show > .activity-item .activity-completion a[role=button].btn-primary.dropdown-toggle:focus {
+  box-shadow: 0 0 0 0.2rem rgba(180, 197, 211, 0.5);
+}
+.activity-item .activity-completion button.btn-primary:hover,
+.activity-item .activity-completion a[role=button].btn-primary:hover {
+  color: #fff;
 }
 .activity-item .activity-completion button.btn-secondary,
 .activity-item .activity-completion a[role=button].btn-secondary {
+  color: #1d2125;
+  background-color: #f5f6f8;
+  border-color: #f5f6f8;
   color: #ced4da;
+}
+.activity-item .activity-completion button.btn-secondary:hover,
+.activity-item .activity-completion a[role=button].btn-secondary:hover {
+  color: #1d2125;
+  background-color: #ced4da;
+  border-color: #d7dbe3;
+}
+.activity-item .activity-completion button.btn-secondary:focus, .activity-item .activity-completion button.btn-secondary.focus,
+.activity-item .activity-completion a[role=button].btn-secondary:focus,
+.activity-item .activity-completion a[role=button].btn-secondary.focus {
+  color: #1d2125;
+  background-color: #ced4da;
+  border-color: #d7dbe3;
+  box-shadow: 0 0 0 0.2rem rgba(213, 214, 216, 0.5);
+}
+.activity-item .activity-completion button.btn-secondary.disabled, .activity-item .activity-completion button.btn-secondary:disabled,
+.activity-item .activity-completion a[role=button].btn-secondary.disabled,
+.activity-item .activity-completion a[role=button].btn-secondary:disabled {
+  color: #1d2125;
   background-color: #f5f6f8;
   border-color: #f5f6f8;
 }
-.activity-item .activity-completion button.btn-secondary hr,
-.activity-item .activity-completion a[role=button].btn-secondary hr {
-  border-top-color: #e6e9ee;
+.activity-item .activity-completion button.btn-secondary:not(:disabled):not(.disabled):active, .activity-item .activity-completion button.btn-secondary:not(:disabled):not(.disabled).active, .show > .activity-item .activity-completion button.btn-secondary.dropdown-toggle,
+.activity-item .activity-completion a[role=button].btn-secondary:not(:disabled):not(.disabled):active,
+.activity-item .activity-completion a[role=button].btn-secondary:not(:disabled):not(.disabled).active,
+.show > .activity-item .activity-completion a[role=button].btn-secondary.dropdown-toggle {
+  color: #1d2125;
+  background-color: #d7dbe3;
+  border-color: #d0d4de;
 }
-.activity-item .activity-completion button.btn-secondary .alert-link,
-.activity-item .activity-completion a[role=button].btn-secondary .alert-link {
-  color: #b1bbc4;
+.activity-item .activity-completion button.btn-secondary:not(:disabled):not(.disabled):active:focus, .activity-item .activity-completion button.btn-secondary:not(:disabled):not(.disabled).active:focus, .show > .activity-item .activity-completion button.btn-secondary.dropdown-toggle:focus,
+.activity-item .activity-completion a[role=button].btn-secondary:not(:disabled):not(.disabled):active:focus,
+.activity-item .activity-completion a[role=button].btn-secondary:not(:disabled):not(.disabled).active:focus,
+.show > .activity-item .activity-completion a[role=button].btn-secondary.dropdown-toggle:focus {
+  box-shadow: 0 0 0 0.2rem rgba(213, 214, 216, 0.5);
+}
+.activity-item .activity-completion button.btn-secondary:hover,
+.activity-item .activity-completion a[role=button].btn-secondary:hover {
+  color: #1d2125;
 }
 .activity-item .activity-completion button.btn-success,
 .activity-item .activity-completion a[role=button].btn-success {
+  color: #1d2125;
+  background-color: #d7e4d6;
+  border-color: #d7e4d6;
   color: #357a32;
+}
+.activity-item .activity-completion button.btn-success:hover,
+.activity-item .activity-completion a[role=button].btn-success:hover {
+  color: #fff;
+  background-color: #357a32;
+  border-color: #b9d0b7;
+}
+.activity-item .activity-completion button.btn-success:focus, .activity-item .activity-completion button.btn-success.focus,
+.activity-item .activity-completion a[role=button].btn-success:focus,
+.activity-item .activity-completion a[role=button].btn-success.focus {
+  color: #fff;
+  background-color: #357a32;
+  border-color: #b9d0b7;
+  box-shadow: 0 0 0 0.2rem rgba(187, 199, 187, 0.5);
+}
+.activity-item .activity-completion button.btn-success.disabled, .activity-item .activity-completion button.btn-success:disabled,
+.activity-item .activity-completion a[role=button].btn-success.disabled,
+.activity-item .activity-completion a[role=button].btn-success:disabled {
+  color: #1d2125;
   background-color: #d7e4d6;
   border-color: #d7e4d6;
 }
-.activity-item .activity-completion button.btn-success hr,
-.activity-item .activity-completion a[role=button].btn-success hr {
-  border-top-color: #c8dac7;
+.activity-item .activity-completion button.btn-success:not(:disabled):not(.disabled):active, .activity-item .activity-completion button.btn-success:not(:disabled):not(.disabled).active, .show > .activity-item .activity-completion button.btn-success.dropdown-toggle,
+.activity-item .activity-completion a[role=button].btn-success:not(:disabled):not(.disabled):active,
+.activity-item .activity-completion a[role=button].btn-success:not(:disabled):not(.disabled).active,
+.show > .activity-item .activity-completion a[role=button].btn-success.dropdown-toggle {
+  color: #1d2125;
+  background-color: #b9d0b7;
+  border-color: #b2cbb0;
 }
-.activity-item .activity-completion button.btn-success .alert-link,
-.activity-item .activity-completion a[role=button].btn-success .alert-link {
-  color: #255623;
+.activity-item .activity-completion button.btn-success:not(:disabled):not(.disabled):active:focus, .activity-item .activity-completion button.btn-success:not(:disabled):not(.disabled).active:focus, .show > .activity-item .activity-completion button.btn-success.dropdown-toggle:focus,
+.activity-item .activity-completion a[role=button].btn-success:not(:disabled):not(.disabled):active:focus,
+.activity-item .activity-completion a[role=button].btn-success:not(:disabled):not(.disabled).active:focus,
+.show > .activity-item .activity-completion a[role=button].btn-success.dropdown-toggle:focus {
+  box-shadow: 0 0 0 0.2rem rgba(187, 199, 187, 0.5);
+}
+.activity-item .activity-completion button.btn-success:hover,
+.activity-item .activity-completion a[role=button].btn-success:hover {
+  color: #fff;
 }
 .activity-item .activity-completion button.btn-info,
 .activity-item .activity-completion a[role=button].btn-info {
+  color: #1d2125;
+  background-color: #cce6ea;
+  border-color: #cce6ea;
   color: #008196;
+}
+.activity-item .activity-completion button.btn-info:hover,
+.activity-item .activity-completion a[role=button].btn-info:hover {
+  color: #fff;
+  background-color: #008196;
+  border-color: #a8d4db;
+}
+.activity-item .activity-completion button.btn-info:focus, .activity-item .activity-completion button.btn-info.focus,
+.activity-item .activity-completion a[role=button].btn-info:focus,
+.activity-item .activity-completion a[role=button].btn-info.focus {
+  color: #fff;
+  background-color: #008196;
+  border-color: #a8d4db;
+  box-shadow: 0 0 0 0.2rem rgba(178, 200, 204, 0.5);
+}
+.activity-item .activity-completion button.btn-info.disabled, .activity-item .activity-completion button.btn-info:disabled,
+.activity-item .activity-completion a[role=button].btn-info.disabled,
+.activity-item .activity-completion a[role=button].btn-info:disabled {
+  color: #1d2125;
   background-color: #cce6ea;
   border-color: #cce6ea;
 }
-.activity-item .activity-completion button.btn-info hr,
-.activity-item .activity-completion a[role=button].btn-info hr {
-  border-top-color: #badde3;
+.activity-item .activity-completion button.btn-info:not(:disabled):not(.disabled):active, .activity-item .activity-completion button.btn-info:not(:disabled):not(.disabled).active, .show > .activity-item .activity-completion button.btn-info.dropdown-toggle,
+.activity-item .activity-completion a[role=button].btn-info:not(:disabled):not(.disabled):active,
+.activity-item .activity-completion a[role=button].btn-info:not(:disabled):not(.disabled).active,
+.show > .activity-item .activity-completion a[role=button].btn-info.dropdown-toggle {
+  color: #1d2125;
+  background-color: #a8d4db;
+  border-color: #9fd0d7;
 }
-.activity-item .activity-completion button.btn-info .alert-link,
-.activity-item .activity-completion a[role=button].btn-info .alert-link {
-  color: #005563;
+.activity-item .activity-completion button.btn-info:not(:disabled):not(.disabled):active:focus, .activity-item .activity-completion button.btn-info:not(:disabled):not(.disabled).active:focus, .show > .activity-item .activity-completion button.btn-info.dropdown-toggle:focus,
+.activity-item .activity-completion a[role=button].btn-info:not(:disabled):not(.disabled):active:focus,
+.activity-item .activity-completion a[role=button].btn-info:not(:disabled):not(.disabled).active:focus,
+.show > .activity-item .activity-completion a[role=button].btn-info.dropdown-toggle:focus {
+  box-shadow: 0 0 0 0.2rem rgba(178, 200, 204, 0.5);
+}
+.activity-item .activity-completion button.btn-info:hover,
+.activity-item .activity-completion a[role=button].btn-info:hover {
+  color: #fff;
 }
 .activity-item .activity-completion button.btn-warning,
 .activity-item .activity-completion a[role=button].btn-warning {
+  color: #1d2125;
+  background-color: #fcefdc;
+  border-color: #fcefdc;
   color: #f0ad4e;
+}
+.activity-item .activity-completion button.btn-warning:hover,
+.activity-item .activity-completion a[role=button].btn-warning:hover {
+  color: #1d2125;
+  background-color: #f0ad4e;
+  border-color: #f8daad;
+}
+.activity-item .activity-completion button.btn-warning:focus, .activity-item .activity-completion button.btn-warning.focus,
+.activity-item .activity-completion a[role=button].btn-warning:focus,
+.activity-item .activity-completion a[role=button].btn-warning.focus {
+  color: #1d2125;
+  background-color: #f0ad4e;
+  border-color: #f8daad;
+  box-shadow: 0 0 0 0.2rem rgba(219, 208, 193, 0.5);
+}
+.activity-item .activity-completion button.btn-warning.disabled, .activity-item .activity-completion button.btn-warning:disabled,
+.activity-item .activity-completion a[role=button].btn-warning.disabled,
+.activity-item .activity-completion a[role=button].btn-warning:disabled {
+  color: #1d2125;
   background-color: #fcefdc;
   border-color: #fcefdc;
 }
-.activity-item .activity-completion button.btn-warning hr,
-.activity-item .activity-completion a[role=button].btn-warning hr {
-  border-top-color: #fae4c5;
+.activity-item .activity-completion button.btn-warning:not(:disabled):not(.disabled):active, .activity-item .activity-completion button.btn-warning:not(:disabled):not(.disabled).active, .show > .activity-item .activity-completion button.btn-warning.dropdown-toggle,
+.activity-item .activity-completion a[role=button].btn-warning:not(:disabled):not(.disabled):active,
+.activity-item .activity-completion a[role=button].btn-warning:not(:disabled):not(.disabled).active,
+.show > .activity-item .activity-completion a[role=button].btn-warning.dropdown-toggle {
+  color: #1d2125;
+  background-color: #f8daad;
+  border-color: #f7d4a1;
 }
-.activity-item .activity-completion button.btn-warning .alert-link,
-.activity-item .activity-completion a[role=button].btn-warning .alert-link {
-  color: #ec971f;
+.activity-item .activity-completion button.btn-warning:not(:disabled):not(.disabled):active:focus, .activity-item .activity-completion button.btn-warning:not(:disabled):not(.disabled).active:focus, .show > .activity-item .activity-completion button.btn-warning.dropdown-toggle:focus,
+.activity-item .activity-completion a[role=button].btn-warning:not(:disabled):not(.disabled):active:focus,
+.activity-item .activity-completion a[role=button].btn-warning:not(:disabled):not(.disabled).active:focus,
+.show > .activity-item .activity-completion a[role=button].btn-warning.dropdown-toggle:focus {
+  box-shadow: 0 0 0 0.2rem rgba(219, 208, 193, 0.5);
+}
+.activity-item .activity-completion button.btn-warning:hover,
+.activity-item .activity-completion a[role=button].btn-warning:hover {
+  color: #1d2125;
 }
 .activity-item .activity-completion button.btn-danger,
 .activity-item .activity-completion a[role=button].btn-danger {
+  color: #1d2125;
+  background-color: #f4d6d2;
+  border-color: #f4d6d2;
   color: #ca3120;
+}
+.activity-item .activity-completion button.btn-danger:hover,
+.activity-item .activity-completion a[role=button].btn-danger:hover {
+  color: #fff;
+  background-color: #ca3120;
+  border-color: #eab1a9;
+}
+.activity-item .activity-completion button.btn-danger:focus, .activity-item .activity-completion button.btn-danger.focus,
+.activity-item .activity-completion a[role=button].btn-danger:focus,
+.activity-item .activity-completion a[role=button].btn-danger.focus {
+  color: #fff;
+  background-color: #ca3120;
+  border-color: #eab1a9;
+  box-shadow: 0 0 0 0.2rem rgba(212, 187, 184, 0.5);
+}
+.activity-item .activity-completion button.btn-danger.disabled, .activity-item .activity-completion button.btn-danger:disabled,
+.activity-item .activity-completion a[role=button].btn-danger.disabled,
+.activity-item .activity-completion a[role=button].btn-danger:disabled {
+  color: #1d2125;
   background-color: #f4d6d2;
   border-color: #f4d6d2;
 }
-.activity-item .activity-completion button.btn-danger hr,
-.activity-item .activity-completion a[role=button].btn-danger hr {
-  border-top-color: #efc3be;
+.activity-item .activity-completion button.btn-danger:not(:disabled):not(.disabled):active, .activity-item .activity-completion button.btn-danger:not(:disabled):not(.disabled).active, .show > .activity-item .activity-completion button.btn-danger.dropdown-toggle,
+.activity-item .activity-completion a[role=button].btn-danger:not(:disabled):not(.disabled):active,
+.activity-item .activity-completion a[role=button].btn-danger:not(:disabled):not(.disabled).active,
+.show > .activity-item .activity-completion a[role=button].btn-danger.dropdown-toggle {
+  color: #1d2125;
+  background-color: #eab1a9;
+  border-color: #e7a79f;
 }
-.activity-item .activity-completion button.btn-danger .alert-link,
-.activity-item .activity-completion a[role=button].btn-danger .alert-link {
-  color: #9e2619;
+.activity-item .activity-completion button.btn-danger:not(:disabled):not(.disabled):active:focus, .activity-item .activity-completion button.btn-danger:not(:disabled):not(.disabled).active:focus, .show > .activity-item .activity-completion button.btn-danger.dropdown-toggle:focus,
+.activity-item .activity-completion a[role=button].btn-danger:not(:disabled):not(.disabled):active:focus,
+.activity-item .activity-completion a[role=button].btn-danger:not(:disabled):not(.disabled).active:focus,
+.show > .activity-item .activity-completion a[role=button].btn-danger.dropdown-toggle:focus {
+  box-shadow: 0 0 0 0.2rem rgba(212, 187, 184, 0.5);
+}
+.activity-item .activity-completion button.btn-danger:hover,
+.activity-item .activity-completion a[role=button].btn-danger:hover {
+  color: #fff;
 }
 .activity-item .activity-completion button.btn-light,
 .activity-item .activity-completion a[role=button].btn-light {
+  color: #1d2125;
+  background-color: #fefefe;
+  border-color: #fefefe;
   color: #f8f9fa;
+}
+.activity-item .activity-completion button.btn-light:hover,
+.activity-item .activity-completion a[role=button].btn-light:hover {
+  color: #1d2125;
+  background-color: #f8f9fa;
+  border-color: #e5e5e5;
+}
+.activity-item .activity-completion button.btn-light:focus, .activity-item .activity-completion button.btn-light.focus,
+.activity-item .activity-completion a[role=button].btn-light:focus,
+.activity-item .activity-completion a[role=button].btn-light.focus {
+  color: #1d2125;
+  background-color: #f8f9fa;
+  border-color: #e5e5e5;
+  box-shadow: 0 0 0 0.2rem rgba(220, 221, 221, 0.5);
+}
+.activity-item .activity-completion button.btn-light.disabled, .activity-item .activity-completion button.btn-light:disabled,
+.activity-item .activity-completion a[role=button].btn-light.disabled,
+.activity-item .activity-completion a[role=button].btn-light:disabled {
+  color: #1d2125;
   background-color: #fefefe;
   border-color: #fefefe;
 }
-.activity-item .activity-completion button.btn-light hr,
-.activity-item .activity-completion a[role=button].btn-light hr {
-  border-top-color: #f1f1f1;
+.activity-item .activity-completion button.btn-light:not(:disabled):not(.disabled):active, .activity-item .activity-completion button.btn-light:not(:disabled):not(.disabled).active, .show > .activity-item .activity-completion button.btn-light.dropdown-toggle,
+.activity-item .activity-completion a[role=button].btn-light:not(:disabled):not(.disabled):active,
+.activity-item .activity-completion a[role=button].btn-light:not(:disabled):not(.disabled).active,
+.show > .activity-item .activity-completion a[role=button].btn-light.dropdown-toggle {
+  color: #1d2125;
+  background-color: #e5e5e5;
+  border-color: #dedede;
 }
-.activity-item .activity-completion button.btn-light .alert-link,
-.activity-item .activity-completion a[role=button].btn-light .alert-link {
-  color: #dae0e5;
+.activity-item .activity-completion button.btn-light:not(:disabled):not(.disabled):active:focus, .activity-item .activity-completion button.btn-light:not(:disabled):not(.disabled).active:focus, .show > .activity-item .activity-completion button.btn-light.dropdown-toggle:focus,
+.activity-item .activity-completion a[role=button].btn-light:not(:disabled):not(.disabled):active:focus,
+.activity-item .activity-completion a[role=button].btn-light:not(:disabled):not(.disabled).active:focus,
+.show > .activity-item .activity-completion a[role=button].btn-light.dropdown-toggle:focus {
+  box-shadow: 0 0 0 0.2rem rgba(220, 221, 221, 0.5);
+}
+.activity-item .activity-completion button.btn-light:hover,
+.activity-item .activity-completion a[role=button].btn-light:hover {
+  color: #1d2125;
 }
 .activity-item .activity-completion button.btn-dark,
 .activity-item .activity-completion a[role=button].btn-dark {
+  color: #1d2125;
+  background-color: #d6d8d9;
+  border-color: #d6d8d9;
   color: #343a40;
+}
+.activity-item .activity-completion button.btn-dark:hover,
+.activity-item .activity-completion a[role=button].btn-dark:hover {
+  color: #fff;
+  background-color: #343a40;
+  border-color: #bcbfc0;
+}
+.activity-item .activity-completion button.btn-dark:focus, .activity-item .activity-completion button.btn-dark.focus,
+.activity-item .activity-completion a[role=button].btn-dark:focus,
+.activity-item .activity-completion a[role=button].btn-dark.focus {
+  color: #fff;
+  background-color: #343a40;
+  border-color: #bcbfc0;
+  box-shadow: 0 0 0 0.2rem rgba(186, 189, 190, 0.5);
+}
+.activity-item .activity-completion button.btn-dark.disabled, .activity-item .activity-completion button.btn-dark:disabled,
+.activity-item .activity-completion a[role=button].btn-dark.disabled,
+.activity-item .activity-completion a[role=button].btn-dark:disabled {
+  color: #1d2125;
   background-color: #d6d8d9;
   border-color: #d6d8d9;
 }
-.activity-item .activity-completion button.btn-dark hr,
-.activity-item .activity-completion a[role=button].btn-dark hr {
-  border-top-color: #c9cbcd;
+.activity-item .activity-completion button.btn-dark:not(:disabled):not(.disabled):active, .activity-item .activity-completion button.btn-dark:not(:disabled):not(.disabled).active, .show > .activity-item .activity-completion button.btn-dark.dropdown-toggle,
+.activity-item .activity-completion a[role=button].btn-dark:not(:disabled):not(.disabled):active,
+.activity-item .activity-completion a[role=button].btn-dark:not(:disabled):not(.disabled).active,
+.show > .activity-item .activity-completion a[role=button].btn-dark.dropdown-toggle {
+  color: #1d2125;
+  background-color: #bcbfc0;
+  border-color: #b5b9ba;
 }
-.activity-item .activity-completion button.btn-dark .alert-link,
-.activity-item .activity-completion a[role=button].btn-dark .alert-link {
-  color: #1d2124;
+.activity-item .activity-completion button.btn-dark:not(:disabled):not(.disabled):active:focus, .activity-item .activity-completion button.btn-dark:not(:disabled):not(.disabled).active:focus, .show > .activity-item .activity-completion button.btn-dark.dropdown-toggle:focus,
+.activity-item .activity-completion a[role=button].btn-dark:not(:disabled):not(.disabled):active:focus,
+.activity-item .activity-completion a[role=button].btn-dark:not(:disabled):not(.disabled).active:focus,
+.show > .activity-item .activity-completion a[role=button].btn-dark.dropdown-toggle:focus {
+  box-shadow: 0 0 0 0.2rem rgba(186, 189, 190, 0.5);
+}
+.activity-item .activity-completion button.btn-dark:hover,
+.activity-item .activity-completion a[role=button].btn-dark:hover {
+  color: #fff;
 }
 @media (max-width: 575.98px) {
   .activity-item .activity-completion {
@@ -29408,9 +29711,11 @@ span.editinstructions .alert-link {
   justify-self: end;
 }
 .activity-item .activity-groupmode-info .groupmode-information {
-  height: 31px;
+  height: 32px;
+  width: 32px;
+  border-radius: 0.5rem;
 }
-.activity-item .activity-groupmode-info .groupmode-information .groupmode-icon-info {
+.activity-item .activity-groupmode-info .groupmode-icon-info {
   display: none;
 }
 @media (max-width: 575.98px) {
@@ -29420,9 +29725,18 @@ span.editinstructions .alert-link {
     padding-top: 0.5rem;
     border-top: 1px solid #dee2e6;
   }
-  .activity-item .activity-groupmode-info .groupmode-information .groupmode-icon-info {
+  .activity-item .activity-groupmode-info .groupmode-information {
+    width: auto;
+    font-size: inherit;
+    padding: 0 0.5rem;
+  }
+  .activity-item .activity-groupmode-info .groupmode-icon-info {
     display: inline;
   }
+  .activity-item .activity-groupmode-info .v-parent-focus {
+    opacity: 1;
+    visibility: visible;
+  }
 }
 .activity-item .activity-badges {
   grid-area: visibility;
@@ -29457,11 +29771,6 @@ span.editinstructions .alert-link {
   padding-top: 0.5rem;
   border-top: 1px solid #dee2e6;
 }
-.activity-item .inplaceeditable {
-  display: flex;
-  flex: 0 1 auto;
-  max-width: 100%;
-}
 .activity-item .no-overflow {
   width: 100%;
 }
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index de5aff49cfa..46e9cb08bfa 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -29034,6 +29034,9 @@ span.editinstructions .alert-link {
 .activity-add .pluscontainer,
 .block-add .pluscontainer {
   border: 1px solid #3584c9;
+  border-radius: 50%;
+  width: 32px;
+  height: 32px;
 }
 .activity-add:hover,
 .block-add:hover {
@@ -29053,10 +29056,16 @@ span.editinstructions .alert-link {
   border-radius: 1rem;
 }
 
+/* Add section */
 .changenumsections {
   border-top: 1px solid #3584c9;
 }
 
+.add-sections .icon {
+  margin-right: 0.25rem;
+  font-size: inherit;
+}
+
 /* Section Expand all/Collapse all */
 .section-collapsemenu .collapseall {
   display: block;
@@ -29089,10 +29098,6 @@ span.editinstructions .alert-link {
 .course-section .section_action_menu .dropdown-toggle::after {
   display: none;
 }
-.course-section .inplaceeditable {
-  display: flex;
-  align-items: center;
-}
 .course-section .summarytext img {
   border-radius: 1rem;
 }
@@ -29100,19 +29105,21 @@ span.editinstructions .alert-link {
   margin-top: 0.5rem;
   padding: 0.25rem 1rem;
   background-color: #e9ecef;
+  font-size: 0.875em;
   border-radius: 1rem;
 }
-.course-section .availabilityinfo .editavailability {
-  padding: 0.25rem 1rem;
-  border-radius: 1rem;
-}
-.course-section .availabilityinfo .editavailability :hover {
-  background-color: #ced4da;
-}
 .course-section .availabilityinfo .editavailability a {
   border-radius: 0.5rem;
   color: #1d2125;
   text-decoration: none;
+  font-weight: bold;
+}
+.course-section .availabilityinfo .editavailability a:hover {
+  background-color: #ced4da;
+}
+.course-section .availabilityinfo .editavailability a .icon {
+  font-size: inherit;
+  margin-right: 0.25rem;
 }
 .course-section.section-summary {
   padding-left: 1rem;
@@ -29214,8 +29221,9 @@ span.editinstructions .alert-link {
   display: none;
 }
 .activity-item .activity-actions .action-menu .btn.btn-icon {
-  height: 31px;
-  width: 31px;
+  height: 32px;
+  width: 32px;
+  border-radius: 0.25rem;
 }
 .activity-item .activity-icon {
   grid-area: icon;
@@ -29240,6 +29248,7 @@ span.editinstructions .alert-link {
   margin-left: 0.5rem;
 }
 .activity-item .activity-name-area .activityname .inplaceeditable .quickeditlink {
+  position: relative;
   z-index: 2;
   margin-left: 0.5rem;
 }
@@ -29254,125 +29263,419 @@ span.editinstructions .alert-link {
 }
 .activity-item .activity-completion button.btn,
 .activity-item .activity-completion a[role=button].btn {
-  border: 1px solid #ced4da;
+  color: #1d2125;
+  background-color: #fff;
+  border-color: #ced4da;
+  min-height: 32px;
   font-weight: bold;
   border-radius: 0.25rem;
 }
+.activity-item .activity-completion button.btn:hover,
+.activity-item .activity-completion a[role=button].btn:hover {
+  color: #fff;
+  background-color: #6a737b;
+  border-color: #b1bbc4;
+}
+.activity-item .activity-completion button.btn:focus, .activity-item .activity-completion button.btn.focus,
+.activity-item .activity-completion a[role=button].btn:focus,
+.activity-item .activity-completion a[role=button].btn.focus {
+  color: #fff;
+  background-color: #6a737b;
+  border-color: #b1bbc4;
+  box-shadow: 0 0 0 0.2rem rgba(179, 185, 191, 0.5);
+}
+.activity-item .activity-completion button.btn.disabled, .activity-item .activity-completion button.btn:disabled,
+.activity-item .activity-completion a[role=button].btn.disabled,
+.activity-item .activity-completion a[role=button].btn:disabled {
+  color: #1d2125;
+  background-color: #fff;
+  border-color: #ced4da;
+}
+.activity-item .activity-completion button.btn:not(:disabled):not(.disabled):active, .activity-item .activity-completion button.btn:not(:disabled):not(.disabled).active, .show > .activity-item .activity-completion button.btn.dropdown-toggle,
+.activity-item .activity-completion a[role=button].btn:not(:disabled):not(.disabled):active,
+.activity-item .activity-completion a[role=button].btn:not(:disabled):not(.disabled).active,
+.show > .activity-item .activity-completion a[role=button].btn.dropdown-toggle {
+  color: #1d2125;
+  background-color: #e6e6e6;
+  border-color: #aab4bf;
+}
+.activity-item .activity-completion button.btn:not(:disabled):not(.disabled):active:focus, .activity-item .activity-completion button.btn:not(:disabled):not(.disabled).active:focus, .show > .activity-item .activity-completion button.btn.dropdown-toggle:focus,
+.activity-item .activity-completion a[role=button].btn:not(:disabled):not(.disabled):active:focus,
+.activity-item .activity-completion a[role=button].btn:not(:disabled):not(.disabled).active:focus,
+.show > .activity-item .activity-completion a[role=button].btn.dropdown-toggle:focus {
+  box-shadow: 0 0 0 0.2rem rgba(179, 185, 191, 0.5);
+}
 .activity-item .activity-completion button.btn .icon,
 .activity-item .activity-completion a[role=button].btn .icon {
   font-size: inherit;
 }
 .activity-item .activity-completion button.btn-primary,
 .activity-item .activity-completion a[role=button].btn-primary {
+  color: #1d2125;
+  background-color: #cfe2f2;
+  border-color: #cfe2f2;
   color: #0f6cbf;
+}
+.activity-item .activity-completion button.btn-primary:hover,
+.activity-item .activity-completion a[role=button].btn-primary:hover {
+  color: #fff;
+  background-color: #0f6cbf;
+  border-color: #a7cae7;
+}
+.activity-item .activity-completion button.btn-primary:focus, .activity-item .activity-completion button.btn-primary.focus,
+.activity-item .activity-completion a[role=button].btn-primary:focus,
+.activity-item .activity-completion a[role=button].btn-primary.focus {
+  color: #fff;
+  background-color: #0f6cbf;
+  border-color: #a7cae7;
+  box-shadow: 0 0 0 0.2rem rgba(180, 197, 211, 0.5);
+}
+.activity-item .activity-completion button.btn-primary.disabled, .activity-item .activity-completion button.btn-primary:disabled,
+.activity-item .activity-completion a[role=button].btn-primary.disabled,
+.activity-item .activity-completion a[role=button].btn-primary:disabled {
+  color: #1d2125;
   background-color: #cfe2f2;
   border-color: #cfe2f2;
 }
-.activity-item .activity-completion button.btn-primary hr,
-.activity-item .activity-completion a[role=button].btn-primary hr {
-  border-top-color: #bbd6ed;
+.activity-item .activity-completion button.btn-primary:not(:disabled):not(.disabled):active, .activity-item .activity-completion button.btn-primary:not(:disabled):not(.disabled).active, .show > .activity-item .activity-completion button.btn-primary.dropdown-toggle,
+.activity-item .activity-completion a[role=button].btn-primary:not(:disabled):not(.disabled):active,
+.activity-item .activity-completion a[role=button].btn-primary:not(:disabled):not(.disabled).active,
+.show > .activity-item .activity-completion a[role=button].btn-primary.dropdown-toggle {
+  color: #1d2125;
+  background-color: #a7cae7;
+  border-color: #9dc4e4;
 }
-.activity-item .activity-completion button.btn-primary .alert-link,
-.activity-item .activity-completion a[role=button].btn-primary .alert-link {
-  color: #0b5190;
+.activity-item .activity-completion button.btn-primary:not(:disabled):not(.disabled):active:focus, .activity-item .activity-completion button.btn-primary:not(:disabled):not(.disabled).active:focus, .show > .activity-item .activity-completion button.btn-primary.dropdown-toggle:focus,
+.activity-item .activity-completion a[role=button].btn-primary:not(:disabled):not(.disabled):active:focus,
+.activity-item .activity-completion a[role=button].btn-primary:not(:disabled):not(.disabled).active:focus,
+.show > .activity-item .activity-completion a[role=button].btn-primary.dropdown-toggle:focus {
+  box-shadow: 0 0 0 0.2rem rgba(180, 197, 211, 0.5);
+}
+.activity-item .activity-completion button.btn-primary:hover,
+.activity-item .activity-completion a[role=button].btn-primary:hover {
+  color: #fff;
 }
 .activity-item .activity-completion button.btn-secondary,
 .activity-item .activity-completion a[role=button].btn-secondary {
+  color: #1d2125;
+  background-color: #f5f6f8;
+  border-color: #f5f6f8;
   color: #ced4da;
+}
+.activity-item .activity-completion button.btn-secondary:hover,
+.activity-item .activity-completion a[role=button].btn-secondary:hover {
+  color: #1d2125;
+  background-color: #ced4da;
+  border-color: #d7dbe3;
+}
+.activity-item .activity-completion button.btn-secondary:focus, .activity-item .activity-completion button.btn-secondary.focus,
+.activity-item .activity-completion a[role=button].btn-secondary:focus,
+.activity-item .activity-completion a[role=button].btn-secondary.focus {
+  color: #1d2125;
+  background-color: #ced4da;
+  border-color: #d7dbe3;
+  box-shadow: 0 0 0 0.2rem rgba(213, 214, 216, 0.5);
+}
+.activity-item .activity-completion button.btn-secondary.disabled, .activity-item .activity-completion button.btn-secondary:disabled,
+.activity-item .activity-completion a[role=button].btn-secondary.disabled,
+.activity-item .activity-completion a[role=button].btn-secondary:disabled {
+  color: #1d2125;
   background-color: #f5f6f8;
   border-color: #f5f6f8;
 }
-.activity-item .activity-completion button.btn-secondary hr,
-.activity-item .activity-completion a[role=button].btn-secondary hr {
-  border-top-color: #e6e9ee;
+.activity-item .activity-completion button.btn-secondary:not(:disabled):not(.disabled):active, .activity-item .activity-completion button.btn-secondary:not(:disabled):not(.disabled).active, .show > .activity-item .activity-completion button.btn-secondary.dropdown-toggle,
+.activity-item .activity-completion a[role=button].btn-secondary:not(:disabled):not(.disabled):active,
+.activity-item .activity-completion a[role=button].btn-secondary:not(:disabled):not(.disabled).active,
+.show > .activity-item .activity-completion a[role=button].btn-secondary.dropdown-toggle {
+  color: #1d2125;
+  background-color: #d7dbe3;
+  border-color: #d0d4de;
 }
-.activity-item .activity-completion button.btn-secondary .alert-link,
-.activity-item .activity-completion a[role=button].btn-secondary .alert-link {
-  color: #b1bbc4;
+.activity-item .activity-completion button.btn-secondary:not(:disabled):not(.disabled):active:focus, .activity-item .activity-completion button.btn-secondary:not(:disabled):not(.disabled).active:focus, .show > .activity-item .activity-completion button.btn-secondary.dropdown-toggle:focus,
+.activity-item .activity-completion a[role=button].btn-secondary:not(:disabled):not(.disabled):active:focus,
+.activity-item .activity-completion a[role=button].btn-secondary:not(:disabled):not(.disabled).active:focus,
+.show > .activity-item .activity-completion a[role=button].btn-secondary.dropdown-toggle:focus {
+  box-shadow: 0 0 0 0.2rem rgba(213, 214, 216, 0.5);
+}
+.activity-item .activity-completion button.btn-secondary:hover,
+.activity-item .activity-completion a[role=button].btn-secondary:hover {
+  color: #1d2125;
 }
 .activity-item .activity-completion button.btn-success,
 .activity-item .activity-completion a[role=button].btn-success {
+  color: #1d2125;
+  background-color: #d7e4d6;
+  border-color: #d7e4d6;
   color: #357a32;
+}
+.activity-item .activity-completion button.btn-success:hover,
+.activity-item .activity-completion a[role=button].btn-success:hover {
+  color: #fff;
+  background-color: #357a32;
+  border-color: #b9d0b7;
+}
+.activity-item .activity-completion button.btn-success:focus, .activity-item .activity-completion button.btn-success.focus,
+.activity-item .activity-completion a[role=button].btn-success:focus,
+.activity-item .activity-completion a[role=button].btn-success.focus {
+  color: #fff;
+  background-color: #357a32;
+  border-color: #b9d0b7;
+  box-shadow: 0 0 0 0.2rem rgba(187, 199, 187, 0.5);
+}
+.activity-item .activity-completion button.btn-success.disabled, .activity-item .activity-completion button.btn-success:disabled,
+.activity-item .activity-completion a[role=button].btn-success.disabled,
+.activity-item .activity-completion a[role=button].btn-success:disabled {
+  color: #1d2125;
   background-color: #d7e4d6;
   border-color: #d7e4d6;
 }
-.activity-item .activity-completion button.btn-success hr,
-.activity-item .activity-completion a[role=button].btn-success hr {
-  border-top-color: #c8dac7;
+.activity-item .activity-completion button.btn-success:not(:disabled):not(.disabled):active, .activity-item .activity-completion button.btn-success:not(:disabled):not(.disabled).active, .show > .activity-item .activity-completion button.btn-success.dropdown-toggle,
+.activity-item .activity-completion a[role=button].btn-success:not(:disabled):not(.disabled):active,
+.activity-item .activity-completion a[role=button].btn-success:not(:disabled):not(.disabled).active,
+.show > .activity-item .activity-completion a[role=button].btn-success.dropdown-toggle {
+  color: #1d2125;
+  background-color: #b9d0b7;
+  border-color: #b2cbb0;
 }
-.activity-item .activity-completion button.btn-success .alert-link,
-.activity-item .activity-completion a[role=button].btn-success .alert-link {
-  color: #255623;
+.activity-item .activity-completion button.btn-success:not(:disabled):not(.disabled):active:focus, .activity-item .activity-completion button.btn-success:not(:disabled):not(.disabled).active:focus, .show > .activity-item .activity-completion button.btn-success.dropdown-toggle:focus,
+.activity-item .activity-completion a[role=button].btn-success:not(:disabled):not(.disabled):active:focus,
+.activity-item .activity-completion a[role=button].btn-success:not(:disabled):not(.disabled).active:focus,
+.show > .activity-item .activity-completion a[role=button].btn-success.dropdown-toggle:focus {
+  box-shadow: 0 0 0 0.2rem rgba(187, 199, 187, 0.5);
+}
+.activity-item .activity-completion button.btn-success:hover,
+.activity-item .activity-completion a[role=button].btn-success:hover {
+  color: #fff;
 }
 .activity-item .activity-completion button.btn-info,
 .activity-item .activity-completion a[role=button].btn-info {
+  color: #1d2125;
+  background-color: #cce6ea;
+  border-color: #cce6ea;
   color: #008196;
+}
+.activity-item .activity-completion button.btn-info:hover,
+.activity-item .activity-completion a[role=button].btn-info:hover {
+  color: #fff;
+  background-color: #008196;
+  border-color: #a8d4db;
+}
+.activity-item .activity-completion button.btn-info:focus, .activity-item .activity-completion button.btn-info.focus,
+.activity-item .activity-completion a[role=button].btn-info:focus,
+.activity-item .activity-completion a[role=button].btn-info.focus {
+  color: #fff;
+  background-color: #008196;
+  border-color: #a8d4db;
+  box-shadow: 0 0 0 0.2rem rgba(178, 200, 204, 0.5);
+}
+.activity-item .activity-completion button.btn-info.disabled, .activity-item .activity-completion button.btn-info:disabled,
+.activity-item .activity-completion a[role=button].btn-info.disabled,
+.activity-item .activity-completion a[role=button].btn-info:disabled {
+  color: #1d2125;
   background-color: #cce6ea;
   border-color: #cce6ea;
 }
-.activity-item .activity-completion button.btn-info hr,
-.activity-item .activity-completion a[role=button].btn-info hr {
-  border-top-color: #badde3;
+.activity-item .activity-completion button.btn-info:not(:disabled):not(.disabled):active, .activity-item .activity-completion button.btn-info:not(:disabled):not(.disabled).active, .show > .activity-item .activity-completion button.btn-info.dropdown-toggle,
+.activity-item .activity-completion a[role=button].btn-info:not(:disabled):not(.disabled):active,
+.activity-item .activity-completion a[role=button].btn-info:not(:disabled):not(.disabled).active,
+.show > .activity-item .activity-completion a[role=button].btn-info.dropdown-toggle {
+  color: #1d2125;
+  background-color: #a8d4db;
+  border-color: #9fd0d7;
 }
-.activity-item .activity-completion button.btn-info .alert-link,
-.activity-item .activity-completion a[role=button].btn-info .alert-link {
-  color: #005563;
+.activity-item .activity-completion button.btn-info:not(:disabled):not(.disabled):active:focus, .activity-item .activity-completion button.btn-info:not(:disabled):not(.disabled).active:focus, .show > .activity-item .activity-completion button.btn-info.dropdown-toggle:focus,
+.activity-item .activity-completion a[role=button].btn-info:not(:disabled):not(.disabled):active:focus,
+.activity-item .activity-completion a[role=button].btn-info:not(:disabled):not(.disabled).active:focus,
+.show > .activity-item .activity-completion a[role=button].btn-info.dropdown-toggle:focus {
+  box-shadow: 0 0 0 0.2rem rgba(178, 200, 204, 0.5);
+}
+.activity-item .activity-completion button.btn-info:hover,
+.activity-item .activity-completion a[role=button].btn-info:hover {
+  color: #fff;
 }
 .activity-item .activity-completion button.btn-warning,
 .activity-item .activity-completion a[role=button].btn-warning {
+  color: #1d2125;
+  background-color: #fcefdc;
+  border-color: #fcefdc;
   color: #f0ad4e;
+}
+.activity-item .activity-completion button.btn-warning:hover,
+.activity-item .activity-completion a[role=button].btn-warning:hover {
+  color: #1d2125;
+  background-color: #f0ad4e;
+  border-color: #f8daad;
+}
+.activity-item .activity-completion button.btn-warning:focus, .activity-item .activity-completion button.btn-warning.focus,
+.activity-item .activity-completion a[role=button].btn-warning:focus,
+.activity-item .activity-completion a[role=button].btn-warning.focus {
+  color: #1d2125;
+  background-color: #f0ad4e;
+  border-color: #f8daad;
+  box-shadow: 0 0 0 0.2rem rgba(219, 208, 193, 0.5);
+}
+.activity-item .activity-completion button.btn-warning.disabled, .activity-item .activity-completion button.btn-warning:disabled,
+.activity-item .activity-completion a[role=button].btn-warning.disabled,
+.activity-item .activity-completion a[role=button].btn-warning:disabled {
+  color: #1d2125;
   background-color: #fcefdc;
   border-color: #fcefdc;
 }
-.activity-item .activity-completion button.btn-warning hr,
-.activity-item .activity-completion a[role=button].btn-warning hr {
-  border-top-color: #fae4c5;
+.activity-item .activity-completion button.btn-warning:not(:disabled):not(.disabled):active, .activity-item .activity-completion button.btn-warning:not(:disabled):not(.disabled).active, .show > .activity-item .activity-completion button.btn-warning.dropdown-toggle,
+.activity-item .activity-completion a[role=button].btn-warning:not(:disabled):not(.disabled):active,
+.activity-item .activity-completion a[role=button].btn-warning:not(:disabled):not(.disabled).active,
+.show > .activity-item .activity-completion a[role=button].btn-warning.dropdown-toggle {
+  color: #1d2125;
+  background-color: #f8daad;
+  border-color: #f7d4a1;
 }
-.activity-item .activity-completion button.btn-warning .alert-link,
-.activity-item .activity-completion a[role=button].btn-warning .alert-link {
-  color: #ec971f;
+.activity-item .activity-completion button.btn-warning:not(:disabled):not(.disabled):active:focus, .activity-item .activity-completion button.btn-warning:not(:disabled):not(.disabled).active:focus, .show > .activity-item .activity-completion button.btn-warning.dropdown-toggle:focus,
+.activity-item .activity-completion a[role=button].btn-warning:not(:disabled):not(.disabled):active:focus,
+.activity-item .activity-completion a[role=button].btn-warning:not(:disabled):not(.disabled).active:focus,
+.show > .activity-item .activity-completion a[role=button].btn-warning.dropdown-toggle:focus {
+  box-shadow: 0 0 0 0.2rem rgba(219, 208, 193, 0.5);
+}
+.activity-item .activity-completion button.btn-warning:hover,
+.activity-item .activity-completion a[role=button].btn-warning:hover {
+  color: #1d2125;
 }
 .activity-item .activity-completion button.btn-danger,
 .activity-item .activity-completion a[role=button].btn-danger {
+  color: #1d2125;
+  background-color: #f4d6d2;
+  border-color: #f4d6d2;
   color: #ca3120;
+}
+.activity-item .activity-completion button.btn-danger:hover,
+.activity-item .activity-completion a[role=button].btn-danger:hover {
+  color: #fff;
+  background-color: #ca3120;
+  border-color: #eab1a9;
+}
+.activity-item .activity-completion button.btn-danger:focus, .activity-item .activity-completion button.btn-danger.focus,
+.activity-item .activity-completion a[role=button].btn-danger:focus,
+.activity-item .activity-completion a[role=button].btn-danger.focus {
+  color: #fff;
+  background-color: #ca3120;
+  border-color: #eab1a9;
+  box-shadow: 0 0 0 0.2rem rgba(212, 187, 184, 0.5);
+}
+.activity-item .activity-completion button.btn-danger.disabled, .activity-item .activity-completion button.btn-danger:disabled,
+.activity-item .activity-completion a[role=button].btn-danger.disabled,
+.activity-item .activity-completion a[role=button].btn-danger:disabled {
+  color: #1d2125;
   background-color: #f4d6d2;
   border-color: #f4d6d2;
 }
-.activity-item .activity-completion button.btn-danger hr,
-.activity-item .activity-completion a[role=button].btn-danger hr {
-  border-top-color: #efc3be;
+.activity-item .activity-completion button.btn-danger:not(:disabled):not(.disabled):active, .activity-item .activity-completion button.btn-danger:not(:disabled):not(.disabled).active, .show > .activity-item .activity-completion button.btn-danger.dropdown-toggle,
+.activity-item .activity-completion a[role=button].btn-danger:not(:disabled):not(.disabled):active,
+.activity-item .activity-completion a[role=button].btn-danger:not(:disabled):not(.disabled).active,
+.show > .activity-item .activity-completion a[role=button].btn-danger.dropdown-toggle {
+  color: #1d2125;
+  background-color: #eab1a9;
+  border-color: #e7a79f;
 }
-.activity-item .activity-completion button.btn-danger .alert-link,
-.activity-item .activity-completion a[role=button].btn-danger .alert-link {
-  color: #9e2619;
+.activity-item .activity-completion button.btn-danger:not(:disabled):not(.disabled):active:focus, .activity-item .activity-completion button.btn-danger:not(:disabled):not(.disabled).active:focus, .show > .activity-item .activity-completion button.btn-danger.dropdown-toggle:focus,
+.activity-item .activity-completion a[role=button].btn-danger:not(:disabled):not(.disabled):active:focus,
+.activity-item .activity-completion a[role=button].btn-danger:not(:disabled):not(.disabled).active:focus,
+.show > .activity-item .activity-completion a[role=button].btn-danger.dropdown-toggle:focus {
+  box-shadow: 0 0 0 0.2rem rgba(212, 187, 184, 0.5);
+}
+.activity-item .activity-completion button.btn-danger:hover,
+.activity-item .activity-completion a[role=button].btn-danger:hover {
+  color: #fff;
 }
 .activity-item .activity-completion button.btn-light,
 .activity-item .activity-completion a[role=button].btn-light {
+  color: #1d2125;
+  background-color: #fefefe;
+  border-color: #fefefe;
   color: #f8f9fa;
+}
+.activity-item .activity-completion button.btn-light:hover,
+.activity-item .activity-completion a[role=button].btn-light:hover {
+  color: #1d2125;
+  background-color: #f8f9fa;
+  border-color: #e5e5e5;
+}
+.activity-item .activity-completion button.btn-light:focus, .activity-item .activity-completion button.btn-light.focus,
+.activity-item .activity-completion a[role=button].btn-light:focus,
+.activity-item .activity-completion a[role=button].btn-light.focus {
+  color: #1d2125;
+  background-color: #f8f9fa;
+  border-color: #e5e5e5;
+  box-shadow: 0 0 0 0.2rem rgba(220, 221, 221, 0.5);
+}
+.activity-item .activity-completion button.btn-light.disabled, .activity-item .activity-completion button.btn-light:disabled,
+.activity-item .activity-completion a[role=button].btn-light.disabled,
+.activity-item .activity-completion a[role=button].btn-light:disabled {
+  color: #1d2125;
   background-color: #fefefe;
   border-color: #fefefe;
 }
-.activity-item .activity-completion button.btn-light hr,
-.activity-item .activity-completion a[role=button].btn-light hr {
-  border-top-color: #f1f1f1;
+.activity-item .activity-completion button.btn-light:not(:disabled):not(.disabled):active, .activity-item .activity-completion button.btn-light:not(:disabled):not(.disabled).active, .show > .activity-item .activity-completion button.btn-light.dropdown-toggle,
+.activity-item .activity-completion a[role=button].btn-light:not(:disabled):not(.disabled):active,
+.activity-item .activity-completion a[role=button].btn-light:not(:disabled):not(.disabled).active,
+.show > .activity-item .activity-completion a[role=button].btn-light.dropdown-toggle {
+  color: #1d2125;
+  background-color: #e5e5e5;
+  border-color: #dedede;
 }
-.activity-item .activity-completion button.btn-light .alert-link,
-.activity-item .activity-completion a[role=button].btn-light .alert-link {
-  color: #dae0e5;
+.activity-item .activity-completion button.btn-light:not(:disabled):not(.disabled):active:focus, .activity-item .activity-completion button.btn-light:not(:disabled):not(.disabled).active:focus, .show > .activity-item .activity-completion button.btn-light.dropdown-toggle:focus,
+.activity-item .activity-completion a[role=button].btn-light:not(:disabled):not(.disabled):active:focus,
+.activity-item .activity-completion a[role=button].btn-light:not(:disabled):not(.disabled).active:focus,
+.show > .activity-item .activity-completion a[role=button].btn-light.dropdown-toggle:focus {
+  box-shadow: 0 0 0 0.2rem rgba(220, 221, 221, 0.5);
+}
+.activity-item .activity-completion button.btn-light:hover,
+.activity-item .activity-completion a[role=button].btn-light:hover {
+  color: #1d2125;
 }
 .activity-item .activity-completion button.btn-dark,
 .activity-item .activity-completion a[role=button].btn-dark {
+  color: #1d2125;
+  background-color: #d6d8d9;
+  border-color: #d6d8d9;
   color: #343a40;
+}
+.activity-item .activity-completion button.btn-dark:hover,
+.activity-item .activity-completion a[role=button].btn-dark:hover {
+  color: #fff;
+  background-color: #343a40;
+  border-color: #bcbfc0;
+}
+.activity-item .activity-completion button.btn-dark:focus, .activity-item .activity-completion button.btn-dark.focus,
+.activity-item .activity-completion a[role=button].btn-dark:focus,
+.activity-item .activity-completion a[role=button].btn-dark.focus {
+  color: #fff;
+  background-color: #343a40;
+  border-color: #bcbfc0;
+  box-shadow: 0 0 0 0.2rem rgba(186, 189, 190, 0.5);
+}
+.activity-item .activity-completion button.btn-dark.disabled, .activity-item .activity-completion button.btn-dark:disabled,
+.activity-item .activity-completion a[role=button].btn-dark.disabled,
+.activity-item .activity-completion a[role=button].btn-dark:disabled {
+  color: #1d2125;
   background-color: #d6d8d9;
   border-color: #d6d8d9;
 }
-.activity-item .activity-completion button.btn-dark hr,
-.activity-item .activity-completion a[role=button].btn-dark hr {
-  border-top-color: #c9cbcd;
+.activity-item .activity-completion button.btn-dark:not(:disabled):not(.disabled):active, .activity-item .activity-completion button.btn-dark:not(:disabled):not(.disabled).active, .show > .activity-item .activity-completion button.btn-dark.dropdown-toggle,
+.activity-item .activity-completion a[role=button].btn-dark:not(:disabled):not(.disabled):active,
+.activity-item .activity-completion a[role=button].btn-dark:not(:disabled):not(.disabled).active,
+.show > .activity-item .activity-completion a[role=button].btn-dark.dropdown-toggle {
+  color: #1d2125;
+  background-color: #bcbfc0;
+  border-color: #b5b9ba;
 }
-.activity-item .activity-completion button.btn-dark .alert-link,
-.activity-item .activity-completion a[role=button].btn-dark .alert-link {
-  color: #1d2124;
+.activity-item .activity-completion button.btn-dark:not(:disabled):not(.disabled):active:focus, .activity-item .activity-completion button.btn-dark:not(:disabled):not(.disabled).active:focus, .show > .activity-item .activity-completion button.btn-dark.dropdown-toggle:focus,
+.activity-item .activity-completion a[role=button].btn-dark:not(:disabled):not(.disabled):active:focus,
+.activity-item .activity-completion a[role=button].btn-dark:not(:disabled):not(.disabled).active:focus,
+.show > .activity-item .activity-completion a[role=button].btn-dark.dropdown-toggle:focus {
+  box-shadow: 0 0 0 0.2rem rgba(186, 189, 190, 0.5);
+}
+.activity-item .activity-completion button.btn-dark:hover,
+.activity-item .activity-completion a[role=button].btn-dark:hover {
+  color: #fff;
 }
 @media (max-width: 575.98px) {
   .activity-item .activity-completion {
@@ -29408,9 +29711,11 @@ span.editinstructions .alert-link {
   justify-self: end;
 }
 .activity-item .activity-groupmode-info .groupmode-information {
-  height: 31px;
+  height: 32px;
+  width: 32px;
+  border-radius: 0.25rem;
 }
-.activity-item .activity-groupmode-info .groupmode-information .groupmode-icon-info {
+.activity-item .activity-groupmode-info .groupmode-icon-info {
   display: none;
 }
 @media (max-width: 575.98px) {
@@ -29420,9 +29725,18 @@ span.editinstructions .alert-link {
     padding-top: 0.5rem;
     border-top: 1px solid #dee2e6;
   }
-  .activity-item .activity-groupmode-info .groupmode-information .groupmode-icon-info {
+  .activity-item .activity-groupmode-info .groupmode-information {
+    width: auto;
+    font-size: inherit;
+    padding: 0 0.5rem;
+  }
+  .activity-item .activity-groupmode-info .groupmode-icon-info {
     display: inline;
   }
+  .activity-item .activity-groupmode-info .v-parent-focus {
+    opacity: 1;
+    visibility: visible;
+  }
 }
 .activity-item .activity-badges {
   grid-area: visibility;
@@ -29457,11 +29771,6 @@ span.editinstructions .alert-link {
   padding-top: 0.5rem;
   border-top: 1px solid #dee2e6;
 }
-.activity-item .inplaceeditable {
-  display: flex;
-  flex: 0 1 auto;
-  max-width: 100%;
-}
 .activity-item .no-overflow {
   width: 100%;
 }