Style dialog

glowingjade · Nov 1, 2024 · cf3d3b2 · cf3d3b2
1 parent 87e182a
commit cf3d3b2
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 15 deletions.
diff --git a/src/components/chat-view/CreateTemplateDialog.tsx b/src/components/chat-view/CreateTemplateDialog.tsx
@@ -74,15 +74,17 @@ export default function CreateTemplateDialogContent({
   return (
     <Dialog.Portal container={container}>
       <Dialog.Content className="smtcmp-dialog-content">
-        <Dialog.Title className="smtcmp-dialog-title">
-          Create Template
-        </Dialog.Title>
-        <Dialog.Description className="smtcmp-dialog-description">
-          Create a new template from the selected nodes
-        </Dialog.Description>
+        <div className="smtcmp-dialog-header">
+          <Dialog.Title className="smtcmp-dialog-title">
+            Create Template
+          </Dialog.Title>
+          <Dialog.Description className="smtcmp-dialog-description">
+            Create a new template from the selected nodes
+          </Dialog.Description>
+        </div>
 
-        <div className="smtcmp-tailwind flex items-center gap-4">
-          <div>Name</div>
+        <div className="smtcmp-dialog-input smtcmp-tailwind flex items-center gap-4">
+          <label>Name</label>
           <input
             type="text"
             value={templateName}
@@ -107,7 +109,7 @@ export default function CreateTemplateDialogContent({
           />
         </div>
 
-        <div className="smtcmp-tailwind flex justify-end">
+        <div className="smtcmp-dialog-bottom smtcmp-tailwind flex justify-end">
           <button onClick={onSubmit}>Create Template</button>
         </div>
 

diff --git a/styles.css b/styles.css
@@ -350,7 +350,6 @@ button:not(.clickable-icon).smtcmp-chat-list-dropdown {
   font-size: var(--font-ui-small);
   border-radius: var(--radius-s);
   outline: none;
-  margin-top: var(--size-4-1);
 
   &:focus-within,
   &:focus,
@@ -920,34 +919,54 @@ button.smtcmp-chat-input-model-select {
 
 .smtcmp-dialog-content {
   position: fixed;
-  left: 50%;
+  left: calc(50% - var(--size-4-4));
   top: 50%;
   z-index: 50;
   display: grid;
-  width: 100%;
+  width: calc(100% - var(--size-4-8));
   max-width: 32rem;
   transform: translate(-50%, -50%);
-  gap: var(--size-4-3);
+  gap: var(--size-4-2);
   border: var(--border-width) solid var(--background-modifier-border);
   background-color: var(--background-secondary);
-  padding: var(--size-4-6);
+  padding: var(--size-4-5);
   transition-duration: 200ms;
   border-radius: var(--radius-m);
   box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  margin: var(--size-4-4);
+
+  .smtcmp-dialog-header {
+    margin-bottom: var(--size-4-2);
+    display: grid;
+    gap: var(--size-2-3);
+  }
 
   .smtcmp-dialog-title {
-    font-size: var(--font-ui-larger);
+    font-size: var(--font-ui-medium);
     font-weight: var(--font-semibold);
     line-height: var(--line-height-tight);
     margin: 0;
   }
 
+  .smtcmp-dialog-input {
+    display: grid;
+    gap: var(--size-4-1);
+
+    & label {
+      font-size: var(--font-ui-smaller);
+    }
+  }
+
   .smtcmp-dialog-description {
     font-size: var(--font-ui-small);
     color: var(--text-muted);
     margin: 0;
   }
 
+  .smtcmp-dialog-bottom {
+    margin-top: var(--size-4-2);
+  }
+
   .smtcmp-dialog-close {
     position: absolute;
     right: var(--size-4-4);