From 471324b50358028cb46db4a5b18e0a5d26a6dd16 Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Mon, 21 Sep 2020 15:56:35 -0700
Subject: [PATCH 01/19] left & right icon buttons had unnecessary margin

top margin pushed the arrows to be flush with the bottom
rather than centered vertically alongside the tab buttons
---
 .../contentcuration/frontend/shared/views/AppBar.vue          | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/AppBar.vue b/contentcuration/contentcuration/frontend/shared/views/AppBar.vue
index c6e20ec5a0..c59b53d838 100644
--- a/contentcuration/contentcuration/frontend/shared/views/AppBar.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/AppBar.vue
@@ -140,10 +140,6 @@
     z-index: 5;
   }
 
-  /deep/ .v-tabs__icon--next,
-  /deep/ .v-tabs__icon--prev {
-    margin-top: 10px;
-  }
   .kolibri-icon {
     border-radius: 8px;
   }

From 8818f7edcd28b5ee43021e3be421c8c2a8c69ea3 Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Mon, 21 Sep 2020 17:07:33 -0700
Subject: [PATCH 02/19] Use KIconButton, apply text styles and open sans

This commit is too big but it is not worth breaking
down into smaller commits because much of it is
interconnected and I should have done so in progress
---
 .../channelEdit/views/files/FileUpload.vue    |  2 +-
 .../channelList/views/Channel/ChannelItem.vue | 47 +++++++++++++------
 .../channelList/views/Channel/ChannelStar.vue |  4 +-
 .../frontend/shared/styles/main.less          | 19 +++++++-
 .../frontend/shared/views/IconButton.vue      | 46 ++++++++----------
 .../frontend/shared/views/details/Details.vue |  2 +-
 .../frontend/shared/views/form/Checkbox.vue   |  2 +-
 .../frontend/shared/vuetify/theme.js          |  5 +-
 .../contentcuration/templates/base.html       |  2 +
 .../templates/export/channel_detail_pdf.html  |  2 +-
 .../export/channel_detail_pdf_condensed.html  |  2 +-
 .../templates/export/channels_pdf.html        |  8 ++--
 .../templates/unsupported_browser.html        |  2 +-
 contentcuration/genstaged.py                  |  8 ++++
 14 files changed, 93 insertions(+), 58 deletions(-)
 create mode 100644 contentcuration/genstaged.py

diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/files/FileUpload.vue b/contentcuration/contentcuration/frontend/channelEdit/views/files/FileUpload.vue
index dd4ab9b2c9..d5ef164aa9 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/files/FileUpload.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/files/FileUpload.vue
@@ -191,7 +191,7 @@
       width: 100%;
     }
     /deep/ label {
-      color: black;
+      color: var(--text);
     }
     .v-list {
       padding: 0;
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue
index 2d4ddea30f..3aae02cf3c 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue
@@ -5,7 +5,7 @@
     :class="{hideHighlight}"
     data-test="channel-card"
     tabindex="0"
-    :to="channelRoute"
+    @click="goToChannelRoute"
     :href="channelHref"
   >
     <VLayout row wrap>
@@ -63,34 +63,40 @@
         </VFlex>
         <VSpacer />
         <VFlex shrink>
-          <IconButton
+          <router-link
             v-if="!libraryMode"
-            color="primary"
             :to="channelDetailsLink"
-            data-test="details-button"
-            class="mr-1"
-            icon="info"
-            :text="$tr('details')"
-            @mouseenter="hideHighlight = true"
-            @mouseleave="hideHighlight = false"
-          />
+          >
+
+            <IconButton
+              :color="$themeTokens.primary"
+              data-test="details-button"
+              class="mr-1"
+              icon="info"
+              :text="$tr('details')"
+              @mouseenter.native="hideHighlight = true"
+              @mouseleave.native="hideHighlight = false"
+            />
+
+          </router-link>
+
           <IconButton
             v-if="!allowEdit && channel.published"
             class="mr-1"
-            icon="content_copy"
+            icon="copy"
             :text="$tr('copyToken')"
             data-test="token-button"
             @click="tokenDialog=true"
-            @mouseenter="hideHighlight = true"
-            @mouseleave="hideHighlight = false"
+            @mouseenter.native="hideHighlight = true"
+            @mouseleave.native="hideHighlight = false"
           />
           <ChannelStar
             v-if="loggedIn"
             :channelId="channelId"
             :bookmark="channel.bookmark"
             class="mr-1"
-            @mouseenter="hideHighlight = true"
-            @mouseleave="hideHighlight = false"
+            @mouseenter.native="hideHighlight = true"
+            @mouseleave.native="hideHighlight = false"
           />
           <VMenu v-if="showOptions" offset-y>
             <template v-slot:activator="{ on }">
@@ -316,6 +322,17 @@
           this.deleteDialog = false;
         });
       },
+      goToChannelRoute(e) {
+        // Ensure children buttons' actions supercede
+        // this rerouting when they are clicked (ie, star)
+        e.preventDefault();
+
+        if(this.hideHighlight) {
+          return;
+        } else {
+          this.$route.replace(channelRoute);
+        }
+      },
     },
     $trs: {
       resourceCount: '{count, plural,\n =1 {# resource}\n other {# resources}}',
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelStar.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelStar.vue
index 33145f84f7..624304b448 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelStar.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelStar.vue
@@ -4,12 +4,10 @@
   <div style="display: inline-block;">
     <IconButton
       data-test="button"
-      :icon="bookmark ? 'star' : 'star_border'"
+      :icon="bookmark ? 'star' : 'starBorder'"
       :text="starText"
       v-bind="$attrs"
       @click="toggleStar"
-      @mouseenter="$emit('mouseenter')"
-      @mouseleave="$emit('mouseleave')"
     />
   </div>
 
diff --git a/contentcuration/contentcuration/frontend/shared/styles/main.less b/contentcuration/contentcuration/frontend/shared/styles/main.less
index 88a2d2c318..135e07d2ed 100644
--- a/contentcuration/contentcuration/frontend/shared/styles/main.less
+++ b/contentcuration/contentcuration/frontend/shared/styles/main.less
@@ -32,9 +32,26 @@ body {
   .v-card {
     outline-color: #8dc5b6;
   }
-
   .v-tooltip__content {
     max-width: 200px;
     text-align: center;
   }
+
+}
+
+// Overriding default Vuetify theme
+.theme--light {
+  .v-sheet, 
+  .v-card, 
+  .v-list__tile,
+  &.application {
+    color: var(--v-text-base);
+  }
+
+  // Removes a weird default Vuetify style
+  // applying background color to links
+  // Due to name collisions with tokens
+  .text, .link {
+    background-color: transparent!important;
+  }
 }
diff --git a/contentcuration/contentcuration/frontend/shared/views/IconButton.vue b/contentcuration/contentcuration/frontend/shared/views/IconButton.vue
index e0dfb035ce..e77f72be01 100644
--- a/contentcuration/contentcuration/frontend/shared/views/IconButton.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/IconButton.vue
@@ -1,36 +1,18 @@
 <template>
 
-  <VTooltip maxWidth="150px" bottom color="darkGrey">
-    <template #activator="{ on }">
-      <VBtn
-        flat
-        icon
-        :small="small"
-        v-bind="$attrs"
-        v-on="on"
-        @click.stop="$event => $emit('click', $event)"
-        @keydown.enter="$emit('mousedown')"
-        @keyup.enter="$emit('mouseup')"
-        @mousedown="$emit('mousedown')"
-        @mouseup="$emit('mouseup')"
-        @mouseenter="$emit('mouseenter')"
-        @mouseleave="$emit('mouseleave')"
-      >
-        <slot name="icon">
-          <Icon :small="small">
-            <slot>
-              {{ icon }}
-            </slot>
-          </Icon>
-        </slot>
-      </VBtn>
-    </template>
-    <span class="text-xs-center">{{ text }}</span>
-  </VTooltip>
+  <KIconButton 
+    v-bind="$attrs"
+    v-on="$listeners"
+    :tooltip="text"
+    :icon="icon"
+    ariaLabel="text"
+    :color="color"
+  />
 
 </template>
 
 <script>
+  import { themeTokens } from 'kolibri-design-system/lib/styles/theme';
 
   export default {
     name: 'IconButton',
@@ -47,6 +29,16 @@
         type: Boolean,
         default: false,
       },
+      color: {
+        type: String,
+        required: false,
+        default: themeTokens.text,
+      },
+    },
+    computed: {
+      tooltipColor() {
+        return themeTokens.text;
+      }
     },
   };
 
