From 879dd2f2d35c3331a635c909a6880d74123eb22d Mon Sep 17 00:00:00 2001
From: Dennis Kigen <kigen.work@gmail.com>
Date: Mon, 31 Jul 2023 15:34:19 +0100
Subject: [PATCH] (refactor) Refactor some styles

---
 .../form-editor/form-editor.component.tsx           |  6 +-----
 src/components/form-editor/form-editor.scss         |  6 ++++++
 .../interactive-builder.component.tsx               | 13 +++----------
 .../interactive-builder/interactive-builder.scss    |  5 +++++
 .../schema-editor/schema-editor.component.tsx       |  2 +-
 src/components/schema-editor/schema-editor.scss     |  5 +++++
 6 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/src/components/form-editor/form-editor.component.tsx b/src/components/form-editor/form-editor.component.tsx
index 37f23c9..2cf08b3 100644
--- a/src/components/form-editor/form-editor.component.tsx
+++ b/src/components/form-editor/form-editor.component.tsx
@@ -37,11 +37,7 @@ type Status = "idle" | "formLoaded" | "schemaLoaded";
 const Error = ({ error, title }: ErrorProps) => {
   return (
     <InlineNotification
-      style={{
-        minWidth: "100%",
-        margin: "0rem",
-        padding: "0rem",
-      }}
+      className={styles.errorNotification}
       kind={"error"}
       lowContrast
       subtitle={error?.message}
diff --git a/src/components/form-editor/form-editor.scss b/src/components/form-editor/form-editor.scss
index 6cde582..21d1bed 100644
--- a/src/components/form-editor/form-editor.scss
+++ b/src/components/form-editor/form-editor.scss
@@ -31,3 +31,9 @@
   margin-left: 0;
   margin-right: 0;
 }
+
+.errorNotification {
+  min-width: 100%;
+  margin: 0;
+  padding: 0;
+}
diff --git a/src/components/interactive-builder/interactive-builder.component.tsx b/src/components/interactive-builder/interactive-builder.component.tsx
index 8ad57b0..4863104 100644
--- a/src/components/interactive-builder/interactive-builder.component.tsx
+++ b/src/components/interactive-builder/interactive-builder.component.tsx
@@ -374,7 +374,7 @@ const InteractiveBuilder: React.FC<InteractiveBuilderProps> = ({
       {schema?.pages?.length
         ? schema.pages.map((page, pageIndex) => (
             <div className={styles.editableFieldsContainer}>
-              <div style={{ display: "flex", alignItems: "center" }}>
+              <div className={styles.flexContainer}>
                 <div className={styles.editorContainer}>
                   <EditableValue
                     elementType="page"
@@ -410,9 +410,7 @@ const InteractiveBuilder: React.FC<InteractiveBuilderProps> = ({
                     <Accordion>
                       <AccordionItem title={section.label}>
                         <>
-                          <div
-                            style={{ display: "flex", alignItems: "center" }}
-                          >
+                          <div className={styles.flexContainer}>
                             <div className={styles.editorContainer}>
                               <EditableValue
                                 elementType="section"
@@ -446,12 +444,7 @@ const InteractiveBuilder: React.FC<InteractiveBuilderProps> = ({
                             {section.questions?.length ? (
                               section.questions.map(
                                 (question, questionIndex) => (
-                                  <div
-                                    style={{
-                                      display: "flex",
-                                      alignItems: "center",
-                                    }}
-                                  >
+                                  <div className={styles.flexContainer}>
                                     <div className={styles.editorContainer}>
                                       <p className={styles.questionLabel}>
                                         {question.label}
diff --git a/src/components/interactive-builder/interactive-builder.scss b/src/components/interactive-builder/interactive-builder.scss
index 10b8156..78c51d0 100644
--- a/src/components/interactive-builder/interactive-builder.scss
+++ b/src/components/interactive-builder/interactive-builder.scss
@@ -11,6 +11,11 @@
   }
 }
 
+.flexContainer {
+  display: flex;
+  align-items: center;
+}
+
 .helperText {
   @include type.type-style('body-compact-01');
   margin: 1rem 0rem;
diff --git a/src/components/schema-editor/schema-editor.component.tsx b/src/components/schema-editor/schema-editor.component.tsx
index 7c2ee38..139d5fc 100644
--- a/src/components/schema-editor/schema-editor.component.tsx
+++ b/src/components/schema-editor/schema-editor.component.tsx
@@ -167,7 +167,7 @@ const SchemaEditor: React.FC<SchemaEditorProps> = ({
       ) : null}
 
       <AceEditor
-        style={{ height: "100vh", width: "100%" }}
+        className={styles.editorContainer}
         mode="json"
         theme="textmate"
         name="schemaEditor"
diff --git a/src/components/schema-editor/schema-editor.scss b/src/components/schema-editor/schema-editor.scss
index 404d2fb..57dadcd 100644
--- a/src/components/schema-editor/schema-editor.scss
+++ b/src/components/schema-editor/schema-editor.scss
@@ -12,6 +12,11 @@
   }
 }
 
+.editorContainer {
+  height: 100vh;
+  width: 100%;
+}
+
 .errorContainer {
   @include type.type-style("body-compact-02");
   background-color: colors.$red-20;