On-hover will show hexcode

cksharma11 · Jan 21, 2021 · 77df33a · 77df33a
1 parent d7f11fc
commit 77df33a
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 7 deletions.
diff --git a/src/components/ColorBox/ColorBox.js b/src/components/ColorBox/ColorBox.js
@@ -1,23 +1,27 @@
-import React, { useState } from "react";
-import Clipboard from "react-clipboard.js";
+import React, { useState } from 'react';
+import Clipboard from 'react-clipboard.js';
 
 const ColorBox = ({ hexCode, colorName }) => {
   const [status, setStatus] = useState(colorName);
+  const [activeClass, setActiveClass] = useState('div-colorbox');
   const setCopySuccess = () => {
-    setStatus("Copied");
+    setStatus('Copied');
+    setActiveClass('copied');
     setTimeout(() => {
       setStatus(colorName);
+      setActiveClass('div-colorbox');
     }, 1000);
   };
 
   return (
     <Clipboard
       data-clipboard-text={hexCode}
-      style={{ background: "none", border: "none", fontFamily: "inherit" }}
+      style={{ background: 'none', border: 'none', fontFamily: 'inherit' }}
     >
       <div
         id={hexCode}
-        className="div-colorbox"
+        className={activeClass}
+        data-hover={hexCode}
         style={{ background: `${hexCode}` }}
         onClick={setCopySuccess}
       >

diff --git a/src/index.css b/src/index.css
@@ -2,7 +2,7 @@ html,
 body {
   padding: 0;
   margin: 0;
-  font-family: "Cinzel", serif;
+  font-family: 'Cinzel', serif;
 }
 
 .div-header {
@@ -31,7 +31,8 @@ body {
   background: white;
 }
 
-.div-colorbox {
+.div-colorbox,
+.copied {
   width: 250px;
   height: 180px;
   display: flex;
@@ -49,6 +50,20 @@ body {
   transition: transform 0.1s;
   transform: scale(1.1);
   box-shadow: 0px 0px 10px gray;
+  font-size: 0;
+}
+
+.copied:hover {
+  cursor: pointer;
+  transition: transform 0.1s;
+  transform: scale(1.1);
+  box-shadow: 0px 0px 10px gray;
+  font-size: 20px;
+}
+
+.div-colorbox:hover:before {
+  font-size: 20px;
+  content: attr(data-hover);
 }
 
 .div-color-container {
@@ -71,3 +86,9 @@ body {
 button:focus {
   outline: none;
 }
+
+.color-box {
+  background: 'none';
+  border: 'none';
+  font-family: 'inherit';
+}