diff --git a/contentcuration/contentcuration/frontend/shared/views/details/Details.vue b/contentcuration/contentcuration/frontend/shared/views/details/Details.vue
index 4f8904aee4..70a4bc66af 100644
--- a/contentcuration/contentcuration/frontend/shared/views/details/Details.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/details/Details.vue
@@ -412,7 +412,7 @@
 <style lang="less" scoped>
 
   .printing /deep/ * {
-    font-family: helvetica !important;
+    font-family: 'Noto Sans', helvetica !important;
     &.material-icons {
       font-family: 'Material Icons' !important;
     }
diff --git a/contentcuration/contentcuration/frontend/shared/views/form/Checkbox.vue b/contentcuration/contentcuration/frontend/shared/views/form/Checkbox.vue
index bd86816e3b..f137545c48 100644
--- a/contentcuration/contentcuration/frontend/shared/views/form/Checkbox.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/form/Checkbox.vue
@@ -26,7 +26,7 @@
 
   /deep/ label.theme--light {
     padding: 0 8px;
-    color: rgba(0, 0, 0, 0.87);
+    color: var(--v-text);
   }
 
 </style>
diff --git a/contentcuration/contentcuration/frontend/shared/vuetify/theme.js b/contentcuration/contentcuration/frontend/shared/vuetify/theme.js
index 5f3dba8eff..f1d4f85284 100644
--- a/contentcuration/contentcuration/frontend/shared/vuetify/theme.js
+++ b/contentcuration/contentcuration/frontend/shared/vuetify/theme.js
@@ -1,7 +1,8 @@
 import colors from 'vuetify/es5/util/colors';
+import { themeTokens, themePalette } from 'kolibri-design-system/lib/styles/theme';
 
 export default function theme() {
-  return {
+  return Object.assign({
     purple: '#996189',
     primary: '#996189',
     secondary: '#8DC5B6',
@@ -21,5 +22,5 @@ export default function theme() {
     html5: '#ff8f00',
     slideshow: '#4ece90',
     channelHighlightDefault: colors.grey.lighten3,
-  };
+  }, themeTokens());
 }
diff --git a/contentcuration/contentcuration/templates/base.html b/contentcuration/contentcuration/templates/base.html
index 298e7a72e6..2705514ab5 100644
--- a/contentcuration/contentcuration/templates/base.html
+++ b/contentcuration/contentcuration/templates/base.html
@@ -11,6 +11,8 @@
 <html dir="{{ LANGUAGE_BIDI|yesno:'rtl,ltr' }}" lang="{{ LANGUAGE_CODE }}">
     <head>
         {% block head %}
+        <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
+
         <script>
             window.DEBUG = "{{DEBUG}}" === "True";
             window.languageCode = "{{LANGUAGE_CODE}}";
diff --git a/contentcuration/contentcuration/templates/export/channel_detail_pdf.html b/contentcuration/contentcuration/templates/export/channel_detail_pdf.html
index 7c14c9651f..a2f5bea86e 100644
--- a/contentcuration/contentcuration/templates/export/channel_detail_pdf.html
+++ b/contentcuration/contentcuration/templates/export/channel_detail_pdf.html
@@ -10,7 +10,7 @@
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
         <style type="text/css">
             body {
-                font-family: FreeSans, sans-serif;
+                font-family: 'Noto Sans', sans-serif;
                 font-size: 12pt;
             }
             a {
diff --git a/contentcuration/contentcuration/templates/export/channel_detail_pdf_condensed.html b/contentcuration/contentcuration/templates/export/channel_detail_pdf_condensed.html
index a163eee5b7..37db588fb2 100644
--- a/contentcuration/contentcuration/templates/export/channel_detail_pdf_condensed.html
+++ b/contentcuration/contentcuration/templates/export/channel_detail_pdf_condensed.html
@@ -11,7 +11,7 @@
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
         <style type="text/css">
             body {
-                font-family: FreeSans, sans-serif;
+                font-family: 'Noto Sans', sans-serif;
                 font-size: 12pt;
             }
             a {
diff --git a/contentcuration/contentcuration/templates/export/channels_pdf.html b/contentcuration/contentcuration/templates/export/channels_pdf.html
index 4b8b30cef9..e4ba94e0be 100644
--- a/contentcuration/contentcuration/templates/export/channels_pdf.html
+++ b/contentcuration/contentcuration/templates/export/channels_pdf.html
@@ -10,25 +10,25 @@
             /* Add in other fonts to allow broader character set */
             /* Normal */
             @font-face {
-               font-family: FullArial, sans-serif;
+               font-family: 'Noto Sans', sans-serif;
                src: url(fonts/arial.ttf);
             }
 
             /* Bold */
             @font-face {
-               font-family: FullArial;
+               font-family: 'Noto Sans', sans-serif;
                src: url(fonts/arialbd.ttf);
                font-weight: bold;
             }
 
             /* Italic */
             @font-face {
-               font-family: FullArial;
+               font-family: 'Noto Sans', sans-serif;
                src: url(fonts/ariali.ttf);
                font-style: italic;
             }
             body {
-                font-family: FullArial;
+                font-family: 'Noto Sans', sans-serif;
                 font-size: 11pt;
             }
             #letterhead_img {
diff --git a/contentcuration/contentcuration/templates/unsupported_browser.html b/contentcuration/contentcuration/templates/unsupported_browser.html
index 7559d3157b..d61a5ebdb1 100644
--- a/contentcuration/contentcuration/templates/unsupported_browser.html
+++ b/contentcuration/contentcuration/templates/unsupported_browser.html
@@ -14,7 +14,7 @@
 <style>
 
   body {
-    font-family: sans-serif;
+    font-family: 'Noto Sans', sans-serif;
     margin: 0;
   }
 
diff --git a/contentcuration/genstaged.py b/contentcuration/genstaged.py
new file mode 100644
index 0000000000..ffec037fda
--- /dev/null
+++ b/contentcuration/genstaged.py
@@ -0,0 +1,8 @@
+from contentcuration.models import Channel, ContentNode
+c = Channel.objects.get(pk='b2b553e3f10f5ce580c261fe0d68104b')
+c.staging_tree = ContentNode.objects.create(kind_id="topic", title="Test title")
+print(c.__dict__)
+c.save()
+for i in range(0, 200):
+  print("{}".format(i))
+  ContentNode.objects.create(kind_id="topic", title="Test topic {}".format(i), parent_id=c.staging_tree.id)

From 6c169965863193a76110a2fcdbc8d845bc9c3f3b Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Mon, 21 Sep 2020 17:20:12 -0700
Subject: [PATCH 03/19] wrong var name

---
 .../frontend/channelEdit/views/files/FileUpload.vue             | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/files/FileUpload.vue b/contentcuration/contentcuration/frontend/channelEdit/views/files/FileUpload.vue
index d5ef164aa9..5a7303dd01 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/files/FileUpload.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/files/FileUpload.vue
@@ -191,7 +191,7 @@
       width: 100%;
     }
     /deep/ label {
-      color: var(--text);
+      color: var(--v-text-base);
     }
     .v-list {
       padding: 0;

From 55e782392f5fe74264c374a82244c1b9b1d83c7d Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Tue, 22 Sep 2020 05:46:54 -0700
Subject: [PATCH 04/19] can click the card now

---
 .../frontend/channelList/views/Channel/ChannelItem.vue   | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue
index 3aae02cf3c..19b1ec9ed4 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue
@@ -323,14 +323,11 @@
         });
       },
       goToChannelRoute(e) {
-        // Ensure children buttons' actions supercede
-        // this rerouting when they are clicked (ie, star)
-        e.preventDefault();
-
+        // preventDefault whenever we are hovering
+        // a child button within the card
         if(this.hideHighlight) {
+          e.preventDefault();
           return;
-        } else {
-          this.$route.replace(channelRoute);
         }
       },
     },

