From 85d8559b4d89a64d7f6140765651af7efad9ec70 Mon Sep 17 00:00:00 2001
From: thesujai <b210031@nitsikkim.ac.in>
Date: Sat, 7 Oct 2023 10:02:43 +0530
Subject: [PATCH 01/26] MyDownloads page done

---
 .../learn/assets/src/my_downloads/views/MyDownloads.vue        | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/my_downloads/views/MyDownloads.vue b/kolibri/plugins/learn/assets/src/my_downloads/views/MyDownloads.vue
index 7309f228022..ccd426aaa09 100644
--- a/kolibri/plugins/learn/assets/src/my_downloads/views/MyDownloads.vue
+++ b/kolibri/plugins/learn/assets/src/my_downloads/views/MyDownloads.vue
@@ -57,7 +57,6 @@
   import AppBarPage from 'kolibri.coreVue.components.AppBarPage';
   import { computed, getCurrentInstance, watch, ref } from 'kolibri.lib.vueCompositionApi';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
   import useDownloadRequests from '../../composables/useDownloadRequests';
   import DownloadsList from './DownloadsList';
   import ActivityFilter from './Filters/ActivityFilter.vue';
@@ -71,7 +70,7 @@
       ActivityFilter,
       SortFilter,
     },
-    mixins: [commonCoreStrings, responsiveWindowMixin],
+    mixins: [commonCoreStrings],
     setup() {
       const {
         downloadRequestMap,

From 474a7c55d258e21e2042e46db432d83d8e6934ec Mon Sep 17 00:00:00 2001
From: thesujai <b210031@nitsikkim.ac.in>
Date: Sat, 7 Oct 2023 10:17:46 +0530
Subject: [PATCH 02/26] ActivityFilter done

---
 .../my_downloads/views/Filters/ActivityFilter.vue | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/my_downloads/views/Filters/ActivityFilter.vue b/kolibri/plugins/learn/assets/src/my_downloads/views/Filters/ActivityFilter.vue
index f89124708af..78b6419c079 100644
--- a/kolibri/plugins/learn/assets/src/my_downloads/views/Filters/ActivityFilter.vue
+++ b/kolibri/plugins/learn/assets/src/my_downloads/views/Filters/ActivityFilter.vue
@@ -10,10 +10,10 @@
     @change="handleActivityTypeChange($event.value)"
   >
     <template #display>
-      <KLabeledIcon
-        :label="selected.label"
-        :icon="selected.icon"
-      />
+        <KLabeledIcon
+          :label="selected.label"
+          :icon="selected.icon"
+        />
     </template>
     <template #option="{ option }">
       <KLabeledIcon
@@ -32,18 +32,19 @@
   import pickBy from 'lodash/pickBy';
   import { LearningActivities } from 'kolibri.coreVue.vuex.constants';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import useLearningActivities from '../../../composables/useLearningActivities';
 
   export default {
     name: 'ActivityFilter',
-    mixins: [commonCoreStrings, responsiveWindowMixin],
+    mixins: [commonCoreStrings],
     setup() {
       const { getLearningActivityLabel, getLearningActivityIcon } = useLearningActivities();
-
+      const { windowIsLarge } = useKResponsiveWindow();
       return {
         getLearningActivityLabel,
         getLearningActivityIcon,
+        windowIsLarge,
       };
     },
     data() {

From abd7adda466325c7b71e1743b64879345ae36572 Mon Sep 17 00:00:00 2001
From: thesujai <b210031@nitsikkim.ac.in>
Date: Sat, 7 Oct 2023 10:19:43 +0530
Subject: [PATCH 03/26] SortFilter done

---
 .../src/my_downloads/views/Filters/SortFilter.vue      | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/my_downloads/views/Filters/SortFilter.vue b/kolibri/plugins/learn/assets/src/my_downloads/views/Filters/SortFilter.vue
index 476d4e19ce5..6c05922166d 100644
--- a/kolibri/plugins/learn/assets/src/my_downloads/views/Filters/SortFilter.vue
+++ b/kolibri/plugins/learn/assets/src/my_downloads/views/Filters/SortFilter.vue
@@ -17,11 +17,17 @@
 
   import pickBy from 'lodash/pickBy';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';;
 
   export default {
     name: 'SortFilter',
-    mixins: [commonCoreStrings, responsiveWindowMixin],
+    mixins: [commonCoreStrings],
+    setup() {
+      const { windowIsLarge } = useKResponsiveWindow();
+      return {
+        windowIsLarge,
+      };
+    },
     data() {
       return {
         sortOptions: [

From e7527f09eccae128226f1a26413429d6375ee4b0 Mon Sep 17 00:00:00 2001
From: thesujai <b210031@nitsikkim.ac.in>
Date: Sat, 7 Oct 2023 10:29:33 +0530
Subject: [PATCH 04/26] View Folder resources

---
 kolibri/plugins/learn/assets/src/views/AlsoInThis.vue | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/views/AlsoInThis.vue b/kolibri/plugins/learn/assets/src/views/AlsoInThis.vue
index eae9802b59c..32571eee3cc 100644
--- a/kolibri/plugins/learn/assets/src/views/AlsoInThis.vue
+++ b/kolibri/plugins/learn/assets/src/views/AlsoInThis.vue
@@ -95,7 +95,7 @@
   import isBoolean from 'lodash/isBoolean';
   import TextTruncatorCss from 'kolibri.coreVue.components.TextTruncatorCss';
   import TimeDuration from 'kolibri.coreVue.components.TimeDuration';
-  import KResponsiveWindowMixin from 'kolibri-design-system/lib/KResponsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import MissingResourceAlert from 'kolibri-common/components/MissingResourceAlert';
   import useContentNodeProgress from '../composables/useContentNodeProgress';
   import useContentLink from '../composables/useContentLink';
@@ -111,11 +111,15 @@
       TimeDuration,
       MissingResourceAlert,
     },
-    mixins: [KResponsiveWindowMixin],
     setup() {
       const { contentNodeProgressMap } = useContentNodeProgress();
       const { genContentLinkKeepCurrentBackLink } = useContentLink();
-      return { contentNodeProgressMap, genContentLinkKeepCurrentBackLink };
+      const { windowIsSmall } = useKResponsiveWindow();
+      return { 
+        contentNodeProgressMap,
+        genContentLinkKeepCurrentBackLink,
+        windowIsSmall,
+      };
     },
     props: {
       /**

From b7abeb9aadfd56ee6cce06317f084b8efba53829 Mon Sep 17 00:00:00 2001
From: thesujai <b210031@nitsikkim.ac.in>
Date: Sat, 7 Oct 2023 14:36:49 +0530
Subject: [PATCH 05/26] BookmarkPage done

---
 .../plugins/learn/assets/src/views/BookmarkPage.vue  | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/views/BookmarkPage.vue b/kolibri/plugins/learn/assets/src/views/BookmarkPage.vue
index 69ebcb6ba2c..5dc65c645ff 100644
--- a/kolibri/plugins/learn/assets/src/views/BookmarkPage.vue
+++ b/kolibri/plugins/learn/assets/src/views/BookmarkPage.vue
@@ -86,7 +86,7 @@
 
   import { mapActions } from 'vuex';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import { ContentNodeResource } from 'kolibri.resources';
   import client from 'kolibri.client';
   import urls from 'kolibri.urls';
@@ -117,12 +117,18 @@
       LearnAppBarPage,
       HybridLearningFooter,
     },
-    mixins: [commonCoreStrings, commonLearnStrings, responsiveWindowMixin],
+    mixins: [commonCoreStrings, commonLearnStrings],
     setup() {
       const { canDownloadExternally } = useCoreLearn();
       const { fetchContentNodeProgress } = useContentNodeProgress();
       const { genContentLinkBackLinkCurrentPage } = useContentLink();
-      return { canDownloadExternally, fetchContentNodeProgress, genContentLinkBackLinkCurrentPage };
+      const { windowIsSmall } = useKResponsiveWindow();
+      return { 
+        canDownloadExternally, 
+        fetchContentNodeProgress, 
+        genContentLinkBackLinkCurrentPage,
+        windowIsSmall,
+      };
     },
     data() {
       return {

From c402e827b64b680872e3f520f973ed4cb4b06140 Mon Sep 17 00:00:00 2001
From: thesujai <b210031@nitsikkim.ac.in>
Date: Sat, 7 Oct 2023 15:23:50 +0530
Subject: [PATCH 06/26] ContentPage done

---
 kolibri/plugins/learn/assets/src/views/ContentPage.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/views/ContentPage.vue b/kolibri/plugins/learn/assets/src/views/ContentPage.vue
index a704322a3fd..3562c94dd13 100644
--- a/kolibri/plugins/learn/assets/src/views/ContentPage.vue
+++ b/kolibri/plugins/learn/assets/src/views/ContentPage.vue
@@ -107,7 +107,7 @@
   import { mapState, mapGetters } from 'vuex';
   import { ref } from 'kolibri.lib.vueCompositionApi';
   import { ContentNodeResource } from 'kolibri.resources';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import router from 'kolibri.coreVue.router';
   import Modalities from 'kolibri-constants/Modalities';
   import { setContentNodeProgress } from '../composables/useContentNodeProgress';
@@ -135,7 +135,7 @@
       QuizRenderer,
       MarkAsCompleteModal,
     },
-    mixins: [commonLearnStrings, responsiveWindowMixin],
+    mixins: [commonLearnStrings],
     setup() {
       const {
         progress,
@@ -158,7 +158,7 @@
         }
         return Promise.resolve();
       };
-
+      const { windowIsSmall } = useKResponsiveWindow();
       return {
         errored,
         progress,
@@ -173,6 +173,7 @@
         startTracking: startTrackingProgress,
         stopTracking: stopTrackingProgress,
         genContentLinkKeepCurrentBackLink,
+        windowIsSmall,
       };
     },
     props: {

From 4d9b097fb4ac0f10a32c6e64c9bed9676040d3db Mon Sep 17 00:00:00 2001
From: thesujai <b210031@nitsikkim.ac.in>
Date: Sat, 7 Oct 2023 15:38:56 +0530
Subject: [PATCH 07/26] LearningActivityBar done

---
 .../learn/assets/src/views/LearningActivityBar.vue     | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/views/LearningActivityBar.vue b/kolibri/plugins/learn/assets/src/views/LearningActivityBar.vue
index fc6ea787d27..b9df50f67e0 100644
--- a/kolibri/plugins/learn/assets/src/views/LearningActivityBar.vue
+++ b/kolibri/plugins/learn/assets/src/views/LearningActivityBar.vue
@@ -163,7 +163,7 @@
 
 <script>
 
-  import KResponsiveWindowMixin from 'kolibri-design-system/lib/KResponsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import CoachContentLabel from 'kolibri.coreVue.components.CoachContentLabel';
   import CoreMenu from 'kolibri.coreVue.components.CoreMenu';
   import { ContentNodeKinds } from 'kolibri.coreVue.vuex.constants';
@@ -194,7 +194,13 @@
       SuggestedTime,
       DeviceConnectionStatus,
     },
-    mixins: [KResponsiveWindowMixin, commonLearnStrings, commonCoreStrings],
+    mixins: [commonLearnStrings, commonCoreStrings],
+    setup() {
+      const { windowBreakpoint } = useKResponsiveWindow();
+      return {
+        windowBreakpoint,
+      };
+    },
     /**
      * Emits the following events:
      * - `navigateBack` on back button click

From 9f9dc36574637def6882a48ec1a6fbe165d614f2 Mon Sep 17 00:00:00 2001
From: thesujai <b210031@nitsikkim.ac.in>
Date: Sat, 7 Oct 2023 15:57:28 +0530
Subject: [PATCH 08/26] Library page done

---
 .../views/LibraryAndChannelBrowserMainContent.vue    | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/views/LibraryAndChannelBrowserMainContent.vue b/kolibri/plugins/learn/assets/src/views/LibraryAndChannelBrowserMainContent.vue
index 18f5e366d56..28ca94405e1 100644
--- a/kolibri/plugins/learn/assets/src/views/LibraryAndChannelBrowserMainContent.vue
+++ b/kolibri/plugins/learn/assets/src/views/LibraryAndChannelBrowserMainContent.vue
@@ -30,7 +30,7 @@
 
 <script>
 
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import useContentLink from '../composables/useContentLink';
   import CardGrid from './cards/CardGrid';
   import ResourceCard from './cards/ResourceCard';
@@ -50,14 +50,18 @@
       ResourceCard,
     },
 
-    mixins: [responsiveWindowMixin],
 
     setup() {
       const {
         genContentLinkBackLinkCurrentPage,
         genContentLinkKeepCurrentBackLink,
       } = useContentLink();
-      return { genContentLinkBackLinkCurrentPage, genContentLinkKeepCurrentBackLink };
+      const { windowIsSmall } = useKResponsiveWindow();
+      return {
+        genContentLinkBackLinkCurrentPage, 
+        genContentLinkKeepCurrentBackLink,
+        windowIsSmall,
+      };
     },
 
     props: {
@@ -85,7 +89,7 @@
     },
     computed: {
       componentType() {
-        if (this.windowIsSmall) {
+        if (!this.windowIsSmall) {
           return 'ResourceCard';
         }
         if (this.currentCardViewStyle === 'card') {

From a9a67c76a496f74041941a753715ac00a9955680 Mon Sep 17 00:00:00 2001
From: thesujai <b210031@nitsikkim.ac.in>
Date: Sat, 7 Oct 2023 16:03:41 +0530
Subject: [PATCH 09/26] search result grid done

---
 .../plugins/learn/assets/src/views/SearchResultsGrid.vue   | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/views/SearchResultsGrid.vue b/kolibri/plugins/learn/assets/src/views/SearchResultsGrid.vue
index 7af1830d247..8274ed556a4 100644
--- a/kolibri/plugins/learn/assets/src/views/SearchResultsGrid.vue
+++ b/kolibri/plugins/learn/assets/src/views/SearchResultsGrid.vue
@@ -70,7 +70,7 @@
 <script>
 
   import { ref } from 'kolibri.lib.vueCompositionApi';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import CopiesModal from './CopiesModal';
   import SearchChips from './SearchChips';
@@ -83,14 +83,15 @@
       LibraryAndChannelBrowserMainContent,
       SearchChips,
     },
-    mixins: [commonCoreStrings, responsiveWindowMixin],
+    mixins: [commonCoreStrings],
     setup() {
       const sidePanelContent = ref(null);
       const toggleInfoPanel = content => (sidePanelContent.value = content);
-
+      const { windowIsSmall } = useKResponsiveWindow();
       return {
         sidePanelContent,
         toggleInfoPanel,
+        windowIsSmall,
       };
     },
     props: {

From 7941fb8e89dadf1e80988cfaf731b570e96b1016 Mon Sep 17 00:00:00 2001
From: thesujai <b210031@nitsikkim.ac.in>
Date: Sat, 7 Oct 2023 16:08:29 +0530
Subject: [PATCH 10/26] Assesment wrapper done

---
 .../learn/assets/src/views/AssessmentWrapper/index.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/views/AssessmentWrapper/index.vue b/kolibri/plugins/learn/assets/src/views/AssessmentWrapper/index.vue
index e356de19327..93010651bf5 100644
--- a/kolibri/plugins/learn/assets/src/views/AssessmentWrapper/index.vue
+++ b/kolibri/plugins/learn/assets/src/views/AssessmentWrapper/index.vue
@@ -144,7 +144,7 @@ oriented data synchronization.
   import { MasteryModelGenerators } from 'kolibri.coreVue.vuex.constants';
   import shuffled from 'kolibri.utils.shuffled';
   import UiAlert from 'kolibri-design-system/lib/keen/UiAlert';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import BottomAppBar from 'kolibri.coreVue.components.BottomAppBar';
   import CoreInfoIcon from 'kolibri.coreVue.components.CoreInfoIcon';
   import { createTranslator, defaultLanguage } from 'kolibri.utils.i18n';
@@ -176,7 +176,13 @@ oriented data synchronization.
       LessonMasteryBar,
       CoreInfoIcon,
     },
-    mixins: [commonCoreStrings, responsiveWindowMixin],
+    mixins: [commonCoreStrings],
+    setup() {
+      const { windowIsSmall } = useKResponsiveWindow();
+      return {
+        windowIsSmall,
+      };
+    },
     props: {
       lang: {
         type: Object,

From 1bd311f5970bb72c2b7f12ce53d9a59a733f29ef Mon Sep 17 00:00:00 2001
From: thesujai <b210031@nitsikkim.ac.in>
Date: Sat, 7 Oct 2023 16:13:24 +0530
Subject: [PATCH 11/26] LessonMasteryBar done

---
 .../src/views/AssessmentWrapper/LessonMasteryBar.vue   | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/views/AssessmentWrapper/LessonMasteryBar.vue b/kolibri/plugins/learn/assets/src/views/AssessmentWrapper/LessonMasteryBar.vue
index e634c53c247..ccb75ec3975 100644
--- a/kolibri/plugins/learn/assets/src/views/AssessmentWrapper/LessonMasteryBar.vue
+++ b/kolibri/plugins/learn/assets/src/views/AssessmentWrapper/LessonMasteryBar.vue
@@ -21,7 +21,7 @@
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import BaseToolbar from 'kolibri.coreVue.components.BaseToolbar';
   import TextTruncatorCss from 'kolibri.coreVue.components.TextTruncatorCss';
-  import KResponsiveWindowMixin from 'kolibri-design-system/lib/KResponsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
 
   export default {
     name: 'LessonMasteryBar',
@@ -29,7 +29,13 @@
       BaseToolbar,
       TextTruncatorCss,
     },
-    mixins: [KResponsiveWindowMixin, commonCoreStrings],
+    mixins: [commonCoreStrings],
+    setup() {
+      const { windowBreakpoint } = useKResponsiveWindow();
+      return {
+        windowBreakpoint,
+      };
+    },
     props: {
       // typically this would be "m" from "m of n" mastery model
       requiredCorrectAnswers: {

From 657a20f145060deec1a05371df218515dabe1dbc Mon Sep 17 00:00:00 2001
From: thesujai <b210031@nitsikkim.ac.in>
Date: Sat, 7 Oct 2023 16:16:21 +0530
Subject: [PATCH 12/26] CardGrid view done

---
 .../plugins/learn/assets/src/views/cards/CardGrid.vue    | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/views/cards/CardGrid.vue b/kolibri/plugins/learn/assets/src/views/cards/CardGrid.vue
index 733da96899e..e393b337327 100644
--- a/kolibri/plugins/learn/assets/src/views/cards/CardGrid.vue
+++ b/kolibri/plugins/learn/assets/src/views/cards/CardGrid.vue
@@ -9,14 +9,19 @@
 
 <script>
 
-  import responsiveWindowMixin from 'kolibri-design-system/lib/KResponsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
 
   const GRID_TYPE_1 = 1;
   const GRID_TYPE_2 = 2;
 
   export default {
     name: 'CardGrid',
-    mixins: [responsiveWindowMixin],
+    setup() {
+      const { windowBreakpoint } = useKResponsiveWindow();
+      return {
+        windowBreakpoint,
+      };
+    },
     props: {
       /**
        * `1` or `2`

From 78df955ad901054702f052efa8f9766ba30b577a Mon Sep 17 00:00:00 2001
From: thesujai <b210031@nitsikkim.ac.in>
Date: Sat, 7 Oct 2023 16:26:39 +0530
Subject: [PATCH 13/26] LessonPlaylistPage done

---
 .../assets/src/views/classes/LessonPlaylistPage.vue   | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/views/classes/LessonPlaylistPage.vue b/kolibri/plugins/learn/assets/src/views/classes/LessonPlaylistPage.vue
index 67f71ad27f6..d5fca979809 100644
--- a/kolibri/plugins/learn/assets/src/views/classes/LessonPlaylistPage.vue
+++ b/kolibri/plugins/learn/assets/src/views/classes/LessonPlaylistPage.vue
@@ -52,7 +52,7 @@
 
   import { mapMutations, mapState } from 'vuex';
   import KBreadcrumbs from 'kolibri-design-system/lib/KBreadcrumbs';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import ProgressIcon from 'kolibri.coreVue.components.ProgressIcon';
   import ContentIcon from 'kolibri.coreVue.components.ContentIcon';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
@@ -79,11 +79,16 @@
       LearnAppBarPage,
       MissingResourceAlert,
     },
-    mixins: [commonCoreStrings, commonLearnStrings, responsiveWindowMixin],
+    mixins: [commonCoreStrings, commonLearnStrings],
     setup() {
       const { genContentLinkBackLinkCurrentPage } = useContentLink();
       const { contentNodeProgressMap } = useContentNodeProgress();
-      return { contentNodeProgressMap, genContentLinkBackLinkCurrentPage };
+      const { windowIsSmall } = useKResponsiveWindow();
+      return { 
+        contentNodeProgressMap, 
+        genContentLinkBackLinkCurrentPage,
+        windowIsSmall,
+      };
     },
     computed: {
       ...mapState('lessonPlaylist', ['contentNodesMap', 'currentLesson']),

From 55f368d9b22a801f3d1e9e1af8964036fd3e600d Mon Sep 17 00:00:00 2001
From: thesujai <b210031@nitsikkim.ac.in>
Date: Sat, 7 Oct 2023 16:26:54 +0530
Subject: [PATCH 14/26] CompletionModalSection done

---
 .../src/views/CompletionModal/CompletionModalSection.vue | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/views/CompletionModal/CompletionModalSection.vue b/kolibri/plugins/learn/assets/src/views/CompletionModal/CompletionModalSection.vue
index 641d4bf5c10..88f0ac4f310 100644
--- a/kolibri/plugins/learn/assets/src/views/CompletionModal/CompletionModalSection.vue
+++ b/kolibri/plugins/learn/assets/src/views/CompletionModal/CompletionModalSection.vue
@@ -80,7 +80,7 @@
 
 <script>
 
-  import KResponsiveWindowMixin from 'kolibri-design-system/lib/KResponsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
 
   /**
    * A responsive section of the completion modal.
@@ -94,7 +94,12 @@
    */
   export default {
     name: 'CompletionModalSection',
-    mixins: [KResponsiveWindowMixin],
+    setup() {
+      const { windowBreakpoint } = useKResponsiveWindow();
+      return {
+        windowBreakpoint,
+      };
+    },
     props: {
       title: {
         type: String,

From 656ee0815cab583a087d27268b5994c9fe2d5457 Mon Sep 17 00:00:00 2001
From: thesujai <b210031@nitsikkim.ac.in>
Date: Sat, 7 Oct 2023 16:33:08 +0530
Subject: [PATCH 15/26] ExamPage done

---
 .../plugins/learn/assets/src/views/ExamPage/index.vue  | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/kolibri/plugins/learn/assets/src/views/ExamPage/index.vue b/kolibri/plugins/learn/assets/src/views/ExamPage/index.vue
index 1c705c009c7..3f9948b57d7 100644
--- a/kolibri/plugins/learn/assets/src/views/ExamPage/index.vue
+++ b/kolibri/plugins/learn/assets/src/views/ExamPage/index.vue
@@ -180,7 +180,7 @@
   import BottomAppBar from 'kolibri.coreVue.components.BottomAppBar';
   import UiAlert from 'kolibri-design-system/lib/keen/UiAlert';
   import UiIconButton from 'kolibri.coreVue.components.UiIconButton';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import SuggestedTime from 'kolibri.coreVue.components.SuggestedTime';
   import TimeDuration from 'kolibri.coreVue.components.TimeDuration';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
@@ -219,6 +219,11 @@
         startTrackingProgress,
         stopTrackingProgress,
       } = useProgressTracking();
+      const { 
+        windowBreakpoint,
+        windowIsLarge,
+        windowIsSmall,
+      } = useKResponsiveWindow();
       return {
         pastattempts,
         time_spent,
@@ -226,6 +231,9 @@
         updateContentSession,
         startTrackingProgress,
         stopTrackingProgress,
+        windowBreakpoint,
+        windowIsLarge,
+        windowIsSmall,
       };
     },
     data() {

From 3503b2d58ce246a718380e75f31191b530ad8b38 Mon Sep 17 00:00:00 2001
From: thesujai <b210031@nitsikkim.ac.in>
Date: Sat, 7 Oct 2023 16:35:58 +0530
Subject: [PATCH 16/26] bug fix

---
 kolibri/plugins/learn/assets/src/views/ExamPage/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/kolibri/plugins/learn/assets/src/views/ExamPage/index.vue b/kolibri/plugins/learn/assets/src/views/ExamPage/index.vue
index 3f9948b57d7..b218430b802 100644
--- a/kolibri/plugins/learn/assets/src/views/ExamPage/index.vue
+++ b/kolibri/plugins/learn/assets/src/views/ExamPage/index.vue
@@ -209,7 +209,7 @@
       ImmersivePage,
       MissingResourceAlert,
     },
-    mixins: [responsiveWindowMixin, commonCoreStrings],
+    mixins: [commonCoreStrings],
     setup() {
       const {
         pastattempts,

From 8a121e69596add8a88610a8f86f024e64607a446 Mon Sep 17 00:00:00 2001
From: thesujai <b210031@nitsikkim.ac.in>
Date: Sat, 7 Oct 2023 16:48:54 +0530
Subject: [PATCH 17/26] QuizRenderer

---
 .../assets/src/views/QuizRenderer/index.vue      | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/views/QuizRenderer/index.vue b/kolibri/plugins/learn/assets/src/views/QuizRenderer/index.vue
index 5e5715693fc..4e789139c58 100644
--- a/kolibri/plugins/learn/assets/src/views/QuizRenderer/index.vue
+++ b/kolibri/plugins/learn/assets/src/views/QuizRenderer/index.vue
@@ -158,7 +158,7 @@
   import BottomAppBar from 'kolibri.coreVue.components.BottomAppBar';
   import UiAlert from 'kolibri-design-system/lib/keen/UiAlert';
   import UiIconButton from 'kolibri.coreVue.components.UiIconButton';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import shuffled from 'kolibri.utils.shuffled';
   import { LearnerClassroomResource } from '../../apiResources';
@@ -174,7 +174,19 @@
       BottomAppBar,
       QuizReport,
     },
-    mixins: [responsiveWindowMixin, commonCoreStrings],
+    mixins: [commonCoreStrings],
+    setup() {
+      const { 
+        windowBreakpoint, 
+        windowIsLarge, 
+        windowIsSmall,
+      } = useKResponsiveWindow();
+      return {
+        windowBreakpoint, 
+        windowIsLarge, 
+        windowIsSmall,
+      };
+    },
     props: {
       content: {
         type: Object,

From 60c4df5abe70b5e83d20bd19f3eb2523419d6d4e Mon Sep 17 00:00:00 2001
From: thesujai <b210031@nitsikkim.ac.in>
Date: Sat, 7 Oct 2023 16:53:14 +0530
Subject: [PATCH 18/26] category search model done

---
 .../CategorySearchModal/CategorySearchOptions.vue      |  3 +--
 .../SearchFiltersPanel/CategorySearchModal/index.vue   | 10 ++++++++--
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/views/SearchFiltersPanel/CategorySearchModal/CategorySearchOptions.vue b/kolibri/plugins/learn/assets/src/views/SearchFiltersPanel/CategorySearchModal/CategorySearchOptions.vue
index 04f5f7ccfbb..77b98673014 100644
--- a/kolibri/plugins/learn/assets/src/views/SearchFiltersPanel/CategorySearchModal/CategorySearchOptions.vue
+++ b/kolibri/plugins/learn/assets/src/views/SearchFiltersPanel/CategorySearchModal/CategorySearchOptions.vue
@@ -60,12 +60,11 @@
 
   import camelCase from 'lodash/camelCase';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
   import { injectSearch } from '../../../composables/useSearch';
 
   export default {
     name: 'CategorySearchOptions',
-    mixins: [commonCoreStrings, responsiveWindowMixin],
+    mixins: [commonCoreStrings],
     setup() {
       const { activeSearchTerms, availableLibraryCategories, searchableLabels } = injectSearch();
       return {
diff --git a/kolibri/plugins/learn/assets/src/views/SearchFiltersPanel/CategorySearchModal/index.vue b/kolibri/plugins/learn/assets/src/views/SearchFiltersPanel/CategorySearchModal/index.vue
index 817a27a0a88..8998dc8f61e 100644
--- a/kolibri/plugins/learn/assets/src/views/SearchFiltersPanel/CategorySearchModal/index.vue
+++ b/kolibri/plugins/learn/assets/src/views/SearchFiltersPanel/CategorySearchModal/index.vue
@@ -34,7 +34,7 @@
 
   import Teleport from 'vue2-teleport';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import CategorySearchOptions from './CategorySearchOptions';
 
   export default {
@@ -43,7 +43,13 @@
       CategorySearchOptions,
       Teleport,
     },
-    mixins: [commonCoreStrings, responsiveWindowMixin],
+    mixins: [commonCoreStrings],
+    setup() {
+      const { windowIsLarge } = useKResponsiveWindow();
+      return {
+        windowIsLarge,
+      };
+    },
     props: {
       selectedCategory: {
         type: String,

From df975f9d872bf3b19de3f049fd65f394ce7340ea Mon Sep 17 00:00:00 2001
From: thesujai <b210031@nitsikkim.ac.in>
Date: Sat, 7 Oct 2023 17:12:58 +0530
Subject: [PATCH 19/26] CardList view done

---
 kolibri/plugins/learn/assets/src/views/CardList.vue    | 6 ++++--
 kolibri/plugins/learn/assets/src/views/ChannelCard.vue | 9 +++++++--
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/views/CardList.vue b/kolibri/plugins/learn/assets/src/views/CardList.vue
index d0f2a5b98b4..7e2f227cd55 100644
--- a/kolibri/plugins/learn/assets/src/views/CardList.vue
+++ b/kolibri/plugins/learn/assets/src/views/CardList.vue
@@ -103,7 +103,7 @@
   import { now } from 'kolibri.utils.serverClock';
   import { ContentLevels, Categories } from 'kolibri.coreVue.vuex.constants';
   import camelCase from 'lodash/camelCase';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import useChannels from '../composables/useChannels';
   import LearningActivityLabel from './LearningActivityLabel';
   import LearningActivityDuration from './LearningActivityDuration';
@@ -118,12 +118,14 @@
       LearningActivityLabel,
       LearningActivityDuration,
     },
-    mixins: [responsiveWindowMixin, commonLearnStrings, commonCoreStrings],
+    mixins: [commonLearnStrings, commonCoreStrings],
     setup() {
       const { getChannelThumbnail, getChannelTitle } = useChannels();
+      const { windowIsLarge } = useKResponsiveWindow();
       return {
         getChannelThumbnail,
         getChannelTitle,
+        windowIsLarge,
       };
     },
     props: {
diff --git a/kolibri/plugins/learn/assets/src/views/ChannelCard.vue b/kolibri/plugins/learn/assets/src/views/ChannelCard.vue
index f13f5408c98..76d59925929 100644
--- a/kolibri/plugins/learn/assets/src/views/ChannelCard.vue
+++ b/kolibri/plugins/learn/assets/src/views/ChannelCard.vue
@@ -82,7 +82,7 @@
 
   import { mapGetters } from 'vuex';
   import { validateLinkObject } from 'kolibri.utils.validators';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import CoachContentLabel from 'kolibri.coreVue.components.CoachContentLabel';
   import TextTruncatorCss from 'kolibri.coreVue.components.TextTruncatorCss';
   import ChannelThumbnail from './ChannelThumbnail';
@@ -94,7 +94,12 @@
       CoachContentLabel,
       TextTruncatorCss,
     },
-    mixins: [responsiveWindowMixin],
+    setup() {
+      const { windowGutter } = useKResponsiveWindow();
+      return {
+        windowGutter,
+      };
+    },
     props: {
       title: {
         type: String,

From 22f59e264cae435f2fc81dfd5a38fa009beb70e4 Mon Sep 17 00:00:00 2001
From: thesujai <b210031@nitsikkim.ac.in>
Date: Sat, 7 Oct 2023 17:13:47 +0530
Subject: [PATCH 20/26] TopicsPage done

---
 .../learn/assets/src/views/TopicsContentPage.vue       |  3 +--
 .../assets/src/views/TopicsPage/ToggleHeaderTabs.vue   | 10 ++++++++--
 .../learn/assets/src/views/TopicsPage/TopicsHeader.vue | 10 ++++++++--
 3 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/views/TopicsContentPage.vue b/kolibri/plugins/learn/assets/src/views/TopicsContentPage.vue
index 849a02a6590..7969505b76e 100644
--- a/kolibri/plugins/learn/assets/src/views/TopicsContentPage.vue
+++ b/kolibri/plugins/learn/assets/src/views/TopicsContentPage.vue
@@ -155,7 +155,6 @@
 
   import { mapGetters, mapState } from 'vuex';
   import get from 'lodash/get';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
   import Modalities from 'kolibri-constants/Modalities';
 
   import AuthMessage from 'kolibri.coreVue.components.AuthMessage';
@@ -215,7 +214,7 @@
       CurrentlyViewedResourceMetadata,
       SkipNavigationLink,
     },
-    mixins: [responsiveWindowMixin, commonCoreStrings, commonLearnStrings],
+    mixins: [commonCoreStrings, commonLearnStrings],
     setup() {
       const { canDownloadExternally } = useCoreLearn();
       const {
diff --git a/kolibri/plugins/learn/assets/src/views/TopicsPage/ToggleHeaderTabs.vue b/kolibri/plugins/learn/assets/src/views/TopicsPage/ToggleHeaderTabs.vue
index 3934cac855a..39b3ebb7f39 100644
--- a/kolibri/plugins/learn/assets/src/views/TopicsPage/ToggleHeaderTabs.vue
+++ b/kolibri/plugins/learn/assets/src/views/TopicsPage/ToggleHeaderTabs.vue
@@ -42,13 +42,19 @@
 
 <script>
 
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import { PageNames } from '../../constants';
 
   export default {
     name: 'ToggleHeaderTabs',
-    mixins: [responsiveWindowMixin, commonCoreStrings],
+    mixins: [commonCoreStrings],
+    setup() {
+      const { windowIsLarge } = useKResponsiveWindow();
+      return {
+        windowIsLarge,
+      };
+    },
     props: {
       topic: {
         type: Object,
diff --git a/kolibri/plugins/learn/assets/src/views/TopicsPage/TopicsHeader.vue b/kolibri/plugins/learn/assets/src/views/TopicsPage/TopicsHeader.vue
index ee1d4ee73ba..0eb642e4a51 100644
--- a/kolibri/plugins/learn/assets/src/views/TopicsPage/TopicsHeader.vue
+++ b/kolibri/plugins/learn/assets/src/views/TopicsPage/TopicsHeader.vue
@@ -75,7 +75,7 @@
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import KBreadcrumbs from 'kolibri-design-system/lib/KBreadcrumbs';
   import TextTruncator from 'kolibri.coreVue.components.TextTruncator';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import ChannelThumbnail from '../ChannelThumbnail';
   import commonLearnStrings from './../commonLearnStrings';
 
@@ -86,7 +86,13 @@
       KBreadcrumbs,
       TextTruncator,
     },
-    mixins: [responsiveWindowMixin, commonCoreStrings, commonLearnStrings],
+    mixins: [commonCoreStrings, commonLearnStrings],
+    setup() {
+      const { windowIsSmall } = useKResponsiveWindow();
+      return {
+        windowIsSmall,
+      };
+    },
     props: {
       title: {
         type: String,

From 83052abe9633441ffdefa8d04548e22034c4bfa5 Mon Sep 17 00:00:00 2001
From: thesujai <b210031@nitsikkim.ac.in>
Date: Sat, 7 Oct 2023 17:14:53 +0530
Subject: [PATCH 21/26] contenet grid done

---
 .../assets/src/views/LibraryPage/ResumableContentGrid.vue  | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/views/LibraryPage/ResumableContentGrid.vue b/kolibri/plugins/learn/assets/src/views/LibraryPage/ResumableContentGrid.vue
index 504025c9228..f0cacce4f2a 100644
--- a/kolibri/plugins/learn/assets/src/views/LibraryPage/ResumableContentGrid.vue
+++ b/kolibri/plugins/learn/assets/src/views/LibraryPage/ResumableContentGrid.vue
@@ -59,7 +59,7 @@
 
   import { ref } from 'kolibri.lib.vueCompositionApi';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import useLearnerResources from '../../composables/useLearnerResources';
   import CopiesModal from '../CopiesModal';
   import LibraryAndChannelBrowserMainContent from '../LibraryAndChannelBrowserMainContent';
@@ -70,7 +70,7 @@
       CopiesModal,
       LibraryAndChannelBrowserMainContent,
     },
-    mixins: [commonCoreStrings, responsiveWindowMixin],
+    mixins: [commonCoreStrings],
     setup() {
       const {
         resumableContentNodes,
@@ -90,7 +90,7 @@
           activityKeys[firstActivity].value.focusFirstEl();
         }
       };
-
+      const { windowIsSmall } = useKResponsiveWindow();
       return {
         activityRefs,
         findFirstEl,
@@ -99,6 +99,7 @@
         resumableContentNodes,
         moreResumableContentNodes,
         fetchMoreResumableContentNodes,
+        windowIsSmall,
       };
     },
     props: {

From 4fd5e3e568f89acb01265549a3919f3c2de93cb0 Mon Sep 17 00:00:00 2001
From: thesujai <b210031@nitsikkim.ac.in>
Date: Sat, 7 Oct 2023 17:15:23 +0530
Subject: [PATCH 22/26] Topics page bug

---
 .../learn/assets/src/views/TopicsPage/index.vue      | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/views/TopicsPage/index.vue b/kolibri/plugins/learn/assets/src/views/TopicsPage/index.vue
index 85fe3aa3865..c034cc5f5cb 100644
--- a/kolibri/plugins/learn/assets/src/views/TopicsPage/index.vue
+++ b/kolibri/plugins/learn/assets/src/views/TopicsPage/index.vue
@@ -247,7 +247,7 @@
   import set from 'lodash/set';
   import KBreadcrumbs from 'kolibri-design-system/lib/KBreadcrumbs';
   import { computed, getCurrentInstance } from 'kolibri.lib.vueCompositionApi';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import { ContentNodeKinds } from 'kolibri.coreVue.vuex.constants';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import { throttle } from 'frame-throttle';
@@ -305,7 +305,7 @@
       ImmersivePage,
       DeviceConnectionStatus,
     },
-    mixins: [responsiveWindowMixin, commonCoreStrings, commonLearnStrings],
+    mixins: [commonCoreStrings, commonLearnStrings],
     setup() {
       const { canAddDownloads, canDownloadExternally } = useCoreLearn();
       const store = getCurrentInstance().proxy.$store;
@@ -323,6 +323,11 @@
         clearSearch,
       } = useSearch(topic);
       const { back, genContentLinkKeepCurrentBackLink } = useContentLink();
+      const {
+        windowBreakpoint,
+        windowIsLarge,
+        windowIsSmall,
+      } =useKResponsiveWindow();
       return {
         canAddDownloads,
         canDownloadExternally,
@@ -338,6 +343,9 @@
         clearSearch,
         back,
         genContentLinkKeepCurrentBackLink,
+        windowBreakpoint,
+        windowIsLarge,
+        windowIsSmall,
       };
     },
     props: {

From 5b4ba6fba4d8a06d73fede578243817189ed583d Mon Sep 17 00:00:00 2001
From: thesujai <b210031@nitsikkim.ac.in>
Date: Sat, 7 Oct 2023 17:16:05 +0530
Subject: [PATCH 23/26] for completion modal

---
 .../learn/assets/src/views/CompletionModal/index.vue | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/views/CompletionModal/index.vue b/kolibri/plugins/learn/assets/src/views/CompletionModal/index.vue
index 086e8555683..a35bfcd69dc 100644
--- a/kolibri/plugins/learn/assets/src/views/CompletionModal/index.vue
+++ b/kolibri/plugins/learn/assets/src/views/CompletionModal/index.vue
@@ -144,7 +144,7 @@
 
 <script>
 
-  import KResponsiveWindowMixin from 'kolibri-design-system/lib/KResponsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import UiAlert from 'kolibri-design-system/lib/keen/UiAlert';
   import { MaxPointsPerContent } from 'kolibri.coreVue.vuex.constants';
   import FocusTrap from 'kolibri.coreVue.components.FocusTrap';
@@ -178,17 +178,25 @@
       ResourceItem,
       UiAlert,
     },
-    mixins: [KResponsiveWindowMixin, commonLearnStrings, commonCoreStrings],
+    mixins: [commonLearnStrings, commonCoreStrings],
     setup() {
       const { canAccessUnassignedContent } = useDeviceSettings();
       const { fetchLesson } = useLearnerResources();
       const { genContentLinkKeepCurrentBackLink } = useContentLink();
       const { baseurl } = useDevices();
+      const { 
+        windowBreakpoint, 
+        windowHeight, 
+        windowWidth 
+      } = useKResponsiveWindow();
       return {
         baseurl,
         canAccessUnassignedContent,
         fetchLesson,
         genContentLinkKeepCurrentBackLink,
+        windowBreakpoint,
+        windowHeight,
+        windowWidth,
       };
     },
     props: {

From 121139bbca99b50320dd03fe49525bae928b4c90 Mon Sep 17 00:00:00 2001
From: thesujai <b210031@nitsikkim.ac.in>
Date: Sat, 7 Oct 2023 17:16:28 +0530
Subject: [PATCH 24/26] SidePanel modal

---
 .../learn/assets/src/views/SidePanelModal/index.vue    | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/views/SidePanelModal/index.vue b/kolibri/plugins/learn/assets/src/views/SidePanelModal/index.vue
index aa982458085..2576954492c 100644
--- a/kolibri/plugins/learn/assets/src/views/SidePanelModal/index.vue
+++ b/kolibri/plugins/learn/assets/src/views/SidePanelModal/index.vue
@@ -64,7 +64,7 @@
 
   import Backdrop from 'kolibri.coreVue.components.Backdrop';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import FocusTrap from 'kolibri.coreVue.components.FocusTrap';
   import commonLearnStrings from '../commonLearnStrings.js';
 
@@ -74,7 +74,13 @@
       Backdrop,
       FocusTrap,
     },
-    mixins: [responsiveWindowMixin, commonCoreStrings, commonLearnStrings],
+    mixins: [commonCoreStrings, commonLearnStrings],
+    setup() {
+      const { windowBreakpoint } = useKResponsiveWindow();
+      return {
+        windowBreakpoint,
+      };
+    },
     props: {
       /* CloseButtonIconType icon from parent component */
       closeButtonIconType: {

From 426e23d2e869726db06247602a33be349299cddf Mon Sep 17 00:00:00 2001
From: thesujai <b210031@nitsikkim.ac.in>
Date: Sat, 7 Oct 2023 17:27:02 +0530
Subject: [PATCH 25/26] regression fixed

---
 .../assets/src/views/LibraryAndChannelBrowserMainContent.vue    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/kolibri/plugins/learn/assets/src/views/LibraryAndChannelBrowserMainContent.vue b/kolibri/plugins/learn/assets/src/views/LibraryAndChannelBrowserMainContent.vue
index 28ca94405e1..32f0be2cbf8 100644
--- a/kolibri/plugins/learn/assets/src/views/LibraryAndChannelBrowserMainContent.vue
+++ b/kolibri/plugins/learn/assets/src/views/LibraryAndChannelBrowserMainContent.vue
@@ -89,7 +89,7 @@
     },
     computed: {
       componentType() {
-        if (!this.windowIsSmall) {
+        if (this.windowIsSmall) {
           return 'ResourceCard';
         }
         if (this.currentCardViewStyle === 'card') {

From 31928ab678157f7976c115633f64e30cd933eae2 Mon Sep 17 00:00:00 2001
From: thesujai <b210031@nitsikkim.ac.in>
Date: Sat, 7 Oct 2023 17:37:37 +0530
Subject: [PATCH 26/26] lint fixes

---
 .../src/my_downloads/views/Filters/ActivityFilter.vue  |  8 ++++----
 .../src/my_downloads/views/Filters/SortFilter.vue      |  2 +-
 kolibri/plugins/learn/assets/src/views/AlsoInThis.vue  |  2 +-
 .../plugins/learn/assets/src/views/BookmarkPage.vue    |  6 +++---
 .../learn/assets/src/views/CompletionModal/index.vue   |  6 +-----
 .../plugins/learn/assets/src/views/ExamPage/index.vue  |  6 +-----
 .../src/views/LibraryAndChannelBrowserMainContent.vue  |  3 +--
 .../learn/assets/src/views/QuizRenderer/index.vue      | 10 +++-------
 .../learn/assets/src/views/TopicsPage/index.vue        |  6 +-----
 .../assets/src/views/classes/LessonPlaylistPage.vue    |  4 ++--
 10 files changed, 18 insertions(+), 35 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/my_downloads/views/Filters/ActivityFilter.vue b/kolibri/plugins/learn/assets/src/my_downloads/views/Filters/ActivityFilter.vue
index 78b6419c079..677d3cbb397 100644
--- a/kolibri/plugins/learn/assets/src/my_downloads/views/Filters/ActivityFilter.vue
+++ b/kolibri/plugins/learn/assets/src/my_downloads/views/Filters/ActivityFilter.vue
@@ -10,10 +10,10 @@
     @change="handleActivityTypeChange($event.value)"
   >
     <template #display>
-        <KLabeledIcon
-          :label="selected.label"
-          :icon="selected.icon"
-        />
+      <KLabeledIcon
+        :label="selected.label"
+        :icon="selected.icon"
+      />
     </template>
     <template #option="{ option }">
       <KLabeledIcon
diff --git a/kolibri/plugins/learn/assets/src/my_downloads/views/Filters/SortFilter.vue b/kolibri/plugins/learn/assets/src/my_downloads/views/Filters/SortFilter.vue
index 6c05922166d..d13257f6c07 100644
--- a/kolibri/plugins/learn/assets/src/my_downloads/views/Filters/SortFilter.vue
+++ b/kolibri/plugins/learn/assets/src/my_downloads/views/Filters/SortFilter.vue
@@ -17,7 +17,7 @@
 
   import pickBy from 'lodash/pickBy';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
-  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';;
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
 
   export default {
     name: 'SortFilter',
diff --git a/kolibri/plugins/learn/assets/src/views/AlsoInThis.vue b/kolibri/plugins/learn/assets/src/views/AlsoInThis.vue
index 32571eee3cc..b51c3091134 100644
--- a/kolibri/plugins/learn/assets/src/views/AlsoInThis.vue
+++ b/kolibri/plugins/learn/assets/src/views/AlsoInThis.vue
@@ -115,7 +115,7 @@
       const { contentNodeProgressMap } = useContentNodeProgress();
       const { genContentLinkKeepCurrentBackLink } = useContentLink();
       const { windowIsSmall } = useKResponsiveWindow();
-      return { 
+      return {
         contentNodeProgressMap,
         genContentLinkKeepCurrentBackLink,
         windowIsSmall,
diff --git a/kolibri/plugins/learn/assets/src/views/BookmarkPage.vue b/kolibri/plugins/learn/assets/src/views/BookmarkPage.vue
index 5dc65c645ff..912853f2c86 100644
--- a/kolibri/plugins/learn/assets/src/views/BookmarkPage.vue
+++ b/kolibri/plugins/learn/assets/src/views/BookmarkPage.vue
@@ -123,9 +123,9 @@
       const { fetchContentNodeProgress } = useContentNodeProgress();
       const { genContentLinkBackLinkCurrentPage } = useContentLink();
       const { windowIsSmall } = useKResponsiveWindow();
-      return { 
-        canDownloadExternally, 
-        fetchContentNodeProgress, 
+      return {
+        canDownloadExternally,
+        fetchContentNodeProgress,
         genContentLinkBackLinkCurrentPage,
         windowIsSmall,
       };
diff --git a/kolibri/plugins/learn/assets/src/views/CompletionModal/index.vue b/kolibri/plugins/learn/assets/src/views/CompletionModal/index.vue
index a35bfcd69dc..742f33fdca1 100644
--- a/kolibri/plugins/learn/assets/src/views/CompletionModal/index.vue
+++ b/kolibri/plugins/learn/assets/src/views/CompletionModal/index.vue
@@ -184,11 +184,7 @@
       const { fetchLesson } = useLearnerResources();
       const { genContentLinkKeepCurrentBackLink } = useContentLink();
       const { baseurl } = useDevices();
-      const { 
-        windowBreakpoint, 
-        windowHeight, 
-        windowWidth 
-      } = useKResponsiveWindow();
+      const { windowBreakpoint, windowHeight, windowWidth } = useKResponsiveWindow();
       return {
         baseurl,
         canAccessUnassignedContent,
diff --git a/kolibri/plugins/learn/assets/src/views/ExamPage/index.vue b/kolibri/plugins/learn/assets/src/views/ExamPage/index.vue
index b218430b802..7ebc3199fa3 100644
--- a/kolibri/plugins/learn/assets/src/views/ExamPage/index.vue
+++ b/kolibri/plugins/learn/assets/src/views/ExamPage/index.vue
@@ -219,11 +219,7 @@
         startTrackingProgress,
         stopTrackingProgress,
       } = useProgressTracking();
-      const { 
-        windowBreakpoint,
-        windowIsLarge,
-        windowIsSmall,
-      } = useKResponsiveWindow();
+      const { windowBreakpoint, windowIsLarge, windowIsSmall } = useKResponsiveWindow();
       return {
         pastattempts,
         time_spent,
diff --git a/kolibri/plugins/learn/assets/src/views/LibraryAndChannelBrowserMainContent.vue b/kolibri/plugins/learn/assets/src/views/LibraryAndChannelBrowserMainContent.vue
index 32f0be2cbf8..8518ac2dba5 100644
--- a/kolibri/plugins/learn/assets/src/views/LibraryAndChannelBrowserMainContent.vue
+++ b/kolibri/plugins/learn/assets/src/views/LibraryAndChannelBrowserMainContent.vue
@@ -50,7 +50,6 @@
       ResourceCard,
     },
 
-
     setup() {
       const {
         genContentLinkBackLinkCurrentPage,
@@ -58,7 +57,7 @@
       } = useContentLink();
       const { windowIsSmall } = useKResponsiveWindow();
       return {
-        genContentLinkBackLinkCurrentPage, 
+        genContentLinkBackLinkCurrentPage,
         genContentLinkKeepCurrentBackLink,
         windowIsSmall,
       };
diff --git a/kolibri/plugins/learn/assets/src/views/QuizRenderer/index.vue b/kolibri/plugins/learn/assets/src/views/QuizRenderer/index.vue
index 4e789139c58..c48395d01d8 100644
--- a/kolibri/plugins/learn/assets/src/views/QuizRenderer/index.vue
+++ b/kolibri/plugins/learn/assets/src/views/QuizRenderer/index.vue
@@ -176,14 +176,10 @@
     },
     mixins: [commonCoreStrings],
     setup() {
-      const { 
-        windowBreakpoint, 
-        windowIsLarge, 
-        windowIsSmall,
-      } = useKResponsiveWindow();
+      const { windowBreakpoint, windowIsLarge, windowIsSmall } = useKResponsiveWindow();
       return {
-        windowBreakpoint, 
-        windowIsLarge, 
+        windowBreakpoint,
+        windowIsLarge,
         windowIsSmall,
       };
     },
diff --git a/kolibri/plugins/learn/assets/src/views/TopicsPage/index.vue b/kolibri/plugins/learn/assets/src/views/TopicsPage/index.vue
index c034cc5f5cb..73b8555f339 100644
--- a/kolibri/plugins/learn/assets/src/views/TopicsPage/index.vue
+++ b/kolibri/plugins/learn/assets/src/views/TopicsPage/index.vue
@@ -323,11 +323,7 @@
         clearSearch,
       } = useSearch(topic);
       const { back, genContentLinkKeepCurrentBackLink } = useContentLink();
-      const {
-        windowBreakpoint,
-        windowIsLarge,
-        windowIsSmall,
-      } =useKResponsiveWindow();
+      const { windowBreakpoint, windowIsLarge, windowIsSmall } = useKResponsiveWindow();
       return {
         canAddDownloads,
         canDownloadExternally,
diff --git a/kolibri/plugins/learn/assets/src/views/classes/LessonPlaylistPage.vue b/kolibri/plugins/learn/assets/src/views/classes/LessonPlaylistPage.vue
index d5fca979809..f89a26e1db6 100644
--- a/kolibri/plugins/learn/assets/src/views/classes/LessonPlaylistPage.vue
+++ b/kolibri/plugins/learn/assets/src/views/classes/LessonPlaylistPage.vue
@@ -84,8 +84,8 @@
       const { genContentLinkBackLinkCurrentPage } = useContentLink();
       const { contentNodeProgressMap } = useContentNodeProgress();
       const { windowIsSmall } = useKResponsiveWindow();
-      return { 
-        contentNodeProgressMap, 
+      return {
+        contentNodeProgressMap,
         genContentLinkBackLinkCurrentPage,
         windowIsSmall,
       };