From 5f62597d49953eb70f98510360f5a1f25b9282e0 Mon Sep 17 00:00:00 2001
From: Varun Patil <varunpatil@ucla.edu>
Date: Wed, 26 Oct 2022 21:26:28 -0700
Subject: [PATCH] Use :deep instead of global css

---
 src/components/frame/Folder.vue         | 13 +++++--------
 src/components/modal/EditDate.vue       | 18 ++++++++----------
 src/components/modal/Modal.vue          | 16 +++++++---------
 src/components/top-matter/OnThisDay.vue | 18 ++++++++----------
 4 files changed, 28 insertions(+), 37 deletions(-)

diff --git a/src/components/frame/Folder.vue b/src/components/frame/Folder.vue
index 3c7f832a..0f083d66 100644
--- a/src/components/frame/Folder.vue
+++ b/src/components/frame/Folder.vue
@@ -6,7 +6,7 @@
     }"
     :to="target">
         <div class="big-icon fill-block">
-            <FolderIcon class="memories__big-folder-icon" />
+            <FolderIcon class="icon" />
             <div class="name">{{ data.name }}</div>
         </div>
 
@@ -110,13 +110,6 @@ export default class Folder extends Mixins(GlobalMixin, UserConfig) {
 }
 </script>
 
-<style lang="scss">
-/* This cannot be scoped for some reason */
-.memories__big-folder-icon > .material-design-icon__svg {
-    width: 50%; height: 50%;
-}
-</style>
-
 <style lang="scss" scoped>
 .folder {
     cursor: pointer;
@@ -129,6 +122,10 @@ export default class Folder extends Mixins(GlobalMixin, UserConfig) {
     top: 0; left: 0;
     transition: opacity 0.2s ease-in-out;
 
+    :deep .material-design-icon__svg {
+        width: 50%; height: 50%;
+    }
+
     > .name {
         cursor: pointer;
         width: 100%;
diff --git a/src/components/modal/EditDate.vue b/src/components/modal/EditDate.vue
index c24fd71b..48ea7fc0 100644
--- a/src/components/modal/EditDate.vue
+++ b/src/components/modal/EditDate.vue
@@ -19,7 +19,7 @@
             </span>
             {{ longDateStr }}
 
-            <div class="fields memories__editdate__fields">
+            <div class="fields">
                 <NcTextField :value.sync="year"
                     class="field"
                     @input="newestChange()"
@@ -53,7 +53,7 @@
                 </span>
                 {{ longDateStrLast }}
 
-                <div class="fields memories__editdate__fields">
+                <div class="fields">
                     <NcTextField :value.sync="yearLast"
                         class="field"
                         :label="t('memories', 'Year')" :label-visible="true"
@@ -400,6 +400,12 @@ export default class EditDate extends Mixins(GlobalMixin) {
         width: 4.1em;
         display: inline-block;
     }
+
+    :deep label {
+        font-size: 0.8em;
+        padding: 0 !important;
+        padding-left: 3px !important;
+    }
 }
 
 .oldest {
@@ -417,11 +423,3 @@ export default class EditDate extends Mixins(GlobalMixin) {
     }
 }
 </style>
-
-<style lang="scss">
-.memories__editdate__fields label {
-    font-size: 0.8em;
-    padding: 0 !important;
-    padding-left: 3px !important;
-}
-</style>
diff --git a/src/components/modal/Modal.vue b/src/components/modal/Modal.vue
index 2d147357..2c83083e 100644
--- a/src/components/modal/Modal.vue
+++ b/src/components/modal/Modal.vue
@@ -10,7 +10,7 @@
 
             <slot></slot>
 
-            <div class="memories__modal__buttons">
+            <div class="buttons">
                 <slot name="buttons"></slot>
             </div>
         </div>
@@ -41,16 +41,14 @@ export default class Modal extends Vue {
     .head {
         font-weight: 500;
     }
-}
-</style>
 
-<style lang="scss">
-.memories__modal__buttons {
-    margin-top: 10px;
-    text-align: right;
+    :deep .buttons {
+        margin-top: 10px;
+        text-align: right;
 
-    > button {
-        display: inline-block !important;
+        > button {
+            display: inline-block !important;
+        }
     }
 }
 </style>
\ No newline at end of file
diff --git a/src/components/top-matter/OnThisDay.vue b/src/components/top-matter/OnThisDay.vue
index 54fbb6cc..9d1fc0e2 100644
--- a/src/components/top-matter/OnThisDay.vue
+++ b/src/components/top-matter/OnThisDay.vue
@@ -11,7 +11,7 @@
             </div>
         </div>
 
-        <div class="left-btn dir-btn memories__onthisday__btn" v-if="hasLeft">
+        <div class="left-btn dir-btn" v-if="hasLeft">
             <NcActions>
                 <NcActionButton
                     :aria-label="t('memories', 'Move left')"
@@ -21,7 +21,7 @@
                 </NcActionButton>
             </NcActions>
         </div>
-        <div class="right-btn dir-btn memories__onthisday__btn" v-if="hasRight">
+        <div class="right-btn dir-btn" v-if="hasRight">
             <NcActions>
                 <NcActionButton
                     :aria-label="t('memories', 'Move right')"
@@ -211,6 +211,12 @@ $mobHeight: 150px;
         border-radius: 10px;
     }
 
+    :deep .dir-btn button {
+        transform: scale(0.6);
+        box-shadow: var(--color-main-text) 0 0 3px 0 !important;
+        background-color: var(--color-main-background) !important;
+    }
+
     .left-btn {
         position: absolute;
         top: 50%; left: 0;
@@ -280,12 +286,4 @@ $mobHeight: 150px;
         .overlay { font-size: 1.1em; }
     }
 }
-</style>
-
-<style lang="scss">
-.memories__onthisday__btn button {
-    transform: scale(0.6);
-    box-shadow: var(--color-main-text) 0 0 3px 0 !important;
-    background-color: var(--color-main-background) !important;
-}
 </style>
\ No newline at end of file