Added link to DNS config settings from new instance dialogue (#70)

Author: blackcoffeexbt

src/components/tables/InstancesTable.vue

@@ -601,9 +601,7 @@
             <div class="text-subtitle1">
               {{ selectedDomainRequestConfig.title }}
             </div>
-            <div class="text-caption text-grey-5 q-mt-xs">
-              {{ selectedDomainRequestConfig.message }}
-            </div>
+            <div class="text-caption text-grey-5 q-mt-xs" v-html="selectedDomainRequestConfig.message" />
             <q-input
               v-model="planDialog.domain"
               :label="selectedDomainRequestConfig.label"
@@ -1468,7 +1466,8 @@ export default defineComponent({
         return {
           title: 'Custom domain',
           message:
-            'This payment plan supports a custom subdomain or a full custom domain. Enter the hostname you want to use for this instance.',
+            '<p>This payment plan supports a custom subdomain or a full custom domain. Enter the hostname you want to use for this instance.</p>' +
+            '<p>You will need to configure your domain\'s DNS settings. <a href="https://community.lnbits.com/t/custom-domain-names-dns-setup-guide/60" title="LNbits SaaS custom DNS settings" target="_blank">Find out how here.</a></p>',
           label: 'Domain or subdomain',
           hint: 'Examples: my-team or pay.example.com',
           missingMessage: 'Enter a custom domain or subdomain.',
@@ -1482,7 +1481,8 @@ export default defineComponent({
         return {
           title: 'Custom subdomain',
           message:
-            'This payment plan includes a custom subdomain. Enter the subdomain you want to reserve for this instance.',
+            '<p>This payment plan includes a custom subdomain. Enter the subdomain you want to reserve for this instance.</p>' + 
+            '<p>You will need to configure your domain\'s DNS settings. <a href="https://community.lnbits.com/t/custom-domain-names-dns-setup-guide/60" title="LNbits SaaS custom DNS settings" target="_blank">Find out how here.</a></p>',
           label: 'Subdomain',
           hint: 'Example: my-team.lnbits.com',
           suffix: '.lnbits.com',

src/css/app.css

@@ -529,6 +529,10 @@ pre {
     linear-gradient(160deg, #0b0614, #140a22 40%, #1b0f2e 70%, #23113a);
 }
 
+.body--dark .q-dialog--modal .text-caption a {
+  color: white;
+}
+
 .body--light .app-shell {
   background: radial-gradient(900px 600px at 0% -10%, rgba(178, 56, 255, 0.08), transparent 60%),
     radial-gradient(1000px 700px at 100% 0%, rgba(255, 79, 216, 0.08), transparent 60%),
@@ -780,4 +784,4 @@ pre {
     gap: 1rem;
   }
 
-}
+}