Merge pull request #12630 from Suraj-kumar00/develop

Update dropshadows to the latest Kolibri Design System guidelines
learningequality · Oct 22, 2024 · 3e417b6 · 3e417b6
2 parents 39f41b8 + ecabfde
commit 3e417b6
Show file tree

Hide file tree

Showing 24 changed files with 34 additions and 26 deletions.
diff --git a/kolibri/core/assets/src/views/AppBar.vue b/kolibri/core/assets/src/views/AppBar.vue
@@ -373,7 +373,7 @@
   }
 
   .points-popover {
-    @extend %dropshadow-4dp;
+    @extend %dropshadow-6dp;
 
     position: absolute;
     right: 50px;

diff --git a/kolibri/core/assets/src/views/BottomAppBar.vue b/kolibri/core/assets/src/views/BottomAppBar.vue
@@ -35,7 +35,7 @@
   @import '~kolibri-design-system/lib/styles/definitions';
 
   .bottom {
-    @extend %dropshadow-8dp;
+    @extend %dropshadow-6dp;
 
     position: fixed;
     right: 0;

diff --git a/kolibri/core/assets/src/views/BottomNavigationBar.vue b/kolibri/core/assets/src/views/BottomNavigationBar.vue
@@ -115,7 +115,7 @@
   @import '~kolibri-design-system/lib/styles/definitions';
 
   .bottom-bar {
-    @extend %dropshadow-4dp;
+    @extend %dropshadow-2dp;
 
     position: fixed;
     right: 0;

diff --git a/kolibri/core/assets/src/views/CoreBanner.vue b/kolibri/core/assets/src/views/CoreBanner.vue
@@ -101,7 +101,7 @@
   @import '~kolibri-design-system/lib/styles/definitions';
 
   .banner {
-    @extend %dropshadow-16dp;
+    @extend %dropshadow-6dp;
 
     position: relative;
     width: 100%;

diff --git a/kolibri/core/assets/src/views/CorePage/AppBarPage.vue b/kolibri/core/assets/src/views/CorePage/AppBarPage.vue
@@ -204,13 +204,13 @@
   @import '~kolibri-design-system/lib/styles/definitions';
 
   .app-bar {
-    @extend %dropshadow-8dp;
+    @extend %dropshadow-2dp;
 
     width: 100%;
   }
 
   .android-nav-bottom-bar {
-    @extend %dropshadow-4dp;
+    @extend %dropshadow-1dp;
 
     position: fixed;
     right: 0;

diff --git a/kolibri/core/assets/src/views/SideNav.vue b/kolibri/core/assets/src/views/SideNav.vue
@@ -542,7 +542,7 @@
   }
 
   .side-nav {
-    @extend %dropshadow-16dp;
+    @extend %dropshadow-6dp;
 
     position: fixed;
     top: 0;

diff --git a/kolibri/core/assets/src/views/SkipNavigationLink.vue b/kolibri/core/assets/src/views/SkipNavigationLink.vue
@@ -71,7 +71,7 @@
   }
 
   .skip-nav-link a {
-    @extend %dropshadow-4dp;
+    @extend %dropshadow-2dp;
 
     position: absolute;
     left: -1000px;

diff --git a/kolibri/core/assets/src/views/sortable/DragContainer.vue b/kolibri/core/assets/src/views/sortable/DragContainer.vue
@@ -101,7 +101,7 @@
   @import '~kolibri-design-system/lib/styles/definitions';
 
   /deep/ .draggable-mirror {
-    @extend %dropshadow-8dp;
+    @extend %dropshadow-6dp;
 
     z-index: 8;
     cursor: grabbing;

diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
@@ -962,7 +962,7 @@
     border-radius: 2px;
 
     .ease:hover {
-      @extend %dropshadow-8dp;
+      @extend %dropshadow-6dp;
       @extend %md-decelerate-func;
 
       transition: all $core-time;

diff --git a/...ugins/coach/assets/src/views/plan/LessonResourceSelectionPage/LessonContentCard/index.vue b/...ugins/coach/assets/src/views/plan/LessonResourceSelectionPage/LessonContentCard/index.vue
@@ -132,7 +132,7 @@
 
     &:hover,
     &:focus {
-      @extend %dropshadow-8dp;
+      @extend %dropshadow-6dp;
     }
   }
 

diff --git a/kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/index.vue b/kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/index.vue
@@ -620,7 +620,7 @@
     border-radius: 2px;
 
     .ease:hover {
-      @extend %dropshadow-8dp;
+      @extend %dropshadow-6dp;
       @extend %md-decelerate-func;
 
       transition: all $core-time;

diff --git a/kolibri/plugins/learn/assets/src/views/CardList.vue b/kolibri/plugins/learn/assets/src/views/CardList.vue
@@ -255,7 +255,7 @@
     @extend %dropshadow-1dp;
 
     &:hover {
-      @extend %dropshadow-8dp;
+      @extend %dropshadow-6dp;
     }
   }
 

diff --git a/kolibri/plugins/learn/assets/src/views/ChannelCard.vue b/kolibri/plugins/learn/assets/src/views/ChannelCard.vue
@@ -201,7 +201,7 @@
     transition: box-shadow $core-time ease;
 
     &:hover {
-      @extend %dropshadow-8dp;
+      @extend %dropshadow-6dp;
     }
 
     &:focus {

diff --git a/kolibri/plugins/learn/assets/src/views/CompletionModal/index.vue b/kolibri/plugins/learn/assets/src/views/CompletionModal/index.vue
@@ -544,7 +544,7 @@
   }
 
   .modal {
-    @extend %dropshadow-16dp;
+    @extend %dropshadow-6dp;
     @extend %momentum-scroll;
 
     position: absolute;

diff --git a/kolibri/plugins/learn/assets/src/views/HybridLearningContentCard/index.vue b/kolibri/plugins/learn/assets/src/views/HybridLearningContentCard/index.vue
@@ -135,7 +135,7 @@
     @extend %dropshadow-1dp;
 
     &:hover {
-      @extend %dropshadow-8dp;
+      @extend %dropshadow-6dp;
     }
   }
 

diff --git a/kolibri/plugins/learn/assets/src/views/HybridLearningLessonCard.vue b/kolibri/plugins/learn/assets/src/views/HybridLearningLessonCard.vue
@@ -82,7 +82,7 @@
     @extend %dropshadow-1dp;
 
     &:hover {
-      @extend %dropshadow-4dp;
+      @extend %dropshadow-6dp;
     }
   }
 

diff --git a/kolibri/plugins/learn/assets/src/views/LibraryPage/UnPinnedDevices.vue b/kolibri/plugins/learn/assets/src/views/LibraryPage/UnPinnedDevices.vue
@@ -141,7 +141,7 @@
     transition: box-shadow $core-time ease;
 
     &:hover {
-      @extend %dropshadow-8dp;
+      @extend %dropshadow-6dp;
     }
 
     &:focus {

diff --git a/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue b/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue
@@ -604,7 +604,7 @@
     transition: box-shadow $core-time ease;
 
     &:hover {
-      @extend %dropshadow-8dp;
+      @extend %dropshadow-6dp;
     }
 
     &:focus {

diff --git a/kolibri/plugins/learn/assets/src/views/StorageNotification.vue b/kolibri/plugins/learn/assets/src/views/StorageNotification.vue
@@ -260,7 +260,7 @@
   @import '~kolibri-design-system/lib/styles/definitions';
 
   .banner {
-    @extend %dropshadow-16dp;
+    @extend %dropshadow-6dp;
 
     position: relative;
     width: 100%;

diff --git a/kolibri/plugins/learn/assets/src/views/TopicsPage/TopicsPanelModal.vue b/kolibri/plugins/learn/assets/src/views/TopicsPage/TopicsPanelModal.vue
@@ -101,19 +101,22 @@
 
 <style lang="scss" scoped>
 
+  @import '~kolibri-design-system/lib/styles/definitions';
+
   .drawer-panel {
     padding-bottom: 60px;
   }
 
   .side-panel {
+    @extend %dropshadow-2dp;
+
     position: fixed;
     top: 60px;
     left: 0;
     height: 100%;
     padding: 24px 24px 0;
     overflow-y: scroll;
     font-size: 14px;
-    box-shadow: 0 3px 3px 0 #00000040;
   }
 
   /*

diff --git a/kolibri/plugins/learn/assets/src/views/cards/CardLink.vue b/kolibri/plugins/learn/assets/src/views/cards/CardLink.vue
@@ -52,7 +52,7 @@
     transition: box-shadow $core-time ease;
 
     &:hover {
-      @extend %dropshadow-8dp;
+      @extend %dropshadow-6dp;
     }
   }
 

diff --git a/kolibri/plugins/pdf_viewer/assets/src/views/SideBar/index.vue b/kolibri/plugins/pdf_viewer/assets/src/views/SideBar/index.vue
@@ -144,9 +144,11 @@
 
 <style scoped lang="scss">
 
+  @import '~kolibri-design-system/lib/styles/definitions';
+
   .pdf-sidebar {
     overflow-y: auto;
-    box-shadow: inset -1px 2px 8px rgba(0, 0, 0, 0.16);
+    @extend %dropshadow-2dp;
   }
 
   .tab:focus-visible {

diff --git a/kolibri/plugins/user_auth/assets/src/views/AuthBase.vue b/kolibri/plugins/user_auth/assets/src/views/AuthBase.vue
@@ -376,7 +376,7 @@
   }
 
   .box {
-    @extend %dropshadow-16dp;
+    @extend %dropshadow-6dp;
 
     position: relative;
     z-index: 1;
@@ -409,7 +409,7 @@
   }
 
   .footer-cell {
-    @extend %dropshadow-8dp;
+    @extend %dropshadow-6dp;
 
     padding: 16px;
   }

diff --git a/packages/kolibri-common/components/SearchFiltersPanel/index.vue b/packages/kolibri-common/components/SearchFiltersPanel/index.vue
@@ -366,19 +366,22 @@
 
 <style lang="scss" scoped>
 
+  @import '~kolibri-design-system/lib/styles/definitions';
+
   .drawer-panel {
     padding-bottom: 60px;
   }
 
   .side-panel {
+    @extend %dropshadow-2dp;
+
     position: fixed;
     top: 60px;
     left: 0;
     height: 100%;
     padding: 24px 24px 0;
     overflow-y: scroll;
     font-size: 14px;
-    box-shadow: 0 3px 3px 0 #00000040;
   }
 
   /*