From 71f6a28473d51e7b8f2cf2914c36de4941fdd1b1 Mon Sep 17 00:00:00 2001
From: Pranjal Rajput <pranjal.rajput.che21@itbhu.ac.in>
Date: Thu, 18 Jan 2024 14:58:10 +0530
Subject: [PATCH 1/5] Refactored 'UiAlert' & 'responsiveWindowMixin'

---
 kolibri/core/assets/src/core-app/apiSpec.js                 | 6 ++----
 .../coach/assets/src/views/plan/CreateExamPage/index.vue    | 2 +-
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/kolibri/core/assets/src/core-app/apiSpec.js b/kolibri/core/assets/src/core-app/apiSpec.js
index 8d64a667011..7853bebfdce 100644
--- a/kolibri/core/assets/src/core-app/apiSpec.js
+++ b/kolibri/core/assets/src/core-app/apiSpec.js
@@ -14,8 +14,8 @@
 
 import vue from 'vue';
 import vuex from 'vuex';
-import UiAlert from 'kolibri-design-system/lib/keen/UiAlert';
-import responsiveWindowMixin from 'kolibri-design-system/lib/KResponsiveWindowMixin';
+// 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 useKShow from 'kolibri-design-system/lib/composables/useKShow';
@@ -188,7 +188,6 @@ export default {
       MultiPaneLayout,
       CoreFullscreen,
       CoreLogo,
-      UiAlert,
       UiIconButton,
       UiToolbar,
       PrivacyInfoModal,
@@ -221,7 +220,6 @@ export default {
     },
     router,
     mixins: {
-      responsiveWindowMixin,
       responsiveElementMixin,
       commonCoreStrings,
       commonTaskStrings,
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/index.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/index.vue
index 5a8b7549d08..6fbfd15fce6 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/index.vue
@@ -41,7 +41,7 @@
 
 <script>
 
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import responsiveWindowMixin from 'kolibri-design-system/lib/KResponsiveWindowMixin';
   import { ref } from 'kolibri.lib.vueCompositionApi';
   import pickBy from 'lodash/pickBy';
   import BottomAppBar from 'kolibri.coreVue.components.BottomAppBar';

From b6aebdcb3d990f2d9be6149f366afc7199646b34 Mon Sep 17 00:00:00 2001
From: Pranjal Rajput <pranjal.rajput.che21@itbhu.ac.in>
Date: Thu, 18 Jan 2024 15:05:33 +0530
Subject: [PATCH 2/5] Refactored 'responsiveElementMixin' &
 'useKResponsiveWindow'

---
 kolibri/core/assets/src/core-app/apiSpec.js                 | 6 ++----
 kolibri/core/assets/src/views/AppBar.vue                    | 2 +-
 kolibri/core/assets/src/views/CorePage/AppBarPage.vue       | 2 +-
 .../assets/src/views/HorizontalNavBarWithOverflowMenu.vue   | 2 +-
 kolibri/core/assets/src/views/InteractionList/index.vue     | 2 +-
 kolibri/core/assets/src/views/MultiPaneLayout.vue           | 2 +-
 kolibri/core/assets/src/views/Navbar/NavbarLink.vue         | 2 +-
 kolibri/core/assets/src/views/Navbar/index.vue              | 2 +-
 kolibri/core/assets/src/views/SideNav.vue                   | 2 +-
 kolibri/core/assets/src/views/SlotTruncator.vue             | 2 +-
 .../assets/src/views/plan/CreateExamPage/SectionEditor.vue  | 2 +-
 .../src/views/plan/CreateExamPage/TabsWithOverflow.vue      | 2 +-
 .../device/assets/src/views/DeviceSettingsPage/index.vue    | 2 +-
 .../epub_viewer/assets/src/views/EpubRendererIndex.vue      | 2 +-
 .../assets/src/views/DataPage/SyncInterface/index.vue       | 2 +-
 .../facility/assets/src/views/FacilityConfigPage/index.vue  | 2 +-
 .../plugins/facility/assets/src/views/IdentifierTextbox.vue | 2 +-
 .../learn/assets/src/composables/useCardLayoutSpan.js       | 2 +-
 .../assets/src/my_downloads/views/DownloadsList/index.vue   | 2 +-
 .../plugins/learn/assets/src/views/ChannelCardGroupGrid.vue | 2 +-
 .../assets/src/views/ExploreLibrariesPage/LibraryItem.vue   | 2 +-
 .../learn/assets/src/views/LibraryPage/OtherLibraries.vue   | 2 +-
 .../learn/assets/src/views/LibraryPage/UnPinnedDevices.vue  | 2 +-
 .../plugins/learn/assets/src/views/LibraryPage/index.vue    | 2 +-
 kolibri/plugins/learn/assets/src/views/SearchBox.vue        | 2 +-
 .../learn/assets/src/views/SearchFiltersPanel/index.vue     | 2 +-
 .../learn/assets/src/views/TopicsPage/TopicsPanelModal.vue  | 2 +-
 .../media_player/assets/src/views/MediaPlayerIndex.vue      | 4 ++--
 .../pdf_viewer/assets/src/views/PdfRendererIndex.vue        | 2 +-
 .../setup_wizard/assets/src/views/OnboardingStepBase.vue    | 2 +-
 .../setup_wizard/assets/src/views/SetupWizardIndex.vue      | 2 +-
 .../assets/src/views/SlideshowRendererComponent.vue         | 2 +-
 32 files changed, 34 insertions(+), 36 deletions(-)

diff --git a/kolibri/core/assets/src/core-app/apiSpec.js b/kolibri/core/assets/src/core-app/apiSpec.js
index 7853bebfdce..5f61e87222b 100644
--- a/kolibri/core/assets/src/core-app/apiSpec.js
+++ b/kolibri/core/assets/src/core-app/apiSpec.js
@@ -16,8 +16,8 @@ import vue from 'vue';
 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 responsiveElementMixin from 'kolibri-design-system/lib/KResponsiveElementMixin';
+// import useKResponsiveWindow from 'kolibri-design-system/lib/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';
@@ -220,14 +220,12 @@ export default {
     },
     router,
     mixins: {
-      responsiveElementMixin,
       commonCoreStrings,
       commonTaskStrings,
       commonSyncElements,
       translatedUserKinds,
     },
     composables: {
-      useKResponsiveWindow,
       useKShow,
       useMinimumKolibriVersion,
       useUser,
diff --git a/kolibri/core/assets/src/views/AppBar.vue b/kolibri/core/assets/src/views/AppBar.vue
index 6d5cabc27f9..858369cceb7 100644
--- a/kolibri/core/assets/src/views/AppBar.vue
+++ b/kolibri/core/assets/src/views/AppBar.vue
@@ -122,7 +122,7 @@
   import KIconButton from 'kolibri-design-system/lib/buttons-and-links/KIconButton';
   import themeConfig from 'kolibri.themeConfig';
   import { isTouchDevice } from 'kolibri.utils.browserInfo';
-  import useKResponsiveWindow from 'kolibri.coreVue.composables.useKResponsiveWindow';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import navComponentsMixin from '../mixins/nav-components';
   import SkipNavigationLink from './SkipNavigationLink';
 
diff --git a/kolibri/core/assets/src/views/CorePage/AppBarPage.vue b/kolibri/core/assets/src/views/CorePage/AppBarPage.vue
index 479c6f797d4..3f539bd3904 100644
--- a/kolibri/core/assets/src/views/CorePage/AppBarPage.vue
+++ b/kolibri/core/assets/src/views/CorePage/AppBarPage.vue
@@ -62,7 +62,7 @@
   import { throttle } from 'frame-throttle';
   import LanguageSwitcherModal from 'kolibri.coreVue.components.LanguageSwitcherModal';
   import ScrollingHeader from 'kolibri.coreVue.components.ScrollingHeader';
-  import useKResponsiveWindow from 'kolibri.coreVue.composables.useKResponsiveWindow';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import SideNav from 'kolibri.coreVue.components.SideNav';
   import { LearnerDeviceStatus } from 'kolibri.coreVue.vuex.constants';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
diff --git a/kolibri/core/assets/src/views/HorizontalNavBarWithOverflowMenu.vue b/kolibri/core/assets/src/views/HorizontalNavBarWithOverflowMenu.vue
index 87bb28e348e..e6e6a43d222 100644
--- a/kolibri/core/assets/src/views/HorizontalNavBarWithOverflowMenu.vue
+++ b/kolibri/core/assets/src/views/HorizontalNavBarWithOverflowMenu.vue
@@ -49,7 +49,7 @@
   import Navbar from 'kolibri.coreVue.components.Navbar';
   import NavbarLink from 'kolibri.coreVue.components.NavbarLink';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
-  import useKResponsiveWindow from 'kolibri.coreVue.composables.useKResponsiveWindow';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
 
   export default {
     name: 'HorizontalNavBarWithOverflowMenu',
diff --git a/kolibri/core/assets/src/views/InteractionList/index.vue b/kolibri/core/assets/src/views/InteractionList/index.vue
index 3cbe167e65f..82ba99fe0c7 100644
--- a/kolibri/core/assets/src/views/InteractionList/index.vue
+++ b/kolibri/core/assets/src/views/InteractionList/index.vue
@@ -23,7 +23,7 @@
 
 <script>
 
-  import responsiveElementMixin from 'kolibri.coreVue.mixins.responsiveElementMixin';
+  import responsiveElementMixin from 'kolibri-design-system/lib/KResponsiveElementMixin';
   import InteractionItem from './InteractionItem';
 
   export default {
diff --git a/kolibri/core/assets/src/views/MultiPaneLayout.vue b/kolibri/core/assets/src/views/MultiPaneLayout.vue
index 1fcdb4083d5..3dfaeff2221 100644
--- a/kolibri/core/assets/src/views/MultiPaneLayout.vue
+++ b/kolibri/core/assets/src/views/MultiPaneLayout.vue
@@ -59,7 +59,7 @@
 <script>
 
   import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
-  import responsiveElementMixin from 'kolibri.coreVue.mixins.responsiveElementMixin';
+  import responsiveElementMixin from 'kolibri-design-system/lib/KResponsiveElementMixin';
 
   export default {
     name: 'MultiPaneLayout',
diff --git a/kolibri/core/assets/src/views/Navbar/NavbarLink.vue b/kolibri/core/assets/src/views/Navbar/NavbarLink.vue
index 6854ee6ae3e..68ad333eb9a 100644
--- a/kolibri/core/assets/src/views/Navbar/NavbarLink.vue
+++ b/kolibri/core/assets/src/views/Navbar/NavbarLink.vue
@@ -28,7 +28,7 @@
 <script>
 
   import { validateLinkObject } from 'kolibri.utils.validators';
-  import useKResponsiveWindow from 'kolibri.coreVue.composables.useKResponsiveWindow';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
 
   /**
      Links for use inside the Navbar
diff --git a/kolibri/core/assets/src/views/Navbar/index.vue b/kolibri/core/assets/src/views/Navbar/index.vue
index 69a695c97af..ae17ab4dfbc 100644
--- a/kolibri/core/assets/src/views/Navbar/index.vue
+++ b/kolibri/core/assets/src/views/Navbar/index.vue
@@ -17,7 +17,7 @@
 
 <script>
 
-  import useKResponsiveWindow from 'kolibri.coreVue.composables.useKResponsiveWindow';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   /**
    * Used for navigation between sub-pages of a top-level Kolibri section
    */
diff --git a/kolibri/core/assets/src/views/SideNav.vue b/kolibri/core/assets/src/views/SideNav.vue
index 17fbb740065..b2124f56b38 100644
--- a/kolibri/core/assets/src/views/SideNav.vue
+++ b/kolibri/core/assets/src/views/SideNav.vue
@@ -240,7 +240,7 @@
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import { UserKinds, NavComponentSections } from 'kolibri.coreVue.vuex.constants';
   import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
-  import responsiveElementMixin from 'kolibri.coreVue.mixins.responsiveElementMixin';
+  import responsiveElementMixin from 'kolibri-design-system/lib/KResponsiveElementMixin';
   import CoreMenu from 'kolibri.coreVue.components.CoreMenu';
   import CoreMenuOption from 'kolibri.coreVue.components.CoreMenuOption';
   import CoreLogo from 'kolibri.coreVue.components.CoreLogo';
diff --git a/kolibri/core/assets/src/views/SlotTruncator.vue b/kolibri/core/assets/src/views/SlotTruncator.vue
index fce2206ac2a..f43055bea3b 100644
--- a/kolibri/core/assets/src/views/SlotTruncator.vue
+++ b/kolibri/core/assets/src/views/SlotTruncator.vue
@@ -26,7 +26,7 @@
 <script>
 
   import debounce from 'lodash/debounce';
-  import responsiveElementMixin from 'kolibri.coreVue.mixins.responsiveElementMixin';
+  import responsiveElementMixin from 'kolibri-design-system/lib/KResponsiveElementMixin';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
 
   export default {
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionEditor.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionEditor.vue
index 378ae423dc6..1b994ffc582 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionEditor.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionEditor.vue
@@ -225,7 +225,7 @@
   import { ref } from 'kolibri.lib.vueCompositionApi';
   import { get } from '@vueuse/core';
   import { enhancedQuizManagementStrings } from 'kolibri-common/strings/enhancedQuizManagementStrings';
-  import useKResponsiveWindow from 'kolibri.coreVue.composables.useKResponsiveWindow';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import Draggable from 'kolibri.coreVue.components.Draggable';
   import DragContainer from 'kolibri.coreVue.components.DragContainer';
   import DragHandle from 'kolibri.coreVue.components.DragHandle';
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/TabsWithOverflow.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/TabsWithOverflow.vue
index 8375fa0dbc8..68feecbaae8 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/TabsWithOverflow.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/TabsWithOverflow.vue
@@ -29,7 +29,7 @@
 
 <script>
 
-  import useKResponsiveWindow from 'kolibri.coreVue.composables.useKResponsiveWindow';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
 
   /**
    * @typedef   {Object}    Tab
diff --git a/kolibri/plugins/device/assets/src/views/DeviceSettingsPage/index.vue b/kolibri/plugins/device/assets/src/views/DeviceSettingsPage/index.vue
index da70f98a33b..29b3dee6e29 100644
--- a/kolibri/plugins/device/assets/src/views/DeviceSettingsPage/index.vue
+++ b/kolibri/plugins/device/assets/src/views/DeviceSettingsPage/index.vue
@@ -360,7 +360,7 @@
   import { availableLanguages, currentLanguage } from 'kolibri.utils.i18n';
   import sortLanguages from 'kolibri.utils.sortLanguages';
   import BottomAppBar from 'kolibri.coreVue.components.BottomAppBar';
-  import useKResponsiveWindow from 'kolibri.coreVue.composables.useKResponsiveWindow';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import { checkCapability } from 'kolibri.utils.appCapabilities';
   import commonDeviceStrings from '../commonDeviceStrings';
   import DeviceAppBarPage from '../DeviceAppBarPage';
diff --git a/kolibri/plugins/epub_viewer/assets/src/views/EpubRendererIndex.vue b/kolibri/plugins/epub_viewer/assets/src/views/EpubRendererIndex.vue
index 1c76ab01d33..9735826d103 100644
--- a/kolibri/plugins/epub_viewer/assets/src/views/EpubRendererIndex.vue
+++ b/kolibri/plugins/epub_viewer/assets/src/views/EpubRendererIndex.vue
@@ -176,7 +176,7 @@
   import Lockr from 'lockr';
   import FocusLock from 'vue-focus-lock';
   import CoreFullscreen from 'kolibri.coreVue.components.CoreFullscreen';
-  import responsiveElementMixin from 'kolibri.coreVue.mixins.responsiveElementMixin';
+  import responsiveElementMixin from 'kolibri-design-system/lib/KResponsiveElementMixin';
   import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import iFrameView from './SandboxIFrameView';
   import LoadingScreen from './LoadingScreen';
diff --git a/kolibri/plugins/facility/assets/src/views/DataPage/SyncInterface/index.vue b/kolibri/plugins/facility/assets/src/views/DataPage/SyncInterface/index.vue
index 85cf7ccced1..0fec994c9ad 100644
--- a/kolibri/plugins/facility/assets/src/views/DataPage/SyncInterface/index.vue
+++ b/kolibri/plugins/facility/assets/src/views/DataPage/SyncInterface/index.vue
@@ -121,7 +121,7 @@
     SyncFacilityModalGroup,
   } from 'kolibri.coreVue.componentSets.sync';
   import commonSyncElements from 'kolibri.coreVue.mixins.commonSyncElements';
-  import useKResponsiveWindow from 'kolibri.coreVue.composables.useKResponsiveWindow';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import { TaskResource, FacilityResource } from 'kolibri.resources';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import CoreMenu from 'kolibri.coreVue.components.CoreMenu';
diff --git a/kolibri/plugins/facility/assets/src/views/FacilityConfigPage/index.vue b/kolibri/plugins/facility/assets/src/views/FacilityConfigPage/index.vue
index ea2501a95ef..873290b51b9 100644
--- a/kolibri/plugins/facility/assets/src/views/FacilityConfigPage/index.vue
+++ b/kolibri/plugins/facility/assets/src/views/FacilityConfigPage/index.vue
@@ -213,7 +213,7 @@
 <script>
 
   import { mapActions, mapGetters, mapState } from 'vuex';
-  import useKResponsiveWindow from 'kolibri.coreVue.composables.useKResponsiveWindow';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import { createTranslator } from 'kolibri.utils.i18n';
 
   import camelCase from 'lodash/camelCase';
diff --git a/kolibri/plugins/facility/assets/src/views/IdentifierTextbox.vue b/kolibri/plugins/facility/assets/src/views/IdentifierTextbox.vue
index 476706fc7d6..b4547109742 100644
--- a/kolibri/plugins/facility/assets/src/views/IdentifierTextbox.vue
+++ b/kolibri/plugins/facility/assets/src/views/IdentifierTextbox.vue
@@ -24,7 +24,7 @@
 
   import CoreInfoIcon from 'kolibri.coreVue.components.CoreInfoIcon';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
-  import useKResponsiveWindow from 'kolibri.coreVue.composables.useKResponsiveWindow';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
 
   export default {
     name: 'IdentifierTextbox',
diff --git a/kolibri/plugins/learn/assets/src/composables/useCardLayoutSpan.js b/kolibri/plugins/learn/assets/src/composables/useCardLayoutSpan.js
index a9cbbd36a70..41d34a3f6e7 100644
--- a/kolibri/plugins/learn/assets/src/composables/useCardLayoutSpan.js
+++ b/kolibri/plugins/learn/assets/src/composables/useCardLayoutSpan.js
@@ -1,5 +1,5 @@
 import { get } from '@vueuse/core';
-import useKResponsiveWindow from 'kolibri.coreVue.composables.useKResponsiveWindow';
+import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
 import { computed } from 'kolibri.lib.vueCompositionApi';
 
 export default function useCardLayoutSpan() {
diff --git a/kolibri/plugins/learn/assets/src/my_downloads/views/DownloadsList/index.vue b/kolibri/plugins/learn/assets/src/my_downloads/views/DownloadsList/index.vue
index 765f8cc03d8..4bbfdb6e4b2 100644
--- a/kolibri/plugins/learn/assets/src/my_downloads/views/DownloadsList/index.vue
+++ b/kolibri/plugins/learn/assets/src/my_downloads/views/DownloadsList/index.vue
@@ -143,7 +143,7 @@
   import { computed, getCurrentInstance } from 'kolibri.lib.vueCompositionApi';
   import { get } from '@vueuse/core';
   import { createTranslator } from 'kolibri.utils.i18n';
-  import useKResponsiveWindow from 'kolibri.coreVue.composables.useKResponsiveWindow';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import useContentLink from '../../../composables/useContentLink';
   import useDevices from '../../../composables/useDevices';
   import useLearningActivities from '../../../composables/useLearningActivities';
diff --git a/kolibri/plugins/learn/assets/src/views/ChannelCardGroupGrid.vue b/kolibri/plugins/learn/assets/src/views/ChannelCardGroupGrid.vue
index fccab5ab981..d7d5840a3ee 100644
--- a/kolibri/plugins/learn/assets/src/views/ChannelCardGroupGrid.vue
+++ b/kolibri/plugins/learn/assets/src/views/ChannelCardGroupGrid.vue
@@ -25,7 +25,7 @@
 
 <script>
 
-  import useKResponsiveWindow from 'kolibri.coreVue.composables.useKResponsiveWindow';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import useCardLayoutSpan from '../composables/useCardLayoutSpan';
   import useContentLink from '../composables/useContentLink';
   import ChannelCard from './ChannelCard';
diff --git a/kolibri/plugins/learn/assets/src/views/ExploreLibrariesPage/LibraryItem.vue b/kolibri/plugins/learn/assets/src/views/ExploreLibrariesPage/LibraryItem.vue
index d3534a695b4..94e3e90e97f 100644
--- a/kolibri/plugins/learn/assets/src/views/ExploreLibrariesPage/LibraryItem.vue
+++ b/kolibri/plugins/learn/assets/src/views/ExploreLibrariesPage/LibraryItem.vue
@@ -66,7 +66,7 @@
 <script>
 
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
-  import useKResponsiveWindow from 'kolibri.coreVue.composables.useKResponsiveWindow';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import useContentLink from '../../composables/useContentLink';
   import { KolibriStudioId } from '../../constants';
   import ChannelCardGroupGrid from '../ChannelCardGroupGrid';
diff --git a/kolibri/plugins/learn/assets/src/views/LibraryPage/OtherLibraries.vue b/kolibri/plugins/learn/assets/src/views/LibraryPage/OtherLibraries.vue
index 78d6eafe331..138fd875216 100644
--- a/kolibri/plugins/learn/assets/src/views/LibraryPage/OtherLibraries.vue
+++ b/kolibri/plugins/learn/assets/src/views/LibraryPage/OtherLibraries.vue
@@ -135,7 +135,7 @@
 
   import { get } from '@vueuse/core';
   import { computed } from 'kolibri.lib.vueCompositionApi';
-  import useKResponsiveWindow from 'kolibri.coreVue.composables.useKResponsiveWindow';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import coreStrings from 'kolibri.utils.coreStrings';
   import useCardLayoutSpan from '../../composables/useCardLayoutSpan';
   import useContentLink from '../../composables/useContentLink';
diff --git a/kolibri/plugins/learn/assets/src/views/LibraryPage/UnPinnedDevices.vue b/kolibri/plugins/learn/assets/src/views/LibraryPage/UnPinnedDevices.vue
index a237db31b7f..aced3486bd6 100644
--- a/kolibri/plugins/learn/assets/src/views/LibraryPage/UnPinnedDevices.vue
+++ b/kolibri/plugins/learn/assets/src/views/LibraryPage/UnPinnedDevices.vue
@@ -51,7 +51,7 @@
 <script>
 
   import TextTruncatorCss from 'kolibri.coreVue.components.TextTruncatorCss';
-  import useKResponsiveWindow from 'kolibri.coreVue.composables.useKResponsiveWindow';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
 
   export default {
diff --git a/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue b/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue
index 10583f73656..c9e084faf17 100644
--- a/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue
+++ b/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue
@@ -165,7 +165,7 @@
 
   import { onMounted, getCurrentInstance, ref, watch } from 'kolibri.lib.vueCompositionApi';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
-  import useKResponsiveWindow from 'kolibri.coreVue.composables.useKResponsiveWindow';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import useUser from 'kolibri.coreVue.composables.useUser';
   import samePageCheckGenerator from 'kolibri.utils.samePageCheckGenerator';
   import { ContentNodeResource } from 'kolibri.resources';
diff --git a/kolibri/plugins/learn/assets/src/views/SearchBox.vue b/kolibri/plugins/learn/assets/src/views/SearchBox.vue
index a17b8f6a9bb..9cd229c0346 100644
--- a/kolibri/plugins/learn/assets/src/views/SearchBox.vue
+++ b/kolibri/plugins/learn/assets/src/views/SearchBox.vue
@@ -59,7 +59,7 @@
 <script>
 
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
-  import responsiveElementMixin from 'kolibri.coreVue.mixins.responsiveElementMixin';
+  import responsiveElementMixin from 'kolibri-design-system/lib/KResponsiveElementMixin';
 
   export default {
     name: 'SearchBox',
diff --git a/kolibri/plugins/learn/assets/src/views/SearchFiltersPanel/index.vue b/kolibri/plugins/learn/assets/src/views/SearchFiltersPanel/index.vue
index 5e2c9dd9bbc..46684d00e55 100644
--- a/kolibri/plugins/learn/assets/src/views/SearchFiltersPanel/index.vue
+++ b/kolibri/plugins/learn/assets/src/views/SearchFiltersPanel/index.vue
@@ -118,7 +118,7 @@
 
   import { NoCategories } from 'kolibri.coreVue.vuex.constants';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
-  import useKResponsiveWindow from 'kolibri.coreVue.composables.useKResponsiveWindow';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import { ref } from 'kolibri.lib.vueCompositionApi';
   import SearchBox from '../SearchBox';
   import SidePanelModal from '../SidePanelModal';
diff --git a/kolibri/plugins/learn/assets/src/views/TopicsPage/TopicsPanelModal.vue b/kolibri/plugins/learn/assets/src/views/TopicsPage/TopicsPanelModal.vue
index bfdc5495c49..d72a5713f9b 100644
--- a/kolibri/plugins/learn/assets/src/views/TopicsPage/TopicsPanelModal.vue
+++ b/kolibri/plugins/learn/assets/src/views/TopicsPage/TopicsPanelModal.vue
@@ -44,7 +44,7 @@
 
 <script>
 
-  import useKResponsiveWindow from 'kolibri.coreVue.composables.useKResponsiveWindow';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import commonLearnStrings from '../commonLearnStrings';
   import SidePanelModal from '../SidePanelModal';
diff --git a/kolibri/plugins/media_player/assets/src/views/MediaPlayerIndex.vue b/kolibri/plugins/media_player/assets/src/views/MediaPlayerIndex.vue
index 47458d7e570..bc830208c5c 100644
--- a/kolibri/plugins/media_player/assets/src/views/MediaPlayerIndex.vue
+++ b/kolibri/plugins/media_player/assets/src/views/MediaPlayerIndex.vue
@@ -88,8 +88,8 @@
   import throttle from 'lodash/throttle';
   import { languageIdToCode } from 'kolibri.utils.i18n';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
-  import responsiveElementMixin from 'kolibri.coreVue.mixins.responsiveElementMixin';
-  import useKResponsiveWindow from 'kolibri.coreVue.composables.useKResponsiveWindow';
+  import responsiveElementMixin from 'kolibri-design-system/lib/KResponsiveElementMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import Settings from '../utils/settings';
   import { ReplayButton, ForwardButton } from './customButtons';
   import MediaPlayerFullscreen from './MediaPlayerFullscreen';
diff --git a/kolibri/plugins/pdf_viewer/assets/src/views/PdfRendererIndex.vue b/kolibri/plugins/pdf_viewer/assets/src/views/PdfRendererIndex.vue
index 6a674764261..d3bd0e3e142 100644
--- a/kolibri/plugins/pdf_viewer/assets/src/views/PdfRendererIndex.vue
+++ b/kolibri/plugins/pdf_viewer/assets/src/views/PdfRendererIndex.vue
@@ -127,7 +127,7 @@
   // polyfill necessary for recycle list
   import 'intersection-observer';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
-  import useKResponsiveWindow from 'kolibri.coreVue.composables.useKResponsiveWindow';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import CoreFullscreen from 'kolibri.coreVue.components.CoreFullscreen';
   import '../utils/domPolyfills';
   import { EventBus } from '../utils/event_utils';
diff --git a/kolibri/plugins/setup_wizard/assets/src/views/OnboardingStepBase.vue b/kolibri/plugins/setup_wizard/assets/src/views/OnboardingStepBase.vue
index 6ceac57f775..ef6a49bfdbe 100644
--- a/kolibri/plugins/setup_wizard/assets/src/views/OnboardingStepBase.vue
+++ b/kolibri/plugins/setup_wizard/assets/src/views/OnboardingStepBase.vue
@@ -144,7 +144,7 @@
   import LanguageSwitcherModal from 'kolibri.coreVue.components.LanguageSwitcherModal';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import AppError from 'kolibri-common/components/AppError';
-  import useKResponsiveWindow from 'kolibri.coreVue.composables.useKResponsiveWindow';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import { availableLanguages, currentLanguage } from 'kolibri.utils.i18n';
   import { FooterMessageTypes } from '../constants';
 
diff --git a/kolibri/plugins/setup_wizard/assets/src/views/SetupWizardIndex.vue b/kolibri/plugins/setup_wizard/assets/src/views/SetupWizardIndex.vue
index a0935d0c458..ea231ac68f3 100644
--- a/kolibri/plugins/setup_wizard/assets/src/views/SetupWizardIndex.vue
+++ b/kolibri/plugins/setup_wizard/assets/src/views/SetupWizardIndex.vue
@@ -28,7 +28,7 @@
   import { interpret } from 'xstate';
   import { mapState } from 'vuex';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
-  import useKResponsiveWindow from 'kolibri.coreVue.composables.useKResponsiveWindow';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import { checkCapability } from 'kolibri.utils.appCapabilities';
   import Lockr from 'lockr';
   import { wizardMachine } from '../machines/wizardMachine';
diff --git a/kolibri/plugins/slideshow_viewer/assets/src/views/SlideshowRendererComponent.vue b/kolibri/plugins/slideshow_viewer/assets/src/views/SlideshowRendererComponent.vue
index 9f533324f7b..275062edfdb 100644
--- a/kolibri/plugins/slideshow_viewer/assets/src/views/SlideshowRendererComponent.vue
+++ b/kolibri/plugins/slideshow_viewer/assets/src/views/SlideshowRendererComponent.vue
@@ -80,7 +80,7 @@
   import objectFitImages from 'object-fit-images';
   import client from 'kolibri.client';
 
-  import responsiveElementMixin from 'kolibri.coreVue.mixins.responsiveElementMixin';
+  import responsiveElementMixin from 'kolibri-design-system/lib/KResponsiveElementMixin';
   import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
 
   import UiIconButton from 'kolibri-design-system/lib/keen/UiIconButton';

From f4ba1d61ea95e5ee66e5d0211c813173bb08ffd3 Mon Sep 17 00:00:00 2001
From: Pranjal Rajput <pranjal.rajput.che21@itbhu.ac.in>
Date: Thu, 18 Jan 2024 15:11:01 +0530
Subject: [PATCH 3/5] Refactored 'useKShow' & 'UiIconButton'

---
 kolibri/core/assets/src/core-app/apiSpec.js               | 8 ++++----
 .../coach/assets/src/views/plan/LessonsRootPage/index.vue | 2 +-
 .../plugins/learn/assets/src/views/QuizRenderer/index.vue | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/kolibri/core/assets/src/core-app/apiSpec.js b/kolibri/core/assets/src/core-app/apiSpec.js
index 5f61e87222b..af423263a76 100644
--- a/kolibri/core/assets/src/core-app/apiSpec.js
+++ b/kolibri/core/assets/src/core-app/apiSpec.js
@@ -18,8 +18,8 @@ import vuex from 'vuex';
 // 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 useKShow from 'kolibri-design-system/lib/composables/useKShow';
-import UiIconButton from 'kolibri-design-system/lib/keen/UiIconButton'; // temp hack
+// 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';
 import logging from '../logging';
 import * as apiResource from '../api-resource';
@@ -188,7 +188,7 @@ export default {
       MultiPaneLayout,
       CoreFullscreen,
       CoreLogo,
-      UiIconButton,
+      // UiIconButton,
       UiToolbar,
       PrivacyInfoModal,
       UserTypeDisplay,
@@ -226,7 +226,7 @@ export default {
       translatedUserKinds,
     },
     composables: {
-      useKShow,
+      // useKShow,
       useMinimumKolibriVersion,
       useUser,
       useUserSyncStatus,
diff --git a/kolibri/plugins/coach/assets/src/views/plan/LessonsRootPage/index.vue b/kolibri/plugins/coach/assets/src/views/plan/LessonsRootPage/index.vue
index 72e80b42cfd..a4172e4af0d 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/LessonsRootPage/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/LessonsRootPage/index.vue
@@ -173,7 +173,7 @@
   import CoreTable from 'kolibri.coreVue.components.CoreTable';
   import CatchErrors from 'kolibri.utils.CatchErrors';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
-  import useKShow from 'kolibri.coreVue.composables.useKShow';
+  import useKShow from 'kolibri-design-system/lib/composables/useKShow';
   import bytesForHumans from 'kolibri.utils.bytesForHumans';
   import CoachAppBarPage from '../../CoachAppBarPage';
   import { LessonsPageNames } from '../../../constants/lessonsConstants';
diff --git a/kolibri/plugins/learn/assets/src/views/QuizRenderer/index.vue b/kolibri/plugins/learn/assets/src/views/QuizRenderer/index.vue
index 08a016a960c..671f746787f 100644
--- a/kolibri/plugins/learn/assets/src/views/QuizRenderer/index.vue
+++ b/kolibri/plugins/learn/assets/src/views/QuizRenderer/index.vue
@@ -157,7 +157,7 @@
   import debounce from 'lodash/debounce';
   import BottomAppBar from 'kolibri.coreVue.components.BottomAppBar';
   import UiAlert from 'kolibri-design-system/lib/keen/UiAlert';
-  import UiIconButton from 'kolibri.coreVue.components.UiIconButton';
+  import UiIconButton from 'kolibri-design-system/lib/keen/UiIconButton';
   import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import shuffled from 'kolibri.utils.shuffled';

From 4cadf3252317a55ab47de5ed811e11f6c224a327 Mon Sep 17 00:00:00 2001
From: Pranjal Rajput <pranjal.rajput.che21@itbhu.ac.in>
Date: Thu, 18 Jan 2024 15:16:43 +0530
Subject: [PATCH 4/5] Commented out Unused Code

---
 kolibri/core/assets/src/core-app/apiSpec.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/kolibri/core/assets/src/core-app/apiSpec.js b/kolibri/core/assets/src/core-app/apiSpec.js
index af423263a76..4645af9a7a1 100644
--- a/kolibri/core/assets/src/core-app/apiSpec.js
+++ b/kolibri/core/assets/src/core-app/apiSpec.js
@@ -188,6 +188,7 @@ export default {
       MultiPaneLayout,
       CoreFullscreen,
       CoreLogo,
+      // UiAlert,
       // UiIconButton,
       UiToolbar,
       PrivacyInfoModal,
@@ -220,12 +221,15 @@ export default {
     },
     router,
     mixins: {
+      // responsiveWindowMixin,
+      // responsiveElementMixin,
       commonCoreStrings,
       commonTaskStrings,
       commonSyncElements,
       translatedUserKinds,
     },
     composables: {
+      // useKResponsiveWindow,
       // useKShow,
       useMinimumKolibriVersion,
       useUser,

From 613736cd4076048e95140e8f9afcfcb56cf3df3b Mon Sep 17 00:00:00 2001
From: Pranjal Rajput <pranjal.rajput.che21@itbhu.ac.in>
Date: Wed, 24 Jan 2024 21:39:42 +0530
Subject: [PATCH 5/5] Removed Unused Code

---
 kolibri/core/assets/src/core-app/apiSpec.js | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/kolibri/core/assets/src/core-app/apiSpec.js b/kolibri/core/assets/src/core-app/apiSpec.js
index 4645af9a7a1..207e8e3d9e4 100644
--- a/kolibri/core/assets/src/core-app/apiSpec.js
+++ b/kolibri/core/assets/src/core-app/apiSpec.js
@@ -14,12 +14,6 @@
 
 import vue from 'vue';
 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 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';
 import logging from '../logging';
 import * as apiResource from '../api-resource';
@@ -188,8 +182,6 @@ export default {
       MultiPaneLayout,
       CoreFullscreen,
       CoreLogo,
-      // UiAlert,
-      // UiIconButton,
       UiToolbar,
       PrivacyInfoModal,
       UserTypeDisplay,
@@ -221,16 +213,12 @@ export default {
     },
     router,
     mixins: {
-      // responsiveWindowMixin,
-      // responsiveElementMixin,
       commonCoreStrings,
       commonTaskStrings,
       commonSyncElements,
       translatedUserKinds,
     },
     composables: {
-      // useKResponsiveWindow,
-      // useKShow,
       useMinimumKolibriVersion,
       useUser,
       useUserSyncStatus,