Fix styles

glowingjade · Nov 1, 2024 · af59afd · af59afd
1 parent c89a897
commit af59afd
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 163 deletions.
diff --git a/src/components/chat-view/CreateTemplateDialog.tsx b/src/components/chat-view/CreateTemplateDialog.tsx
@@ -83,7 +83,7 @@ export default function CreateTemplateDialogContent({
           </Dialog.Description>
         </div>
 
-        <div className="smtcmp-dialog-input smtcmp-tailwind flex items-center gap-4">
+        <div className="smtcmp-dialog-input">
           <label>Name</label>
           <input
             type="text"
@@ -96,7 +96,6 @@ export default function CreateTemplateDialogContent({
                 onSubmit()
               }
             }}
-            className="smtcmp-tailwind flex-1"
           />
         </div>
 
@@ -109,7 +108,7 @@ export default function CreateTemplateDialogContent({
           />
         </div>
 
-        <div className="smtcmp-dialog-bottom smtcmp-tailwind flex justify-end">
+        <div className="smtcmp-dialog-footer">
           <button onClick={onSubmit}>Create template</button>
         </div>
 

diff --git a/styles.css b/styles.css
@@ -1,162 +1,3 @@
-.smtcmp-tailwind {
-  /* Flexbox & Grid */
-  &.flex {
-    display: flex;
-  }
-  &.flex-col {
-    flex-direction: column;
-  }
-  &.flex-row {
-    flex-direction: row;
-  }
-  &.flex-wrap {
-    flex-wrap: wrap;
-  }
-  &.flex-1 {
-    flex: 1 1 0;
-  }
-  &.items-center {
-    align-items: center;
-  }
-  &.items-start {
-    align-items: flex-start;
-  }
-  &.items-end {
-    align-items: flex-end;
-  }
-  &.justify-center {
-    justify-content: center;
-  }
-  &.justify-between {
-    justify-content: space-between;
-  }
-  &.justify-start {
-    justify-content: flex-start;
-  }
-  &.justify-end {
-    justify-content: flex-end;
-  }
-  &.gap-1 {
-    gap: var(--size-4-1);
-  }
-  &.gap-2 {
-    gap: var(--size-4-2);
-  }
-  &.gap-4 {
-    gap: var(--size-4-4);
-  }
-
-  /* Spacing */
-  &.p-1 {
-    padding: var(--size-4-1);
-  }
-  &.p-2 {
-    padding: var(--size-4-2);
-  }
-  &.p-4 {
-    padding: var(--size-4-4);
-  }
-  &.m-1 {
-    margin: var(--size-4-1);
-  }
-  &.m-2 {
-    margin: var(--size-4-2);
-  }
-  &.m-4 {
-    margin: var(--size-4-4);
-  }
-
-  /* Width & Height */
-  &.w-full {
-    width: 100%;
-  }
-  &.h-full {
-    height: 100%;
-  }
-
-  /* Display */
-  &.hidden {
-    display: none;
-  }
-  &.block {
-    display: block;
-  }
-  &.inline-block {
-    display: inline-block;
-  }
-  &.grid {
-    display: grid;
-  }
-
-  /* Text */
-  &.text-center {
-    text-align: center;
-  }
-  &.text-left {
-    text-align: left;
-  }
-  &.text-right {
-    text-align: right;
-  }
-  &.font-thin {
-    font-weight: var(--font-thin);
-  }
-  &.font-extralight {
-    font-weight: var(--font-extralight);
-  }
-  &.font-light {
-    font-weight: var(--font-light);
-  }
-  &.font-normal {
-    font-weight: var(--font-normal);
-  }
-  &.font-medium {
-    font-weight: var(--font-medium);
-  }
-  &.font-semibold {
-    font-weight: var(--font-semibold);
-  }
-  &.font-bold {
-    font-weight: var(--font-bold);
-  }
-  &.font-extrabold {
-    font-weight: var(--font-extrabold);
-  }
-
-  /* Colors */
-  &.text-muted {
-    color: var(--text-muted);
-  }
-  &.text-normal {
-    color: var(--text-normal);
-  }
-  &.text-faint {
-    color: var(--text-faint);
-  }
-
-  /* Position */
-  &.relative {
-    position: relative;
-  }
-  &.absolute {
-    position: absolute;
-  }
-  &.fixed {
-    position: fixed;
-  }
-
-  /* Overflow */
-  &.overflow-hidden {
-    overflow: hidden;
-  }
-  &.overflow-auto {
-    overflow: auto;
-  }
-  &.overflow-scroll {
-    overflow: scroll;
-  }
-}
-
 .smtcmp-chat-header {
   display: flex;
   justify-content: space-between;
@@ -963,8 +804,10 @@ button.smtcmp-chat-input-model-select {
     margin: 0;
   }
 
-  .smtcmp-dialog-bottom {
+  .smtcmp-dialog-footer {
     margin-top: var(--size-4-2);
+    display: flex;
+    justify-content: flex-end;
   }
 
   .smtcmp-dialog-close {