Display: Set background color for button hover to colors.secondary.hover in tailwind.config.js - refs BT#20895

assets/css/scss/atoms/_buttons.scss

@@ -295,7 +295,7 @@ $border-color_12: #9333EA;
 
 // secondary button
 .p-button.p-button-secondary {
-  @include filled-style('secondary', 'support-5');
+  @include filled-style('secondary', 'secondary-hover');
 
   &.p-button-outlined {
     @include outlined-style('secondary');
@@ -308,7 +308,7 @@ $border-color_12: #9333EA;
 
 .p-buttonset.p-button-secondary {
   > .p-button {
-    @include filled-style('secondary', 'support-5');
+    @include filled-style('secondary', 'secondary-hover');
 
     &.p-button-outlined {
       @include outlined-style('secondary');

assets/vue/layouts/MyCourses.vue

@@ -1,11 +1,6 @@
 <template>
   <div class="flex justify-between items-center">
     <h2 v-t="'My Courses'" />
-    <Button
-      v-if="isTeacher"
-      class="p-button-secondary md:hidden"
-      icon="pi pi-plus"
-    />
     <Button
       v-if="isTeacher"
       :label="t('Course')"

tailwind.config.js

@@ -18,6 +18,7 @@ module.exports = {
       secondary: {
         DEFAULT: "#f37e2f",
         gradient: "#e06410",
+        hover: "#d35e0f",
         bgdisabled: '#e4e9ed',
       },
       gray: {