From 6b31cb9dbf88a7ff807e657cf0631b3b2dd9b78e Mon Sep 17 00:00:00 2001
From: Allan Otodi Opeto <103313919+AllanOXDi@users.noreply.github.com>
Date: Sun, 25 Feb 2024 21:12:10 +0300
Subject: [PATCH] Rebrand: replaced hexa and rgb colors with theme palettes and
 tokens

---
 .../src/views/DeviceSettingsPage/index.vue      | 17 +++++++++--------
 .../assets/src/views/SearchSideBar.vue          | 15 +++++++--------
 .../views/LearningActivityDuration/index.vue    |  5 +++--
 .../src/views/LibraryPage/UnPinnedDevices.vue   | 11 ++++++++---
 4 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/kolibri/plugins/device/assets/src/views/DeviceSettingsPage/index.vue b/kolibri/plugins/device/assets/src/views/DeviceSettingsPage/index.vue
index c0d87812274..98ca8746214 100644
--- a/kolibri/plugins/device/assets/src/views/DeviceSettingsPage/index.vue
+++ b/kolibri/plugins/device/assets/src/views/DeviceSettingsPage/index.vue
@@ -113,7 +113,7 @@
           <h2>
             <label>{{ $tr('allowDownloadOnMeteredConnection') }}</label>
           </h2>
-          <p class="info-description">
+          <p :class="InfoDescriptionColor">
             {{ $tr('DownloadOnMeteredConnectionDescription') }}
           </p>
           <KRadioButton
@@ -134,7 +134,7 @@
           <h2>
             {{ $tr('primaryStorage') }}
           </h2>
-          <p class="info-description">
+          <p :class="InfoDescriptionColor">
             {{ $tr('primaryStorageDescription') }}
           </p>
           <p>
@@ -163,7 +163,7 @@
           <h2>
             {{ $tr('secondaryStorage') }}
           </h2>
-          <p v-show="multipleReadOnlyPaths" class="info-description">
+          <p v-show="multipleReadOnlyPaths" :class="InfoDescriptionColor">
             {{ $tr('secondaryStorageDescription') }}
           </p>
           <p v-for="path in secondaryStorageLocations" :key="path.index">
@@ -255,7 +255,7 @@
           <h2>
             {{ $tr('enabledPages') }}
           </h2>
-          <p class="info-description">
+          <p :class="InfoDescriptionColor">
             {{ deviceString('newEnabledPluginsState') }}
           </p>
 
@@ -479,6 +479,11 @@
     computed: {
       ...mapGetters(['isAppContext', 'isPageLoading', 'snackbarIsVisible']),
       ...mapGetters('deviceInfo', ['isRemoteContent']),
+      InfoDescriptionColor() {
+        return {
+          color: this.$themePalette.grey.v_700,
+        };
+      },
       pageTitle() {
         return this.deviceString('deviceManagementTitle');
       },
@@ -1197,10 +1202,6 @@
     align-items: center;
   }
 
-  .info-description {
-    color: #616161;
-  }
-
   input[type='range'] {
     width: 12vw;
     height: 2px;
diff --git a/kolibri/plugins/epub_viewer/assets/src/views/SearchSideBar.vue b/kolibri/plugins/epub_viewer/assets/src/views/SearchSideBar.vue
index 5b605d6ff4c..79696299d42 100644
--- a/kolibri/plugins/epub_viewer/assets/src/views/SearchSideBar.vue
+++ b/kolibri/plugins/epub_viewer/assets/src/views/SearchSideBar.vue
@@ -77,7 +77,7 @@
           @click="$emit('navigateToSearchResult', item)"
         >
           <span>{{ item.before }}</span>
-          <span class="mark">{{ item.match }}</span>
+          <span :style="markColor">{{ item.match }}</span>
           <span>{{ item.after }}</span>
         </KButton>
       </li>
@@ -169,6 +169,12 @@
           color: this.$themeTokens.annotation,
         };
       },
+      markColor() {
+        return {
+          color: this.$themePalette.black,
+          backgroundColor: this.$themePalette.yellow.v_a200,
+        };
+      },
     },
     methods: {
       /**
@@ -390,13 +396,6 @@
     padding-bottom: 8px;
   }
 
-  .mark {
-    color: #000000;
-
-    /* Styles same as markjs default styles */
-    background: #ffff00;
-  }
-
   .search-results-list-item-button {
     @include epub-basic-link;
   }
diff --git a/kolibri/plugins/learn/assets/src/views/LearningActivityDuration/index.vue b/kolibri/plugins/learn/assets/src/views/LearningActivityDuration/index.vue
index da274ba662d..cf772003d41 100644
--- a/kolibri/plugins/learn/assets/src/views/LearningActivityDuration/index.vue
+++ b/kolibri/plugins/learn/assets/src/views/LearningActivityDuration/index.vue
@@ -3,7 +3,8 @@
   <span
     v-if="isReference || displayPreciseDuration || displayEstimatedDuration || exerciseDescription"
     :class="[ appearance === 'chip' ? 'chip' : '']"
-    :style="[ appearance === 'chip' ? { color: $themeTokens.textInverted } : {}]"
+    :style="[ appearance === 'chip' ? { color: $themeTokens.textInverted,
+                                        backgroundColor: $themePalette.black } : {}]"
   >
     <template v-if="isReference">
       {{ ReferenceLabel }}
@@ -93,8 +94,8 @@
   .chip {
     padding: 8px;
     font-size: 13px;
-    background-color: rgba(0, 0, 0, 0.7);
     border-radius: 4px;
+    opacity: 0.7;
   }
 
 </style>
diff --git a/kolibri/plugins/learn/assets/src/views/LibraryPage/UnPinnedDevices.vue b/kolibri/plugins/learn/assets/src/views/LibraryPage/UnPinnedDevices.vue
index a237db31b7f..bf22b977435 100644
--- a/kolibri/plugins/learn/assets/src/views/LibraryPage/UnPinnedDevices.vue
+++ b/kolibri/plugins/learn/assets/src/views/LibraryPage/UnPinnedDevices.vue
@@ -26,8 +26,12 @@
               :text="deviceName"
               :maxLines="2"
               class="name"
+              :style="{ color: $themePalette.black }"
             />
-            <p class="channels">
+            <p
+              class="channels"
+              :style="{ color: channelColor }"
+            >
               {{ $tr('channels', { count: channelCount }) }}
             </p>
           </div>
@@ -106,6 +110,9 @@
           return 'laptop';
         }
       },
+      channelColor() {
+        return this.$themePalette.grey.v_700;
+      },
     },
     $trs: {
       channels: {
@@ -172,7 +179,6 @@
     font-size: 19px;
     font-weight: 700;
     line-height: 140%;
-    color: black;
   }
 
   .channels {
@@ -180,7 +186,6 @@
     margin: 5px 0 0;
     font-size: 17px;
     font-weight: 500;
-    color: #616161;
   }
 
   .view-all {