translations and modal styles

assets/translations/en-us.yaml

@@ -174,6 +174,15 @@ containerResourceLimit:
   requestsCpu: CPU Reservation
   requestsMemory: Memory Reservation
 
+cruResource:
+  previewYaml: Preview Yaml
+  cancel: Cancelling will destroy your changes.
+  back: Going back will destroy your changes.
+  confirmYaml: "No, Review Yaml"
+  backToForm: Go Back To Form
+  confirmCancel: "Yes, Cancel"
+  confirmBack: "Yes, Go Back"
+
 footer:
   docs: Docs
   download: Download CLI

components/CruResource.vue

@@ -40,7 +40,7 @@ export default {
     return {
       isCancelModal: false,
       showAsForm:    true,
-      resourceYaml:   '',
+      resourceYaml:  ''
     };
   },
   methods: {
@@ -48,12 +48,17 @@ export default {
       if (isCancel) {
         // this.$modal.show('cancel') pass translation options
         this.isCancelModal = true;
+      } else {
+        this.isCancelModal = false;
       }
 
       this.$modal.show('cancel-modal');
     },
     confirmCancel(isCancel) {
+      this.$modal.hide('cancel-modal');
+
       if (isCancel) {
+        this.isCancelModal = false;
         this.$router.replace({
           name:   this.doneRoute,
           params: { resource: this.resource.type }
@@ -78,10 +83,8 @@ export default {
 </script>
 
 <template>
-  <form
-    v-if="showAsForm"
-    class="create-resource-container"
-  >
+  <section>
+    <form v-if="showAsForm" class="create-resource-container">
       <div v-if="subtypes.length && !selectedSubtype" class="subtypes-container">
         <slot name="subtypes">
           <div
@@ -144,8 +147,13 @@ export default {
           </button>
 
           <div>
-          <button v-if="selectedSubtype || !subtypes.length" type="button" class="btn role-secondary" @click="showPreviewYaml">
-            Preview Yaml
+            <button
+              v-if="selectedSubtype || !subtypes.length"
+              type="button"
+              class="btn role-secondary"
+              @click="showPreviewYaml"
+            >
+              <t k="cruResource.previewYaml" />
             </button>
             <button
               :disabled="!canCreate"
@@ -181,11 +189,7 @@ export default {
                 <button type="button" class="btn role-secondary" @click="checkCancel(false)">
                   <t k="generic.back" />
                 </button>
-              <button
-                type="button"
-                class="btn role-primary"
-                @click="yamlSave"
-              >
+                <button type="button" class="btn role-primary" @click="yamlSave">
                   <t k="generic.create" />
                 </button>
               </div>
@@ -193,42 +197,38 @@ export default {
           </div>
         </template>
       </ResourceYaml>
+    </section>
 
     <modal
       class="confirm-modal"
       name="cancel-modal"
-      :width="350"
+      :width="400"
       height="auto"
-      styles="background-color: var(--nav-bg); border-radius: var(--border-radius); overflow: scroll; max-height: 100vh;"
     >
       <div class="header">
         <h4 class="text-default-text">
-          Go Back To Form
+          <t k="cruResource.backToForm" />
         </h4>
       </div>
       <div class="body">
         <p v-if="isCancelModal">
-          Cancelling will destroy your changes.
+          <t k="cruResource.cancel" />
         </p>
         <p v-else>
-          Going back will destroy your changes.
+          <t k="cruResource.back" />
         </p>
       </div>
       <div class="footer">
-        <button type="button" class="btn role-secondary" @click="$modal.hide('cancel-modal')">
-          No, Review Yaml
-        </button>
         <button
           type="button"
-          class="btn role-primary"
-          @click="confirmCancel(isCancelModal)"
+          class="btn role-secondary"
+          @click="$modal.hide('cancel-modal')"
         >
-          <span v-if="isCancelModal">
-            Yes, Cancel.
-          </span>
-          <span v-else>
-            Yes, go back.
-          </span>
+          <t k="cruResource.confirmYaml" />
+        </button>
+        <button type="button" class="btn role-primary" @click="confirmCancel(isCancelModal)">
+          <span v-if="isCancelModal"><t k="cruResource.confirmCancel" /></span>
+          <span v-else><t k="cruResource.confirmBack" /></span>
         </button>
       </div>
     </modal>
@@ -236,6 +236,33 @@ export default {
 </template>
 
 <style lang='scss'>
+.confirm-modal {
+  .v--modal-box {
+    background-color: var(--default);
+    box-shadow: none;
+    min-height: 200px;
+    .body {
+      min-height: 75px;
+      padding: 10px 0 0 15px;
+      p {
+        margin-top: 10px;
+      }
+    }
+    .header {
+      background-color: #4F3335;
+      padding: 15px 0 0 15px;
+    }
+    .header,
+    .footer {
+      height: 50px;
+    }
+    .footer {
+      border-top: 1px solid var(--border);
+      text-align: center;
+      padding: 10px 0 0 15px;
+    }
+  }
+}
 .subtypes-container {
   display: flex;
   flex-wrap: wrap;