Merge pull request #4459 from akolson/studio_rebranding

Studio: Audit and fix theme token updates against KDS

Author: bjester

contentcuration/contentcuration/frontend/accounts/pages/Main.vue

@@ -12,13 +12,13 @@
           class="pa-4"
           style="width: 300px;margin: 0 auto;"
         >
-          <VImg
-            height="200"
-            maxHeight="100"
-            contain
-            :lazy-src="require('shared/images/kolibri-logo.svg')"
-            :src="require('shared/images/kolibri-logo.svg')"
-          />
+          <div class="k-logo-container">
+            <KLogo
+              altText="Kolibri Logo with background"
+              :showBackground="true"
+              :size="120"
+            />
+          </div>
           <h2 class="primary--text py-2 text-xs-center">
             {{ $tr('kolibriStudio') }}
           </h2>
@@ -227,4 +227,9 @@
     width: 100%;
   }
 
+  .k-logo-container {
+    display: flex;
+    justify-content: center;
+  }
+
 </style>

contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelTable.vue

@@ -52,7 +52,7 @@
       <template #progress>
         <VProgressLinear
           v-if="loading"
-          color="primary"
+          color="loading"
           indeterminate
           data-test="loading"
         />

contentcuration/contentcuration/frontend/administration/pages/Users/UserTable.vue

@@ -63,7 +63,7 @@
       :class="{ expanded: $vuetify.breakpoint.mdAndUp }"
     >
       <template #progress>
-        <VProgressLinear v-if="loading" color="primary" indeterminate />
+        <VProgressLinear v-if="loading" color="loading" indeterminate />
       </template>
 
       <template #headerCell="{ header }">

contentcuration/contentcuration/frontend/channelEdit/components/ContentNodeValidator.vue

@@ -9,7 +9,7 @@
   <span v-else-if="error" class="mx-2">
     <VTooltip bottom lazy>
       <template #activator="{ on }">
-        <Icon color="red" v-on="on">
+        <Icon :color="$themePalette.red.v_1100" v-on="on">
           error
         </Icon>
       </template>
@@ -19,7 +19,7 @@
   <span v-else-if="warning" class="mx-2">
     <VTooltip bottom lazy>
       <template #activator="{ on }">
-        <Icon color="amber" v-on="on">
+        <Icon :color="$themePalette.yellow.v_1100" v-on="on">
           warning
         </Icon>
       </template>

contentcuration/contentcuration/frontend/channelEdit/components/StudioTree/StudioTree.vue

@@ -118,6 +118,7 @@
                         v-if="loading"
                         class="mx-3"
                         indeterminate
+                        color="loading"
                         size="15"
                         width="2"
                       />

contentcuration/contentcuration/frontend/channelEdit/components/edit/EditModal.vue

@@ -22,7 +22,7 @@
             <!-- Toolbar + extension -->
             <VToolbar
               dark
-              color="primary"
+              color="appBarDark"
               fixed
               flat
               :clipped-left="!$isRTL"

contentcuration/contentcuration/frontend/channelEdit/components/edit/SavingIndicator.vue

@@ -2,7 +2,7 @@
 
   <div class="mx-2">
     <template v-if="hasChanges">
-      <VProgressCircular indeterminate size="16" width="2" color="secondary" />
+      <VProgressCircular indeterminate size="16" width="2" color="loading" />
       <span class="mx-2" style="vertical-align: middle;">
         {{ $tr('savingIndicator') }}
       </span>

contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue

@@ -73,7 +73,7 @@
               v-on="on"
             >
               {{ $formatNumber(errorsInChannel) }}
-              <Icon color="amber">
+              <Icon :color="$themePalette.yellow.v_1100">
                 warning
               </Icon>
             </div>
@@ -204,7 +204,7 @@
         <slot name="extension"></slot>
       </template>
     </ToolBar>
