fix: PR review

openedx · Aug 9, 2023 · f911384 · f911384
1 parent e94d9f8
commit f911384
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 9 deletions.
diff --git 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
@@ -33,18 +33,28 @@
 
 .pgn__color-error {
   font-size: 70%;
+  flex: 1 1 auto;
+  margin-left: 0.5rem;
+}
+
+.pgn__hex-label {
+  font-weight: bold;
+  font-size: $h5-mobile-font-size;
+  padding: 0.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;
     }