design system fixes

frontend/webapp/containers/main/destinations/add-destination/choose-destination-menu/index.tsx

@@ -66,6 +66,7 @@ const DestinationFilterComponent: React.FC<FilterComponentProps> = ({
           options={DROPDOWN_OPTIONS}
           value={selectedTag}
           onSelect={onTagSelect}
+          showSearch={false}
         />
       </InputAndDropdownContainer>
       <MonitorButtonsContainer>

frontend/webapp/containers/main/destinations/add-destination/destinations-list/index.tsx

@@ -3,15 +3,15 @@ import styled from 'styled-components';
 import { DestinationTypeItem } from '@/types';
 import { capitalizeFirstLetter } from '@/utils';
 import { DestinationListItem } from './destination-list-item';
-import { Counter, NoDataFound, SectionTitle } from '@/reuseable-components';
+import { NoDataFound, SectionTitle } from '@/reuseable-components';
 import { IDestinationListItem } from '../choose-destination-modal-body';
 import { PotentialDestinationsList } from './potential-destinations-list';
 
 const Container = styled.div`
   display: flex;
   flex-direction: column;
   align-self: stretch;
-  max-height: calc(100vh - 424px);
+  max-height: calc(100vh - 450px);
   overflow-y: auto;
 
   @media (height < 800px) {

frontend/webapp/containers/main/destinations/add-destination/styled.ts

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
 export const Body = styled.div`
-  padding: 32px 32px 0;
+  padding: 32px 24px 0;
   border-left: 1px solid rgba(249, 249, 249, 0.08);
   min-height: 600px;
   width: 100%;

frontend/webapp/hooks/sources/useConnectSourcesMenuState.ts

@@ -49,9 +49,17 @@ export const useConnectSourcesMenuState = ({ sourcesList }) => {
   function handleSelectItem(item: K8sActualSource) {
     if (selectedOption) {
       const currentSelectedItems = selectedItems[selectedOption.value] || [];
-      if (currentSelectedItems.includes(item)) {
+
+      const isItemSelected = currentSelectedItems.some(
+        (currentSelectedItem) =>
+          currentSelectedItem.name === item.name &&
+          currentSelectedItem.kind === item.kind
+      );
+
+      if (isItemSelected) {
         const updatedSelectedItems = currentSelectedItems.filter(
-          (selectedItem) => selectedItem !== item
+          (selectedItem) =>
+            JSON.stringify(selectedItem) !== JSON.stringify(item)
         );
         setSelectedItems({
           ...selectedItems,

frontend/webapp/hooks/useOnClickOutside.tsx

@@ -1,19 +1,16 @@
-'use client';
-import { useEffect, RefObject } from 'react';
+import { useEffect } from 'react';
 
-type Event = MouseEvent | TouchEvent;
-
-export function useOnClickOutside<T extends HTMLElement = HTMLElement>(
-  ref: RefObject<T>,
-  handler: (event: Event) => void
+export function useOnClickOutside(
+  ref: React.RefObject<HTMLElement>,
+  handler: () => void
 ) {
   useEffect(() => {
-    const listener = (event: Event) => {
-      const el = ref?.current;
-      if (el?.contains(event?.target as Node)) return null;
-
-      // Call the handler only if the click is outside of the element passed.
-      handler(event);
+    const listener = (event: MouseEvent | TouchEvent) => {
+      // Do nothing if clicking ref's element or descendent elements
+      if (!ref.current || ref.current.contains(event.target as Node)) {
+        return;
+      }
+      handler();
     };
 
     document.addEventListener('mousedown', listener);

frontend/webapp/reuseable-components/button/index.tsx

@@ -8,71 +8,96 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 
 const variantStyles = {
   primary: css`
-    border-radius: 32px;
     border: 1px solid rgba(249, 249, 249, 0.24);
-    background: rgba(249, 249, 249, 0.8);
-    height: 36px;
-    padding: 8px 14px 8px 16px;
-
+    background: ${({ theme }) => theme.colors.secondary};
     &:hover {
-      background: rgba(249, 249, 249, 0.6);
+      background: rgba(224, 224, 224, 1);
     }
     &:active {
-      background: rgba(249, 249, 249, 0.5);
+      background: rgba(184, 184, 184, 1);
+    }
+    &:focus {
+      background: ${({ theme }) => theme.colors.secondary};
     }
   `,
   secondary: css`
-    background: #151515;
-    border: 1px solid rgba(249, 249, 249, 0.24);
-    border-radius: 32px;
+    background: rgba(249, 249, 249, 0);
+    border: 1px solid rgba(82, 82, 82, 1);
+
     &:hover {
       border: 1px solid rgba(249, 249, 249, 0.32);
       background: rgba(249, 249, 249, 0.04);
     }
     &:active {
-      background: #1515158d;
+      background: rgba(249, 249, 249, 0.08);
+      border: 1px solid rgba(143, 143, 143, 1);
+    }
+    &:focus {
+      background: rgba(249, 249, 249, 0);
     }
   `,
   tertiary: css`
-    background-color: transparent;
-    border-radius: 32px;
+    border-color: transparent;
+    background: transparent;
     &:hover {
-      background: #151515;
+      background: rgba(249, 249, 249, 0.04);
     }
     &:active {
+      background: rgba(249, 249, 249, 0.08);
+    }
+    &:focus {
+      background: rgba(249, 249, 249, 0);
     }
   `,
 };
 
 const StyledButton = styled.button<ButtonProps>`
-  padding: 10px 20px;
-  border: none;
-  border-radius: 5px;
+  height: 36px;
+  border-radius: 32px;
   cursor: pointer;
   transition: background-color 0.3s ease;
-
+  padding: 0 12px;
   ${({ variant }) => variant && variantStyles[variant]}
   ${({ isDisabled }) =>
     isDisabled &&
     css`
       opacity: 0.5;
       cursor: not-allowed;
-      &:hover,
-      &:active {
+      &:hover {
         background-color: #eaeaea;
       }
     `}
 `;
 
+const ButtonContainer = styled.div<{
+  variant?: 'primary' | 'secondary' | 'tertiary';
+}>`
+  border: 2px solid transparent;
+  padding: 2px;
+  border-radius: 32px;
+  background-color: transparent;
+  transition: border-color 0.3s ease;
+  &:focus-within {
+    border-color: ${({ theme }) => theme.colors.secondary};
+  }
+`;
+
 export const Button: React.FC<ButtonProps> = ({
   children,
   variant = 'primary',
   isDisabled = false,
   ...props
 }) => {
   return (
-    <StyledButton variant={variant} isDisabled={isDisabled} {...props}>
-      {children}
-    </StyledButton>
+    <ButtonContainer variant={variant}>
+      <StyledButton
+        variant={variant}
+        disabled={isDisabled}
+        isDisabled={isDisabled}
+        {...props}
+      >
+        {children}
+      </StyledButton>
+    </ButtonContainer>
   );
 };

frontend/webapp/reuseable-components/checkbox/index.tsx

@@ -34,6 +34,7 @@ const CheckboxWrapper = styled.div<{ isChecked: boolean; disabled?: boolean }>`
   background-color: ${({ isChecked, theme }) =>
     isChecked ? theme.colors.majestic_blue : 'transparent'};
   pointer-events: ${({ disabled }) => (disabled ? 'none' : 'auto')};
+  transition: border 0.3s, background-color 0.3s;
 `;
 
 const Checkbox: React.FC<CheckboxProps> = ({

frontend/webapp/reuseable-components/dropdown/index.tsx

@@ -8,6 +8,7 @@ import { Divider } from '../divider';
 import { DropdownOption } from '@/types';
 import { useOnClickOutside } from '@/hooks';
 import ReactDOM from 'react-dom';
+import { NoDataFound } from '../no-data-found';
 
 interface DropdownProps {
   options: DropdownOption[];
@@ -16,6 +17,7 @@ interface DropdownProps {
   title?: string;
   tooltip?: string;
   placeholder?: string;
+  showSearch?: boolean;
 }
 
 const Container = styled.div`
@@ -61,6 +63,7 @@ const DropdownListContainer = styled.div`
   flex-direction: column;
   gap: 8px;
   padding: 8px;
+  margin-top: 12px;
   background-color: #242424;
   border: 1px solid ${({ theme }) => theme.colors.border};
   border-radius: 32px;
@@ -98,6 +101,7 @@ const HeaderWrapper = styled.div`
 `;
 
 const OpenDropdownIcon = styled(Image)<{ isOpen: boolean }>`
+  transition: transform 0.3s;
   transform: ${({ isOpen }) => (isOpen ? 'rotate(180deg)' : 'rotate(0deg)')};
 `;
 
@@ -108,6 +112,7 @@ const Dropdown: React.FC<DropdownProps> = ({
   title,
   tooltip,
   placeholder,
+  showSearch = true,
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [searchTerm, setSearchTerm] = useState('');
@@ -116,10 +121,12 @@ const Dropdown: React.FC<DropdownProps> = ({
     left: 0,
     width: 0,
   });
-  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const [isDisabled, setIsDisabled] = useState(false); // Disable flag for debounce
   const containerRef = useRef<HTMLDivElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
 
-  // useOnClickOutside(dropdownRef, () => setIsOpen(false)); //TODO:: find a way to use it without breaking the dropdown click event
+  useOnClickOutside(dropdownRef, () => setIsOpen(false));
 
   useEffect(() => {
     if (isOpen && containerRef.current) {
@@ -141,6 +148,23 @@ const Dropdown: React.FC<DropdownProps> = ({
     setIsOpen(false);
   };
 
+  const handleDropdownToggle = (e: React.MouseEvent) => {
+    e.stopPropagation();
+
+    if (isDisabled) {
+      return; // Prevent multiple clicks if debounce is active
+    }
+
+    // Toggle dropdown open/close state
+    setIsOpen((prev) => !prev);
+
+    // Set the disable flag to true and reset after 1 second
+    setIsDisabled(true);
+    setTimeout(() => {
+      setIsDisabled(false);
+    }, 1000); // 1 second debounce delay
+  };
+
   const dropdownContent = (
     <div
       style={{
@@ -149,17 +173,23 @@ const Dropdown: React.FC<DropdownProps> = ({
         left: dropdownPosition.left,
         width: dropdownPosition.width,
       }}
+      onClick={(e) => e.stopPropagation()}
     >
-      <DropdownListContainer>
-        <SearchInputContainer>
-          <Input
-            placeholder="Search..."
-            icon={'/icons/common/search.svg'}
-            value={searchTerm}
-            onChange={(e) => setSearchTerm(e.target.value)}
-          />
-          <Divider thickness={1} margin="8px 0 0 0" />
-        </SearchInputContainer>
+      <DropdownListContainer ref={dropdownRef}>
+        {showSearch && (
+          <SearchInputContainer>
+            <Input
+              placeholder="Search..."
+              icon={'/icons/common/search.svg'}
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+            />
+            <Divider thickness={1} margin="8px 0 0 0" />
+          </SearchInputContainer>
+        )}
+        {filteredOptions.length === 0 && (
+          <NoDataFound title="No data found" subTitle=" " />
+        )}
         {filteredOptions.map((option) => (
           <DropdownItem
             key={option.id}
@@ -198,7 +228,7 @@ const Dropdown: React.FC<DropdownProps> = ({
           </HeaderWrapper>
         </Tooltip>
       )}
-      <DropdownHeader isOpen={isOpen} onClick={() => setIsOpen(!isOpen)}>
+      <DropdownHeader isOpen={isOpen} onClick={handleDropdownToggle}>
         <Text size={14}>{value?.value || placeholder}</Text>
         <OpenDropdownIcon
           src="/icons/common/extend-arrow.svg"

frontend/webapp/reuseable-components/toggle/index.tsx

@@ -1,8 +1,8 @@
-import React, { useEffect, useState } from 'react';
 import Image from 'next/image';
-import styled, { css } from 'styled-components';
-import { Tooltip } from '../tooltip';
 import { Text } from '../text';
+import { Tooltip } from '../tooltip';
+import styled from 'styled-components';
+import React, { useEffect, useState } from 'react';
 
 interface ToggleProps {
   title: string;
@@ -33,6 +33,7 @@ const ToggleSwitch = styled.div<{ isActive: boolean; disabled?: boolean }>`
   pointer-events: ${({ disabled }) => (disabled ? 'none' : 'auto')};
   cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
   opacity: ${({ isActive }) => (isActive ? 1 : 0.4)};
+  transition: background-color 0.3s, opacity 0.3s;
   &::before {
     content: '';
     width: 12px;