diff --git a/kolibri/core/assets/src/core-app/apiSpec.js b/kolibri/core/assets/src/core-app/apiSpec.js index d17dad1d196..fbaa30937e6 100644 --- a/kolibri/core/assets/src/core-app/apiSpec.js +++ b/kolibri/core/assets/src/core-app/apiSpec.js @@ -17,7 +17,7 @@ import vuex from 'vuex'; import UiAlert from 'kolibri-design-system/lib/keen/UiAlert'; import responsiveWindowMixin from 'kolibri-design-system/lib/KResponsiveWindowMixin'; import responsiveElementMixin from 'kolibri-design-system/lib/KResponsiveElementMixin'; -import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow'; +import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow'; import useKShow from 'kolibri-design-system/lib/composables/useKShow'; import UiIconButton from 'kolibri-design-system/lib/keen/UiIconButton'; // temp hack import * as vueCompositionApi from '@vue/composition-api'; diff --git a/kolibri/core/assets/src/views/AppBar.vue b/kolibri/core/assets/src/views/AppBar.vue index 6d5cabc27f9..a238ad7da9e 100644 --- a/kolibri/core/assets/src/views/AppBar.vue +++ b/kolibri/core/assets/src/views/AppBar.vue @@ -12,7 +12,7 @@ :title="title" :removeNavIcon="isAppContext && isTouchDevice" type="clear" - textColor="white" + textColor="black" class="app-bar" :style="{ height: topBarHeight + 'px' }" :raised="false" @@ -24,7 +24,7 @@ > @@ -83,7 +83,7 @@ diff --git a/kolibri/core/assets/src/views/CoreMenu/CoreMenuOption.vue b/kolibri/core/assets/src/views/CoreMenu/CoreMenuOption.vue index de9d04a08da..519e18b68e0 100644 --- a/kolibri/core/assets/src/views/CoreMenu/CoreMenuOption.vue +++ b/kolibri/core/assets/src/views/CoreMenu/CoreMenuOption.vue @@ -139,9 +139,9 @@ color: this.$themeTokens.primaryDark, fontWeight: 'bold', margin: '8px', - backgroundColor: this.$themeBrand.primary.v_50, + backgroundColor: this.$themePalette.grey.v_100, ':hover': { - backgroundColor: this.$themeBrand.primary.v_100, + backgroundColor: this.$themePalette.grey.v_200, }, ':focus': this.$coreOutline, }; @@ -149,7 +149,7 @@ return { color: this.$themeTokens.text, ':hover': { - backgroundColor: this.$themeBrand.primary.v_50, + backgroundColor: this.$themePalette.grey.v_100, }, ':focus': this.$coreOutline, }; diff --git a/kolibri/core/assets/src/views/CorePage/AppBarPage.vue b/kolibri/core/assets/src/views/CorePage/AppBarPage.vue index 4f3cb2508c9..f827a87a84d 100644 --- a/kolibri/core/assets/src/views/CorePage/AppBarPage.vue +++ b/kolibri/core/assets/src/views/CorePage/AppBarPage.vue @@ -122,7 +122,7 @@ width: '100%', maxWidth: '1064px', margin: 'auto', - backgroundColor: this.$themePalette.grey.v_100, + backgroundColor: this.$themePalette.grey.v_50, paddingLeft: this.paddingLeftRight, paddingRight: this.paddingLeftRight, paddingTop: this.appBarHeight + this.paddingTop + 'px', diff --git a/kolibri/core/assets/src/views/CorePage/ImmersivePage.vue b/kolibri/core/assets/src/views/CorePage/ImmersivePage.vue index 2760e650cd8..8a40567bbf0 100644 --- a/kolibri/core/assets/src/views/CorePage/ImmersivePage.vue +++ b/kolibri/core/assets/src/views/CorePage/ImmersivePage.vue @@ -80,7 +80,7 @@ : { width: '100%', display: 'inline-block', - backgroundColor: this.$themePalette.grey.v_100, + backgroundColor: this.$themePalette.grey.v_50, paddingLeft: '32px', paddingRight: '32px', paddingBottom: '72px', diff --git a/kolibri/core/assets/src/views/FilterTextbox.vue b/kolibri/core/assets/src/views/FilterTextbox.vue index 35728e71dfc..f5b9666ca63 100644 --- a/kolibri/core/assets/src/views/FilterTextbox.vue +++ b/kolibri/core/assets/src/views/FilterTextbox.vue @@ -146,7 +146,12 @@ } .k-filter-input { - width: calc(100% - 80px); + // removes the Chrome clear button + &::-webkit-search-cancel-button { + appearance: none; + } + + width: 100%; height: 40px; padding-top: 0; padding-right: 40px; diff --git a/kolibri/core/assets/src/views/HorizontalNavBarWithOverflowMenu.vue b/kolibri/core/assets/src/views/HorizontalNavBarWithOverflowMenu.vue index f6601d782fd..fb92b07d81c 100644 --- a/kolibri/core/assets/src/views/HorizontalNavBarWithOverflowMenu.vue +++ b/kolibri/core/assets/src/views/HorizontalNavBarWithOverflowMenu.vue @@ -89,7 +89,7 @@ return this.navigationLinks.filter(l => !l.isHidden); }, color() { - return this.$themeTokens.textInverted; + return this.$themeTokens.text; }, overflowMenuLinks() { if (!this.mounted || isUndefined(this.windowWidth)) { diff --git a/kolibri/core/assets/src/views/ImmersiveToolbar.vue b/kolibri/core/assets/src/views/ImmersiveToolbar.vue index 3eb88ac705c..b11469042c7 100644 --- a/kolibri/core/assets/src/views/ImmersiveToolbar.vue +++ b/kolibri/core/assets/src/views/ImmersiveToolbar.vue @@ -3,12 +3,12 @@
@@ -24,14 +24,14 @@ v-if="icon === 'close'" :ariaLabel="coreString('closeAction')" icon="close" - :color="$themeTokens.textInverted" + :color="isFullscreen ? $themeTokens.text : $themeTokens.textInverted" tabindex="-1" /> @@ -40,7 +40,7 @@ v-if="icon === 'close'" :ariaLabel="coreString('closeAction')" icon="close" - :color="$themeTokens.textInverted" + :color="isFullscreen ? $themeTokens.text : $themeTokens.textInverted" tabindex="-1" @click="$emit('navIconClick')" /> @@ -48,7 +48,7 @@ v-else icon="back" :ariaLabel="coreString('goBackAction')" - :color="$themeTokens.textInverted" + :color="isFullscreen ? $themeTokens.text : $themeTokens.textInverted" @click="$emit('navIconClick')" /> @@ -109,11 +109,9 @@ }, linkStyle() { const hoverBg = this.isFullscreen - ? this.$themeTokens.appBarDark - : this.$themeTokens.appBarFullscreenDark; - const defaultBg = this.isFullscreen - ? this.$themeTokens.appBar - : this.$themeTokens.appBarFullscreen; + ? this.$themeBrand.secondary.v_1100 + : this.$themePalette.grey.v_600; + const defaultBg = this.isFullscreen ? this.$themeTokens.appBar : this.$themePalette.black; return { backgroundColor: defaultBg, ':hover': { diff --git a/kolibri/core/assets/src/views/KolibriLoadingSnippet.vue b/kolibri/core/assets/src/views/KolibriLoadingSnippet.vue index 327992c30d6..a74a624b9d1 100644 --- a/kolibri/core/assets/src/views/KolibriLoadingSnippet.vue +++ b/kolibri/core/assets/src/views/KolibriLoadingSnippet.vue @@ -8,9 +8,10 @@ xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="kolibri-loader" - viewBox="0 0 1000 809" - width="125" - height="125" + viewBox="0 0 402 382" + width="402" + height="382" + fill="none" > {{ $tr('kolibriLoading') }} @@ -22,178 +23,72 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - - - - - - - - - - - - - + - - - - - - - - - - - - - - - - - - - - - - - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - - - - - - - - - - - - - + - - - - - - - - - - - - - - - - - - - - - - - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + diff --git a/kolibri/core/assets/src/views/Navbar/NavbarLink.vue b/kolibri/core/assets/src/views/Navbar/NavbarLink.vue index 6854ee6ae3e..f94b8cfbd22 100644 --- a/kolibri/core/assets/src/views/Navbar/NavbarLink.vue +++ b/kolibri/core/assets/src/views/Navbar/NavbarLink.vue @@ -61,9 +61,9 @@ computed: { tabStyles() { return { - color: this.$themePalette.grey.v_50, + color: this.$themeTokens.text, ':hover': { - 'background-color': this.$themeTokens.appBarDark, + 'background-color': this.$themeBrand.secondary.v_1100, }, ':focus': { ...this.$coreOutline, @@ -81,7 +81,7 @@ activeClasses() { // return both fixed and dynamic classes return `router-link-active ${this.$computedClass({ - color: this.$themeTokens.textInverted, + color: this.$themeTokens.text, })}`; }, }, diff --git a/kolibri/core/assets/src/views/PermissionsIcon.vue b/kolibri/core/assets/src/views/PermissionsIcon.vue index d4cc4cf7b09..82627bc41ee 100644 --- a/kolibri/core/assets/src/views/PermissionsIcon.vue +++ b/kolibri/core/assets/src/views/PermissionsIcon.vue @@ -69,7 +69,7 @@ iconStyle() { if (this.hasSuperAdminPermission) { return { - fill: this.lightIcon ? this.$themePalette.amber.v_100 : this.$themeTokens.superAdmin, + fill: this.lightIcon ? this.$themePalette.yellow.v_400 : this.$themeTokens.superAdmin, }; } else { return { diff --git a/kolibri/core/assets/src/views/SideNav.vue b/kolibri/core/assets/src/views/SideNav.vue index ba2cb1a28b7..c9f91dedeac 100644 --- a/kolibri/core/assets/src/views/SideNav.vue +++ b/kolibri/core/assets/src/views/SideNav.vue @@ -185,7 +185,7 @@ ref="closeButton" tabindex="0" icon="close" - :color="$themeTokens.textInverted" + :color="$themeTokens.text" class="side-nav-header-icon" :ariaLabel="$tr('closeNav')" size="large" @@ -193,7 +193,7 @@ /> {{ sideNavTitleText }} diff --git a/kolibri/core/assets/src/views/UserTable/index.vue b/kolibri/core/assets/src/views/UserTable/index.vue index e50d9bb651c..d0f1cea3f67 100644 --- a/kolibri/core/assets/src/views/UserTable/index.vue +++ b/kolibri/core/assets/src/views/UserTable/index.vue @@ -88,10 +88,7 @@ :omitLearner="true" class="role-badge" data-test="userRoleBadge" - :style="{ - color: $themeTokens.textInverted, - backgroundColor: $themeTokens.annotation, - }" + :class="$computedClass(userRoleBadgeStyle)" /> learner1 + learner1 -
+
Completed @@ -40,10 +40,10 @@ exports[`ReportsLearnersTable doesn't render groups information when show groups - learner2 + learner2 -
+
Started diff --git a/kolibri/plugins/coach/assets/test/views/reports/__snapshots__/ReportsLessonExerciseLearnerListPage.spec.js.snap b/kolibri/plugins/coach/assets/test/views/reports/__snapshots__/ReportsLessonExerciseLearnerListPage.spec.js.snap index fffba0f093a..5b2c2f081cc 100644 --- a/kolibri/plugins/coach/assets/test/views/reports/__snapshots__/ReportsLessonExerciseLearnerListPage.spec.js.snap +++ b/kolibri/plugins/coach/assets/test/views/reports/__snapshots__/ReportsLessonExerciseLearnerListPage.spec.js.snap @@ -2,7 +2,7 @@ exports[`ReportsLessonExerciseLearnerListPage for a lesson restricted to some groups recipients only when displaying all learners renders a correct summary tally 1`] = `
-
+
Completed by 1 of 1 @@ -12,22 +12,22 @@ exports[`ReportsLessonExerciseLearnerListPage for a lesson restricted to some gr exports[`ReportsLessonExerciseLearnerListPage for a lesson restricted to some groups recipients only when displaying learners by groups renders a correct group tally 1`] = `
-
+
1
-
+
0
-
+
0
-
+
0 @@ -37,7 +37,7 @@ exports[`ReportsLessonExerciseLearnerListPage for a lesson restricted to some gr exports[`ReportsLessonExerciseLearnerListPage for a lesson restricted to some groups recipients only when displaying learners by groups renders a correct group tally 2`] = `
-
+
0 of 0 @@ -47,12 +47,12 @@ exports[`ReportsLessonExerciseLearnerListPage for a lesson restricted to some gr exports[`ReportsLessonExerciseLearnerListPage for an entire class lesson when displaying all learners renders a correct summary tally 1`] = `
-
+
Completed by 1 of 3
-
+
1 started @@ -64,22 +64,22 @@ exports[`ReportsLessonExerciseLearnerListPage for an entire class lesson when di exports[`ReportsLessonExerciseLearnerListPage for an entire class lesson when displaying learners by groups renders a correct group tally 1`] = `
-
+
1
-
+
1
-
+
0
-
+
0 @@ -89,22 +89,22 @@ exports[`ReportsLessonExerciseLearnerListPage for an entire class lesson when di exports[`ReportsLessonExerciseLearnerListPage for an entire class lesson when displaying learners by groups renders a correct group tally 2`] = `
-
+
1
-
+
0
-
+
0
-
+
0 @@ -114,7 +114,7 @@ exports[`ReportsLessonExerciseLearnerListPage for an entire class lesson when di exports[`ReportsLessonExerciseLearnerListPage for an entire class lesson when displaying learners by groups renders a correct group tally 3`] = `
-
+
0 of 0 diff --git a/kolibri/plugins/coach/assets/test/views/reports/__snapshots__/ReportsLessonResourceLearnerListPage.spec.js.snap b/kolibri/plugins/coach/assets/test/views/reports/__snapshots__/ReportsLessonResourceLearnerListPage.spec.js.snap index e1bb74c170a..12aa1ff8ec6 100644 --- a/kolibri/plugins/coach/assets/test/views/reports/__snapshots__/ReportsLessonResourceLearnerListPage.spec.js.snap +++ b/kolibri/plugins/coach/assets/test/views/reports/__snapshots__/ReportsLessonResourceLearnerListPage.spec.js.snap @@ -2,7 +2,7 @@ exports[`ReportsLessonResourceLearnerListPage for a lesson restricted to some groups recipents only when displaying all learners renders a correct summary tally 1`] = `
-
+
Completed by 1 of 1 @@ -27,18 +27,18 @@ exports[`ReportsLessonResourceLearnerListPage for a lesson restricted to some gr exports[`ReportsLessonResourceLearnerListPage for a lesson restricted to some groups recipents only when displaying learners by groups renders a correct group tally 1`] = `
-
+
1
-
+
0
-
+
0 @@ -48,7 +48,7 @@ exports[`ReportsLessonResourceLearnerListPage for a lesson restricted to some gr exports[`ReportsLessonResourceLearnerListPage for a lesson restricted to some groups recipents only when displaying learners by groups renders a correct group tally 2`] = `
-
+
0 of 0 @@ -73,12 +73,12 @@ exports[`ReportsLessonResourceLearnerListPage for a lesson restricted to some gr exports[`ReportsLessonResourceLearnerListPage for an entire class lesson when displaying all learners renders a correct summary tally 1`] = `
-
+
Completed by 1 of 3
-
+
1 started @@ -105,18 +105,18 @@ exports[`ReportsLessonResourceLearnerListPage for an entire class lesson when di exports[`ReportsLessonResourceLearnerListPage for an entire class lesson when displaying learners by groups renders a correct group tally 1`] = `
-
+
1
-
+
1
-
+
0 @@ -126,18 +126,18 @@ exports[`ReportsLessonResourceLearnerListPage for an entire class lesson when di exports[`ReportsLessonResourceLearnerListPage for an entire class lesson when displaying learners by groups renders a correct group tally 2`] = `
-
+
1
-
+
0
-
+
0 @@ -147,7 +147,7 @@ exports[`ReportsLessonResourceLearnerListPage for an entire class lesson when di exports[`ReportsLessonResourceLearnerListPage for an entire class lesson when displaying learners by groups renders a correct group tally 3`] = `
-
+
0 of 0 diff --git a/kolibri/plugins/device/assets/src/views/AvailableChannelsPage/index.vue b/kolibri/plugins/device/assets/src/views/AvailableChannelsPage/index.vue index aa933f05f30..fcd4d5386e2 100644 --- a/kolibri/plugins/device/assets/src/views/AvailableChannelsPage/index.vue +++ b/kolibri/plugins/device/assets/src/views/AvailableChannelsPage/index.vue @@ -45,7 +45,7 @@

{{ $route.query.token }}

diff --git a/kolibri/plugins/device/assets/src/views/DeprecationWarningBanner.vue b/kolibri/plugins/device/assets/src/views/DeprecationWarningBanner.vue index ed88a3f993d..140e0120f68 100644 --- a/kolibri/plugins/device/assets/src/views/DeprecationWarningBanner.vue +++ b/kolibri/plugins/device/assets/src/views/DeprecationWarningBanner.vue @@ -10,7 +10,7 @@
diff --git a/kolibri/plugins/device/assets/src/views/DeviceSettingsPage/index.vue b/kolibri/plugins/device/assets/src/views/DeviceSettingsPage/index.vue index c0d87812274..98ca8746214 100644 --- a/kolibri/plugins/device/assets/src/views/DeviceSettingsPage/index.vue +++ b/kolibri/plugins/device/assets/src/views/DeviceSettingsPage/index.vue @@ -113,7 +113,7 @@

-

+

{{ $tr('DownloadOnMeteredConnectionDescription') }}

{{ $tr('primaryStorage') }} -

+

{{ $tr('primaryStorageDescription') }}

@@ -163,7 +163,7 @@

{{ $tr('secondaryStorage') }}

-

+

{{ $tr('secondaryStorageDescription') }}

@@ -255,7 +255,7 @@

{{ $tr('enabledPages') }}

-

+

{{ deviceString('newEnabledPluginsState') }}

@@ -479,6 +479,11 @@ computed: { ...mapGetters(['isAppContext', 'isPageLoading', 'snackbarIsVisible']), ...mapGetters('deviceInfo', ['isRemoteContent']), + InfoDescriptionColor() { + return { + color: this.$themePalette.grey.v_700, + }; + }, pageTitle() { return this.deviceString('deviceManagementTitle'); }, @@ -1197,10 +1202,6 @@ align-items: center; } - .info-description { - color: #616161; - } - input[type='range'] { width: 12vw; height: 2px; diff --git a/kolibri/plugins/device/assets/src/views/DeviceTopNav.vue b/kolibri/plugins/device/assets/src/views/DeviceTopNav.vue index 1cc38ee6b87..7d3bb9bdde3 100644 --- a/kolibri/plugins/device/assets/src/views/DeviceTopNav.vue +++ b/kolibri/plugins/device/assets/src/views/DeviceTopNav.vue @@ -30,35 +30,35 @@ title: this.coreString('channelsLabel'), link: this.$router.getRoute('MANAGE_CONTENT_PAGE'), icon: 'channel', - color: this.$themeTokens.textInverted, + color: this.$themeTokens.text, condition: this.canManageContent, }, { title: this.deviceString('permissionsLabel'), link: this.$router.getRoute('MANAGE_PERMISSIONS_PAGE'), icon: 'permissions', - color: this.$themeTokens.textInverted, + color: this.$themeTokens.text, condition: this.isSuperuser, }, { title: this.coreString('facilitiesLabel'), link: this.$router.getRoute('FACILITIES_PAGE'), icon: 'facility', - color: this.$themeTokens.textInverted, + color: this.$themeTokens.text, condition: this.isSuperuser && !this.isLearnerOnlyImport, }, { title: this.coreString('infoLabel'), link: this.$router.getRoute('DEVICE_INFO_PAGE'), icon: 'deviceInfo', - color: this.$themeTokens.textInverted, + color: this.$themeTokens.text, condition: this.isSuperuser, }, { title: this.coreString('settingsLabel'), link: this.$router.getRoute('DEVICE_SETTINGS_PAGE'), icon: 'settings', - color: this.$themeTokens.textInverted, + color: this.$themeTokens.text, condition: this.isSuperuser, }, ]; diff --git a/kolibri/plugins/device/assets/src/views/ManageContentPage/ChannelPanel/WithCheckbox.vue b/kolibri/plugins/device/assets/src/views/ManageContentPage/ChannelPanel/WithCheckbox.vue index 8e47a53a05b..8fdbb152e96 100644 --- a/kolibri/plugins/device/assets/src/views/ManageContentPage/ChannelPanel/WithCheckbox.vue +++ b/kolibri/plugins/device/assets/src/views/ManageContentPage/ChannelPanel/WithCheckbox.vue @@ -3,7 +3,7 @@