From 1e112693e423deb76c1bc5aa2464b7ad9e1368c3 Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Tue, 22 Sep 2020 05:49:31 -0700
Subject: [PATCH 05/19] margin-top on appbar in channel-edit icon buttons

---
 .../frontend/channelEdit/views/TreeView/TreeViewBase.vue  | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue b/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue
index f5a02df815..b2af432209 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue
@@ -14,8 +14,8 @@
         {{ currentChannel.name }}
       </VToolbarTitle>
       <VToolbarItems v-if="$vuetify.breakpoint.smAndUp" class="ml-4">
-        <IconButton icon="info" :text="$tr('channelDetails')" :to="viewChannelDetailsLink" />
-        <IconButton v-if="canEdit" icon="edit" :text="$tr('editChannel')" :to="editChannelLink">
+        <IconButton class='toolbar-icon-btn' icon="info" :text="$tr('channelDetails')" :to="viewChannelDetailsLink" />
+        <IconButton v-if="canEdit" class='toolbar-icon-btn' icon="edit" :text="$tr('editChannel')" :to="editChannelLink">
           <template #icon>
             <VBadge color="transparent">
               <template #badge>
@@ -308,4 +308,8 @@
     }
   }
 
+  .toolbar-icon-btn {
+    margin-top: 10px;
+  }
+
 </style>

From db1dcbf772a2e4ff26261a9c8d5b5e1f3d08faf8 Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Tue, 22 Sep 2020 05:56:15 -0700
Subject: [PATCH 06/19] Use plus and minus icon keys in place of remove and add

the add circle outline icon is not in the design system at this time
so we will need to address this later if desired.
---
 .../views/files/thumbnails/ContentNodeThumbnail.vue           | 4 ++--
 .../frontend/shared/views/channel/ChannelThumbnail.vue        | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/files/thumbnails/ContentNodeThumbnail.vue b/contentcuration/contentcuration/frontend/channelEdit/views/files/thumbnails/ContentNodeThumbnail.vue
index b50d9e2862..93be3613f1 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/files/thumbnails/ContentNodeThumbnail.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/files/thumbnails/ContentNodeThumbnail.vue
@@ -114,7 +114,7 @@
           <!-- Cropping options -->
           <span v-if="cropping">
             <IconButton
-              icon="add"
+              icon="plus"
               data-test="zoomin"
               :text="$tr('zoomIn')"
               class="ma-0"
@@ -123,7 +123,7 @@
               @mouseup="cropZoomStop"
             />
             <IconButton
-              icon="remove"
+              icon="minus"
               data-test="zoomout"
               :text="$tr('zoomOut')"
               class="ma-0"
diff --git a/contentcuration/contentcuration/frontend/shared/views/channel/ChannelThumbnail.vue b/contentcuration/contentcuration/frontend/shared/views/channel/ChannelThumbnail.vue
index 3ed09e5249..c6dcc48aaf 100644
--- a/contentcuration/contentcuration/frontend/shared/views/channel/ChannelThumbnail.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/channel/ChannelThumbnail.vue
@@ -83,7 +83,7 @@
           <!-- Cropping options -->
           <template v-else-if="cropping">
             <IconButton
-              icon="add"
+              icon="plus"
               data-test="zoomin"
               :text="$tr('zoomIn')"
               @click="Cropper && Cropper.zoomIn()"
@@ -91,7 +91,7 @@
               @mouseup="cropZoomStop"
             />
             <IconButton
-              icon="remove"
+              icon="minus"
               data-test="zoomout"
               :text="$tr('zoomOut')"
               @click="Cropper && Cropper.zoomOut()"

From 32b7ea6ac82b0381aacf332e3996d72ea60cff17 Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Tue, 22 Sep 2020 09:27:54 -0700
Subject: [PATCH 07/19] icon updates & point to branch on kds

---
 .../pages/Channels/ChannelTable.vue           |  4 +-
 .../administration/pages/Users/UserTable.vue  |  2 +-
 .../components/Clipboard/index.vue            | 12 ++---
 .../components/ContentNodeEditListItem.vue    |  2 +-
 .../components/ContentNodeListItem/index.vue  | 17 ++++---
 .../components/StudioTree/StudioTree.vue      |  2 +-
 .../pages/StagingTreePage/index.vue           |  8 ++--
 .../channelEdit/views/CurrentTopicView.vue    | 18 ++++----
 .../views/ImportFromChannels/BrowsingCard.vue |  2 +-
 .../ImportFromChannels/SavedSearchesModal.vue |  2 +-
 .../views/TreeView/TreeViewBase.vue           |  4 +-
 .../channelEdit/views/TreeView/index.vue      | 10 ++---
 .../files/thumbnails/ContentNodeThumbnail.vue |  2 +-
 .../channelList/views/Channel/ChannelItem.vue |  4 +-
 .../frontend/shared/styles/main.less          | 10 ++---
 .../frontend/shared/views/IconButton.vue      | 13 +++---
 .../frontend/shared/vuetify/theme.js          | 45 ++++++++++---------
 package.json                                  |  2 +-
 yarn.lock                                     |  6 +--
 19 files changed, 80 insertions(+), 85 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelTable.vue b/contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelTable.vue
index 62395fe2ab..d9e0c3e1ad 100644
--- a/contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelTable.vue
+++ b/contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelTable.vue
@@ -67,14 +67,14 @@
         <template v-if="header.class === 'first' && selected.length">
           <span>({{ selectedCount }})</span>
           <IconButton
-            icon="get_app"
+            icon="download"
             class="ma-0"
             text="Download CSV"
             data-test="csv"
             @click="downloadCSV"
           />
           <IconButton
-            icon="picture_as_pdf"
+            icon="pdf"
             class="ma-0"
             text="Download PDF"
             data-test="pdf"
diff --git a/contentcuration/contentcuration/frontend/administration/pages/Users/UserTable.vue b/contentcuration/contentcuration/frontend/administration/pages/Users/UserTable.vue
index 89827b872c..bcffb5eb81 100644
--- a/contentcuration/contentcuration/frontend/administration/pages/Users/UserTable.vue
+++ b/contentcuration/contentcuration/frontend/administration/pages/Users/UserTable.vue
@@ -62,7 +62,7 @@
         <template v-if="header.class === 'first' && selected.length">
           <span>({{ selectedCount }})</span>
           <IconButton
-            icon="mail_outline"
+            icon="email"
             class="ma-0"
             text="Email"
             data-test="email"
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/index.vue b/contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/index.vue
index 85f96b6e98..7ce43179e6 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/index.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/index.vue
@@ -34,17 +34,17 @@
                 <div v-if="selectionState">
                   <IconButton
                     v-if="canEdit"
-                    icon="swap_horiz"
+                    icon="move"
                     :text="$tr('moveSelectedButton')"
                     @click="moveNodes()"
                   />
                   <IconButton
-                    icon="content_copy"
+                    icon="copy"
                     :text="$tr('duplicateSelectedButton')"
                     @click="duplicateNodes()"
                   />
                   <IconButton
-                    icon="remove_circle_outline"
+                    icon="remove"
                     :text="$tr('deleteSelectedButton')"
                     @click="removeNodes()"
                   />
@@ -53,12 +53,6 @@
             </VListTileContent>
             <VSpacer />
             <VListTileAction style="min-width: 24px">
