From 3903cc38e9c10357ed674704e10697cc8df2c034 Mon Sep 17 00:00:00 2001
From: Specy <specy.dev@gmail.com>
Date: Mon, 14 Feb 2022 00:21:25 +0100
Subject: [PATCH 1/2] Fixed pointer fill not being aligned in the center

---
 src/css/styles.css | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/css/styles.css b/src/css/styles.css
index b0190dbb..13841f73 100644
--- a/src/css/styles.css
+++ b/src/css/styles.css
@@ -21,13 +21,10 @@
 .react-colorful__pointer-fill,
 .react-colorful__alpha-gradient {
   content: "";
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
   pointer-events: none;
   border-radius: inherit;
+  width: 90%;
+  height: 90%;
 }
 
 /* Improve elements rendering on light backgrounds */
@@ -83,6 +80,9 @@
   border: 2px solid #fff;
   border-radius: 50%;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .react-colorful__interactive:focus .react-colorful__pointer {

From f980bdc6527766871d92ebc749444d72ee52c6c0 Mon Sep 17 00:00:00 2001
From: Specy <specy.dev@gmail.com>
Date: Fri, 29 Jul 2022 16:48:29 +0200
Subject: [PATCH 2/2] Using border instead of flex

---
 src/css/styles.css | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/src/css/styles.css b/src/css/styles.css
index 13841f73..828902e9 100644
--- a/src/css/styles.css
+++ b/src/css/styles.css
@@ -17,16 +17,16 @@
   background-image: linear-gradient(to top, #000, rgba(0, 0, 0, 0)),
     linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
 }
-
 .react-colorful__pointer-fill,
 .react-colorful__alpha-gradient {
-  content: "";
   pointer-events: none;
   border-radius: inherit;
-  width: 90%;
-  height: 90%;
+  width: 100%;
+  height: 100%;
+}
+.react-colorful__pointer-fill{
+  border: solid 2px #fff;
 }
-
 /* Improve elements rendering on light backgrounds */
 .react-colorful__alpha-gradient,
 .react-colorful__saturation {
@@ -77,12 +77,8 @@
   height: 28px;
   transform: translate(-50%, -50%);
   background-color: #fff;
-  border: 2px solid #fff;
   border-radius: 50%;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-  display: flex;
-  justify-content: center;
-  align-items: center;
 }
 
 .react-colorful__interactive:focus .react-colorful__pointer {