^react-tooltip + add channel tooltip

Author: Stan-l-e-y

components/home/Server.tsx

@@ -20,6 +20,7 @@ import {
 import { Channel, Server as ServerType } from '@/types/dbtypes';
 import { useSetChannel } from '@/lib/store';
 import { ChannelMediaIcon } from '../icons/ChannelMediaIcon';
+import { Tooltip } from 'react-tooltip';
 
 export default function Server({
   server,
@@ -84,7 +85,7 @@ export default function Server({
 
   if (expand) {
     return (
-      <div className="relative ">
+      <div className="relative overflow-x-visible">
         <div className="border-b-2 border-grey-700 py-2 px-3 flex bg-grey-600 justify-between rounded-xl items-center relative z-10">
           <div className="flex items-center">
             <div
@@ -138,6 +139,8 @@ export default function Server({
             onMouseEnter={() => setIsSettingsHovered(true)}
             onMouseLeave={() => setIsSettingsHovered(false)}
             className="hover:cursor-pointer"
+            data-tooltip-id="serverSettings"
+            data-tooltip-place="right"
           >
             <VerticalSettingsIcon hovered={isSettingsHovered} />
           </div>

components/home/ServerList.tsx

@@ -7,6 +7,7 @@ import styles from '@/styles/Servers.module.css';
 import AddServerModal from '@/components/home/AddServerModal';
 import { useGetServers, useServers } from '@/lib/store';
 import { Tooltip } from 'react-tooltip';
+import PlusIcon from '@/components/icons/PlusIcon';
 
 export default function ServerList() {
   //TODO: fetch server_users via profile id, select server_id -> fetch channels via this server_id && fetch servers with server_id
@@ -57,7 +58,8 @@ export default function ServerList() {
             style={{
               backgroundColor: '#21282b',
               borderRadius: '0.5rem',
-              fontSize: '1rem',
+              fontSize: '1.125rem',
+              lineHeight: '1.75rem',
             }}
             id="addServer"
             clickable
@@ -73,7 +75,8 @@ export default function ServerList() {
           placeholder="Search"
         ></input>
       </div>
-      <div className="overflow-y-scroll">
+
+      <div className="overflow-y-scroll ">
         {servers &&
           servers.map((server, idx, serverList) => {
             if (server) {
@@ -97,6 +100,23 @@ export default function ServerList() {
             }
           })}
       </div>
+      <Tooltip
+        className="z-20 !opacity-100 font-semibold "
+        style={{
+          backgroundColor: '#21282b',
+          borderRadius: '0.5rem',
+          fontSize: '1.125rem',
+          lineHeight: '1.75rem',
+        }}
+        id="serverSettings"
+        clickable
+        openOnClick={true}
+      >
+        <div className="flex justify-center items-center hover:text-grey-300 cursor-pointer">
+          <PlusIcon width={5} height={5} />
+          <span className="ml-1">New channel</span>
+        </div>
+      </Tooltip>
     </div>
   );
 }

components/icons/PlusIcon.tsx

@@ -1,14 +1,18 @@
 export default function PlusIcon({
   color = 'currentColor',
+  width = 6,
+  height = 6,
 }: {
   color?: string;
+  width?: number;
+  height?: number;
 }) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 24 24"
       fill={color}
-      className="w-6 h-6"
+      className={`w-${width} h-${height}`}
     >
       <path
         fillRule="evenodd"

package.json

@@ -41,7 +41,7 @@
     "react-markdown": "^8.0.5",
     "react-responsive": "^9.0.2",
     "react-toastify": "^9.1.1",
-    "react-tooltip": "^5.8.1",
+    "react-tooltip": "^5.10.0",
     "rehype-highlight": "^6.0.0",
     "rehype-katex": "^6.0.2",
     "remark-breaks": "^3.0.2",