-    <MainNavigationDrawer v-model="drawer" />
+    <MainNavigationDrawer v-model="drawer" color="white" />
     <slot></slot>
 
     <PublishModal

contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue

@@ -3,7 +3,7 @@
   <VApp>
     <VToolbar
       v-if="libraryMode || isFAQPage"
-      color="primary"
+      color="appBarDark"
       dark
       :clipped-left="!$isRTL"
       :clipped-right="$isRTL"
@@ -12,11 +12,15 @@
       <VToolbarSideIcon
         :href="homeLink"
         exact
-        color="white"
+        color="appBarDark"
         class="ma-0"
         style="border-radius: 8px;"
       >
-        <KolibriLogo />
+        <KLogo
+          altText="Kolibri Logo with background"
+          :showBackground="true"
+          :size="36"
+        />
       </VToolbarSideIcon>
 
       <VToolbarTitle class="notranslate">
@@ -31,7 +35,7 @@
           :to="getChannelLink(listType)"
           @click="trackTabClick(listType)"
         >
-          <VBadge :value="invitationsByListCounts[listType]" color="secondary">
+          <VBadge :value="invitationsByListCounts[listType]" color="black">
             <template #badge>
               <span>{{ $formatNumber(invitationsByListCounts[listType]) }}</span>
             </template>
@@ -96,7 +100,6 @@
   import { ChannelListTypes } from 'shared/constants';
   import { constantsTranslationMixin, routerMixin } from 'shared/mixins';
   import GlobalSnackbar from 'shared/views/GlobalSnackbar';
-  import KolibriLogo from 'shared/views/KolibriLogo';
   import AppBar from 'shared/views/AppBar';
   import OfflineText from 'shared/views/OfflineText';
   import PolicyModals from 'shared/views/policies/PolicyModals';
@@ -123,7 +126,6 @@
       ChannelInvitation,
       ChannelListAppError,
       GlobalSnackbar,
-      KolibriLogo,
       PolicyModals,
       OfflineText,
     },

contentcuration/contentcuration/frontend/shared/i18n/index.js

@@ -7,14 +7,17 @@ const languageDirections = {
   LTR: 'ltr',
   RTL: 'rtl',
 };
+
 const defaultLanguage = {
   id: 'en',
   lang_name: 'English',
   lang_direction: languageDirections.LTR,
 };
+
 const languageValidator = language => {
   return ['id', 'lang_name', 'lang_direction'].reduce((valid, key) => valid && language[key], true);
 };
+
 const getContentLangDir = language => {
   return (language || {}).lang_direction || languageDirections.LTR;
 };

contentcuration/contentcuration/frontend/shared/layouts/ImmersiveModalLayout.vue

@@ -1,7 +1,7 @@
 <template>
 
   <VApp>
-    <VToolbar app dark color="primary">
+    <VToolbar app dark color="appBarDark">
       <VBtn v-if="backButton" flat :to="previousPage" exact>
         <Icon class="rtl-flip">
           arrow_back

contentcuration/contentcuration/frontend/shared/views/AppBar.vue

@@ -3,10 +3,9 @@
   <div>
     <VToolbar
       app
-      dark
       :clipped-left="!$isRTL"
       :clipped-right="$isRTL"
-      color="primary"
+      color="appBar"
       height="56"
       :tabs="Boolean($slots.tabs)"
     >
@@ -15,11 +14,14 @@
         v-else
         :href="homeLink"
         exact
-        color="white"
+        color="appBar"
         class="ma-0"
         style="border-radius: 8px;"
       >
-        <KolibriLogo />
+        <KLogo
+          altText="Kolibri Logo with background"
+          :size="36"
+        />
       </VToolbarSideIcon>
 
       <VToolbarTitle>
@@ -31,9 +33,17 @@
           <Menu>
             <template #activator="{ on }">
               <VBtn flat style="text-transform: none;" v-on="on">
