From 897511c3477f67fd44c9d312b00e9c1c0d7431eb Mon Sep 17 00:00:00 2001
From: ozer550 <prathameshd419@gmail.com>
Date: Thu, 19 Jun 2025 22:55:23 +0530
Subject: [PATCH 1/4] initial removal of svg tag

---
 .../frontend/shared/utils/icons.js            | 30 ++++++++
 .../shared/views/channel/ChannelThumbnail.vue |  4 +-
 .../frontend/shared/views/files/Thumbnail.vue | 74 ++++++++++---------
 3 files changed, 71 insertions(+), 37 deletions(-)
 create mode 100644 contentcuration/contentcuration/frontend/shared/utils/icons.js

diff --git a/contentcuration/contentcuration/frontend/shared/utils/icons.js b/contentcuration/contentcuration/frontend/shared/utils/icons.js
new file mode 100644
index 0000000000..5fbe2f3ff4
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/utils/icons.js
@@ -0,0 +1,30 @@
+import camelCase from 'lodash/camelCase';
+import { ContentKindsNames } from 'shared/leUtils/ContentKinds';
+
+const EMPTY = '_empty';
+const CONTENT_KIND_ICONS = {
+  [ContentKindsNames.TOPIC]: 'topic',
+  [ContentKindsNames.TOPIC + EMPTY]: 'emptyTopic',
+  [ContentKindsNames.VIDEO]: 'video',
+  [ContentKindsNames.AUDIO]: 'audio',
+  [ContentKindsNames.SLIDESHOW]: 'slideshow',
+  [ContentKindsNames.EXERCISE]: 'exercise',
+  [ContentKindsNames.DOCUMENT]: 'document',
+  [ContentKindsNames.HTML5]: 'html5',
+  [ContentKindsNames.ZIM]: 'html5',
+};
+
+export function getContentKindIcon(kind, isEmpty = false) {
+  const icon = (isEmpty ? [kind + EMPTY] : []).concat([kind]).find(k => k in CONTENT_KIND_ICONS);
+  return icon ? CONTENT_KIND_ICONS[icon] : 'error';
+}
+
+export function getLearningActivityIcon(activity) {
+  if (activity.toLowerCase() === 'explore') {
+    return 'interactShaded';
+  } else if (activity === 'multiple') {
+    return 'allActivities';
+  } else {
+    return `${camelCase(activity) + 'Solid'}`;
+  }
+}
diff --git a/contentcuration/contentcuration/frontend/shared/views/channel/ChannelThumbnail.vue b/contentcuration/contentcuration/frontend/shared/views/channel/ChannelThumbnail.vue
index d8a5a07d84..25d4a7fbb3 100644
--- a/contentcuration/contentcuration/frontend/shared/views/channel/ChannelThumbnail.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/channel/ChannelThumbnail.vue
@@ -16,7 +16,7 @@
           >
             <VCard
               ref="thumbnail"
-              class="thumbnail"
+              class="thumbnail-wrapper"
               data-test="loading"
             >
               <VLayout
@@ -355,7 +355,7 @@
     border: 2px solid var(--v-grey-darken2);
   }
 
-  .thumbnail {
+  .thumbnail-wrapper {
     padding: 28% 0;
     /* stylelint-disable-next-line custom-property-pattern */
     border-color: var(--v-greyBorder-base) !important;
diff --git a/contentcuration/contentcuration/frontend/shared/views/files/Thumbnail.vue b/contentcuration/contentcuration/frontend/shared/views/files/Thumbnail.vue
index 9e33de97ae..7806e2b60c 100644
--- a/contentcuration/contentcuration/frontend/shared/views/files/Thumbnail.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/files/Thumbnail.vue
@@ -6,11 +6,12 @@
       [kind]: compact,
       'icon-only': compact,
       nothumbnail: !showThumbnail && !compact,
+      'with-caption': showCaption,
     }"
     :style="{ 'max-width': maxWidth }"
   >
     <VLayout
-      v-if="kind && !printing && showKind && !compact"
+      v-if="showCaption"
       tag="figcaption"
       row
       align-center
@@ -21,12 +22,10 @@
         shrink
         class="px-1"
       >
-        <VIconWrapper
-          v-if="!compact"
-          dark
-          small
-          :aria-label="kindTitle"
-          v-text="icon"
+        <KIcon
+          :icon="icon"
+          class="icon-thumbnail"
+          :style="{ fill: '#ffffff' }"
         />
       </VFlex>
       <VFlex shrink>
@@ -55,33 +54,26 @@
     </div>
 
     <!-- Bury icon within SVG so it's more responsive, since font-size scaling is more difficult -->
-    <svg
+    <div
       v-else-if="compact"
-      viewBox="0 0 24 24"
-      :aria-label="kindTitle"
-      class="thumbnail-image"
+      class="kicon-wrapper"
     >
       <KIcon
-        icon="infoOutline"
-        :x="+10"
-        :y="y + 20"
+        :icon="icon"
+        class="icon-thumbnail"
         :style="{ fill: '#ffffff' }"
       />
-    </svg>
-    <svg
+    </div>
+    <div
       v-else
-      viewBox="0 0 40 40"
-      :aria-label="kindTitle"
-      class="nothumbnail-image"
-      :class="$isRTL ? 'rtl-image' : 'ltr-image'"
+      class="kicon-wrapper"
     >
       <KIcon
         icon="image"
-        :x="-3"
-        :y="y - 14"
-        :style="{ fill: '#999999' }"
+        class="icon-thumbnail"
+        :style="{ fill: '#999999', fontSize: '3em' }"
       />
-    </svg>
+    </div>
   </figure>
 
 </template>
@@ -89,8 +81,8 @@
 
 <script>
 
+  import { getContentKindIcon } from 'shared/utils/icons';
   import { constantsTranslationMixin, printingMixin } from 'shared/mixins';
-  import { getContentKindIcon } from 'shared/vuetify/icons';
 
   export default {
     name: 'Thumbnail',
@@ -136,22 +128,15 @@
       },
     },
     computed: {
-      y() {
-        switch (this.kind) {
-          case 'exercise':
-            return 28;
-          case 'topic':
-          case 'audio':
-          default:
-            return 26;
-        }
-      },
       objectFit() {
         return this.kind ? 'cover' : 'contain';
       },
       icon() {
         return getContentKindIcon(this.kind, this.isEmpty);
       },
+      showCaption() {
+        return this.kind && !this.printing && this.showKind && !this.compact;
+      },
       thumbnailSrc() {
         return this.encoding && this.encoding.base64 ? this.encoding.base64 : this.src;
       },
@@ -302,4 +287,23 @@
     }
   }
 