-              <IconButton
-                class="ma-0"
-                icon="close"
-                :text="$tr('close')"
-                @click="$emit('close')"
-              />
             </VListTileAction>
           </VListTile>
         </ToolBar>
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeEditListItem.vue b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeEditListItem.vue
index 515740c85e..5c7544868f 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeEditListItem.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeEditListItem.vue
@@ -30,7 +30,7 @@
           <VMenu v-model="activated" offset-y left>
             <template #activator="{ on }">
               <IconButton
-                icon="more_horiz"
+                icon="optionsVertical"
                 :text="$tr('optionsTooltip')"
                 v-on="on"
               />
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.vue b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.vue
index 01c39ddc94..375d2d1a5d 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.vue
@@ -70,15 +70,14 @@
       </VListTileContent>
 
       <div class="actions-end-col">
-        <VListTileAction v-if="isTopic" :aria-hidden="!hover">
-          <IconButton
-            data-test="btn-chevron"
-            icon="chevron_right"
-            :text="$tr('openTopic')"
-            @click="$emit('topicChevronClick')"
-          />
-        </VListTileAction>
-
+        <IconButton
+          v-if="isTopic"
+          :aria-hidden="hover"
+          data-test="btn-chevron"
+          icon="chevronRight"
+          :text="$tr('openTopic')"
+          @click="$emit('topicChevronClick')"
+        />
         <slot name="actions-end" :hover="hover"></slot>
       </div>
     </VListTile>
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/StudioTree/StudioTree.vue b/contentcuration/contentcuration/frontend/channelEdit/components/StudioTree/StudioTree.vue
index 90da48979c..2a88d519ca 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/StudioTree/StudioTree.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/StudioTree/StudioTree.vue
@@ -58,7 +58,7 @@
               >
                 <template #activator="{ on }">
                   <IconButton
-                    icon="more_horiz"
+                    icon="optionsVertical"
                     :text="$tr('optionsTooltip')"
                     v-on="on"
                   />
diff --git a/contentcuration/contentcuration/frontend/channelEdit/pages/StagingTreePage/index.vue b/contentcuration/contentcuration/frontend/channelEdit/pages/StagingTreePage/index.vue
index bc223703e6..e2e471b521 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/pages/StagingTreePage/index.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/pages/StagingTreePage/index.vue
@@ -46,16 +46,14 @@
         >
           <VLayout row>
             <IconButton
-              icon="collapse_all"
+              icon="collapseAll"
               :text="$tr('collapseAllButton')"
               @click="collapseAll"
-            >
-              $vuetify.icons.collapse_all
-            </IconButton>
+            />
             <VSpacer />
             <IconButton
               :disabled="!ancestors || !ancestors.length"
-              icon="gps_fixed"
+              icon="myLocation"
               :text="$tr('openCurrentLocationButton')"
               @click="jumpToLocation"
             />
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/CurrentTopicView.vue b/contentcuration/contentcuration/frontend/channelEdit/views/CurrentTopicView.vue
index f9604c1e09..b5526f7fdd 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/CurrentTopicView.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/CurrentTopicView.vue
@@ -14,7 +14,7 @@
             <VMenu v-if="item.displayNodeOptions" offset-y right>
               <template #activator="{ on }">
                 <IconButton
-                  icon="arrow_drop_down"
+                  icon="dropdown"
                   :text="$tr('optionsButton')"
                   v-on="on"
                 />
@@ -48,25 +48,25 @@
             @click="editNodes(selected)"
           />
           <IconButton
-            icon="content_paste"
+            icon="clipboard"
             :text="$tr('copySelectedButton')"
             @click="copyToClipboard(selected)"
           />
           <IconButton
             v-if="canEdit"
-            icon="swap_horiz"
+            icon="move"
             :text="$tr('moveSelectedButton')"
             @click="setMoveNodes(selected)"
           />
           <IconButton
             v-if="canEdit"
-            icon="content_copy"
+            icon="copy"
             :text="$tr('duplicateSelectedButton')"
             @click="duplicateNodes(selected)"
           />
           <IconButton
             v-if="canEdit"
-            icon="remove_circle_outline"
+            icon="remove"
             :text="$tr('deleteSelectedButton')"
             @click="removeNodes(selected)"
           />
@@ -154,7 +154,7 @@
       >
         <template v-if="canEdit" #actions>
           <IconButton
-            small
+            size="small"
             icon="edit"
             :text="$tr('editButton')"
             @click="editNodes([detailNodeId])"
@@ -162,8 +162,8 @@
           <VMenu offset-y left>
             <template #activator="{ on }">
               <IconButton
-                small
-                icon="more_horiz"
+                size="small"
+                icon="optionsVertical"
                 :text="$tr('optionsButton')"
                 v-on="on"
               />
@@ -178,7 +178,7 @@
         </template>
         <template v-else #actions>
           <IconButton
-            small
+            size="small"
             icon="content_copy"
             :text="$tr('copyToClipboardButton')"
             @click="copyToClipboard([detailNodeId])"
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/BrowsingCard.vue b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/BrowsingCard.vue
index 838155aeb3..14967c1d65 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/BrowsingCard.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/BrowsingCard.vue
@@ -63,7 +63,7 @@
       />
       <IconButton
         :text="$tr('addToClipboardAction')"
-        icon="content_paste"
+        icon="clipboard"
         @click="$emit('copy_to_clipboard')"
       />
     </VCardActions>
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SavedSearchesModal.vue b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SavedSearchesModal.vue
index 73c4cb9a5b..d82b11cee9 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SavedSearchesModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SavedSearchesModal.vue
@@ -42,7 +42,7 @@
 
               <VListTileAction>
                 <IconButton
-                  icon="create"
+                  icon="edit"
                   color="grey"
                   :text="$tr('editAction')"
                   @click="handleClickEdit(search.id)"
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue b/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue
index b2af432209..77b9569cd6 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue
@@ -14,8 +14,8 @@
         {{ currentChannel.name }}
       </VToolbarTitle>
       <VToolbarItems v-if="$vuetify.breakpoint.smAndUp" class="ml-4">
-        <IconButton class='toolbar-icon-btn' icon="info" :text="$tr('channelDetails')" :to="viewChannelDetailsLink" />
-        <IconButton v-if="canEdit" class='toolbar-icon-btn' icon="edit" :text="$tr('editChannel')" :to="editChannelLink">
+        <IconButton class="toolbar-icon-btn" icon="info" :text="$tr('channelDetails')" :to="viewChannelDetailsLink" />
+        <IconButton v-if="canEdit" class="toolbar-icon-btn" icon="edit" :text="$tr('editChannel')" :to="editChannelLink">
           <template #icon>
             <VBadge color="transparent">
               <template #badge>
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/index.vue b/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/index.vue
index 57817b700c..13ed685ed3 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/index.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/index.vue
@@ -37,16 +37,14 @@
     >
       <VLayout row>
         <IconButton
-          icon="collapse_all"
+          icon="collapseAll"
           :text="$tr('collapseAllButton')"
           @click="collapseAll"
-        >
-          $vuetify.icons.collapse_all
-        </IconButton>
+        />
         <VSpacer />
         <IconButton
           :disabled="!ancestors || !ancestors.length"
-          icon="gps_fixed"
+          icon="myLocation"
           :text="$tr('openCurrentLocationButton')"
           @click="jumpToLocation"
         />
@@ -83,7 +81,7 @@
         <template #action>
           <div v-if="hasTopics && !drawer.permanent" class="hierarhcy-toggle">
             <IconButton
-              icon="vertical_split"
+              icon="sidebar"
               :text="$tr('showSidebar')"
               @click="drawer.open = true"
             />
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/files/thumbnails/ContentNodeThumbnail.vue b/contentcuration/contentcuration/frontend/channelEdit/views/files/thumbnails/ContentNodeThumbnail.vue
index 93be3613f1..6d9817d1ec 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/files/thumbnails/ContentNodeThumbnail.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/files/thumbnails/ContentNodeThumbnail.vue
@@ -103,7 +103,7 @@
             <template #default="{generate}">
               <IconButton
                 :disabled="!primaryFilePath"
