Post-rebranding update to Card hover styling

contentcuration/contentcuration/frontend/administration/pages/AdministrationIndex.vue

@@ -161,7 +161,7 @@
 
     tr:hover td {
       /* stylelint-disable-next-line custom-property-pattern */
-      background-color: var(--v-greyBackground-base) !important;
+      background-color: var(--v-greyBackground-lighten1) !important;
     }
 
     /deep/ .v-table__overflow {

contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/BrowsingCard.vue

@@ -1,6 +1,6 @@
 <template>
 
-  <VCard @click="handleClick">
+  <VCard hover @click="handleClick">
     <VCardTitle>
       <VLayout row wrap>
         <VFlex class="pt-2 px-4 thumbnail-column">
@@ -229,11 +229,6 @@
 
   .v-card {
     cursor: pointer;
-
-    &:hover {
-      /* stylelint-disable-next-line custom-property-pattern */
-      background-color: var(--v-greyBackground-base);
-    }
   }
 
   h3 {

contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/ChannelInfoCard.vue

@@ -1,6 +1,6 @@
 <template>
 
-  <VCard :to="channelRoute">
+  <VCard hover :to="channelRoute">
     <VCardTitle>
       <VLayout row wrap>
         <VFlex lg2 md4 sm5 xs12 class="px-3">
@@ -113,11 +113,6 @@
 
   .v-card {
     cursor: pointer;
-
-    &:hover {
-      /* stylelint-disable-next-line custom-property-pattern */
-      background-color: var(--v-greyBackground-base);
-    }
   }
 
 </style>

contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue

@@ -3,7 +3,8 @@
   <div>
     <VCard
       class="channel my-3"
-      :class="{ hideHighlight, added }"
+      hover
+      :class="{ added }"
       data-test="channel-card"
       tabindex="0"
       :href="linkToChannelTree ? channelHref : null"
@@ -99,8 +100,6 @@
                 class="mr-1"
                 icon="info"
                 :text="$tr('details')"
-                @mouseenter.native="hideHighlight = true"
-                @mouseleave.native="hideHighlight = false"
               />
 
             </router-link>
@@ -112,16 +111,12 @@
               :text="$tr('copyToken')"
               data-test="token-button"
               @click.stop.prevent="tokenDialog = true"
-              @mouseenter.native="hideHighlight = true"
-              @mouseleave.native="hideHighlight = false"
             />
             <ChannelStar
               v-if="loggedIn"
               :channelId="channelId"
               :bookmark="channel.bookmark"
               class="mr-1"
-              @mouseenter.native="hideHighlight = true"
-              @mouseleave.native="hideHighlight = false"
             />
             <Menu v-if="showOptions">
               <template #activator="{ on }">
@@ -131,8 +126,6 @@
                   data-test="menu"
                   v-on="on"
                   @click.stop.prevent
-                  @mouseenter="hideHighlight = true"
-                  @mouseleave="hideHighlight = false"
                 >
                   <Icon>more_vert</Icon>
                 </VBtn>
@@ -152,7 +145,7 @@
                 <VListTile
                   v-if="allowEdit && channel.published"
                   data-test="token-listitem"
-                  @click="tokenDialog = true"
+                  @click.stop="tokenDialog = true"
                 >
                   <VListTileAction>
                     <Icon>content_copy</Icon>
@@ -264,7 +257,6 @@
       return {
         deleteDialog: false,
         tokenDialog: false,
-        hideHighlight: false,
         added: false,
       };
     },
@@ -356,17 +348,10 @@
           this.$store.dispatch('showSnackbarSimple', this.$tr('channelDeletedSnackbar'));
         });
       },
-      goToChannelRoute(e) {
-        // preventDefault whenever we have clicked a button
-        // that is a child of this card to avoid redirect
-        // overriding the action of the clicked button
-        if (this.hideHighlight) {
-          e.preventDefault();
-        } else {
-          this.linkToChannelTree
-            ? (window.location.href = this.channelHref)
-            : this.$router.push(this.channelDetailsLink).catch(() => {});
-        }
+      goToChannelRoute() {
+        this.linkToChannelTree
+          ? (window.location.href = this.channelHref)
+          : this.$router.push(this.channelDetailsLink).catch(() => {});
       },
       trackTokenCopy() {
         this.$analytics.trackAction('channel_list', 'Copy token', {
@@ -401,11 +386,6 @@
     width: 100%;
     cursor: pointer;
 
-    &:hover:not(.hideHighlight) {
-      /* stylelint-disable-next-line custom-property-pattern */
-      background-color: var(--v-greyBackground-base);
-    }
-
     &.added {
       /* stylelint-disable-next-line custom-property-pattern */
       background-color: var(--v-greenHighlightBackground-base);

contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelStar.vue

@@ -7,7 +7,7 @@
       :icon="bookmark ? 'star' : 'starBorder'"
       :text="starText"
       v-bind="$attrs"
-      @click="toggleStar"
+      @click.stop.prevent="toggleStar"
     />
   </div>
 

contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSelectionList.vue

@@ -18,6 +18,7 @@
           v-for="channel in listChannels"
           :key="channel.id"
           flat
+          hover
           class="px-3"
         >
           <Checkbox
@@ -134,11 +135,6 @@
     /deep/ .v-input__control {
       width: 100% !important;
     }
-
-    &:hover {
-      /* stylelint-disable-next-line custom-property-pattern */
-      background-color: var(--v-channelHighlightDefault-base);
-    }
   }
 
 </style>

contentcuration/contentcuration/frontend/shared/app.js

@@ -113,7 +113,7 @@ import { theme, icons } from 'shared/vuetify';
 
 import { i18nSetup } from 'shared/i18n';
 
-import './styles/vuetify.css';
+import './styles/vuetify.scss';
 import 'shared/styles/main.less';
 import Base from 'shared/Base.vue';
 import urls from 'shared/urls';

contentcuration/contentcuration/frontend/shared/styles/vuetify.css → contentcuration/contentcuration/frontend/shared/styles/vuetify.scss

@@ -1,4 +1,5 @@
 /* stylelint-disable */
+@import '~kolibri-design-system/lib/styles/definitions';
 
 /* Need a ! so that the following comment won't get removed during build process */
 
@@ -4541,9 +4542,8 @@ p {
   border-color: #424242;
 }
 .v-card {
+  @extend %dropshadow-2dp;
   text-decoration: none;
-  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),
-    0 1px 5px 0 rgba(0, 0, 0, 0.12);
 }
 .v-card > :first-child:not(.v-btn):not(.v-chip) {
   border-top-left-radius: inherit;
@@ -4562,8 +4562,10 @@ p {
   transition-property: box-shadow;
 }
 .v-card--hover:hover {
-  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14),
-    0 3px 14px 2px rgba(0, 0, 0, 0.12);
+  @extend %dropshadow-4dp;
+}
+.v-card--hover.v-card--flat:hover {
+  @extend %dropshadow-2dp;
 }
 .v-card__title {
   display: flex;

jest_config/jest.conf.js

@@ -7,7 +7,7 @@ module.exports = {
   moduleFileExtensions: ['js', 'json', 'vue'],
   modulePaths: [frontendDir],
   moduleNameMapper: {
-    '\\.(css|less|styl)$': 'identity-obj-proxy',
+    '\\.(css|scss|less|styl)$': 'identity-obj-proxy',
     '^frontend/(.*)': '<rootDir>/contentcuration/contentcuration/frontend/$1',
     '^static/(.*)': '<rootDir>/contentcuration/contentcuration/static/$1',
     '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': path.resolve(