Merge pull request #351 from weni-ai/fix/chatgpt-modal-height

[FLOWS-228] Fix: ChatGPT modal height
weni-ai · Dec 1, 2023 · bca4514 · bca4514
2 parents aba107e + 868c29e
commit bca4514
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 20 deletions.
diff --git a/src/components/config/external/chatgpt/Setup.vue b/src/components/config/external/chatgpt/Setup.vue
@@ -5,11 +5,10 @@
     @close="closePopUp"
     @click.stop
     :closeIcon="false"
+    :text="$t('ChatGPT.setup.title')"
+    :description="$t('ChatGPT.setup.description')"
   >
     <div slot="message" class="chatgpt-modal__content">
-      <span class="chatgpt-modal__content__title">{{ $t('ChatGPT.setup.title') }}</span>
-      <span class="chatgpt-modal__content__description">{{ $t('ChatGPT.setup.description') }}</span>
-
       <div class="chatgpt-modal__content__form">
         <unnnic-input
           class="chatgpt-modal__content__form__input__name"
@@ -152,27 +151,37 @@
 
 <style lang="scss" scoped>
   .chatgpt-modal {
-    ::v-deep .unnnic-modal-container-background-body-description {
-      padding-bottom: $unnnic-spacing-stack-xs;
-    }
+    ::v-deep {
+      .container {
+        padding: $unnnic-squish-md !important;
+      }
 
-    &__content {
-      display: flex;
-      flex-direction: column;
+      .header {
+        margin-bottom: $unnnic-spacing-stack-nano !important;
+      }
 
-      &__title {
-        font-family: $unnnic-font-family-secondary;
-        color: $unnnic-color-neutral-darkest;
-        font-weight: $unnnic-font-weight-black;
-        font-size: $unnnic-font-size-title-sm;
-        line-height: ($unnnic-font-size-title-sm + $unnnic-line-height-medium);
-        padding: $unnnic-spacing-stack-md 0;
+      .unnnic-modal-container-background {
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        padding: 0 $unnnic-spacing-md;
+        max-height: 95vh;
       }
 
-      &__description {
-        margin-bottom: $unnnic-spacing-stack-lg;
+      .unnnic-modal-container-background-body {
+        border-radius: $unnnic-border-radius-sm $unnnic-border-radius-sm 0px 0px;
       }
 
+      .unnnic-modal-container-background-body-description-container {
+        padding-bottom: $unnnic-spacing-md;
+      }
+    }
+
+    &__content {
+      display: flex;
+      flex-direction: column;
+      overflow: auto;
+
       &__form {
         display: flex;
         flex-direction: column;
@@ -194,5 +203,15 @@
         }
       }
     }
+
+    &__buttons {
+      display: flex;
+      flex: 1;
+      margin-top: $unnnic-spacing-md;
+
+      * {
+        flex: 1;
+      }
+    }
   }
 </style>
diff --git a/tests/unit/specs/components/config/external/chatgpt/__snapshots__/Setup.spec.js.snap b/tests/unit/specs/components/config/external/chatgpt/__snapshots__/Setup.spec.js.snap
@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`components/config/external/chatgpt/Setup.vue should be rendered properly 1`] = `
-<unnnicmodal-stub showmodal="true" class="chatgpt-modal">
-  <div class="chatgpt-modal__content"><span class="chatgpt-modal__content__title">Integrate with ChatGPT</span> <span class="chatgpt-modal__content__description">To integrate, create a name, insert your API-Token and select one of the available versions</span>
+<unnnicmodal-stub text="Integrate with ChatGPT" description="To integrate, create a name, insert your API-Token and select one of the available versions" showmodal="true" class="chatgpt-modal">
+  <div class="chatgpt-modal__content">
     <div class="chatgpt-modal__content__form">
       <unnnic-input-stub placeholder="Insert a name" type="normal" value="" nativetype="text" label="Name" size="md" mask="" class="chatgpt-modal__content__form__input__name"></unnnic-input-stub>
       <unnnic-input-stub placeholder="Insert the Token" type="normal" value="" nativetype="text" label="Token" size="md" mask="" class="chatgpt-modal__content__form__input__token"></unnnic-input-stub>