From 9ed701065ea7ca5f39aa934e807bbdb3a7f519cc Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Tue, 8 Aug 2023 21:07:15 +0530
Subject: [PATCH] fix: Dark mode color fixes (#7693)

---
 .../scss/widgets/_conversation-view.scss      |  8 +++
 .../search/components/MessageContent.vue      |  2 +-
 .../modules/search/components/ReadMore.vue    | 49 +++++++++++--------
 .../conversation/contact/SocialIcons.vue      | 22 +++------
 4 files changed, 43 insertions(+), 38 deletions(-)

diff --git a/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss b/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss
index 4e4a04f33..f6fae6737 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss
@@ -140,6 +140,14 @@
 
       &.is-private {
         @apply text-black-900 dark:text-white relative border border-solid bg-yellow-100 dark:bg-yellow-700 border-yellow-200 dark:border-yellow-600/25;
+
+        blockquote {
+          @apply border-slate-400 dark:border-slate-400 text-slate-800 dark:text-slate-300;
+
+          p {
+            @apply text-slate-600 dark:text-slate-300;
+          }
+        }
       }
 
       &.is-image {
diff --git a/app/javascript/dashboard/modules/search/components/MessageContent.vue b/app/javascript/dashboard/modules/search/components/MessageContent.vue
index bd09c2a37..74d85ec87 100644
--- a/app/javascript/dashboard/modules/search/components/MessageContent.vue
+++ b/app/javascript/dashboard/modules/search/components/MessageContent.vue
@@ -1,7 +1,7 @@
 <template>
   <blockquote
     ref="messageContainer"
-    class="message border-l-2 border-slate-100 dark:border-slate-800"
+    class="message border-l-2 border-slate-100 dark:border-slate-700"
   >
     <p class="header">
       <strong class="text-slate-700 dark:text-slate-100">
diff --git a/app/javascript/dashboard/modules/search/components/ReadMore.vue b/app/javascript/dashboard/modules/search/components/ReadMore.vue
index db80de4a8..992a8f2c8 100644
--- a/app/javascript/dashboard/modules/search/components/ReadMore.vue
+++ b/app/javascript/dashboard/modules/search/components/ReadMore.vue
@@ -1,6 +1,11 @@
 <template>
   <div class="read-more">
-    <div ref="content" :class="{ 'shrink-container': shrink }">
+    <div
+      ref="content"
+      :class="{
+        'shrink-container after:shrink-gradient-light dark:after:shrink-gradient-dark': shrink,
+      }"
+    >
       <slot />
       <woot-button
         v-if="shrink"
@@ -27,30 +32,32 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
+@tailwind components;
+@layer components {
+  .shrink-gradient-light {
+    background: linear-gradient(
+      to bottom,
+      rgba(255, 255, 255, 0),
+      rgba(255, 255, 255, 1) 100%
+    );
+  }
+
+  .shrink-gradient-dark {
+    background: linear-gradient(
+      to bottom,
+      rgba(0, 0, 0, 0),
+      rgb(21, 23, 24) 100%
+    );
+  }
+}
 .shrink-container {
-  max-height: 100px;
-  overflow: hidden;
-  position: relative;
+  @apply max-h-[100px] overflow-hidden relative;
 }
 .shrink-container::after {
-  content: '';
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 50px;
-  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 100%);
-  z-index: 4;
+  @apply content-[''] absolute bottom-0 left-0 right-0 h-[50px] z-10;
 }
 .read-more-button {
-  max-width: max-content;
-  position: absolute;
-  bottom: var(--space-small);
-  left: 0;
-  right: 0;
-  margin: 0 auto;
-  z-index: 5;
-  box-shadow: var(--box-shadow);
+  @apply max-w-max absolute bottom-2 left-0 right-0 mx-auto mt-0 z-20 shadow-sm;
 }
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/SocialIcons.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/SocialIcons.vue
index 6eadad98f..a4152051d 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/SocialIcons.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/SocialIcons.vue
@@ -1,14 +1,17 @@
 <template>
-  <div v-if="availableProfiles.length" class="social--icons">
+  <div v-if="availableProfiles.length" class="flex items-end mx-0 my-2 gap-3">
     <a
       v-for="profile in availableProfiles"
       :key="profile.key"
       :href="`${profile.link}${socialProfiles[profile.key]}`"
       target="_blank"
       rel="noopener noreferrer nofollow"
-      class="contact--social-icon"
     >
-      <fluent-icon :icon="`brand-${profile.key}`" size="16" />
+      <fluent-icon
+        :icon="`brand-${profile.key}`"
+        size="16"
+        class="text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200"
+      />
     </a>
   </div>
 </template>
@@ -41,16 +44,3 @@ export default {
   },
 };
 </script>
-
-<style scoped lang="scss">
-.social--icons {
-  align-items: flex-end;
-  display: flex;
-  margin: var(--space-small) 0 var(--space-smaller);
-}
-
-.contact--social-icon {
-  padding-right: var(--space-slab);
-  color: var(--color-body);
-}
-</style>