Studio: Audit and fix theme token updates against KDS

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/settings/pages/Storage/RequestForm.vue

@@ -142,7 +142,7 @@
       v-for="affiliation in affiliationOptions"
       :key="affiliation.value"
       v-model="org_or_personal"
-      :value="affiliation.value"
+      :buttonValue="affiliation.value"
       :invalid="errors.org_or_personal"
       :showInvalidText="errors.org_or_personal"
       :invalidText="$tr('fieldRequiredText')"
@@ -172,7 +172,7 @@
       v-for="orgType in organizationTypeOptions"
       :key="orgType.value"
       v-model="organization_type"
-      :value="orgType.value"
+      :buttonValue="orgType.value"
       :invalid="errors.organization_type"
       :showInvalidText="errors.organization_type"
       :invalidText="$tr('fieldRequiredText')"
@@ -199,7 +199,7 @@
       v-for="constraint in timeConstraintOptions"
       :key="constraint.value"
       v-model="time_constraint"
-      :value="constraint.value"
+      :buttonValue="constraint.value"
       :label="constraint.text"
     />
 

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

@@ -1,15 +1,28 @@
 import Vue from 'vue';
 import has from 'lodash/has';
-import { languageDirections, defaultLanguage } from 'kolibri-design-system/lib/utils/i18n';
 import importVueIntlLocaleData from './vue-intl-locale-data';
 import importIntlLocale from './intl-locale-data';
 
-export {
-  languageDirections,
-  defaultLanguage,
-  languageValidator,
-  getContentLangDir,
-} from 'kolibri-design-system/lib/utils/i18n';
+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;
+};
+
+export { languageDirections, defaultLanguage, languageValidator, getContentLangDir };
 
 let _i18nReady = false;
 

contentcuration/contentcuration/frontend/shared/languageSwitcher/LanguageSwitcherModal.vue

@@ -19,7 +19,7 @@
           v-for="language in languageCol"
           :key="language.id"
           v-model="selectedLanguage"
-          :value="language.id"
+          :buttonValue="language.id"
           :label="language.lang_name"
           :title="language.english_name"
           class="language-name"

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/LoadingText.vue

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