fix: css in catalogue

Author: Elessar1802

src/Common/RJSF/rjsfForm.scss

@@ -1,7 +1,11 @@
 .rjsf-form-template {
-    &__container {
-        margin-right: 28px;
+    &__container > div:first-child {
         padding: 20px;
+        margin-right: 28px;
+    }
+
+    &__field, &__field--error {
+        grid-template-columns: 250px 1fr;
 
         input.form__input {
             padding: 6px 8px;
@@ -38,16 +42,18 @@
             background: transparent;
             z-index: -1;
             position: absolute;
+            /* NOTE: this overlay is exactly 6px wider & taller on all sides
+             * therefore the 12px (6 + 6) on height & width */
             height: calc(100% + 12px);
             width: calc(100% + 12px);
             content: '';
             transition: all 100ms ease-out;
         }
 
         & > .remove-btn__container:hover {
-            stroke: var(--R500);
+            fill: var(--R500);
             path {
-                stroke: var(--R500);
+                fill: var(--R500);
             }
         }
 

src/Common/RJSF/templates/ButtonTemplates/RemoveButton.tsx

@@ -21,6 +21,6 @@ import { ReactComponent as CrossIcon } from '../../../../Assets/Icon/ic-cross.sv
 
 export const RemoveButton = ({ icon, iconType, registry, uiSchema, ...props }: IconButtonProps) => (
     <button {...props} type="button" className="dc__outline-none-imp p-0 dc__transparent flex cursor" title="Remove">
-        <CrossIcon className="icon-dim-16 scn-6" />
+        <CrossIcon className="icon-dim-16 fcn-6" />
     </button>
 )

src/Common/RJSF/templates/FieldErrorTemplate.tsx

@@ -24,7 +24,7 @@ export const FieldErrorTemplate = ({ errors = [], idSchema }: FieldErrorProps) =
 
     return (
         errors.length > 0 && (
-            <span className="display-grid rjsf-form-template__field dc__gap-12" id={id}>
+            <span className="display-grid rjsf-form-template__field--error dc__gap-12" id={id}>
                 {errors
                     .filter((elem) => !!elem)
                     .map((error, index: number) => (