(refactor) Refactor some styles

openmrs · Jul 31, 2023 · 879dd2f · 879dd2f
1 parent cce74ba
commit 879dd2f
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 16 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -12,6 +12,11 @@
   }
 }
 
+.editorContainer {
+  height: 100vh;
+  width: 100%;
+}
+
 .errorContainer {
   @include type.type-style("body-compact-02");
   background-color: colors.$red-20;