From 7c6f269b141543e1a0b00a743f93029513692fdb Mon Sep 17 00:00:00 2001
From: Rajat Talesra <rajat@forem.com>
Date: Wed, 25 Jan 2023 10:53:59 +0530
Subject: [PATCH] Onboarding dark mode fixees (#18996)

---
 app/assets/stylesheets/config/_colors.css           | 3 +++
 app/assets/stylesheets/preact/onboarding-modal.scss | 5 ++++-
 app/assets/stylesheets/themes/dark.css              | 3 +++
 app/javascript/onboarding/components/FollowTags.jsx | 2 +-
 4 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/config/_colors.css b/app/assets/stylesheets/config/_colors.css
index fc2d0135c..c7fdaad70 100644
--- a/app/assets/stylesheets/config/_colors.css
+++ b/app/assets/stylesheets/config/_colors.css
@@ -166,6 +166,9 @@
 
   /* Code */
   --code-inline-bg: rgb(var(--black), 0.1);
+
+  /* Onboarding suggested people */
+  --content-row-hover-bg: rgb(var(--grey-100));
 }
 
 :root {
diff --git a/app/assets/stylesheets/preact/onboarding-modal.scss b/app/assets/stylesheets/preact/onboarding-modal.scss
index 403e5a527..b2435c9df 100644
--- a/app/assets/stylesheets/preact/onboarding-modal.scss
+++ b/app/assets/stylesheets/preact/onboarding-modal.scss
@@ -335,6 +335,7 @@
   }
 
   .introduction-title {
+    color: var(--base-inverted);
     font-size: var(--fs-2xl);
     font-weight: var(--fw-heavy);
     line-height: var(--lh-tight);
@@ -346,6 +347,7 @@
   }
 
   .introduction-subtitle {
+    color: var(--base-inverted);
     font-size: var(--fs-l);
     font-weight: var(--fw-normal);
     line-height: var(--lh-base);
@@ -458,6 +460,7 @@ $onboarding-user-selected-hover: rgba(71, 85, 235, 0.2);
 
   .user-name,
   .user-summary {
+    color: var(--base);
     margin: 0;
     line-height: var(--lh-tight);
 
@@ -549,7 +552,7 @@ $onboarding-user-selected-hover: rgba(71, 85, 235, 0.2);
 
     &:hover,
     &:focus-within {
-      background-color: #eef0f1 !important;
+      background-color: var(--content-row-hover-bg) !important;
     }
   }
 
diff --git a/app/assets/stylesheets/themes/dark.css b/app/assets/stylesheets/themes/dark.css
index c3fe0710e..60f329285 100644
--- a/app/assets/stylesheets/themes/dark.css
+++ b/app/assets/stylesheets/themes/dark.css
@@ -172,6 +172,9 @@
 
   /* Code */
   --code-inline-bg: rgb(var(--white), 0.1);
+
+  /* Onboarding suggested people */
+  --content-row-hover-bg: rgba(var(--base-20));
 }
 
 :root {
diff --git a/app/javascript/onboarding/components/FollowTags.jsx b/app/javascript/onboarding/components/FollowTags.jsx
index b0c228db0..de2c82af5 100644
--- a/app/javascript/onboarding/components/FollowTags.jsx
+++ b/app/javascript/onboarding/components/FollowTags.jsx
@@ -140,7 +140,7 @@ export class FollowTags extends Component {
                     style={{
                       boxShadow: selected
                         ? `inset 0 0 0 100px ${tag.bg_color_hex}`
-                        : `inset 0 0 0 2px ${tag.bg_color_hex}`,
+                        : `inset 0 0 0 0px ${tag.bg_color_hex}`,
                       color: selected ? tag.text_color_hex : '',
                     }}
                     key={tag.id}