From fda5c6fdf74e6221e13449a5669dc44392d2c5bc Mon Sep 17 00:00:00 2001
From: David Luzar <5153846+dwelle@users.noreply.github.com>
Date: Fri, 24 Nov 2023 16:32:00 +0100
Subject: [PATCH] fix: t2c settings dialog spacing for apps that use CSS resets
 (#7337)

---
 src/components/InlineIcon.tsx    | 15 ++++++++++
 src/components/MagicSettings.tsx | 47 +++++++++++---------------------
 src/components/Paragraph.tsx     | 10 +++++++
 src/css/styles.scss              |  4 +++
 4 files changed, 45 insertions(+), 31 deletions(-)
 create mode 100644 src/components/InlineIcon.tsx
 create mode 100644 src/components/Paragraph.tsx

diff --git a/src/components/InlineIcon.tsx b/src/components/InlineIcon.tsx
new file mode 100644
index 00000000..7d967232
--- /dev/null
+++ b/src/components/InlineIcon.tsx
@@ -0,0 +1,15 @@
+export const InlineIcon = ({ icon }: { icon: JSX.Element }) => {
+  return (
+    <span
+      style={{
+        width: "1em",
+        margin: "0 0.5ex 0 0.5ex",
+        display: "inline-block",
+        lineHeight: 0,
+        verticalAlign: "middle",
+      }}
+    >
+      {icon}
+    </span>
+  );
+};
diff --git a/src/components/MagicSettings.tsx b/src/components/MagicSettings.tsx
index 2f2dc9ba..190d7b24 100644
--- a/src/components/MagicSettings.tsx
+++ b/src/components/MagicSettings.tsx
@@ -2,28 +2,14 @@ import { useState } from "react";
 import { Dialog } from "./Dialog";
 import { TextField } from "./TextField";
 import { MagicIcon, OpenAIIcon } from "./icons";
-
-import "./MagicSettings.scss";
 import { FilledButton } from "./FilledButton";
 import { CheckboxItem } from "./CheckboxItem";
 import { KEYS } from "../keys";
 import { useUIAppState } from "../context/ui-appState";
+import { InlineIcon } from "./InlineIcon";
+import { Paragraph } from "./Paragraph";
 
-const InlineButton = ({ icon }: { icon: JSX.Element }) => {
-  return (
-    <span
-      style={{
-        width: "1em",
-        margin: "0 0.5ex 0 0.5ex",
-        display: "inline-block",
-        lineHeight: 0,
-        verticalAlign: "middle",
-      }}
-    >
-      {icon}
-    </span>
-  );
-};
+import "./MagicSettings.scss";
 
 export const MagicSettings = (props: {
   openAIKey: string | null;
@@ -70,18 +56,17 @@ export const MagicSettings = (props: {
       className="MagicSettings"
       autofocus={false}
     >
-      <p
+      <Paragraph
         style={{
           display: "inline-flex",
           alignItems: "center",
           marginBottom: 0,
         }}
       >
-        For the diagram-to-code feature we use{" "}
-        <InlineButton icon={OpenAIIcon} />
+        For the diagram-to-code feature we use <InlineIcon icon={OpenAIIcon} />
         OpenAI.
-      </p>
-      <p>
+      </Paragraph>
+      <Paragraph>
         While the OpenAI API is in beta, its use is strictly limited — as such
         we require you use your own API key. You can create an{" "}
         <a
@@ -100,11 +85,11 @@ export const MagicSettings = (props: {
           generate your own API key
         </a>
         .
-      </p>
-      <p>
+      </Paragraph>
+      <Paragraph>
         Your OpenAI key does not leave the browser, and you can also set your
         own limit in your OpenAI account dashboard if needed.
-      </p>
+      </Paragraph>
       <TextField
         isRedacted
         value={keyInputValue}
@@ -117,22 +102,22 @@ export const MagicSettings = (props: {
         selectOnRender
         onKeyDown={(event) => event.key === KEYS.ENTER && onConfirm()}
       />
-      <p>
+      <Paragraph>
         By default, your API token is not persisted anywhere so you'll need to
         insert it again after reload. But, you can persist locally in your
         browser below.
-      </p>
+      </Paragraph>
 
       <CheckboxItem checked={shouldPersist} onChange={setShouldPersist}>
         Persist API key in browser storage
       </CheckboxItem>
 
-      <p>
-        Once API key is set, you can use the <InlineButton icon={MagicIcon} />{" "}
+      <Paragraph>
+        Once API key is set, you can use the <InlineIcon icon={MagicIcon} />{" "}
         tool to wrap your elements in a frame that will then allow you to turn
         it into code. This dialog can be accessed using the <b>AI Settings</b>{" "}
-        <InlineButton icon={OpenAIIcon} />.
-      </p>
+        <InlineIcon icon={OpenAIIcon} />.
+      </Paragraph>
 
       <FilledButton
         className="MagicSettings__confirm"
diff --git a/src/components/Paragraph.tsx b/src/components/Paragraph.tsx
new file mode 100644
index 00000000..7b3b2ff1
--- /dev/null
+++ b/src/components/Paragraph.tsx
@@ -0,0 +1,10 @@
+export const Paragraph = (props: {
+  children: React.ReactNode;
+  style?: React.CSSProperties;
+}) => {
+  return (
+    <p className="excalidraw__paragraph" style={props.style}>
+      {props.children}
+    </p>
+  );
+};
diff --git a/src/css/styles.scss b/src/css/styles.scss
index 032c9abb..341370f2 100644
--- a/src/css/styles.scss
+++ b/src/css/styles.scss
@@ -734,4 +734,8 @@
     letter-spacing: 0.6px;
     font-family: "Assistant";
   }
+
+  .excalidraw__paragraph {
+    margin: 1rem 0;
+  }
 }