styling changes

frontend/src/_components/OrganizationManager/CustomSelect.jsx

@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import Select from '@/_ui/Select';
 import { components } from 'react-select';
-import { EditOrganization } from './EditOrganization';
 import { CreateOrganization } from './CreateOrganization';
 import { useTranslation } from 'react-i18next';
 import { authenticationService } from '@/_services';
@@ -15,15 +14,14 @@ const Menu = (props) => {
 
   return (
     <components.Menu {...props}>
-      <div className={darkMode && 'dark-theme'} style={{ padding: '4px' }}>
+      <div
+        className={`org-dropdown-shadow ${darkMode && 'dark-theme'}`}
+        style={{ paddingTop: '4px', paddingBottom: '4px' }}
+      >
         <>
-          <div
-            className="org-custom-select-header-wrap"
-            style={{ padding: '8px 12px' }}
-            // onClick={() => props.selectProps.setShowEditOrg(true)}
-          >
+          <div className="org-custom-select-header-wrap" style={{ padding: '8px 12px' }}>
             <div className="row cursor-pointer d-flex align-items-center">
-              <div className="col-10">Workspaces ({props.options.length})</div>
+              <div className="col-10 select-header-font">Workspaces ({props.options.length})</div>
               {admin && (
                 <ToolTip message={'Add new workspace'} position="top">
                   <div className="col-1" style={{ paddingRight: '24px' }} onClick={props.selectProps.setShowCreateOrg}>
@@ -32,7 +30,7 @@ const Menu = (props) => {
                       fill="var(--icon-strong)"
                       className=""
                       dataCy="add-new-workspace-link"
-                      width="14"
+                      width="15"
                     />
                   </div>
                 </ToolTip>
@@ -60,22 +58,18 @@ const SingleValue = ({ selectProps }) => {
 };
 
 export const CustomSelect = ({ ...props }) => {
-  const [showEditOrg, setShowEditOrg] = useState(false);
   const [showCreateOrg, setShowCreateOrg] = useState(false);
   const darkMode = localStorage.getItem('darkMode') === 'true';
-  // const currentValue = props?.options.find((option) => option?.value === props?.value);
 
   return (
     <>
       <CreateOrganization showCreateOrg={showCreateOrg} setShowCreateOrg={setShowCreateOrg} />
-      {/* <EditOrganization showEditOrg={showEditOrg} setShowEditOrg={setShowEditOrg} currentValue={currentValue} /> */}
 
       <Select
         className={`react-select-container ${darkMode && 'dark-theme'}`}
         width={'262px'}
         hasSearch={false}
         components={{ Menu, SingleValue }}
-        setShowEditOrg={setShowEditOrg}
         setShowCreateOrg={setShowCreateOrg}
         styles={{ border: 0, cursor: 'pointer' }}
         {...props}

frontend/src/_components/OrganizationManager/List.jsx

@@ -66,7 +66,7 @@ export const OrganizationList = function () {
             </div>
           </ToolTip>
           {org.id === current_organization_id && admin ? (
-            <ToolTip message="Edit" placement="right">
+            <ToolTip message="Edit" placement="top">
               <div
                 className="current-org-indicator"
                 data-cy="current-org-indicator"
@@ -77,13 +77,13 @@ export const OrganizationList = function () {
             </ToolTip>
           ) : (
             org.id !== current_organization_id && (
-              <ToolTip message="Open in new tab" placement="right">
+              <ToolTip message="Open in new tab" placement="top">
                 <div
                   className="current-org-indicator"
                   data-cy="current-org-indicator"
                   onClick={() => switchOrganization(org.id)}
                 >
-                  <SolidIcon name="newtab" fill="#3E63DD" width="16" className="add-new-workspace-icon" />
+                  <SolidIcon name="newtab" fill="var(--icon-strong)" width="16" className="add-new-workspace-icon" />
                 </div>
               </ToolTip>
             )
@@ -103,7 +103,7 @@ export const OrganizationList = function () {
         isLoading={isGettingOrganizations}
         options={options}
         value={current_organization_id}
-        // onChange={(id) => switchOrganization(id)}
+        onChange={(id) => switchOrganization(id)}
         className={`tj-org-select  ${darkMode && 'dark-theme'}`}
       />
     </div>

frontend/src/_styles/theme.scss

@@ -10677,7 +10677,7 @@ tbody {
   }
 
   .current-org-indicator {
-    padding: 8px 8px;
+    padding: 0px 8px 0px 8px;
     margin-left: auto;
     margin-right: 5px;
   }
@@ -10698,6 +10698,10 @@ tbody {
   }
 }
 
+.org-dropdown-shadow{
+  box-shadow: var(--elevation-400-box-shadow)
+}
+
 .css-1q0xftk-menu {
   background-color: var(--base-black) !important;
   border: 1px solid hsl(197, 6.8%, 13.6%) !important;
@@ -10715,6 +10719,14 @@ tbody {
 
 .org-custom-select-header-wrap {
   border-bottom: 1px solid var(--slate5);
+
+  .select-header-font{
+font-size: 14px;
+font-weight: 500;
+line-height: 20px;
+color: var(--text-default);
+
+  }
 }
 
 .btn-close:focus {