-                icon="camera"
+                icon="generateThumbnail"
                 :text="$tr('generate')"
                 class="ma-0"
                 @click="generate"
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue
index 19b1ec9ed4..43709ae8b5 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue
@@ -5,8 +5,8 @@
     :class="{hideHighlight}"
     data-test="channel-card"
     tabindex="0"
-    @click="goToChannelRoute"
     :href="channelHref"
+    @click="goToChannelRoute"
   >
     <VLayout row wrap>
       <VFlex :class="{xs12: fullWidth, sm12: !fullWidth, sm3: fullWidth}" md3 class="pa-3">
@@ -325,7 +325,7 @@
       goToChannelRoute(e) {
         // preventDefault whenever we are hovering
         // a child button within the card
-        if(this.hideHighlight) {
+        if (this.hideHighlight) {
           e.preventDefault();
           return;
         }
diff --git a/contentcuration/contentcuration/frontend/shared/styles/main.less b/contentcuration/contentcuration/frontend/shared/styles/main.less
index 135e07d2ed..6c7951be1b 100644
--- a/contentcuration/contentcuration/frontend/shared/styles/main.less
+++ b/contentcuration/contentcuration/frontend/shared/styles/main.less
@@ -36,13 +36,12 @@ body {
     max-width: 200px;
     text-align: center;
   }
-
 }
 
 // Overriding default Vuetify theme
 .theme--light {
-  .v-sheet, 
-  .v-card, 
+  .v-sheet,
+  .v-card,
   .v-list__tile,
   &.application {
     color: var(--v-text-base);
@@ -51,7 +50,8 @@ body {
   // Removes a weird default Vuetify style
   // applying background color to links
   // Due to name collisions with tokens
-  .text, .link {
-    background-color: transparent!important;
+  .text,
+  .link {
+    background-color: transparent !important;
   }
 }
diff --git a/contentcuration/contentcuration/frontend/shared/views/IconButton.vue b/contentcuration/contentcuration/frontend/shared/views/IconButton.vue
index e77f72be01..66a4b6463e 100644
--- a/contentcuration/contentcuration/frontend/shared/views/IconButton.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/IconButton.vue
@@ -2,16 +2,18 @@
 
   <KIconButton 
     v-bind="$attrs"
-    v-on="$listeners"
     :tooltip="text"
     :icon="icon"
     ariaLabel="text"
     :color="color"
+    :size="size"
+    v-on="$listeners"
   />
 
 </template>
 
 <script>
+
   import { themeTokens } from 'kolibri-design-system/lib/styles/theme';
 
   export default {
@@ -25,9 +27,10 @@
         type: String,
         required: true,
       },
-      small: {
-        type: Boolean,
-        default: false,
+      size: {
+        type: String,
+        required: false,
+        default: null,
       },
       color: {
         type: String,
@@ -38,7 +41,7 @@
     computed: {
       tooltipColor() {
         return themeTokens.text;
-      }
+      },
     },
   };
 
diff --git a/contentcuration/contentcuration/frontend/shared/vuetify/theme.js b/contentcuration/contentcuration/frontend/shared/vuetify/theme.js
index f1d4f85284..241e2e1aaa 100644
--- a/contentcuration/contentcuration/frontend/shared/vuetify/theme.js
+++ b/contentcuration/contentcuration/frontend/shared/vuetify/theme.js
@@ -2,25 +2,28 @@ import colors from 'vuetify/es5/util/colors';
 import { themeTokens, themePalette } from 'kolibri-design-system/lib/styles/theme';
 
 export default function theme() {
-  return Object.assign({
-    purple: '#996189',
-    primary: '#996189',
-    secondary: '#8DC5B6',
-    primaryBackground: colors.purple.lighten5,
-    backgroundColor: colors.grey.lighten5,
-    greyBackground: colors.grey.lighten3,
-    greyBorder: colors.grey.lighten1,
-    grey: colors.grey.darken1,
-    darkGrey: colors.grey.darken2,
-    greenSuccess: '#4db6ac',
-    topic: colors.grey.base,
-    video: '#283593',
-    image: '#283593', // IDK what this is supposed to be
-    audio: '#f06292',
-    document: '#ff3d00',
-    exercise: '#4db6ac',
-    html5: '#ff8f00',
-    slideshow: '#4ece90',
-    channelHighlightDefault: colors.grey.lighten3,
-  }, themeTokens());
+  return Object.assign(
+    {
+      purple: '#996189',
+      primary: '#996189',
+      secondary: '#8DC5B6',
+      primaryBackground: colors.purple.lighten5,
+      backgroundColor: colors.grey.lighten5,
+      greyBackground: colors.grey.lighten3,
+      greyBorder: colors.grey.lighten1,
+      grey: colors.grey.darken1,
+      darkGrey: colors.grey.darken2,
+      greenSuccess: '#4db6ac',
+      topic: colors.grey.base,
+      video: '#283593',
+      image: '#283593', // IDK what this is supposed to be
+      audio: '#f06292',
+      document: '#ff3d00',
+      exercise: '#4db6ac',
+      html5: '#ff8f00',
+      slideshow: '#4ece90',
+      channelHighlightDefault: colors.grey.lighten3,
+    },
+    themeTokens()
+  );
 }
diff --git a/package.json b/package.json
index 6b0597f49b..2adb6afd7d 100644
--- a/package.json
+++ b/package.json
@@ -130,7 +130,7 @@
     "jest-each": "^24.8.0",
     "jest-environment-jsdom-sixteen": "^1.0.3",
     "jest-serializer-vue": "^2.0.2",
-    "kolibri-design-system": "https://github.com/learningequality/kolibri-design-system#v0.2.1",
+    "kolibri-design-system": "https://github.com/nucleogenesis/kolibri-design-system-1#missing-studio-icon",
     "kolibri-tools": "0.13.0-dev.9",
     "less": "^3.0.1",
     "less-loader": "^5.0.0",
diff --git a/yarn.lock b/yarn.lock
index ea6b9b5935..39d6405dde 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11269,9 +11269,9 @@ kolibri-components@0.13.0-dev.9:
     popper.js "^1.14.6"
     purecss "^0.6.2"
 
-"kolibri-design-system@https://github.com/learningequality/kolibri-design-system#v0.2.1":
-  version "0.2.1"
-  resolved "https://github.com/learningequality/kolibri-design-system#d8d8e88f5d644f04dac948fc9a1ab0296afbe09a"
+"kolibri-design-system@https://github.com/nucleogenesis/kolibri-design-system-1#missing-studio-icon":
+  version "0.2.2-beta"
+  resolved "https://github.com/nucleogenesis/kolibri-design-system-1#dd4c43f3e70c3b35990806390c3d6806cba31089"
   dependencies:
     "@babel/core" "^7.9.6"
     "@babel/preset-env" "^7.9.6"

From c6dbd30806075710e4d6f04545566070636015d7 Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Tue, 22 Sep 2020 10:38:15 -0700
Subject: [PATCH 08/19] misc style fixes

---
 .../components/Clipboard/index.vue            |  3 +--
 .../components/ContentNodeEditListItem.vue    |  9 +++++++-
 .../components/ContentNodeListItem/index.vue  | 21 +++++++++++++++----
 .../channelList/views/Channel/ChannelItem.vue |  6 +++---
 .../frontend/shared/views/IconButton.vue      |  1 +
 5 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/index.vue b/contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/index.vue
index 7ce43179e6..bfb254cec0 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/index.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/index.vue
@@ -52,8 +52,7 @@
               </VSlideXTransition>
             </VListTileContent>
             <VSpacer />
-            <VListTileAction style="min-width: 24px">
-            </VListTileAction>
+            <VListTileAction style="min-width: 24px" />
           </VListTile>
         </ToolBar>
         <LoadingText v-if="refreshing" absolute />
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeEditListItem.vue b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeEditListItem.vue
index 5c7544868f..8557af7a45 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeEditListItem.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeEditListItem.vue
@@ -26,7 +26,7 @@
       </template>
 
       <template #actions-end>
-        <VListTileAction :aria-hidden="!active" class="px-1">
+        <VListTileAction :aria-hidden="!active" class="px-1 action-icon">
           <VMenu v-model="activated" offset-y left>
             <template #activator="{ on }">
               <IconButton
@@ -140,4 +140,11 @@
     margin-right: 0;
   }
 
+  .action-icon {
+    display: flex;
+    flex: 1 1 auto;
+    align-items: flex-start;
+    justify-content: center;
+  }
+
 </style>
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.vue b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.vue
index 375d2d1a5d..353649927d 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.vue
@@ -11,7 +11,7 @@
         active: active || hover,
       }"
       data-test="content-item"
-      @click="$emit(isTopic? 'topicChevronClick': 'infoClick')"
+      @click="handleTileClick"
     >
       <slot name="actions-start" :hover="hover" class="actions-start-col"></slot>
 
@@ -69,7 +69,7 @@
         />
       </VListTileContent>
 
-      <div class="actions-end-col">
+      <VListTileAction class="actions-end-col">
         <IconButton
           v-if="isTopic"
           :aria-hidden="hover"
@@ -78,8 +78,8 @@
           :text="$tr('openTopic')"
           @click="$emit('topicChevronClick')"
         />
-        <slot name="actions-end" :hover="hover"></slot>
-      </div>
+      </VListTileAction>
+      <slot name="actions-end" :hover="hover"></slot>
     </VListTile>
   </VHover>
 
@@ -150,6 +150,15 @@
         return this.node.role_visibility === RolesNames.COACH;
       },
     },