+  .kicon-wrapper {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+
+    .icon-thumbnail {
+      top: 0;
+    }
+  }
+
+  .thumbnail.with-caption {
+    .kicon-wrapper {
+      height: calc(100% - #{$caption-height});
+    }
+  }
+
 </style>

From 04a752a2703409d21afc1f7294cc11ad0a443ce2 Mon Sep 17 00:00:00 2001
From: ozer550 <prathameshd419@gmail.com>
Date: Thu, 19 Jun 2025 23:04:02 +0530
Subject: [PATCH 2/4] migrate the print icon to KIcon

---
 .../frontend/shared/views/files/Thumbnail.vue             | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/files/Thumbnail.vue b/contentcuration/contentcuration/frontend/shared/views/files/Thumbnail.vue
index 7806e2b60c..7c70ac7f2b 100644
--- a/contentcuration/contentcuration/frontend/shared/views/files/Thumbnail.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/files/Thumbnail.vue
@@ -45,12 +45,16 @@
       v-else-if="printing"
       class="printable-icon"
     >
-      <VIconWrapper
+      <!-- <VIconWrapper
         :color="$vuetify.theme[kind]"
         capture-as-image
       >
         {{ icon }}
-      </VIconWrapper>
+      </VIconWrapper> -->
+      <KIcon
+        class="icon-thumbnail"
+        :icon="icon"
+      />
     </div>
 
     <!-- Bury icon within SVG so it's more responsive, since font-size scaling is more difficult -->

From 70f156ffbb2f92db0b41d32723645a733804a868 Mon Sep 17 00:00:00 2001
From: ozer550 <prathameshd419@gmail.com>
Date: Mon, 11 Aug 2025 15:37:35 +0530
Subject: [PATCH 3/4] add styling to KIcon

---
 .../contentcuration/frontend/shared/views/files/Thumbnail.vue   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/files/Thumbnail.vue b/contentcuration/contentcuration/frontend/shared/views/files/Thumbnail.vue
index 7c70ac7f2b..8ee53fb6ee 100644
--- a/contentcuration/contentcuration/frontend/shared/views/files/Thumbnail.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/files/Thumbnail.vue
@@ -75,7 +75,7 @@
       <KIcon
         icon="image"
         class="icon-thumbnail"
-        :style="{ fill: '#999999', fontSize: '3em' }"
+        :style="{ fill: '#123345', width: '40%', height: 'auto' }"
       />
     </div>
   </figure>

From 3ddaa4fd80f06c1c1f91dde32d4045290ab6cc09 Mon Sep 17 00:00:00 2001
From: ozer550 <prathameshd419@gmail.com>
Date: Wed, 20 Aug 2025 22:52:01 +0530
Subject: [PATCH 4/4] register PR comments

---
 .../frontend/shared/utils/icons.js            | 14 +--
 .../frontend/shared/views/files/Thumbnail.vue | 85 ++-----------------
 2 files changed, 9 insertions(+), 90 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/utils/icons.js b/contentcuration/contentcuration/frontend/shared/utils/icons.js
index 5fbe2f3ff4..cd07955e3c 100644
--- a/contentcuration/contentcuration/frontend/shared/utils/icons.js
+++ b/contentcuration/contentcuration/frontend/shared/utils/icons.js
@@ -1,4 +1,3 @@
-import camelCase from 'lodash/camelCase';
 import { ContentKindsNames } from 'shared/leUtils/ContentKinds';
 
 const EMPTY = '_empty';
@@ -16,15 +15,8 @@ const CONTENT_KIND_ICONS = {
 
 export function getContentKindIcon(kind, isEmpty = false) {
   const icon = (isEmpty ? [kind + EMPTY] : []).concat([kind]).find(k => k in CONTENT_KIND_ICONS);
-  return icon ? CONTENT_KIND_ICONS[icon] : 'error';
-}
-
-export function getLearningActivityIcon(activity) {
-  if (activity.toLowerCase() === 'explore') {
-    return 'interactShaded';
-  } else if (activity === 'multiple') {
-    return 'allActivities';
-  } else {
-    return `${camelCase(activity) + 'Solid'}`;
+  if (!icon) {
+    throw new Error(`Icon not found for content kind: ${kind}`);
   }
+  return CONTENT_KIND_ICONS[icon];
 }
diff --git a/contentcuration/contentcuration/frontend/shared/views/files/Thumbnail.vue b/contentcuration/contentcuration/frontend/shared/views/files/Thumbnail.vue
index 8ee53fb6ee..2180d5138f 100644
--- a/contentcuration/contentcuration/frontend/shared/views/files/Thumbnail.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/files/Thumbnail.vue
@@ -25,7 +25,7 @@
         <KIcon
           :icon="icon"
           class="icon-thumbnail"
-          :style="{ fill: '#ffffff' }"
+          :style="{ fill: $themeTokens.textInverted }"
         />
       </VFlex>
       <VFlex shrink>
@@ -45,19 +45,13 @@
       v-else-if="printing"
       class="printable-icon"
     >
-      <!-- <VIconWrapper
-        :color="$vuetify.theme[kind]"
-        capture-as-image
-      >
-        {{ icon }}
-      </VIconWrapper> -->
       <KIcon
         class="icon-thumbnail"
         :icon="icon"
+        capture-as-image
       />
     </div>
 
-    <!-- Bury icon within SVG so it's more responsive, since font-size scaling is more difficult -->
     <div
       v-else-if="compact"
       class="kicon-wrapper"
@@ -65,7 +59,7 @@
       <KIcon
         :icon="icon"
         class="icon-thumbnail"
-        :style="{ fill: '#ffffff' }"
+        :style="{ fill: $themeTokens.textInverted }"
       />
     </div>
     <div
@@ -75,7 +69,7 @@
       <KIcon
         icon="image"
         class="icon-thumbnail"
-        :style="{ fill: '#123345', width: '40%', height: 'auto' }"
+        :style="{ fill: $themePalette.grey.v_400, width: '40%', height: '50px' }"
       />
     </div>
   </figure>
@@ -165,16 +159,8 @@
 <style lang="scss" scoped>
 
   $caption-height: 25px;
-  $svg-scale: 1.25;
   $aspect-ratio: 9 / 16;
-
   $aspect-percentage: $aspect-ratio * 100%;
-  $half-aspect-percentage: $aspect-percentage / 2;
-
-  $svg-width: $aspect-percentage / $svg-scale;
-  $svg-top: $half-aspect-percentage - ($svg-width / 2);
-  $svg-width-quarter: $svg-width / 4;
-  $svg-left-position: 50% - $svg-width-quarter;
 
   .thumbnail {
     position: relative;
@@ -207,15 +193,11 @@
     line-height: 11px;
   }
 
-  .thumbnail-image,
-  .nothumbnail-image {
+  .thumbnail-image {
     position: absolute;
-    display: block;
-  }
-
-  img.thumbnail-image {
     bottom: 0;
     left: 0;
+    display: block;
     width: 100%;
     height: 100%;
     overflow: hidden; // Don't show alt text outside of img boundaries
@@ -225,61 +207,6 @@
     }
   }
 
-  svg.thumbnail-image {
-    top: 0;
-    left: $svg-left-position;
-    width: $svg-width-quarter;
-    margin: 0 auto;
-    overflow: visible;
-
-    .icon-only & {
-      top: 18%;
-      left: 21%;
-      display: block;
-      width: 55%;
-
-      [dir='rtl'] & {
-        left: -10px;
-      }
-    }
-
-    text {
-      font-size: 1.8em;
-      line-height: 1.8em;
-    }
-  }
-
-  svg.nothumbnail-image {
-    top: 0;
-    width: $svg-width;
-    margin: 0 auto;
-    overflow: visible;
-
-    &.ltr-image {
-      left: 36%;
-    }
-
-    &.rtl-image {
-      right: 66%;
-    }
-
-    .caption + & {
-      top: calc(#{$caption-height / 2} + #{$svg-top});
-    }
-
-    .icon-only & {
-      top: 18%;
-      left: 21%;
-      display: block;
-      width: 55%;
-    }
-
-    text {
-      font-size: 1em;
-      line-height: 1em;
-    }
-  }
-
   .printable-icon {
     width: 100%;
     height: 0;