From 54617c10bad9314d97c502553394546b50c24d31 Mon Sep 17 00:00:00 2001
From: Kira Miller <kira.miller15@yahoo.com>
Date: Mon, 24 Jul 2023 22:10:55 +0000
Subject: [PATCH 1/2] fix: color picker error message fix

---
 src/ColorPicker/index.jsx | 24 +++++++++++++-----------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/ColorPicker/index.jsx b/src/ColorPicker/index.jsx
index 9ffef29a0d..1c81d0ad5b 100644
--- a/src/ColorPicker/index.jsx
+++ b/src/ColorPicker/index.jsx
@@ -49,7 +49,7 @@ function ColorPicker({
               `pgn__color-picker-${size}`,
             )}
             style={{
-              ...(color && hexValid ? { background: `${color}` } : {}),
+              ...(color && hexValid ? { background: `${color} !important` } : {}),
             }}
             onClick={open}
           />
@@ -66,18 +66,20 @@ function ColorPicker({
           style={{ textAlign: 'start' }}
         >
           <HexColorPicker color={color || ''} onChange={setColor} />
-          <Form.Group className="pgn__hex-form" size="sm">
-            <h5>Hex</h5>
-            <Form.Control
-              className="form-field"
-              isInvalid={!hexValid}
-              value={color}
-              onChange={(e) => validateHex(e.target.value)}
-              data-testid="hex-input"
-            />
+          <Form.Group className="pgn__hex-form flex-wrap" size="sm">
+            <div className="d-inline-flex">
+              <h5>Hex</h5>
+              <Form.Control
+                className="form-field"
+                isInvalid={!hexValid}
+                value={color}
+                onChange={(e) => validateHex(e.target.value)}
+                data-testid="hex-input"
+              />
+            </div>
             {!hexValid && (
               <Form.Control.Feedback
-                className="pgn__color-error"
+                className="pgn__color-error flex-fill ml-2"
                 type="invalid"
               >
                 Colors must be in hexadecimal format.

From 8ef3068db45001982f6a24846fff0c10bececfae Mon Sep 17 00:00:00 2001
From: Kira Miller <kira.miller15@yahoo.com>
Date: Wed, 9 Aug 2023 06:56:35 +0000
Subject: [PATCH 2/2] fix: PR review

---
 src/ColorPicker/index.jsx  | 12 ++++++------
 src/ColorPicker/index.scss | 16 +++++++++++++---
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/ColorPicker/index.jsx b/src/ColorPicker/index.jsx
index 1c81d0ad5b..1cef1c336b 100644
--- a/src/ColorPicker/index.jsx
+++ b/src/ColorPicker/index.jsx
@@ -49,7 +49,7 @@ function ColorPicker({
               `pgn__color-picker-${size}`,
             )}
             style={{
-              ...(color && hexValid ? { background: `${color} !important` } : {}),
+              ...(color && hexValid ? { background: `${color}` } : {}),
             }}
             onClick={open}
           />
@@ -66,11 +66,11 @@ function ColorPicker({
           style={{ textAlign: 'start' }}
         >
           <HexColorPicker color={color || ''} onChange={setColor} />
-          <Form.Group className="pgn__hex-form flex-wrap" size="sm">
-            <div className="d-inline-flex">
-              <h5>Hex</h5>
+          <Form.Group className="pgn__hex-form" size="sm">
+            <div>
+              <Form.Label className="pgn__hex-label">Hex</Form.Label>
               <Form.Control
-                className="form-field"
+                className="pgn__hex-field"
                 isInvalid={!hexValid}
                 value={color}
                 onChange={(e) => validateHex(e.target.value)}
@@ -79,7 +79,7 @@ function ColorPicker({
             </div>
             {!hexValid && (
               <Form.Control.Feedback
-                className="pgn__color-error flex-fill ml-2"
+                className="pgn__color-error"
                 type="invalid"
               >
                 Colors must be in hexadecimal format.
diff --git a/src/ColorPicker/index.scss b/src/ColorPicker/index.scss
index a9139304b1..9504df4dfc 100644
--- a/src/ColorPicker/index.scss
+++ b/src/ColorPicker/index.scss
@@ -33,18 +33,28 @@
 
 .pgn__color-error {
   font-size: 70%;
+  flex: 1 1 auto;
+  margin-left: .5rem;
+}
+
+.pgn__hex-label {
+  font-weight: bold;
+  font-size: $h5-mobile-font-size;
+  padding: .5rem;
+  margin-bottom: 0 !important;
 }
 
 .pgn__hex-form {
   display: flex;
   max-width: 180px;
   margin: 5px;
+  flex-wrap: wrap;
 
-  h5 {
-    margin: 10px;
+  div {
+    display: inline-flex;
   }
 
-  .form-field {
+  .pgn__hex-field {
     @media (min-width: map-get($grid-breakpoints, "sm")) {
       margin-inline-end: 0;
     }