modal essentially complete but for scripts

website/client/src/app.vue

@@ -35,6 +35,7 @@
       <sub-canceled-modal v-if="isUserLoaded" />
       <bug-report-modal v-if="isUserLoaded" />
       <bug-report-success-modal v-if="isUserLoaded" />
+      <external-link-modal />
       <birthday-modal />
       <snackbars />
       <router-view v-if="!isUserLoggedIn || isStaticPage" />
@@ -175,6 +176,7 @@ import amazonPaymentsModal from '@/components/payments/amazonModal';
 import paymentsSuccessModal from '@/components/payments/successModal';
 import subCancelModalConfirm from '@/components/payments/cancelModalConfirm';
 import subCanceledModal from '@/components/payments/canceledModal';
+import externalLinkModal from '@/components/externalLinkModal.vue';
 
 import spellsMixin from '@/mixins/spells';
 import {
@@ -210,6 +212,7 @@ export default {
     subCanceledModal,
     bugReportModal,
     bugReportSuccessModal,
+    externalLinkModal,
   },
   mixins: [notifications, spellsMixin],
   data () {

website/client/src/components/externalLinkModal.vue

@@ -22,21 +22,26 @@
           v-html="icons.exclamation"
         ></div>
       </div>
-      <h2>You are about to leave Habitica.com</h2>
+      <h2>
+        {{ $t('leaveHabitica') }}
+      </h2>
     </div>
-    <div class="row">
+
-      Habitica is not responsible for the content of any linked
+    <!-- BODY -->
-      website that is not owned or operated by HabitRPG.
+    <div
-      Please note that these websites' practices may differ
+      class="row leave-warning-text"
-      from Habitica’s community guidelines.
+      v-html="$t('leaveHabiticaText')"
+    >
     </div>
+
+    <!-- FOOTER -->
     <div slot="modal-footer">
       <button
         v-once
         class="btn btn-primary"
-        @click="submit()"
+        @click="close()"
       >
-        {{ $t('onwards') }}
+        {{ $t('continue') }}
       </button>
     </div>
   </b-modal>
@@ -44,7 +49,32 @@
 
 <style lang="scss">
 @import '~@/assets/scss/colors.scss';
+
 #external-link-modal {
+  .modal-md {
+    max-width: 448px;
+    min-width: 330px;
+
+  .modal-close {
+    position: absolute;
+    right: 16px;
+    top: 16px;
+    cursor: pointer;
+
+    .icon-close {
+      width: 18px;
+      height: 18px;
+      vertical-align: middle;
+
+      & svg {
+        fill: $yellow-1;
+      }
+       & :hover {
+        fill: $yellow-1;
+      }
+    }
+  }
+
   .modal-content {
     background: transparent;
   }
@@ -58,10 +88,6 @@
     border-top-left-radius: 8px;
     border-bottom: none;
 
-    h2 {
-      color: $green-1;
-    }
-
     .exclamation-container {
       width: 64px;
       height: 64px;
@@ -72,43 +98,42 @@
     }
 
     .svg-exclamation {
-      width: 45px;
+      width: 8px;
       color: $white;
     }
+
+    h2 {
+      color: $yellow-1;
+      // font-size: 1.25rem;
+    }
   }
 
   .modal-body {
-    padding: 16px 32px 24px 32px;
+    padding: 16px 44px 20px 44px;
     background: $white;
 
-    .modal-body-col {
+    .leave-warning-text {
-      display: flex;
+      font-size: 0.875rem;
-      flex-direction: column;
+      line-height: 1.71;
-      align-items: center;
       text-align: center;
-
-      .btn.btn-primary {
-        margin-top: 24px;
-      }
     }
+  }
 
-    .details-block {
+    .modal-footer {
-      background: $gray-700;
+      background: $white;
-      border-radius: 4px;
+      border-bottom-right-radius: 8px;
-      padding: 8px 16px;
+      border-bottom-left-radius: 8px;
-      margin-top: 16px;
+      justify-content: center;
-      display: inline-flex;
+      border-top: none;
-      flex-direction: row;
+      padding-top: 0;
-      text-align: center;
-      }
     }
   }
 }
 </style>
 
 <script>
-import exclamationIcon from '@assets/svg/exclamation.svg';
+import exclamationIcon from '@/assets/svg/exclamation.svg';
-import closeIcon from '@/assets/svg/close.svg';
+import closeIcon from '@/assets/svg/new-close.svg';
 
 export default {
   data () {
@@ -123,7 +148,7 @@ export default {
     close () {
       this.$root.$emit('bv::hide::modal', 'external-link-modal');
       console.log('Bye!');
-    }
+    },
   },
 };
 </script>

website/common/locales/en/generic.json

@@ -212,5 +212,7 @@
   "contactForm": "Contact the Moderation Team",
   "loadEarlierMessages": "Load Earlier Messages",
   "askQuestion": "Ask a Question",
-  "emptyReportBugMessage": "Report Bug Message missing"
+  "emptyReportBugMessage": "Report Bug Message missing",
+  "leaveHabitica": "You are about to leave Habitica.com",
+  "leaveHabiticaText": "Habitica is not responsible for the content of any linked website that is not owned or operated by HabitRPG.<br>Please note that these websites' practices may differ from Habitica’s community guidelines."
 }