-                <Icon>person</Icon>
+                <KIconButton
+                  disabled="true"
+                  icon="person"
+                  color="black"
+                />
                 <span class="mx-2 subheading">{{ user.first_name }}</span>
-                <Icon>arrow_drop_down</Icon>
+                <KIconButton
+                  disabled="true"
+                  icon="dropdown"
+                  color="black"
+                />
               </VBtn>
             </template>
             <VList>
@@ -124,15 +134,13 @@
 <script>
 
   import { mapActions, mapState, mapGetters } from 'vuex';
-  import KolibriLogo from './KolibriLogo';
   import Tabs from 'shared/views/Tabs';
   import MainNavigationDrawer from 'shared/views/MainNavigationDrawer';
   import LanguageSwitcherModal from 'shared/languageSwitcher/LanguageSwitcherModal';
 
   export default {
     name: 'AppBar',
     components: {
-      KolibriLogo,
       LanguageSwitcherModal,
       MainNavigationDrawer,
       Tabs,

contentcuration/contentcuration/frontend/shared/views/FullscreenModal.vue

@@ -13,7 +13,7 @@
     <VCard style="overflow-y: auto;">
       <VToolbar
         :color="color"
-        dark
+        :dark="dark"
         fixed
         :extension-height="48"
         clipped-left
@@ -81,7 +81,11 @@
       },
       color: {
         type: String,
-        default: 'primary',
+        default: 'appBarDark',
+      },
+      dark: {
+        type: Boolean,
+        default: true,
       },
     },
     computed: {

contentcuration/contentcuration/frontend/shared/views/KolibriLogo.vue

@@ -11,7 +11,7 @@
       <VProgressCircular
         :size="70"
         :width="7"
-        color="secondary"
+        color="loading"
         indeterminate
       />
     </VFlex>

contentcuration/contentcuration/frontend/shared/views/LoadingText.vue

@@ -8,9 +8,12 @@
       style="z-index: 1000;"
       :right="$isRTL"
     >
-      <VToolbar color="primary" dark>
+      <VToolbar :color="color">
         <VBtn flat icon :tabindex="handleclickTab" @click="drawer = false">
-          <Icon>clear</Icon>
+          <KIconButton
+            icon="clear"
+            color="black"
+          />
         </VBtn>
         <VToolbarTitle class="notranslate">
           Kolibri Studio
@@ -73,7 +76,11 @@
         </VListTile>
       </VList>
       <VContainer>
-        <KolibriLogo :height="75" />
+        <KLogo
+          altText="Kolibri logo"
+          :showBackground="true"
+          :size="88"
+        />
         <ActionLink
           :text="$tr('copyright', { year: new Date().getFullYear() })"
           href="https://learningequality.org/"
@@ -106,20 +113,22 @@
 <script>
 
   import { mapActions, mapState } from 'vuex';
-  import KolibriLogo from './KolibriLogo';
   import LanguageSwitcherModal from 'shared/languageSwitcher/LanguageSwitcherModal';
 
   export default {
     name: 'MainNavigationDrawer',
     components: {
-      KolibriLogo,
       LanguageSwitcherModal,
     },
     props: {
       value: {
         type: Boolean,
         default: false,
       },
+      color: {
+        type: String,
+        default: 'appBar',
+      },
     },
     data() {
       return {

contentcuration/contentcuration/frontend/shared/views/MainNavigationDrawer.vue

@@ -2,7 +2,8 @@
 
   <FullscreenModal
     v-model="dialog"
-    color="black"
+    color="appBarDark"
+    :dark="true"
   >
     <template #header>
       <span class="notranslate">{{ channel ? channel.name : '' }}</span>

contentcuration/contentcuration/frontend/shared/views/channel/ChannelDetailsModal.vue

@@ -20,7 +20,7 @@
     <VProgressLinear
       v-if="loading"
       indeterminate
-      color="primary"
+      color="loading"
       style="margin: 0;"
       height="5"
     />