From 09c0b57fab29c14b98778c64735f415a74922afa Mon Sep 17 00:00:00 2001
From: a6ar55 <adars.nambootiri@gmail.com>
Date: Wed, 18 Oct 2023 20:20:42 +0530
Subject: [PATCH 1/3] updated to useKResponsiveWindow

---
 AUTHORS.md                                             |  1 +
 kolibri/core/assets/src/views/AttemptLogList.vue       |  3 +--
 kolibri/core/assets/src/views/BottomAppBar.vue         |  9 +++++++--
 kolibri/core/assets/src/views/ExamReport/index.vue     | 10 ++++++++--
 kolibri/core/assets/src/views/MultiPaneLayout.vue      | 10 ++++++++--
 kolibri/core/assets/src/views/SideNav.vue              |  7 +++++--
 kolibri/core/assets/src/views/TotalPoints.vue          |  2 --
 .../views/language-switcher/LanguageSwitcherList.vue   | 10 ++++++++--
 .../views/language-switcher/LanguageSwitcherModal.vue  | 10 ++++++++--
 .../assets/src/views/sync/FacilityTaskPanelDetails.vue | 10 ++++++++--
 .../assets/src/views/userAccounts/BirthYearSelect.vue  | 10 ++++++++--
 11 files changed, 62 insertions(+), 20 deletions(-)

diff --git a/AUTHORS.md b/AUTHORS.md
index 76d71d1292a..a643f2b8d00 100644
--- a/AUTHORS.md
+++ b/AUTHORS.md
@@ -99,3 +99,4 @@ If you have contributed to Kolibri, feel free to add your name and Github accoun
 | Vikramaditya Singh | Ghat0tkach |
 | Kris Katkus | katkuskris |
 | Garvit Singhal | GarvitSinghal47 |
