From cbfb47f76ca53a81c408c240c6a53b84ad8e1373 Mon Sep 17 00:00:00 2001
From: Kira Miller <31229189+kiram15@users.noreply.github.com>
Date: Fri, 11 Aug 2023 09:05:19 -0600
Subject: [PATCH] fix: color picker error message fix (#2472)

* fix: color picker error message fix

* fix: PR review
---
 src/ColorPicker/index.jsx  | 18 ++++++++++--------
 src/ColorPicker/index.scss | 16 +++++++++++++---
 2 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/src/ColorPicker/index.jsx b/src/ColorPicker/index.jsx
index 9ffef29a0d..1cef1c336b 100644
--- a/src/ColorPicker/index.jsx
+++ b/src/ColorPicker/index.jsx
@@ -67,14 +67,16 @@ function ColorPicker({
         >
           <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"
-            />
+            <div>
+              <Form.Label className="pgn__hex-label">Hex</Form.Label>
+              <Form.Control
+                className="pgn__hex-field"
+                isInvalid={!hexValid}
+                value={color}
+                onChange={(e) => validateHex(e.target.value)}
+                data-testid="hex-input"
+              />
+            </div>
             {!hexValid && (
               <Form.Control.Feedback
                 className="pgn__color-error"
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;
     }