+    methods: {
+      handleTileClick(e) {
+        // Ensures that clicking an icon button is not treated the same as clicking the card
+        if (e.target.tagName !== 'svg') {
+          this.isTopic ? this.$emit('topicChevronClick') : this.$emit('infoClick');
+        }
+      },
+    },
+    //$emit(isTopic ? 'topicChevronClick': 'infoClick')"
     $trs: {
       resources: '{value, number, integer} {value, plural, one {resource} other {resources}}',
       questions: '{value, number, integer} {value, plural, one {question} other {questions}}',
@@ -194,6 +203,10 @@
       }
       .compact & {
         padding-top: 16px;
+
+        .button {
+          margin-top: -8px;
+        }
       }
     }
   }
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue
index 43709ae8b5..4a81ada4f7 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue
@@ -323,11 +323,11 @@
         });
       },
       goToChannelRoute(e) {
-        // preventDefault whenever we are hovering
-        // a child button within the card
+        // 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();
-          return;
         }
       },
     },
diff --git a/contentcuration/contentcuration/frontend/shared/views/IconButton.vue b/contentcuration/contentcuration/frontend/shared/views/IconButton.vue
index 66a4b6463e..ced6290085 100644
--- a/contentcuration/contentcuration/frontend/shared/views/IconButton.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/IconButton.vue
@@ -7,6 +7,7 @@
     ariaLabel="text"
     :color="color"
     :size="size"
+    style="width: 100%;"
     v-on="$listeners"
   />
 

From 7a431e3760e66ac38536ce447c69e2fa25e920c9 Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Tue, 22 Sep 2020 12:08:40 -0700
Subject: [PATCH 09/19] lint fixes

---
 .../channelEdit/components/Clipboard/index.vue    |  9 ++++++++-
 .../channelEdit/views/TreeView/TreeViewBase.vue   | 15 +++++++++++++--
 .../channelList/views/Channel/ChannelItem.vue     | 11 ++++-------
 .../frontend/shared/views/IconButton.vue          |  5 -----
 .../frontend/shared/vuetify/theme.js              |  2 +-
 5 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/index.vue b/contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/index.vue
index bfb254cec0..1213a44c21 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/index.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/index.vue
@@ -52,7 +52,14 @@
               </VSlideXTransition>
             </VListTileContent>
             <VSpacer />
-            <VListTileAction style="min-width: 24px" />
+            <VListTileAction style="min-width: 24px">
+              <IconButton
+                class="ma-0"
+                icon="close"
+                :text="$tr('close')"
+                @click="$emit('close')"
+              />
+            </VListTileAction>
           </VListTile>
         </ToolBar>
         <LoadingText v-if="refreshing" absolute />
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue b/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue
index 77b9569cd6..2347a8b456 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue
@@ -14,8 +14,19 @@
         {{ currentChannel.name }}
       </VToolbarTitle>
       <VToolbarItems v-if="$vuetify.breakpoint.smAndUp" class="ml-4">
-        <IconButton class="toolbar-icon-btn" icon="info" :text="$tr('channelDetails')" :to="viewChannelDetailsLink" />
-        <IconButton v-if="canEdit" class="toolbar-icon-btn" icon="edit" :text="$tr('editChannel')" :to="editChannelLink">
+        <IconButton 
+          class="toolbar-icon-btn" 
+          icon="info" 
+          :text="$tr('channelDetails')" 
+          :to="viewChannelDetailsLink" 
+        />
+        <IconButton 
+          v-if="canEdit" 
+          class="toolbar-icon-btn" 
+          icon="edit" 
+          :text="$tr('editChannel')" 
+          :to="editChannelLink"
+        >
           <template #icon>
             <VBadge color="transparent">
               <template #badge>
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue
index 4a81ada4f7..f2db970869 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue
@@ -307,13 +307,6 @@
           return false;
         }
       },
-      channelRoute() {
-        if (!this.linkToChannelTree) {
-          return this.channelDetailsLink;
-        } else {
-          return false;
-        }
-      },
     },
     methods: {
       ...mapActions('channel', ['deleteChannel']),
@@ -328,6 +321,10 @@
         // 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);
         }
       },
     },
diff --git a/contentcuration/contentcuration/frontend/shared/views/IconButton.vue b/contentcuration/contentcuration/frontend/shared/views/IconButton.vue
index ced6290085..c66ccb3632 100644
--- a/contentcuration/contentcuration/frontend/shared/views/IconButton.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/IconButton.vue
@@ -39,11 +39,6 @@
         default: themeTokens.text,
       },
     },
-    computed: {
-      tooltipColor() {
-        return themeTokens.text;
-      },
-    },
   };
 
 </script>
diff --git a/contentcuration/contentcuration/frontend/shared/vuetify/theme.js b/contentcuration/contentcuration/frontend/shared/vuetify/theme.js
index 241e2e1aaa..dc1b57279f 100644
--- a/contentcuration/contentcuration/frontend/shared/vuetify/theme.js
+++ b/contentcuration/contentcuration/frontend/shared/vuetify/theme.js
@@ -1,5 +1,5 @@
 import colors from 'vuetify/es5/util/colors';
-import { themeTokens, themePalette } from 'kolibri-design-system/lib/styles/theme';
+import { themeTokens } from 'kolibri-design-system/lib/styles/theme';
 
 export default function theme() {
   return Object.assign(

From 18c6e55b9628dba6a207a7f83b17723af93e2ddd Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Tue, 22 Sep 2020 12:11:59 -0700
Subject: [PATCH 10/19] fix badge height in clipboard

---
 .../frontend/channelEdit/components/Clipboard/TopicNode.vue     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/TopicNode.vue b/contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/TopicNode.vue
index 2139965c33..994ffbf6fa 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/TopicNode.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/TopicNode.vue
@@ -109,7 +109,7 @@
   }
 
   /deep/ .v-badge__badge {
-    top: -1px;
+    top: -11px;
     right: -32px;
     border-radius: 3px;
   }

From 0e5a0c2eca1d31b3b13f8a9a929482fdbef598b6 Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Tue, 22 Sep 2020 12:49:00 -0700
Subject: [PATCH 11/19] test updates

---
 .../components/ContentNodeListItem/index.vue        |  2 --
 .../views/Channel/__tests__/channelItem.spec.js     | 13 +++++--------
 .../views/Channel/__tests__/star.spec.js            |  7 ++-----
 .../frontend/shared/views/IconButton.vue            |  3 +--
 jest_config/jest.conf.js                            |  2 +-
 webpack.config.js                                   |  2 +-
 6 files changed, 10 insertions(+), 19 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.vue b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.vue
index 353649927d..4f4ac99217 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeListItem/index.vue
@@ -76,7 +76,6 @@
           data-test="btn-chevron"
           icon="chevronRight"
           :text="$tr('openTopic')"
-          @click="$emit('topicChevronClick')"
         />
       </VListTileAction>
       <slot name="actions-end" :hover="hover"></slot>
@@ -158,7 +157,6 @@
         }
       },
     },
