From c9e40c5ce527a183ad795033f063d9a0b4f6ed97 Mon Sep 17 00:00:00 2001
From: epiqueras <epiquerass@gmail.com>
Date: Wed, 16 Sep 2020 11:54:47 -0400
Subject: [PATCH] chore: implement disabled button tooltips

---
 .../deadlines/challenge-button.js             |  1 +
 components/button.js                          | 93 +++++++++++++------
 components/theme-provider.js                  |  4 +
 3 files changed, 69 insertions(+), 29 deletions(-)

diff --git a/_pages/profile/[id]/submission-details-card/deadlines/challenge-button.js b/_pages/profile/[id]/submission-details-card/deadlines/challenge-button.js
index f91d8afb..751e7a2b 100644
--- a/_pages/profile/[id]/submission-details-card/deadlines/challenge-button.js
+++ b/_pages/profile/[id]/submission-details-card/deadlines/challenge-button.js
@@ -148,6 +148,7 @@ export default function ChallengeButton({ request, contract, submissionID }) {
             width: "100%",
           }}
           disabled={disputed && currentReasonIsNotDuplicate}
+          disabledTooltip="Already Challenged"
         >
           Challenge Request
         </Button>
diff --git a/components/button.js b/components/button.js
index d7d9f528..32794267 100644
--- a/components/button.js
+++ b/components/button.js
@@ -2,42 +2,77 @@ import { forwardRef } from "react";
 import { MoonLoader } from "react-spinners";
 import { Box, Button as _Button } from "theme-ui";
 
+import Popup from "./popup";
 import Text from "./text";
 
 const Button = forwardRef(
-  ({ id, sx, type = "button", disabled, children, loading, ...rest }, ref) => (
-    <_Button
-      ref={ref}
-      id={id}
-      sx={{
-        backgroundImage({ colors: { primary, secondary } }) {
-          return `linear-gradient(90deg, ${primary} 0%, ${secondary} 100%)`;
-        },
-        ...sx,
-      }}
-      type={type}
-      disabled={disabled || !children || loading}
-      data-loading={loading}
-      {...rest}
-    >
-      <Text
-        id={id && `${id}-text`}
+  (
+    {
+      id,
+      sx,
+      type = "button",
+      disabled,
+      children,
+      loading,
+      disabledTooltip,
+      ...rest
+    },
+    ref
+  ) => {
+    const button = (
+      <_Button
+        ref={ref}
+        id={id}
         sx={{
-          alignItems: "center",
-          display: "flex",
-          justifyContent: "space-evenly",
-          minWidth: "100px",
+          backgroundImage({ colors: { primary, secondary } }) {
+            return `linear-gradient(90deg, ${primary} 0%, ${secondary} 100%)`;
+          },
+          ...sx,
         }}
+        type={type}
+        disabled={disabled || !children || loading}
+        data-loading={loading}
+        {...rest}
       >
-        {children}
-        {loading && (
-          <Box variant="buttons.primary.spinner">
-            <MoonLoader size={16} />
+        <Text
+          id={id && `${id}-text`}
+          sx={{
+            alignItems: "center",
+            display: "flex",
+            justifyContent: "space-evenly",
+            minWidth: "100px",
+          }}
+        >
+          {children}
+          {loading && (
+            <Box variant="buttons.primary.spinner">
+              <MoonLoader size={16} />
+            </Box>
+          )}
+        </Text>
+      </_Button>
+    );
+    return disabled && disabledTooltip ? (
+      <Popup
+        trigger={
+          <Box
+            sx={{
+              display: "inline-block",
+              height: sx?.height,
+              width: sx?.width,
+            }}
+          >
+            {button}
           </Box>
-        )}
-      </Text>
-    </_Button>
-  )
+        }
+        on={["focus", "hover"]}
+      >
+        {disabledTooltip}
+      </Popup>
+    ) : (
+      button
+    );
+  }
 );
 Button.displayName = "Button";
 export default Button;
diff --git a/components/theme-provider.js b/components/theme-provider.js
index 952354a4..8557b01c 100644
--- a/components/theme-provider.js
+++ b/components/theme-provider.js
@@ -105,6 +105,10 @@ const theme = merge(merge(base, toTheme(typographyTheme)), {
     secondary: {
       backgroundColor: "secondary",
       backgroundImage: "none !important",
+      "&:disabled:not([data-loading=true])": {
+        backgroundColor: "skeleton",
+        backgroundImage: "none !important",
+      },
     },
   },
   cards: {