Fix z index (#82)

* Fix z index * Fix prettier
fishjam-dev · Apr 12, 2024 · 2d237d8 · 2d237d8
1 parent e5b0ec0
commit 2d237d8
Show file tree

Hide file tree

Showing 7 changed files with 8 additions and 11 deletions.
diff --git a/src/components/AddFileComponent.tsx b/src/components/AddFileComponent.tsx
@@ -39,7 +39,7 @@ const AddFileComponent: FC<Props> = ({ roomId, refetchIfNeeded, hasFileComponent
             />
           </label>
           <div
-            className={!hasFileComponent ? "" : "tooltip tooltip-info z-10"}
+            className={!hasFileComponent ? "" : "tooltip tooltip-info"}
             data-tip={hasFileComponent ? "File component already exists in this room" : ""}
           >
             <button

diff --git a/src/components/AddHlsComponent.tsx b/src/components/AddHlsComponent.tsx
@@ -76,7 +76,7 @@ const AddHlsComponent: FC<Props> = ({ roomId, refetchIfNeeded, isHLSSupported, h
           </label>
 
           <div
-            className={isHLSSupported && !hasHlsComponent ? "" : "tooltip tooltip-info z-10"}
+            className={isHLSSupported && !hasHlsComponent ? "" : "tooltip tooltip-info"}
             data-tip={
               isHLSSupported
                 ? hasHlsComponent

diff --git a/src/components/AudioVisualizer.tsx b/src/components/AudioVisualizer.tsx
@@ -72,10 +72,7 @@ export const AudioVisualizer = ({ stream, muted = false, size = 46, height = 100
   }, [stream]);
 
   return (
-    <div
-      ref={canvasParentRef}
-      className="flex flex-row flex-nowrap justify-center border-4 z-10 rounded-md bg-gray-200"
-    >
+    <div ref={canvasParentRef} className="flex flex-row flex-nowrap justify-center border-4 rounded-md bg-gray-200">
       <audio autoPlay={true} ref={loadAudio} muted={muted} />
       <canvas ref={canvasRef} width={canvasWidth} height={height} />
     </div>

diff --git a/src/components/CloseButton.tsx b/src/components/CloseButton.tsx
@@ -5,7 +5,7 @@ type CloseButtonProps = {
 };
 
 export const CloseButton = ({ position = "top", onClick, descripiton = "REMOVE" }: CloseButtonProps) => (
-  <div className="indicator-item indicator-start z-10">
+  <div className="indicator-item indicator-start">
     <div className={`tooltip tooltip-error ${position === "left" ? "tooltip-left" : ""} `} data-tip={descripiton}>
       <button className="btn btn-circle btn-error btn-sm" onClick={onClick}>
         <svg

diff --git a/src/components/CopyButton.tsx b/src/components/CopyButton.tsx
@@ -26,7 +26,7 @@ const copyTokenToClipboard = (text: string) => {
 
 export const CopyToClipboardButton = ({ text, tooltipText }: { text: string; tooltipText?: string }) => {
   return (
-    <div className="tooltip tooltip-info z-10" data-tip={tooltipText ?? "COPY"}>
+    <div className="tooltip tooltip-info" data-tip={tooltipText ?? "COPY"}>
       <button className="btn btn-sm mx-1 my-0" onClick={() => copyTokenToClipboard(text)}>
         <GoCopy size={24} />
       </button>
@@ -36,7 +36,7 @@ export const CopyToClipboardButton = ({ text, tooltipText }: { text: string; too
 
 export const CopyLinkButton = ({ url }: { url: string }) => {
   return (
-    <div className="tooltip tooltip-info z-10" data-tip="COPY LINK">
+    <div className="tooltip tooltip-info" data-tip="COPY LINK">
       <button className="btn btn-sm mx-1 my-0" onClick={() => copyTokenToClipboard(url)}>
         <GoLink size={24} />
       </button>

diff --git a/src/components/GenerateQRCodeButton.tsx b/src/components/GenerateQRCodeButton.tsx
@@ -3,7 +3,7 @@ import { BsQrCodeScan } from "react-icons/bs";
 
 export const GenerateQRCodeButton = ({ textToQR, description }: { textToQR: string; description: string }) => {
   return (
-    <div className="tooltip tooltip-info z-10" data-tip="SHOW QR CODE">
+    <div className="tooltip tooltip-info" data-tip="SHOW QR CODE">
       <label htmlFor={textToQR} className="btn btn-sm mx-1 my-0">
         <BsQrCodeScan size={24} />
       </label>

diff --git a/src/containers/Client.tsx b/src/containers/Client.tsx
@@ -284,7 +284,7 @@ export const Client = ({
         <div className="card-body p-4">
           <div className="flex flex-row justify-between gap-2 items-center">
             <h1 className="card-title relative">
-              <div className="z-10">
+              <div>
                 Peer: <span className="text-xs">{peerId}</span>
               </div>
               <div className="tooltip tooltip-top tooltip-primary absolute -ml-3 -mt-1 " data-tip={fullState?.status}>