Bugfix:: Inconsistency in UI in darkmode (#6103)

* fix :: app menu not visible in dark mode and icon widget popover darkmode issue

* fix :: for nav in viewer styles , icon widget darkmode inconsistencies

* cleanup

frontend/src/Editor/Inspector/Components/Icon.jsx

@@ -45,7 +45,7 @@ export function Icon({ componentMeta, darkMode, ...restProps }) {
       <Popover
         id="popover-basic"
         style={{ width: '460px', maxWidth: '460px' }}
-        className={`${darkMode && 'dark-theme'} shadow icon-widget-popover`}
+        className={`${darkMode && 'popover-dark-themed theme-dark'} shadow icon-widget-popover`}
       >
         <Popover.Header>
           <SearchBox onSubmit={searchIcon} width="100%" />

frontend/src/Editor/Viewer/ViewerNavigation.jsx

@@ -6,6 +6,7 @@ import LogoIcon from '@assets/images/rocket.svg';
 import { Link } from 'react-router-dom';
 import { DarkModeToggle } from '@/_components/DarkModeToggle';
 import Header from './Header';
+import FolderList from '@/_ui/FolderList/FolderList';
 
 export const ViewerNavigation = ({ isMobileDevice, pages, currentPageId, switchPage, darkMode }) => {
   if (isMobileDevice) {
@@ -24,19 +25,11 @@ export const ViewerNavigation = ({ isMobileDevice, pages, currentPageId, switchP
         {pages.map(
           ([id, page]) =>
             !page.hidden && (
-              <div
+              <FolderList key={page.handle} onClick={() => switchPage(id)} selectedItem={id === currentPageId}>
-                key={page.handle}
+                <span data-cy={`pages-name-${String(page.name).toLowerCase()}`} className="mx-3 text-wrap">
-                onClick={() => switchPage(id)}
+                  {_.truncate(page.name, { length: 18 })}
-                className={`viewer-page-handler cursor-pointer ${darkMode && 'dark'}`}
+                </span>
-              >
+              </FolderList>
-                <div className={`card mb-1  ${id === currentPageId ? 'active' : ''}`}>
-                  <div className="card-body">
-                    <span data-cy={`pages-name-${String(page.name).toLowerCase()}`} className="mx-3 text-wrap">
-                      {_.truncate(page.name, { length: 18 })}
-                    </span>
-                  </div>
-                </div>
-              </div>
             )
         )}
       </div>

frontend/src/HomePage/AppMenu.jsx

@@ -83,7 +83,7 @@ export const AppMenu = function AppMenu({
         </div>
       }
     >
-      <div className={'cursor-pointer'} data-cy={`app-card-menu-icon`}>
+      <div className={'cursor-pointer menu-ico'} data-cy={`app-card-menu-icon`}>
         <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path
             fillRule="evenodd"

frontend/src/_components/SearchBox.jsx

@@ -65,8 +65,8 @@ export function SearchBox({
           autoFocus={autoFocus}
         />
         {isFocused && (
-          <span className="input-icon-addon end">
+          <span className="input-icon-addon end" onMouseDown={clearSearchText}>
-            <div className="d-flex tj-common-search-input-clear-icon" onMouseDown={clearSearchText} title="clear">
+            <div className="d-flex tj-common-search-input-clear-icon" title="clear">
               <SolidIcon name="remove" />
             </div>
           </span>

frontend/src/_styles/theme.scss

@@ -639,9 +639,17 @@ button {
   width: 100%;
   margin-top: 32px;
 
+  .search-box-wrapper {
+    .input-icon {
+      .input-icon-addon {
+        padding-right: 6px;
+      }
+    }
+  }
+
   .homepage-search {
     background: transparent;
-    color: var(--slate9);
+    color: var(--slate12);
     height: 20px;
 
     &:focus {
@@ -4330,14 +4338,10 @@ input[type="text"] {
   input {
     width: 200px;
     border-radius: 5px !important;
-    color: var(--slate12) !important;
+    color: var(--slate12);
     background-color: var(--base);
   }
 
-  .input-icon-addon {
-    min-width: 0rem !important;
-  }
-
   .input-icon .form-control:not(:first-child),
   .input-icon .form-select:not(:last-child) {
     padding-left: 28px !important;
@@ -4345,7 +4349,6 @@ input[type="text"] {
 
   input:focus {
     width: 300px;
-    background-color: var(--base);
   }
 
   .input-icon .input-icon-addon {
@@ -4361,7 +4364,6 @@ input[type="text"] {
       justify-content: center;
       align-items: center;
       padding: 4px;
-      // gap: 8px;
       width: 20px;
       height: 20px;
       background: var(--indigo3) !important;
@@ -4526,30 +4528,37 @@ input[type="text"] {
     }
   }
 }
-.home-modal-component-editor.dark
+
-{
+.home-modal-component-editor.dark {
-  .modal-header,.modal-body{
+
+  .modal-header,
+  .modal-body {
     background-color: #232e3c;
     color: #fff;
   }
-  .form-control{
+
+  .form-control {
     color: #fff;
     background-color: #232e3c !important;
   }
 }
+
 .onboarding-modal.dark .modal-content {
   @extend .modal-content.home-modal-component.dark;
 }
+
 .modal-content.home-modal-component.dark-theme {
   .btn-close {
     filter: brightness(0) invert(1);
   }
 }
-.home-modal-component{
+
+.home-modal-component {
   .btn-close {
     opacity: 1 !important;
   }
 }
+
 .modal-content.home-modal-component.dark {
   background-color: $bg-dark-light  !important;
   color: $white  !important;
@@ -4932,7 +4941,7 @@ div#driver-page-overlay {
 
 .popover.popover-dark-themed {
   background-color: $bg-dark-light;
-  border-color: rgba(101,109,119,0.16);
+  border-color: rgba(101, 109, 119, 0.16);
 
 
   .popover-body {
@@ -7685,7 +7694,7 @@ tbody {
 
   .home-app-card-header {
     .menu-ico {
-      display: none !important;
+      visibility: hidden !important;
     }
   }
 
@@ -7696,7 +7705,7 @@ tbody {
       margin-bottom: 12px;
 
       .menu-ico {
-        display: block !important;
+        visibility: visible !important;
       }
     }
 
@@ -8401,7 +8410,8 @@ tbody {
   color: var(--slate12);
   justify-content: center;
 }
-.launch-button.tj-disabled-btn{
+
+.launch-button.tj-disabled-btn {
   cursor: not-allowed;
 }
 
@@ -9701,7 +9711,7 @@ tbody {
   border-radius: 4px;
 }
 
-.confirm-dialogue-body  {
+.confirm-dialogue-body {
   background: var(--base);
   color: var(--slate12);
 }
@@ -9823,7 +9833,7 @@ tbody {
   grid-template-rows: auto 1fr auto;
 }
 
-.add-new-datasource-header-container{
+.add-new-datasource-header-container {
   margin-bottom: 24px;
   padding-top: 4px;
 }
@@ -10359,28 +10369,59 @@ tbody {
 .template-source-name {
   color: var(--slate12) !important;
 }
-.marketplace-install{
+
+.marketplace-install {
   color: var(--indigo9);
 }
+
 .popover {
   .popover-arrow {
     display: none;
   }
 }
 
-.shareable-link{
+.shareable-link {
-  .input-group{
+  .input-group {
-    .tj-app-input textarea{
+    .tj-app-input textarea {
       width: 600px;
       border-radius: 0px !important;
       margin-bottom: 0px !important;
-      background-color: #5e656e !important;
+      background-color: #efefef4d;
-      color: #f4f6fa !important;
+      color: #545454;
-      border: none !important;
-
     }
   }
 }
-.confirm-dialogue-modal{
+
+.confirm-dialogue-modal {
   background: var(--base);
+}
+
+.theme-dark {
+  .icon-widget-popover {
+    .search-box-wrapper input {
+      color: #f4f6fa !important;
+    }
+
+    .search-box-wrapper input:focus {
+      background-color: #1c252f !important;
+    }
+  }
+
+  .shareable-link {
+    .tj-app-input textarea {
+      background-color: #5e656e !important;
+      color: #f4f6fa !important;
+      border: none !important;
+    }
+  }
+
+  .icon-widget-popover {
+    .search-box-wrapper .input-icon-addon {
+      min-width: 2.5rem !important;
+    }
+
+    .search-box-wrapper input {
+      color: var(--base) !important;
+    }
+  }
 }