-    //$emit(isTopic ? 'topicChevronClick': 'infoClick')"
     $trs: {
       resources: '{value, number, integer} {value, plural, one {resource} other {resources}}',
       questions: '{value, number, integer} {value, plural, one {question} other {questions}}',
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/__tests__/channelItem.spec.js b/contentcuration/contentcuration/frontend/channelList/views/Channel/__tests__/channelItem.spec.js
index ffc96b4bca..c8840a1c8d 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/__tests__/channelItem.spec.js
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/__tests__/channelItem.spec.js
@@ -31,6 +31,9 @@ function makeWrapper(allowEdit, deleteStub, libraryMode) {
       channel() {
         return channel;
       },
+      $themeTokens() {
+        return {};
+      },
     },
   });
   wrapper.setMethods({
@@ -64,10 +67,7 @@ describe('channelItem', () => {
     expect(wrapper.vm.$route.name).toEqual(RouterNames.CHANNEL_EDIT);
   });
   it('clicking the info icon should open a channel details modal ', () => {
-    wrapper
-      .find('[data-test="details-button"]')
-      .find('.v-btn')
-      .trigger('click');
+    wrapper.find('[data-test="details-button"]').trigger('click');
     expect(wrapper.vm.$route.name).toEqual(RouterNames.CHANNEL_DETAILS);
   });
   it('clicking the token option should open the token modal', () => {
@@ -92,10 +92,7 @@ describe('channelItem', () => {
     });
     it('clicking the token button should open the token modal', () => {
       wrapper.setData({ tokenDialog: false });
-      wrapper
-        .find('[data-test="token-button"]')
-        .find('.v-btn')
-        .trigger('click');
+      wrapper.find('[data-test="token-button"]').trigger('click');
       expect(wrapper.vm.tokenDialog).toBe(true);
     });
     it('certain menu options should be hidden', () => {
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/__tests__/star.spec.js b/contentcuration/contentcuration/frontend/channelList/views/Channel/__tests__/star.spec.js
index 153e59a865..dd21c31038 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/__tests__/star.spec.js
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/__tests__/star.spec.js
@@ -26,13 +26,10 @@ describe('star', () => {
   });
   it('should reflect correct star on load', () => {
     expect(starredWrapper.find('[data-test="button"]').vm.icon).toBe('star');
-    expect(unstarredWrapper.find('[data-test="button"]').vm.icon).toBe('star_border');
+    expect(unstarredWrapper.find('[data-test="button"]').vm.icon).toBe('starBorder');
   });
   it('toggle the bookmark when clicked', () => {
-    starredWrapper
-      .find('[data-test="button"]')
-      .find('.v-btn')
-      .trigger('click');
+    starredWrapper.find('[data-test="button"]').trigger('click');
     expect(toggleStub).toHaveBeenCalled();
   });
 });
diff --git a/contentcuration/contentcuration/frontend/shared/views/IconButton.vue b/contentcuration/contentcuration/frontend/shared/views/IconButton.vue
index c66ccb3632..823a3c2014 100644
--- a/contentcuration/contentcuration/frontend/shared/views/IconButton.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/IconButton.vue
@@ -7,7 +7,6 @@
     ariaLabel="text"
     :color="color"
     :size="size"
-    style="width: 100%;"
     v-on="$listeners"
   />
 
@@ -15,7 +14,7 @@
 
 <script>
 
-  import { themeTokens } from 'kolibri-design-system/lib/styles/theme';
+  import { themeTokens } from 'kolibri-design-system/lib/styles/theme.js';
 
   export default {
     name: 'IconButton',
diff --git a/jest_config/jest.conf.js b/jest_config/jest.conf.js
index b04a8b9794..dda1798316 100644
--- a/jest_config/jest.conf.js
+++ b/jest_config/jest.conf.js
@@ -22,7 +22,7 @@ module.exports = {
     '^.+\\.js$': '<rootDir>/node_modules/babel-jest',
     '.*\\.(vue)$': '<rootDir>/node_modules/vue-jest',
   },
-  transformIgnorePatterns: ['/node_modules/(?!vuetify|epubjs)'],
+  transformIgnorePatterns: ['/node_modules/(?!vuetify|epubjs|kolibri-design-system)'],
   snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'],
   setupFiles: [path.resolve(__dirname, './setup')],
   coverageDirectory: '<rootDir>/coverage',
diff --git a/webpack.config.js b/webpack.config.js
index be7a7da84f..8a5bef4d3f 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -117,7 +117,7 @@ module.exports = (env = {}) => {
       rules: [
         {
           test: /\.js?$/,
-          exclude: /node_modules?/,
+          exclude: /node_modules?(^\/kolibri-design-system)/,
           use: ['babel-loader'],
         },
         {

From af0018277148fa0a622274fdf92cf730d87c3952 Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Wed, 23 Sep 2020 10:40:53 -0700
Subject: [PATCH 12/19] proper kds link

---
 package.json | 2 +-
 yarn.lock    | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 2adb6afd7d..a1ea71abc7 100644
--- a/package.json
+++ b/package.json
@@ -130,7 +130,7 @@
     "jest-each": "^24.8.0",
     "jest-environment-jsdom-sixteen": "^1.0.3",
     "jest-serializer-vue": "^2.0.2",
-    "kolibri-design-system": "https://github.com/nucleogenesis/kolibri-design-system-1#missing-studio-icon",
+    "kolibri-design-system": "https://github.com/learningequality/kolibri-design-system#v0.2.x",
     "kolibri-tools": "0.13.0-dev.9",
     "less": "^3.0.1",
     "less-loader": "^5.0.0",
diff --git a/yarn.lock b/yarn.lock
index 39d6405dde..c92cd742a9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11269,9 +11269,9 @@ kolibri-components@0.13.0-dev.9:
     popper.js "^1.14.6"
     purecss "^0.6.2"
 
-"kolibri-design-system@https://github.com/nucleogenesis/kolibri-design-system-1#missing-studio-icon":
+"kolibri-design-system@https://github.com/learningequality/kolibri-design-system#v0.2.x":
   version "0.2.2-beta"
-  resolved "https://github.com/nucleogenesis/kolibri-design-system-1#dd4c43f3e70c3b35990806390c3d6806cba31089"
+  resolved "https://github.com/learningequality/kolibri-design-system#75da08120e3e2e5285fa12a7454960901ee16a3b"
   dependencies:
     "@babel/core" "^7.9.6"
     "@babel/preset-env" "^7.9.6"

From 9f02d9f6dccf9ddfc8af2a4a0e914e102ab29dfd Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Thu, 24 Sep 2020 12:32:57 -0700
Subject: [PATCH 13/19] different to href situation on channelitem

---
 .../frontend/channelList/views/Channel/ChannelItem.vue         | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue
index f2db970869..20d003baea 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue
@@ -5,7 +5,8 @@
     :class="{hideHighlight}"
     data-test="channel-card"
     tabindex="0"
-    :href="channelHref"
+    :href="linkToChannelTree ? channelHref : null"
+    :to="linkToChannelTree ? null : channelDetailsLink"
     @click="goToChannelRoute"
   >
     <VLayout row wrap>

From abfcd26c019d05bd30d1d625e4823a1e6b75f48a Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Thu, 24 Sep 2020 13:25:06 -0700
Subject: [PATCH 14/19] Delete genstaged.py

---
 contentcuration/genstaged.py | 8 --------
 1 file changed, 8 deletions(-)
 delete mode 100644 contentcuration/genstaged.py

diff --git a/contentcuration/genstaged.py b/contentcuration/genstaged.py
deleted file mode 100644
index ffec037fda..0000000000
--- a/contentcuration/genstaged.py
+++ /dev/null
@@ -1,8 +0,0 @@
-from contentcuration.models import Channel, ContentNode
-c = Channel.objects.get(pk='b2b553e3f10f5ce580c261fe0d68104b')
-c.staging_tree = ContentNode.objects.create(kind_id="topic", title="Test title")
-print(c.__dict__)
-c.save()
-for i in range(0, 200):
-  print("{}".format(i))
-  ContentNode.objects.create(kind_id="topic", title="Test topic {}".format(i), parent_id=c.staging_tree.id)

From 7a7556a9087891ba3cb702a912169ffb32947c0e Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Thu, 24 Sep 2020 14:46:03 -0700
Subject: [PATCH 15/19] properly un-excluded kds in webpack config excludes

---
 webpack.config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webpack.config.js b/webpack.config.js
index 8a5bef4d3f..0aaa8f2fcb 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -117,7 +117,7 @@ module.exports = (env = {}) => {
       rules: [
         {
           test: /\.js?$/,
-          exclude: /node_modules?(^\/kolibri-design-system)/,
+          exclude: /node_modules\/(?!(kolibri-design-system)\/).*/,
           use: ['babel-loader'],
         },
         {

From 2f97767f85f40516d8d8f1c6ef939d299229dd4c Mon Sep 17 00:00:00 2001
From: Jacob Pierce <w.jacobpierce@gmail.com>
Date: Thu, 24 Sep 2020 16:44:52 -0700
Subject: [PATCH 16/19] IconButtons on channel edit at top router-linked

---
 .../views/TreeView/TreeViewBase.vue           | 50 ++++++++++---------
 1 file changed, 26 insertions(+), 24 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue b/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue
index 2347a8b456..56d9c82bcf 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue
@@ -14,30 +14,32 @@
         {{ currentChannel.name }}
       </VToolbarTitle>
       <VToolbarItems v-if="$vuetify.breakpoint.smAndUp" class="ml-4">
-        <IconButton 
-          class="toolbar-icon-btn" 
-          icon="info" 
-          :text="$tr('channelDetails')" 
-          :to="viewChannelDetailsLink" 
-        />
-        <IconButton 
-          v-if="canEdit" 
-          class="toolbar-icon-btn" 
-          icon="edit" 
-          :text="$tr('editChannel')" 
-          :to="editChannelLink"
-        >
-          <template #icon>
-            <VBadge color="transparent">
-              <template #badge>
-                <Icon v-if="!currentChannel.language" color="red" small>
-                  error
-                </Icon>
-              </template>
-              <Icon>edit</Icon>
-            </VBadge>
-          </template>
-        </IconButton>
+        <router-link :to="viewChannelDetailsLink">
+          <IconButton 
+            class="toolbar-icon-btn" 
+            icon="info" 
+            :text="$tr('channelDetails')" 
+          />
+        </router-link>
+        <router-link :to="editChannelLink">
+          <IconButton 
+            v-if="canEdit" 
+            class="toolbar-icon-btn" 
+            icon="edit" 
+            :text="$tr('editChannel')" 
+          >
+            <template #icon>
+              <VBadge color="transparent">
+                <template #badge>
+                  <Icon v-if="!currentChannel.language" color="red" small>
+                    error
+                  </Icon>
+                </template>
+                <Icon>edit</Icon>
+              </VBadge>
+            </template>
+          </IconButton>
+        </router-link>
       </VToolbarItems>
       <VSpacer />
       <OfflineText indicator />

From 60e328677fbc0eaa7f72ee7ed66ff2577e54ac34 Mon Sep 17 00:00:00 2001
From: Michaela Robosova <michaela@learningequality.com>
Date: Fri, 25 Sep 2020 09:37:58 +0200
Subject: [PATCH 17/19] Fix conflicting correct class

KDS theme tokens contain `correct`
field that is set to green (#43A047).
Answers editor used this class to mark
correct answers which introduced
green background to them which should
not be there.
---
 .../AnswersEditor/AnswersEditor.vue           | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/AnswersEditor/AnswersEditor.vue b/contentcuration/contentcuration/frontend/channelEdit/components/AnswersEditor/AnswersEditor.vue
index 90b15e4c6b..be7b01978d 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/AnswersEditor/AnswersEditor.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/AnswersEditor/AnswersEditor.vue
@@ -57,11 +57,11 @@
                 <keep-alive :max="5">
                   <!-- Input question shows a text field with type of `number` -->
                   <div v-if="isInputQuestion">
-                    <VTextField 
-                      v-if="isAnswerOpen(answerIdx)" 
-                      v-model="answer.answer" 
-                      class="answer-number" 
-                      type="number" 
+                    <VTextField
+                      v-if="isAnswerOpen(answerIdx)"
+                      v-model="answer.answer"
+                      class="answer-number"
+                      type="number"
                       :rules="[numericRule]"
                     />
                     <VTextField v-else :value="answer.answer" class="no-border" type="number" />
@@ -244,9 +244,9 @@
         }
 
         if (this.answers[answerIdx].correct) {
-          classes.push('correct');
+          classes.push('answer-correct');
         } else {
-          classes.push('wrong');
+          classes.push('answer-wrong');
         }
 
         return classes;
@@ -432,11 +432,11 @@
       cursor: pointer;
     }
 
-    &.closed.correct:hover {
+    &.closed.answer-correct:hover {
       background-color: fade(@exercise-answer-correct, 15%);
     }
 
-    &.closed.wrong:hover {
+    &.closed.answer-wrong:hover {
       background-color: fade(@exercise-answer-wrong, 15%);
     }
 
@@ -445,11 +445,11 @@
       width: 4px;
       height: 100%;
 
-      &.correct {
+      &.answer-correct {
         background-color: @exercise-answer-correct;
       }
 
-      &.wrong {
+      &.answer-wrong {
         background-color: @exercise-answer-wrong;
       }
     }

From bfc515eaa8dbc410b6a76b97eaa5ee6c350a6a13 Mon Sep 17 00:00:00 2001
From: Michaela Robosova <michaela@learningequality.com>
Date: Fri, 25 Sep 2020 10:28:23 +0200
Subject: [PATCH 18/19] Increase list item height

to prevent height glitches on hover
now when we use vertical options
button instead of the horizontal one.
---
 .../frontend/channelEdit/components/StudioTree/StudioTree.vue   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/StudioTree/StudioTree.vue b/contentcuration/contentcuration/frontend/channelEdit/components/StudioTree/StudioTree.vue
index 2a88d519ca..6c3fb01d33 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/StudioTree/StudioTree.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/StudioTree/StudioTree.vue
@@ -13,7 +13,7 @@
       @click="onNodeClick(node.id)"
     >
       <ContextMenu :disabled="!allowEditing">
-        <VLayout row align-center>
+        <VLayout row align-center style="height: 40px">
           <VFlex shrink style="min-width: 40px;" class="text-xs-center">
             <VBtn
               v-if="showExpansion"

From db694ffc07e91ff0adee31b784fbb3d4febb0d64 Mon Sep 17 00:00:00 2001
From: Michaela Robosova <michaela@learningequality.com>
Date: Fri, 25 Sep 2020 10:51:58 +0200
Subject: [PATCH 19/19] Center a badge vertically

---
 .../frontend/channelEdit/components/Clipboard/TopicNode.vue     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/TopicNode.vue b/contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/TopicNode.vue
index 994ffbf6fa..b25000bd41 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/TopicNode.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/Clipboard/TopicNode.vue
@@ -109,7 +109,7 @@
   }
 
   /deep/ .v-badge__badge {
-    top: -11px;
+    top: 0;
     right: -32px;
     border-radius: 3px;
   }