fixes styling

learningequality · Jul 25, 2024 · df0c4ee · df0c4ee
1 parent 1c4e375
commit df0c4ee
Showing 1 changed file with 16 additions and 12 deletions.
diff --git a/kolibri/plugins/learn/assets/src/views/LibraryPage/AccessibleFolderCard.vue b/kolibri/plugins/learn/assets/src/views/LibraryPage/AccessibleFolderCard.vue
@@ -20,12 +20,13 @@
         </template>
 
         <template #belowTitle>
-          <div>
+          <div class="">
             <div
               class="header-bar"
-              :style="headerStyles"
+              :style="headerStyles "
             >
               <div v-if="!contentNode.is_leaf">
+                <span class="inline-color">
                 <KIcon
                   icon="topic"
                   :color="$themeTokens.text"
@@ -34,7 +35,8 @@
                 <p class="folder-header-text">
                   {{ coreString('folder') }}
                 </p>
-              </div>      
+              </span>  
+              </div> 
             </div>
           </div>
         </template>
@@ -50,15 +52,13 @@
   import { validateLinkObject } from 'kolibri.utils.validators';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import useChannels from '../../composables/useChannels';
-  import LearningActivityLabel from '../LearningActivityLabel';
   import commonLearnStrings from '../commonLearnStrings';
   import CardThumbnail from './../HybridLearningContentCard/CardThumbnail.vue';
 
   export default {
     name: 'AccessibleFolderCard',
     components: {
-      CardThumbnail,
-      LearningActivityLabel,
+      CardThumbnail, 
     },
     mixins: [commonLearnStrings, commonCoreStrings],
     setup() {
@@ -84,8 +84,12 @@
         let styles = {};
         if (!this.contentNode.is_leaf) {
           styles = {
-            borderRadius: '8px 8px 0 0',
             color: this.$themeTokens.text,
+            borderRadius: '4px',
+            height: '24px',
+            width: '74px',
+            margin: '0',
+            backgroundColor: this.$themePalette.grey.v_50,
           };
         }
         return styles;
@@ -119,20 +123,20 @@
     justify-content: space-between;
     height: 38px;
     font-size: 12px;
-    padding: 0 8px;
+    
 
   }
 
   .folder-header-bar {
     display: inline-block;
-    margin-right: 8px;
-    font-size: 12px;
+    margin-left: 8px;
+    font-size: 13px;
   }
 
   .folder-header-text {
     display: inline-block;
     padding: 0;
-    margin: 0;
-    font-size: 13px;
+    margin: 4px;
+    font-size: 14px;
   }
 </style>