fixed react hydration error (css issue)

woshirlon · Oct 1, 2022 · a5f902f · a5f902f
1 parent b0f1975
commit a5f902f
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 9 deletions.
diff --git a/components/app/settings/landing-page.tsx b/components/app/settings/landing-page.tsx
@@ -89,7 +89,7 @@ export default function DefaultPage() {
           />
         ) : (
           <Tooltip content="You need to verify your domain first.">
-            <div className="border border-gray-300 text-gray-300 text-sm px-3 py-2 w-full max-w-md cursor-not-allowed rounded-md">
+            <div className="text-left border border-gray-300 text-gray-300 text-sm px-3 py-2 w-full max-w-md cursor-not-allowed rounded-md">
               https://yourdomain.com
             </div>
           </Tooltip>
@@ -112,12 +112,9 @@ export default function DefaultPage() {
           </button>
         ) : (
           <Tooltip content="You need to verify your domain first.">
-            <button
-              disabled
-              className="cursor-not-allowed bg-gray-100 border-gray-200 text-gray-300 h-9 w-32 text-sm border rounded-md focus:outline-none transition-all ease-in-out duration-150"
-            >
+            <div className="cursor-not-allowed bg-gray-100 border-gray-200 text-gray-300 h-9 w-32 flex items-center justify-center text-sm border rounded-md">
               Save Changes
-            </button>
+            </div>
           </Tooltip>
         )}
       </div>

diff --git a/components/shared/tooltip.tsx b/components/shared/tooltip.tsx
@@ -1,5 +1,5 @@
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { ReactNode, useEffect, useRef, useState } from "react";
+import { ReactNode, useRef, useState } from "react";
 import { motion, AnimatePresence, useAnimation } from "framer-motion";
 
 export default function Tooltip({
@@ -29,7 +29,10 @@ export default function Tooltip({
   const randomIndex = Math.floor(Math.random() * 1000000).toString();
   return (
     <>
-      <button className="block sm:hidden" onClick={() => setOpenTooltip(true)}>
+      <button
+        className="inline-flex sm:hidden"
+        onClick={() => setOpenTooltip(true)}
+      >
         {children}
       </button>
       <AnimatePresence>
@@ -81,7 +84,7 @@ export default function Tooltip({
       </AnimatePresence>
       <TooltipPrimitive.Provider delayDuration={100}>
         <TooltipPrimitive.Root>
-          <TooltipPrimitive.Trigger className="hidden sm:flex" asChild>
+          <TooltipPrimitive.Trigger className="hidden sm:inline-flex" asChild>
             {children}
           </TooltipPrimitive.Trigger>
           <TooltipPrimitive.Content