From 27459ae88b2d58b131f8c237a8224b338ebf640d Mon Sep 17 00:00:00 2001
From: Ammaar Aslam <ammaaraslam7@gmail.com>
Date: Sun, 7 Aug 2022 12:31:02 +0530
Subject: [PATCH] added more gradients and spaced copy btns to fit

---
 .../react-gradients/GradientComponent.js      |  6 +--
 src/plays/react-gradients/Readme.md           | 30 +++++++++++-
 src/plays/react-gradients/gradients.json      | 48 ++++++++++++++-----
 3 files changed, 68 insertions(+), 16 deletions(-)

diff --git a/src/plays/react-gradients/GradientComponent.js b/src/plays/react-gradients/GradientComponent.js
index 87073ce9e..43353ec8d 100644
--- a/src/plays/react-gradients/GradientComponent.js
+++ b/src/plays/react-gradients/GradientComponent.js
@@ -49,11 +49,11 @@ const GradientComponent = ({ index, name, css, tailwind, colors }) => {
     // Gradient Component
     <div
       key={index}
-      className="group relative h-72 w-[22rem] rounded-2xl transition-all duration-150 md:hover:scale-105 border-[6px] border-[#010326]"
+      className="group relative h-72 w-[22.5rem] rounded-2xl transition-all duration-150 md:hover:scale-105 border-[6px] border-[#010326]"
       style={{ background: css }}
     >
       {/* component containing buttons to copy code, colors of the gradient */}
-      <div className="absolute md:group-hover:flex md:hidden flex right-0 top-0 w-fit rounded-lg rounded-tl-none rounded-br-none bg-[#010326] transition-all duration-200 p-1 justify-center items-center border-2 border-[#010326]">
+      <div className="absolute md:group-hover:flex md:hidden flex right-0 top-0 w-fit rounded-lg rounded-tl-none rounded-br-none bg-[#010326] transition-all duration-200 py-1 px-2 justify-center items-center border-2 border-[#010326]">
         <GradientCopyButton handleOnClick={copyTailwind}>
           <SiTailwindcss />
         </GradientCopyButton>
@@ -81,7 +81,7 @@ export default GradientComponent;
 const GradientCopyButton = ({ children, handleOnClick }) => {
   return (
     <button
-      className="flex justify-center items-center text-center mx-1 p-2 text-gray-300 hover:text-white hover:bg-cyan-700 text-xl hover:bg-opacity-60 rounded-full transition-all duration-200"
+      className="flex justify-center items-center text-center p-2 text-gray-300 hover:text-white hover:bg-cyan-700 text-xl hover:bg-opacity-60 rounded-full transition-all duration-200"
       onClick={handleOnClick}
     >
       {children}
diff --git a/src/plays/react-gradients/Readme.md b/src/plays/react-gradients/Readme.md
index b1464b71f..f37156ee4 100644
--- a/src/plays/react-gradients/Readme.md
+++ b/src/plays/react-gradients/Readme.md
@@ -72,4 +72,32 @@ Learn more about `JSON` Objects - https://developer.mozilla.org/en-US/docs/Learn
 
 Thank you so much for taking the time to read this. If you like this play, please do share about it and tag me [@itsammaar_7](https://twitter.com/itsammaar_7) and [@ReactPlayIO](https://twitter.com/ReactPlayIO). Also star the [react-play repository](https://github.com/reactplay/react-play), it gives me and all the [contributors](https://github.com/reactplay/react-play#contributors-) a boost in confidence
 
-**Happy Coding!!**
\ No newline at end of file
+**Happy Coding!!**
+
+
+
+## Description
+
+This is a new play consisting of a collection of beautiful gradients that can be copied either as TailwindCSS or CSS code and use in their application. Users are also able to copy each color used in a gradient.
+
+Fixes #442
+
+## Type of change
+
+- [x] New feature (non-breaking change which adds functionality)
+
+# How Has This Been Tested?
+
+This play has been tested on my local machine. It creates no new errors and passes all unit tests.
+**Screenshots:**
+
+
+# Checklist:
+
+- [x] I have performed a self-review of my own code
+- [x] I have commented my code, particularly in hard-to-understand areas
+- [x] I have made corresponding changes to the documentation
+- [x] My changes generate no new warnings
+- [ ] I have added tests that prove my fix is effective or that my feature works
+- [x] New and existing unit tests pass locally with my changes
+- [x] Any dependent changes have been merged and published in downstream modules
diff --git a/src/plays/react-gradients/gradients.json b/src/plays/react-gradients/gradients.json
index 06d093d33..e59ffe097 100644
--- a/src/plays/react-gradients/gradients.json
+++ b/src/plays/react-gradients/gradients.json
@@ -1,50 +1,74 @@
 [
-    {
-        "name": "Midnight",
-        "css": "linear-gradient(to right, #1d4ed8, #1e40af, #111827)",
-        "tailwind": "bg-gradient-to-r from-blue-700 via-blue-800 to-gray-900",
-        "colors": ["#1d4ed8", "#1e40af", "#111827"]
-    },
     {
         "name": "Emerald",
         "css": "linear-gradient(to right, #10b981, #65a30d)",
         "tailwind": "bg-gradient-to-r from-emerald-500 to-lime-600",
         "colors": ["#10b981", "#65a30d"]
-
     },
     {
         "name": "Horizon",
         "css": "linear-gradient(#f97316, #fde047)",
         "tailwind": "bg-gradient-to-b from-orange-500 to-yellow-300",
         "colors": ["#f97316", "#fde047"]
-
+    },
+    {
+        "name": "Green Apple",
+        "css": "linear-gradient(to right, #22c55e, #15803d)",
+        "tailwind": "bg-gradient-to-r from-green-500 to-green-700",
+        "colors": ["#22c55e", "#15803d"]
+    },
+    {
+        "name": "Deep Blue",
+        "css": "linear-gradient(to right, #2563eb, #1e40af, #1e3a8a)",
+        "tailwind": "bg-gradient-to-r from-blue-600 via-blue-800 to-blue-900",
+        "colors": ["#2563eb", "#1e40af", "#1e3a8a"]
     },
     {
         "name": "Dawn",
         "css": "linear-gradient(to right, #fb7185, #fdba74)",
         "tailwind": "bg-gradient-to-r from-rose-400 to-orange-300",
         "colors": ["#fb7185", "#fdba74"]
-
+    },
+    {
+        "name": "Midnight",
+        "css": "linear-gradient(to right, #1d4ed8, #1e40af, #111827)",
+        "tailwind": "bg-gradient-to-r from-blue-700 via-blue-800 to-gray-900",
+        "colors": ["#1d4ed8", "#1e40af", "#111827"]
     },
     {
         "name": "Coral",
         "css": "linear-gradient(to right, #60a5fa, #34d399)",
         "tailwind": "bg-gradient-to-r from-blue-400 to-emerald-400",
         "colors": ["#60a5fa", "#34d399"]
-
     },
     {
         "name": "Flamingo",
         "css": "linear-gradient(to right, #f472b6, #db2777)",
         "tailwind": "bg-gradient-to-r from-pink-400 to-pink-600",
         "colors": ["#f472b6", "#db2777"]
-
     },
     {
         "name": "Ocean",
         "css": "linear-gradient(to right, #a5f3fc, #22d3ee)",
         "tailwind": "bg-gradient-to-r from-cyan-200 to-cyan-400",
         "colors": ["#a5f3fc", "#22d3ee"]
-
+    },
+    {
+        "name": "Metal",
+        "css": "conic-gradient(at right center, #c7d2fe, #475569, #c7d2fe)",
+        "tailwind": "bg-conic-to-r from-indigo-200 via-slate-600 to-indigo-200",
+        "colors": ["#c7d2fe", "#475569", "#c7d2fe"]
+    },
+    {
+        "name": "Green Galaxy",
+        "css": "radial-gradient(at left center, #06b6d4, #047857, #dbeafe)",
+        "tailwind": "bg-radial-at-l from-cyan-500 via-emerald-700 to-blue-100",
+        "colors": ["#06b6d4", "#047857", "#dbeafe"]
+    },
+    {
+        "name": "Pure Blue Shade",
+        "css": "conic-gradient(at left top, #14b8a6, #4338ca, #1f2937)",
+        "tailwind": "bg-conic-to-tl from-teal-500 via-indigo-700 to-gray-800",
+        "colors": ["#14b8a6", "#4338ca", "#1f2937"]
     }
 ]
\ No newline at end of file