From 164028ae14295da4417d7affd88a7958565955df Mon Sep 17 00:00:00 2001
From: Manish Kushare <kushare.manish9@gmail.com>
Date: Wed, 4 Jan 2023 14:47:16 +0530
Subject: [PATCH] [ Bug fix ] : dark theme fixes (#5164)

* Close button for filter is not visible in dark mode.

* fixed : Hovering on dark mode selector is showing cursor instead of mouse pointer

* bug fixed

* bug fixes : dark theme

* fix : dark theme issue in search box and add page field in Pages

* bug fixed : serachbox in pages remains in dark theme only

* fixed properties and style tab bg in dark theme for the widget inspector
---
 frontend/src/Editor/Inspector/Inspector.jsx        | 11 ++++++++---
 frontend/src/Editor/LeftSidebar/SidebarItem.jsx    |  2 +-
 .../SidebarPageSelector/PageHandler.jsx            |  4 ++--
 .../LeftSidebar/SidebarPageSelector/index.jsx      |  8 +++++++-
 frontend/src/OrganizationSettingsPage/index.jsx    |  2 +-
 .../src/_components/NotificationCenter/index.jsx   |  6 ++++--
 frontend/src/_components/Profile.jsx               |  2 +-
 frontend/src/_styles/onboarding.scss               | 12 ++++++++++--
 frontend/src/_styles/popover.scss                  |  8 ++++++--
 frontend/src/_styles/theme.scss                    | 14 ++++++++++++--
 frontend/src/_ui/JSONTreeViewer/JSONNode.jsx       |  4 +++-
 frontend/src/_ui/Layout/index.jsx                  |  2 +-
 frontend/src/_ui/LeftSidebar/Header.jsx            |  3 ++-
 frontend/src/_ui/Search/Search.jsx                 |  4 ++--
 14 files changed, 60 insertions(+), 22 deletions(-)

diff --git a/frontend/src/Editor/Inspector/Inspector.jsx b/frontend/src/Editor/Inspector/Inspector.jsx
index cc0547a6ec..46946dd1a9 100644
--- a/frontend/src/Editor/Inspector/Inspector.jsx
+++ b/frontend/src/Editor/Inspector/Inspector.jsx
@@ -349,12 +349,17 @@ export const Inspector = ({
           </div>
         </div>
         <div style={{ padding: '16px 8px', borderRadius: 6 }}>
-          <div className="d-flex p-1" style={{ background: '#ECEEF0' }} role="tablist" aria-orientation="horizontal">
+          <div
+            className="d-flex p-1"
+            style={{ background: darkMode ? '#2F3C4C' : '#ECEEF0' }}
+            role="tablist"
+            aria-orientation="horizontal"
+          >
             <button
               className={cx('btn w-50 inspector-nav-item', {
                 'bg-white': selectedTab === 'properties' && !darkMode,
                 'bg-black': selectedTab === 'properties' && darkMode,
-                'color-white': selectedTab === 'properties' && darkMode,
+                'color-white': darkMode,
                 'opacity-100': selectedTab === 'properties',
               })}
               role="tab"
@@ -369,7 +374,7 @@ export const Inspector = ({
               className={cx('btn w-50 inspector-nav-item', {
                 'bg-white': selectedTab === 'styles',
                 'bg-black': selectedTab === 'styles' && darkMode,
-                'color-white': selectedTab === 'styles' && darkMode,
+                'color-white': darkMode,
                 'opacity-100': selectedTab === 'styles',
               })}
               role="tab"
diff --git a/frontend/src/Editor/LeftSidebar/SidebarItem.jsx b/frontend/src/Editor/LeftSidebar/SidebarItem.jsx
index baa0598726..a34d86e319 100644
--- a/frontend/src/Editor/LeftSidebar/SidebarItem.jsx
+++ b/frontend/src/Editor/LeftSidebar/SidebarItem.jsx
@@ -28,7 +28,7 @@ export const LeftSidebarItem = ({
       data-cy={`left-sidebar-${icon.toLowerCase()}-button`}
     >
       {icon && (
-        <div className="sidebar-svg-icon position-relative">
+        <div className={`sidebar-svg-icon position-relative ${displayIcon === 'settings' && 'img-invert'}`}>
           <Icon.default />
           {commentBadge && <LeftSidebarItem.CommentBadge />}
         </div>
diff --git a/frontend/src/Editor/LeftSidebar/SidebarPageSelector/PageHandler.jsx b/frontend/src/Editor/LeftSidebar/SidebarPageSelector/PageHandler.jsx
index a6a47a7150..47bcf6d14c 100644
--- a/frontend/src/Editor/LeftSidebar/SidebarPageSelector/PageHandler.jsx
+++ b/frontend/src/Editor/LeftSidebar/SidebarPageSelector/PageHandler.jsx
@@ -185,7 +185,7 @@ export const PageHandler = ({
   );
 };
 
-export const AddingPageHandler = ({ addNewPage, setNewPageBeingCreated }) => {
+export const AddingPageHandler = ({ addNewPage, setNewPageBeingCreated, darkMode }) => {
   const handleAddingNewPage = (pageName) => {
     if (pageName.trim().length === 0) {
       toast('Page name should have atleast 1 character', {
@@ -204,7 +204,7 @@ export const AddingPageHandler = ({ addNewPage, setNewPageBeingCreated }) => {
       <div className="col-12">
         <input
           type="text"
-          className="form-control page-name-input"
+          className={`form-control page-name-input ${darkMode && 'bg-transparent'}`}
           autoFocus
           onBlur={(event) => {
             const name = event.target.value;
diff --git a/frontend/src/Editor/LeftSidebar/SidebarPageSelector/index.jsx b/frontend/src/Editor/LeftSidebar/SidebarPageSelector/index.jsx
index 81cb285433..bbf195bf6c 100644
--- a/frontend/src/Editor/LeftSidebar/SidebarPageSelector/index.jsx
+++ b/frontend/src/Editor/LeftSidebar/SidebarPageSelector/index.jsx
@@ -93,7 +93,12 @@ const LeftSidebarPageSelector = ({
             </div>
           </HeaderSection.PanelHeader>
           {showSearch && (
-            <HeaderSection.SearchBoxComponent onChange={filterPages} placeholder={'Search'} placeholderIcon={''} />
+            <HeaderSection.SearchBoxComponent
+              onChange={filterPages}
+              placeholder={'Search'}
+              placeholderIcon={''}
+              darkMode={darkMode}
+            />
           )}
         </HeaderSection>
 
@@ -139,6 +144,7 @@ const LeftSidebarPageSelector = ({
                   addNewPage={addNewPage}
                   setNewPageBeingCreated={setNewPageBeingCreated}
                   switchPage={switchPage}
+                  darkMode={darkMode}
                 />
               </div>
             )}
diff --git a/frontend/src/OrganizationSettingsPage/index.jsx b/frontend/src/OrganizationSettingsPage/index.jsx
index dc42e83d04..ae9f225e1c 100644
--- a/frontend/src/OrganizationSettingsPage/index.jsx
+++ b/frontend/src/OrganizationSettingsPage/index.jsx
@@ -111,7 +111,7 @@ export function OrganizationSettings(props) {
             })}
           >
             <div className="w-100 mb-5">
-              {selectedTab === 'users' && <ManageOrgUsers />}
+              {selectedTab === 'users' && <ManageOrgUsers darkMode={props.darkMode} />}
               {selectedTab === 'manageGroups' && <ManageGroupPermissions darkMode={props.darkMode} />}
               {selectedTab === 'manageSSO' && <ManageSSO />}
               {selectedTab === 'manageEnvVars' && <ManageOrgVars darkMode={props.darkMode} />}
diff --git a/frontend/src/_components/NotificationCenter/index.jsx b/frontend/src/_components/NotificationCenter/index.jsx
index 490eedf9a1..0a5f09cc18 100644
--- a/frontend/src/_components/NotificationCenter/index.jsx
+++ b/frontend/src/_components/NotificationCenter/index.jsx
@@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next';
 import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
 import { ToolTip } from '@/_components/ToolTip';
 
-export const NotificationCenter = () => {
+export const NotificationCenter = ({ darkMode }) => {
   const [loading, setLoading] = React.useState(false);
   const [isRead, setIsRead] = React.useState(false);
   const [commentNotifications, setCommentNotifications] = React.useState([]);
@@ -41,7 +41,9 @@ export const NotificationCenter = () => {
 
   const overlay = (
     <div
-      className="notification-center dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card"
+      className={`notification-center dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card ${
+        darkMode && 'theme-dark'
+      }`}
       data-bs-popper="static"
     >
       <div className="card">
diff --git a/frontend/src/_components/Profile.jsx b/frontend/src/_components/Profile.jsx
index 6bbba9a79a..ee3b36aab0 100644
--- a/frontend/src/_components/Profile.jsx
+++ b/frontend/src/_components/Profile.jsx
@@ -94,7 +94,7 @@ export const Profile = function Header({ switchDarkMode, darkMode }) {
 
   return (
     <OverlayTrigger trigger="click" placement={'right'} rootClose={true} overlay={getOverlay()}>
-      <div className="user-avatar-nav-item">
+      <div className="user-avatar-nav-item cursor-pointer">
         <ToolTip message="Profile">
           <div className="d-xl-block" data-cy="user-menu">
             <Avatar avatarId={avatar_id} text={`${first_name ? first_name[0] : ''}${last_name ? last_name[0] : ''}`} />
diff --git a/frontend/src/_styles/onboarding.scss b/frontend/src/_styles/onboarding.scss
index 8913323d5b..336fdc0d60 100644
--- a/frontend/src/_styles/onboarding.scss
+++ b/frontend/src/_styles/onboarding.scss
@@ -1154,7 +1154,7 @@
 
     .tj-text-input,
     .onboard-input {
-        color: #fff;
+        color: #fff ;
         border-color: #787F85;
 
         ::placeholder {
@@ -1162,7 +1162,7 @@
         }
 
         p {
-            color: #697177;
+            color: white !important;
         }
 
         &:hover {
@@ -1400,6 +1400,14 @@
 .active-onboarding-tab {
     color: #111827 !important;
 }
+.theme-dark{
+    .active-onboarding-tab{
+        color: $color-dark-slate-12 !important;
+        img{
+            filter: brightness(0) invert(1);
+        }
+    }
+}
 
 .navigation-wrap {
     display: flex;
diff --git a/frontend/src/_styles/popover.scss b/frontend/src/_styles/popover.scss
index 1fb4865892..9df3e1dabb 100644
--- a/frontend/src/_styles/popover.scss
+++ b/frontend/src/_styles/popover.scss
@@ -9,7 +9,7 @@
   animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
   will-change: transform, opacity;
   box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
-  border-radius: 8px;
+  border-radius: 0 8px 8px 0;
   overflow: auto;
 }
 
@@ -101,4 +101,8 @@
   .card-body{
     color: #C0C8CC !important;
   }
-}
\ No newline at end of file
+  &::-webkit-scrollbar {
+    width: 0;
+    background: transparent;
+  }
+}
diff --git a/frontend/src/_styles/theme.scss b/frontend/src/_styles/theme.scss
index c9cf4ca9d2..a8053cc22f 100644
--- a/frontend/src/_styles/theme.scss
+++ b/frontend/src/_styles/theme.scss
@@ -7263,7 +7263,8 @@ tbody {
 }
 
 .modal-backdrop {
-  background-color: hsla(0, 0%, 0%, 0.439);
+  // background-color: hsla(0, 0%, 0%, 0.439);
+  opacity: 0.5;
 }
 
 .ds-delete-btn {
@@ -7315,4 +7316,13 @@ tbody {
       }
     }
   }
-}
\ No newline at end of file
+  .icon-tabler-x{
+    stroke: white ;
+  }
+}
+.img-invert{
+  img{
+    filter: invert(1);
+  }
+  
+}
diff --git a/frontend/src/_ui/JSONTreeViewer/JSONNode.jsx b/frontend/src/_ui/JSONTreeViewer/JSONNode.jsx
index ed72ef1b15..0432cc5853 100644
--- a/frontend/src/_ui/JSONTreeViewer/JSONNode.jsx
+++ b/frontend/src/_ui/JSONTreeViewer/JSONNode.jsx
@@ -335,7 +335,9 @@ export const JSONNode = ({ data, ...restProps }) => {
 
       <div
         style={{ width: 'inherit' }}
-        className={`${shouldDisplayIntendedBlock && 'group-border'} ${applySelectedNodeStyles && 'selected-node'}`}
+        className={`${shouldDisplayIntendedBlock && 'group-border'} ${applySelectedNodeStyles && 'selected-node'} ${
+          shouldDisplayIntendedBlock && !applySelectedNodeStyles && 'border-0'
+        }`}
       >
         <div
           className={cx('d-flex', {
diff --git a/frontend/src/_ui/Layout/index.jsx b/frontend/src/_ui/Layout/index.jsx
index 8344b591da..5eb27720e0 100644
--- a/frontend/src/_ui/Layout/index.jsx
+++ b/frontend/src/_ui/Layout/index.jsx
@@ -138,7 +138,7 @@ function Layout({ children, switchDarkMode, darkMode }) {
                 </Link>
               </li>
               <li className="m-auto">
-                <NotificationCenter />
+                <NotificationCenter darkMode={darkMode} />
                 <Profile switchDarkMode={switchDarkMode} darkMode={darkMode} />
               </li>
             </ul>
diff --git a/frontend/src/_ui/LeftSidebar/Header.jsx b/frontend/src/_ui/LeftSidebar/Header.jsx
index eec04764fa..15adcc347b 100644
--- a/frontend/src/_ui/LeftSidebar/Header.jsx
+++ b/frontend/src/_ui/LeftSidebar/Header.jsx
@@ -17,7 +17,7 @@ const PanelHeader = ({ children, settings, title }) => {
   );
 };
 
-const SearchContainer = ({ onChange, placeholder, placeholderIcon, callBack = null }) => {
+const SearchContainer = ({ onChange, placeholder, placeholderIcon, callBack = null, darkMode }) => {
   return (
     <div className="panel-search-container">
       <SearchBoxComponent
@@ -25,6 +25,7 @@ const SearchContainer = ({ onChange, placeholder, placeholderIcon, callBack = nu
         callback={callBack}
         placeholder={placeholder}
         placeholderIcon={placeholderIcon}
+        customClass={`${darkMode ? 'theme-dark' : ''}`}
       />
     </div>
   );
diff --git a/frontend/src/_ui/Search/Search.jsx b/frontend/src/_ui/Search/Search.jsx
index 0eda7323fb..6211c0c707 100644
--- a/frontend/src/_ui/Search/Search.jsx
+++ b/frontend/src/_ui/Search/Search.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 export const SearchBox = ({ onChange, ...restProps }) => {
-  const { callback, placeholder, placeholderIcon = null } = restProps;
+  const { callback, placeholder, placeholderIcon = null, customClass = '' } = restProps;
   const [searchText, setSearchText] = React.useState('');
   const { t } = useTranslation();
 
@@ -29,7 +29,7 @@ export const SearchBox = ({ onChange, ...restProps }) => {
   }, [searchText]);
 
   return (
-    <div className="searchbox-wrapper">
+    <div className={`searchbox-wrapper ${customClass}`}>
       <div style={{ height: '32px' }} className="input-icon d-flex">
         <span className="search-icon mx-2" onClick={clearSearch}>
           <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">