From dd7b8844309b29a7f299f148b3d2087f6b2145a0 Mon Sep 17 00:00:00 2001
From: ankiiitraj <ankitatiiitr@gmail.com>
Date: Thu, 1 Oct 2020 14:42:46 +0530
Subject: [PATCH] Added a prop for light mode in the tooltip

updated Props table on Readme

using typescript string literals

fixes
---
 README.md         |  1 +
 src/lib/index.tsx | 16 ++++++++++------
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index 71c7919..7708797 100644
--- a/README.md
+++ b/README.md
@@ -50,6 +50,7 @@ You can customize almost every aspect of this component using the below props, o
 |  Name 	|   Type	|  Default 	|   Description	|
 |:-:	|---	|---	|---	|
 | email  	|  string 	|  none 	|  The email to be copied. 	|
+| theme  	|  string 	|  dark 	|  Use "light" for light background. 	|
 | children  	|  ReactNode  	|  null 	|  Use this if you want to use some custom component inside the anchor tag. 	|
 | defaultTooltip  	|   string	|   "Copy email address"	|   Text shown in the tooltip when the user hovers over the link.	|
 | copiedTooltip 	|   string	|   "Copied to clipboard!"	|   Text shown in the tooltip when the user clicks on the link and the text is copied to clipboard.	|
diff --git a/src/lib/index.tsx b/src/lib/index.tsx
index 5313063..b392892 100644
--- a/src/lib/index.tsx
+++ b/src/lib/index.tsx
@@ -1,5 +1,7 @@
 import React, { MouseEvent } from "react";
 
+type theme = "dark" | "light";
+
 const copyToClipboard = (str: string) => {
   const el = document.createElement("textarea"); // Create a <textarea> element
   el.value = str; // Set its value to the string that you want copied
@@ -25,7 +27,7 @@ const containerBaseStyles: React.CSSProperties = {
   position: "relative",
 };
 
-const tooltipBaseStyles: React.CSSProperties = {
+const tooltipBaseStyles = (theme: string): React.CSSProperties => ({
   bottom: "26px",
   maxWidth: "fit-content",
   position: "absolute",
@@ -36,15 +38,15 @@ const tooltipBaseStyles: React.CSSProperties = {
   right: "0px",
   boxShadow: "0px 15px 25px rgba(0,0,0,.1),0px 10px 60px rgba(0,0,0,.1)",
   fontSize: "12px",
-  backgroundColor: "black",
-  color: "white",
+  backgroundColor: `${theme === 'light' ? 'white' : 'black'}`,
+  color: `${theme === 'light' ? 'black' : 'white'}`,
   padding: "6px 8px",
   borderRadius: "5px",
   opacity: 0,
   transform: "translateY(-5px)",
   visibility: "hidden",
   transition: "all 0.2s ease-in-out",
-};
+});
 
 const toolTipVisibleStyles: React.CSSProperties = {
   opacity: 1,
@@ -54,6 +56,7 @@ const toolTipVisibleStyles: React.CSSProperties = {
 
 const CopyMailTo = ({
   email,
+  theme = "dark",
   children = null,
   defaultTooltip = "Copy email address",
   copiedTooltip = "Copied to clipboard!",
@@ -62,6 +65,7 @@ const CopyMailTo = ({
   anchorStyles = {},
 }: {
   email: string;
+  theme?: theme;
   children?: React.ReactNode;
   defaultTooltip?: string;
   copiedTooltip?: string;
@@ -101,9 +105,9 @@ const CopyMailTo = ({
   };
 
   const allTooltipStyles = {
-    ...tooltipBaseStyles,
+    ...tooltipBaseStyles(theme),
     ...tooltipStyles,
-    ...(showTooltip && toolTipVisibleStyles),
+    ...(showTooltip && toolTipVisibleStyles)
   };
 
   return (