+| Adars T S | a6ar55 | 
\ No newline at end of file
diff --git a/kolibri/core/assets/src/views/AttemptLogList.vue b/kolibri/core/assets/src/views/AttemptLogList.vue
index 0a9941aa3a0..132cfa60772 100644
--- a/kolibri/core/assets/src/views/AttemptLogList.vue
+++ b/kolibri/core/assets/src/views/AttemptLogList.vue
@@ -76,7 +76,6 @@
 <script>
 
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
   import AttemptLogItem from './AttemptLogItem';
 
   export default {
@@ -84,7 +83,7 @@
     components: {
       AttemptLogItem,
     },
-    mixins: [commonCoreStrings, responsiveWindowMixin],
+    mixins: [commonCoreStrings],
     props: {
       attemptLogs: {
         type: Array,
diff --git a/kolibri/core/assets/src/views/BottomAppBar.vue b/kolibri/core/assets/src/views/BottomAppBar.vue
index 46e61464477..dc39696b7bf 100644
--- a/kolibri/core/assets/src/views/BottomAppBar.vue
+++ b/kolibri/core/assets/src/views/BottomAppBar.vue
@@ -15,11 +15,16 @@
 
 <script>
 
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
 
   export default {
     name: 'BottomAppBar',
-    mixins: [responsiveWindowMixin],
+    setup(){
+      const{ windowIsSmall } = useKResponsiveWindow();
+      return{
+        windowIsSmall
+      };
+    }
   };
 
 </script>
diff --git a/kolibri/core/assets/src/views/ExamReport/index.vue b/kolibri/core/assets/src/views/ExamReport/index.vue
index 2de5905745d..5df1255e998 100644
--- a/kolibri/core/assets/src/views/ExamReport/index.vue
+++ b/kolibri/core/assets/src/views/ExamReport/index.vue
@@ -162,7 +162,7 @@
   import find from 'lodash/find';
   import MultiPaneLayout from 'kolibri.coreVue.components.MultiPaneLayout';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import { MasteryLogResource } from 'kolibri.resources';
   import { now } from 'kolibri.utils.serverClock';
   import MissingResourceAlert from 'kolibri-common/components/MissingResourceAlert';
@@ -184,7 +184,13 @@
       CurrentTryOverview,
       MissingResourceAlert,
     },
-    mixins: [commonCoreStrings, responsiveWindowMixin],
+    mixins: [commonCoreStrings],
+    setup(){
+      const{ windowIsSmall } = useKResponsiveWindow();
+      return{
+        windowIsSmall
+      };
+    },
     props: {
       // Unique identifier of the item for the report
       // this will be used to filter for previous tries
diff --git a/kolibri/core/assets/src/views/MultiPaneLayout.vue b/kolibri/core/assets/src/views/MultiPaneLayout.vue
index de0c7d7942a..6b9ed7813e2 100644
--- a/kolibri/core/assets/src/views/MultiPaneLayout.vue
+++ b/kolibri/core/assets/src/views/MultiPaneLayout.vue
@@ -58,12 +58,18 @@
 
 <script>
 
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import responsiveElementMixin from 'kolibri.coreVue.mixins.responsiveElementMixin';
 
   export default {
     name: 'MultiPaneLayout',
-    mixins: [responsiveWindowMixin, responsiveElementMixin],
+    mixins: [responsiveElementMixin],
+    setup(){
+      const{ windowHeight } = useKResponsiveWindow();
+      return{
+        windowHeight
+      };
+    },
     computed: {
       styles() {
         return {
diff --git a/kolibri/core/assets/src/views/SideNav.vue b/kolibri/core/assets/src/views/SideNav.vue
index 7d91b9b01cc..17fbb740065 100644
--- a/kolibri/core/assets/src/views/SideNav.vue
+++ b/kolibri/core/assets/src/views/SideNav.vue
@@ -239,7 +239,7 @@
   import { mapGetters, mapState } from 'vuex';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import { UserKinds, NavComponentSections } from 'kolibri.coreVue.vuex.constants';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import responsiveElementMixin from 'kolibri.coreVue.mixins.responsiveElementMixin';
   import CoreMenu from 'kolibri.coreVue.components.CoreMenu';
   import CoreMenuOption from 'kolibri.coreVue.components.CoreMenuOption';
@@ -288,11 +288,14 @@
       LogoutSideNavEntry,
       BottomNavigationBar,
     },
-    mixins: [commonCoreStrings, responsiveWindowMixin, responsiveElementMixin, navComponentsMixin],
+    mixins: [commonCoreStrings, responsiveElementMixin, navComponentsMixin],
     setup() {
+      const { windowIsSmall, windowIsLarge } = useKResponsiveWindow();
       const { isLearnerOnlyImport } = useUser();
       const { status, lastSynced } = useUserSyncStatus();
       return {
+        windowIsLarge,
+        windowIsSmall,
         isLearnerOnlyImport,
         themeConfig,
         userSyncStatus: status,
diff --git a/kolibri/core/assets/src/views/TotalPoints.vue b/kolibri/core/assets/src/views/TotalPoints.vue
index b0ec1c0f4ba..11d2ad0dce6 100644
--- a/kolibri/core/assets/src/views/TotalPoints.vue
+++ b/kolibri/core/assets/src/views/TotalPoints.vue
@@ -21,7 +21,6 @@
 <script>
 
   import { mapGetters, mapActions } from 'vuex';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
   import PointsIcon from 'kolibri.coreVue.components.PointsIcon';
 
   export default {
@@ -29,7 +28,6 @@
     components: {
       PointsIcon,
     },
-    mixins: [responsiveWindowMixin],
     computed: {
       ...mapGetters(['totalPoints', 'currentUserId', 'isUserLoggedIn']),
     },
diff --git a/kolibri/core/assets/src/views/language-switcher/LanguageSwitcherList.vue b/kolibri/core/assets/src/views/language-switcher/LanguageSwitcherList.vue
index 6464ae8e93d..6c4febdcd60 100644
--- a/kolibri/core/assets/src/views/language-switcher/LanguageSwitcherList.vue
+++ b/kolibri/core/assets/src/views/language-switcher/LanguageSwitcherList.vue
@@ -43,7 +43,7 @@
 <script>
 
   import { availableLanguages, currentLanguage } from 'kolibri.utils.i18n';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import { compareLanguages } from 'kolibri.utils.sortLanguages';
   import languageSwitcherMixin from './mixin';
   import LanguageSwitcherModal from './LanguageSwitcherModal';
@@ -55,7 +55,13 @@
     components: {
       LanguageSwitcherModal,
     },
-    mixins: [responsiveWindowMixin, languageSwitcherMixin],
+    mixins: [languageSwitcherMixin],
+    setup(){
+      const{ windowBreakpoint } = useKResponsiveWindow();
+      return{
+        windowBreakpoint
+      };
+    },
     data() {
       return {
         showLanguageModal: false,
diff --git a/kolibri/core/assets/src/views/language-switcher/LanguageSwitcherModal.vue b/kolibri/core/assets/src/views/language-switcher/LanguageSwitcherModal.vue
index 02a44940568..10d75578126 100644
--- a/kolibri/core/assets/src/views/language-switcher/LanguageSwitcherModal.vue
+++ b/kolibri/core/assets/src/views/language-switcher/LanguageSwitcherModal.vue
@@ -44,7 +44,7 @@
 <script>
 
   import { currentLanguage } from 'kolibri.utils.i18n';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import FocusTrap from 'kolibri.coreVue.components.FocusTrap';
   import languageSwitcherMixin from './mixin';
@@ -52,7 +52,13 @@
   export default {
     name: 'LanguageSwitcherModal',
     components: { FocusTrap },
-    mixins: [commonCoreStrings, languageSwitcherMixin, responsiveWindowMixin],
+    mixins: [commonCoreStrings, languageSwitcherMixin],
+    setup(){
+      const{ windowIsSmall } = useKResponsiveWindow();
+      return{
+        windowIsSmall
+      };
+    },
     data() {
       return {
         selectedLanguage: currentLanguage,
diff --git a/kolibri/core/assets/src/views/sync/FacilityTaskPanelDetails.vue b/kolibri/core/assets/src/views/sync/FacilityTaskPanelDetails.vue
index 8edfc825169..3f4727fb477 100644
--- a/kolibri/core/assets/src/views/sync/FacilityTaskPanelDetails.vue
+++ b/kolibri/core/assets/src/views/sync/FacilityTaskPanelDetails.vue
@@ -105,14 +105,20 @@
 
 <script>
 
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import commonTaskStrings from 'kolibri.coreVue.mixins.commonTaskStrings';
   import { TaskStatuses, TaskTypes } from '../../utils/syncTaskUtils';
 
   export default {
     name: 'FacilityTaskPanelDetails',
-    mixins: [commonCoreStrings, responsiveWindowMixin, commonTaskStrings],
+    mixins: [commonCoreStrings, commonTaskStrings],
+    setup(){
+      const{ windowIsSmall } = useKResponsiveWindow();
+      return{
+        windowIsSmall
+      };
+    },
     props: {
       task: {
         type: Object,
diff --git a/kolibri/core/assets/src/views/userAccounts/BirthYearSelect.vue b/kolibri/core/assets/src/views/userAccounts/BirthYearSelect.vue
index f6db52e9f3e..d2944cc3cc8 100644
--- a/kolibri/core/assets/src/views/userAccounts/BirthYearSelect.vue
+++ b/kolibri/core/assets/src/views/userAccounts/BirthYearSelect.vue
@@ -29,7 +29,7 @@
   import { now } from 'kolibri.utils.serverClock';
   import CoreInfoIcon from 'kolibri.coreVue.components.CoreInfoIcon';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
-  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
   import { DemographicConstants } from 'kolibri.coreVue.vuex.constants';
 
   const { NOT_SPECIFIED } = DemographicConstants;
@@ -43,7 +43,13 @@
     components: {
       CoreInfoIcon,
     },
-    mixins: [commonCoreStrings, responsiveWindowMixin],
+    mixins: [commonCoreStrings],
+    setup(){
+      const{ windowIsSmall }=useKResponsiveWindow();
+      return{
+        windowIsSmall
+      };
+    },
     props: {
       value: {
         type: String,

From 93ea57227196fd8ded2a1ffdfb79fbf680eaa3b4 Mon Sep 17 00:00:00 2001
From: a6ar55 <adars.nambootiri@gmail.com>
Date: Wed, 18 Oct 2023 21:53:23 +0530
Subject: [PATCH 2/3] fixed the typo and spacing errors

---
 AUTHORS.md                                             |  2 +-
 kolibri/core/assets/src/views/BottomAppBar.vue         | 10 +++++-----
 kolibri/core/assets/src/views/ExamReport/index.vue     |  6 +++---
 kolibri/core/assets/src/views/MultiPaneLayout.vue      |  8 ++++----
 .../views/language-switcher/LanguageSwitcherList.vue   |  8 ++++----
 .../views/language-switcher/LanguageSwitcherModal.vue  |  8 ++++----
 .../assets/src/views/sync/FacilityTaskPanelDetails.vue |  8 ++++----
 .../assets/src/views/userAccounts/BirthYearSelect.vue  |  8 ++++----
 8 files changed, 29 insertions(+), 29 deletions(-)

diff --git a/AUTHORS.md b/AUTHORS.md
index a643f2b8d00..597db27a7cf 100644
--- a/AUTHORS.md
+++ b/AUTHORS.md
@@ -99,4 +99,4 @@ If you have contributed to Kolibri, feel free to add your name and Github accoun
 | Vikramaditya Singh | Ghat0tkach |
 | Kris Katkus | katkuskris |
 | Garvit Singhal | GarvitSinghal47 |
-| Adars T S | a6ar55 | 
\ No newline at end of file
+| Adars T S | a6ar55 |
\ No newline at end of file
diff --git a/kolibri/core/assets/src/views/BottomAppBar.vue b/kolibri/core/assets/src/views/BottomAppBar.vue
index dc39696b7bf..f1e72a97074 100644
--- a/kolibri/core/assets/src/views/BottomAppBar.vue
+++ b/kolibri/core/assets/src/views/BottomAppBar.vue
@@ -19,12 +19,12 @@
 
   export default {
     name: 'BottomAppBar',
-    setup(){
-      const{ windowIsSmall } = useKResponsiveWindow();
-      return{
-        windowIsSmall
+    setup() {
+      const { windowIsSmall } = useKResponsiveWindow();
+      return {
+        windowIsSmall,
       };
-    }
+    },
   };
 
 </script>
diff --git a/kolibri/core/assets/src/views/ExamReport/index.vue b/kolibri/core/assets/src/views/ExamReport/index.vue
index 5df1255e998..c8b7deb969e 100644
--- a/kolibri/core/assets/src/views/ExamReport/index.vue
+++ b/kolibri/core/assets/src/views/ExamReport/index.vue
@@ -185,10 +185,10 @@
       MissingResourceAlert,
     },
     mixins: [commonCoreStrings],
-    setup(){
-      const{ windowIsSmall } = useKResponsiveWindow();
+    setup() {
+      const { windowIsSmall } = useKResponsiveWindow();
       return{
-        windowIsSmall
+        windowIsSmall,
       };
     },
     props: {
diff --git a/kolibri/core/assets/src/views/MultiPaneLayout.vue b/kolibri/core/assets/src/views/MultiPaneLayout.vue
index 6b9ed7813e2..1fcdb4083d5 100644
--- a/kolibri/core/assets/src/views/MultiPaneLayout.vue
+++ b/kolibri/core/assets/src/views/MultiPaneLayout.vue
@@ -64,10 +64,10 @@
   export default {
     name: 'MultiPaneLayout',
     mixins: [responsiveElementMixin],
-    setup(){
-      const{ windowHeight } = useKResponsiveWindow();
-      return{
-        windowHeight
+    setup() {
+      const { windowHeight } = useKResponsiveWindow();
+      return {
+        windowHeight,
       };
     },
     computed: {
diff --git a/kolibri/core/assets/src/views/language-switcher/LanguageSwitcherList.vue b/kolibri/core/assets/src/views/language-switcher/LanguageSwitcherList.vue
index 6c4febdcd60..e6c34efd78c 100644
--- a/kolibri/core/assets/src/views/language-switcher/LanguageSwitcherList.vue
+++ b/kolibri/core/assets/src/views/language-switcher/LanguageSwitcherList.vue
@@ -56,10 +56,10 @@
       LanguageSwitcherModal,
     },
     mixins: [languageSwitcherMixin],
-    setup(){
-      const{ windowBreakpoint } = useKResponsiveWindow();
-      return{
-        windowBreakpoint
+    setup() {
+      const { windowBreakpoint } = useKResponsiveWindow();
+      return {
+        windowBreakpoint,
       };
     },
     data() {
diff --git a/kolibri/core/assets/src/views/language-switcher/LanguageSwitcherModal.vue b/kolibri/core/assets/src/views/language-switcher/LanguageSwitcherModal.vue
index 10d75578126..40661cc804b 100644
--- a/kolibri/core/assets/src/views/language-switcher/LanguageSwitcherModal.vue
+++ b/kolibri/core/assets/src/views/language-switcher/LanguageSwitcherModal.vue
@@ -53,10 +53,10 @@
     name: 'LanguageSwitcherModal',
     components: { FocusTrap },
     mixins: [commonCoreStrings, languageSwitcherMixin],
-    setup(){
-      const{ windowIsSmall } = useKResponsiveWindow();
-      return{
-        windowIsSmall
+    setup() {
+      const { windowIsSmall } = useKResponsiveWindow();
+      return {
+        windowIsSmall,
       };
     },
     data() {
diff --git a/kolibri/core/assets/src/views/sync/FacilityTaskPanelDetails.vue b/kolibri/core/assets/src/views/sync/FacilityTaskPanelDetails.vue
index 3f4727fb477..04d0b7f067e 100644
--- a/kolibri/core/assets/src/views/sync/FacilityTaskPanelDetails.vue
+++ b/kolibri/core/assets/src/views/sync/FacilityTaskPanelDetails.vue
@@ -113,10 +113,10 @@
   export default {
     name: 'FacilityTaskPanelDetails',
     mixins: [commonCoreStrings, commonTaskStrings],
-    setup(){
-      const{ windowIsSmall } = useKResponsiveWindow();
-      return{
-        windowIsSmall
+    setup() {
+      const { windowIsSmall } = useKResponsiveWindow();
+      return {
+        windowIsSmall,
       };
     },
     props: {
diff --git a/kolibri/core/assets/src/views/userAccounts/BirthYearSelect.vue b/kolibri/core/assets/src/views/userAccounts/BirthYearSelect.vue
index d2944cc3cc8..4628c053ad6 100644
--- a/kolibri/core/assets/src/views/userAccounts/BirthYearSelect.vue
+++ b/kolibri/core/assets/src/views/userAccounts/BirthYearSelect.vue
@@ -44,10 +44,10 @@
       CoreInfoIcon,
     },
     mixins: [commonCoreStrings],
-    setup(){
-      const{ windowIsSmall }=useKResponsiveWindow();
-      return{
-        windowIsSmall
+    setup() {
+      const { windowIsSmall } = useKResponsiveWindow();
+      return {
+        windowIsSmall,
       };
     },
     props: {

From 146dea720ea85ead210fc55ed887ae19e8a05f26 Mon Sep 17 00:00:00 2001
From: a6ar55 <adars.nambootiri@gmail.com>
Date: Wed, 18 Oct 2023 22:02:28 +0530
Subject: [PATCH 3/3] some more changes with syntax

---
 AUTHORS.md                                         | 2 +-
 kolibri/core/assets/src/views/ExamReport/index.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/AUTHORS.md b/AUTHORS.md
index 597db27a7cf..8da7d6f6762 100644
--- a/AUTHORS.md
+++ b/AUTHORS.md
@@ -99,4 +99,4 @@ If you have contributed to Kolibri, feel free to add your name and Github accoun
 | Vikramaditya Singh | Ghat0tkach |
 | Kris Katkus | katkuskris |
 | Garvit Singhal | GarvitSinghal47 |
-| Adars T S | a6ar55 |
\ No newline at end of file
+| Adars T S | a6ar55 |
diff --git a/kolibri/core/assets/src/views/ExamReport/index.vue b/kolibri/core/assets/src/views/ExamReport/index.vue
index c8b7deb969e..cc29c10b59c 100644
--- a/kolibri/core/assets/src/views/ExamReport/index.vue
+++ b/kolibri/core/assets/src/views/ExamReport/index.vue
@@ -187,7 +187,7 @@
     mixins: [commonCoreStrings],
     setup() {
       const { windowIsSmall } = useKResponsiveWindow();
-      return{
+      return {
         windowIsSmall,
       };
     },