fix: add tooltip to ModuleTitle

fix colors for visibility badge

Author: therockerline

src/renderer/src/components/ModuleTitle.tsx

@@ -4,6 +4,7 @@ import { IconProp } from "@fortawesome/fontawesome-svg-core"
 import { DefaultTFuncReturn } from "i18next"
 import { ReactNode } from "react"
 import { ClassNames } from "@renderer/utils"
+import { Tooltip } from 'react-tooltip'
 
 export interface ModuleTitleProps {
   title?: string | DefaultTFuncReturn | ReactNode,
@@ -26,9 +27,20 @@ export const ModuleTitle = ({
   return (
     <div className="px-5">
       <div className={ClassNames("flex justify-between items-center pb-1 border border-t-0 border-r-0 border-l-0 dark:border-borderDark border-borderLight h-[28px]", className)}>
-        {title && <h1 className="font-medium text-base leading-5 dark:text-titleDark text-titleLight">
+        {title && <h1
+          className="font-medium text-base leading-5 dark:text-titleDark text-titleLight truncate"
+          data-tooltip-id={`tooltip-module-title`}
+          data-tooltip-content={title as string}
+        >
           {title}
         </h1>}
+        <Tooltip
+          id={`tooltip-module-title`}
+          place="bottom"
+          className="z-10"
+          opacity={1}
+          noArrow={false}
+        />
         {action && (
           <Button
             variant="ghost"

src/renderer/src/components/Modules/NethVoice/SearchResults/SearchNumberDetail.tsx

@@ -21,6 +21,7 @@ import { Tooltip } from 'react-tooltip'
 import { NumberCaller } from '@renderer/components/NumberCaller'
 import { useAccount } from '@renderer/hooks/useAccount'
 import classNames from 'classnames'
+import { useTheme } from '@renderer/theme/Context'
 
 interface SearchNumberBoxProps {
   contactDetail?: {
@@ -74,18 +75,19 @@ export function SearchNumberDetail({ contactDetail, onBack }: SearchNumberBoxPro
 
 
 const ContactVisibility = ({ isPublic }: { isPublic: boolean }) => {
+  const { theme } = useTheme()
   return <div className='flex flex-row w-full justify-start'>
-    <div className='flex flex-row gap-2 items-center min-w-[170px] w-full'>
+    <div className='flex flex-row gap-2 items-center min-w-[170px] w-full dark:text-titleDark text-titleLight'>
       <FontAwesomeIcon
         className="text-base dark:text-titleDark text-titleLight"
         icon={VisibilityIcon}
       />
       {t("Phonebook.Visibility")}
     </div>
     <div className='w-full'>
-      <div className='px-3 py-0.5 w-fit justify-start bg-bgEmerald rounded-full flex flex-row gap-1 items-center dark:text-titleDark text-titleLight'>
+      <div className={classNames(theme.badge.base, theme.badge.rounded.full, theme.badge.sizes.small, 'w-fit justify-start bg-teal-100 dark:bg-teal-700  text-teal-800 dark:text-teal-100 flex flex-row gap-1 items-center ')}>
         <FontAwesomeIcon
-          className="text-base dark:text-titleDark text-titleLight w-5"
+          className="text-base text-teal-800 dark:text-teal-100 w-5"
           icon={PublicIcon}
         />
         {isPublic ? t("Phonebook.Public") : t("Phonebook.Only me")}