Yet more translation fixes

dashboard/src/components/Firewall.vue

@@ -113,15 +113,16 @@ onMounted(async () => {
       @confirm="onBlocklistSubmit()"
     >
       <div>
-        <p class="small">{{ $t('network.firewall.configure.description') }}</p>
-
+        <div class="small">{{ $t('network.firewall.configure.description') }}</div>
+        <br/>
         <form novalidate @submit.prevent="onBlocklistSubmit()" autocomplete="off">
           <fieldset :disabled="editBlocklistBusy">
             <input style="display: none" type="submit" :disabled="editBlocklistBusy || !isBlocklistValid"/>
             <FormGroup>
               <label for="blocklistInput">{{ $t('network.firewall.blockedIpRanges') }}</label>
+              <div description>{{ $t('network.firewall.configure.blocklistPlaceholder') }}</div>
               <div class="has-error" v-show="editBlocklistError">{{ editBlocklistError }}</div>
-              <textarea id="blocklistInput" v-model="editBlocklist" :placeholder="$t('network.firewall.configure.blocklistPlaceholder')" rows="4"></textarea>
+              <textarea id="blocklistInput" v-model="editBlocklist" rows="4"></textarea>
             </FormGroup>
           </fieldset>
         </form>
@@ -138,15 +139,16 @@ onMounted(async () => {
       @confirm="onTrustedIpsSubmit()"
     >
       <div>
-        <p class="small">{{ $t('network.trustedIps.description') }}</p>
-
+        <div class="small">{{ $t('network.trustedIps.description') }}</div>
+        <br/>
         <form novalidate @submit.prevent="onTrustedIpsSubmit()" autocomplete="off">
           <fieldset :disabled="editTrustedIpsBusy">
             <input style="display: none;" type="submit" :disabled="editTrustedIpsBusy || !isTrustedIpsValid"/>
             <FormGroup>
               <label for="">{{ $t('network.trustedIpRanges') }}</label>
+              <div description>{{ $t('network.firewall.configure.blocklistPlaceholder') }}</div>
               <div class="has-error" v-show="editTrustedIpsError">{{ editTrustedIpsError }}</div>
-              <textarea v-model="editTrustedIps" :placeholder="$t('network.firewall.configure.blocklistPlaceholder')" rows="4"></textarea>
+              <textarea v-model="editTrustedIps" rows="4"></textarea>
             </FormGroup>
           </fieldset>
         </form>

dashboard/src/components/Ipv4Config.vue

@@ -1,7 +1,7 @@
 <script setup>
 
 import { ref, onMounted, useTemplateRef, computed } from 'vue';
-import { Button, Dialog, SingleSelect, FormGroup, TextInput } from '@cloudron/pankow';
+import { Button, Dialog, SingleSelect, FormGroup, TextInput, ClipboardAction } from '@cloudron/pankow';
 import Section from  '../components/Section.vue';
 import NetworkModel from  '../models/NetworkModel.js';
 
@@ -113,26 +113,26 @@ onMounted(async () => {
             <FormGroup>
               <label for="providerInput">{{ $t('network.ip.provider') }} <sup><a href="https://docs.cloudron.io/networking/#ipv4" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
               <SingleSelect id="providerInput" v-model="editProvider" :options="providers" option-key="value" option-label="name"/>
-              <p class="has-error" v-show="editError.generic">{{ editError.generic }}</p>
+              <div class="has-error" v-show="editError.generic">{{ editError.generic }}</div>
             </FormGroup>
 
-            <p v-show="editProvider === 'generic'">
+            <div v-show="editProvider === 'generic'" style="margin-top: 10px">
               {{ $t('network.configureIp.providerGenericDescription') }} <sup><a href="https://ipv4.api.cloudron.io/api/v1/helper/public_ip" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup>
-            </p>
+            </div>
 
             <!-- Fixed -->
             <FormGroup v-show="editProvider === 'fixed'">
               <label for="addressInput">{{ $t('network.ipv4.address') }}</label>
               <TextInput id="addressInput" v-model="editAddress" :required="editProvider === 'fixed'" />
-              <p class="has-error" v-show="editError.ipv4">{{ editError.ipv4 }}</p>
+              <div class="has-error" v-show="editError.ipv4">{{ editError.ipv4 }}</div>
             </FormGroup>
 
             <!-- Network Interface -->
             <FormGroup v-show="editProvider === 'network-interface'">
               <label for="interfaceNameInput">{{ $t('network.ip.interface') }}</label>
-              <p>{{ $t('network.ip.interfaceDescription') }} <code>ip -f inet -br addr</code></p>
+              <div description>{{ $t('network.ip.interfaceDescription') }} ip -f inet -br addr <ClipboardAction plain value="ip -f inet -br addr" /></div>
               <TextInput id="interfaceNameInput" v-model="editInterfaceName" :required="editProvider === 'network-interface'" />
-              <p class="has-error" v-show="editError.ifname">{{ editError.ifname }}</p>
+              <div class="has-error" v-show="editError.ifname">{{ editError.ifname }}</div>
             </FormGroup>
           </fieldset>
         </form>

dashboard/src/components/Ipv6Config.vue

@@ -1,7 +1,7 @@
 <script setup>
 
 import { ref, onMounted, useTemplateRef, computed } from 'vue';
-import { Button, Dialog, SingleSelect, FormGroup, TextInput } from '@cloudron/pankow';
+import { Button, Dialog, SingleSelect, FormGroup, TextInput, ClipboardAction } from '@cloudron/pankow';
 import Section from  '../components/Section.vue';
 import NetworkModel from  '../models/NetworkModel.js';
 
@@ -116,7 +116,7 @@ onMounted(async () => {
               <div class="error-label" v-show="editError.generic">{{ editError.generic }}</div>
             </FormGroup>
 
-            <div v-show="editProvider === 'generic'">
+            <div v-show="editProvider === 'generic'" style="margin-top: 10px">
               {{ $t('network.configureIp.providerGenericDescription') }} <sup><a href="https://ipv4.api.cloudron.io/api/v1/helper/public_ip" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup>
             </div>
 
@@ -130,9 +130,9 @@ onMounted(async () => {
             <!-- Network Interface -->
             <FormGroup v-show="editProvider === 'network-interface'">
               <label for="interfaceNameInput">{{ $t('network.ip.interface') }}</label>
+              <div description>{{ $t('network.ip.interfaceDescription') }} ip -f inet6 -br addr <ClipboardAction plain value="ip -f inet6 -br addr" /></div>
               <TextInput id="interfaceNameInput" v-model="editInterfaceName" :required="editProvider === 'network-interface'" />
               <div class="error-label" v-show="editError.ifname">{{ editError.ifname }}</div>
-              <p>{{ $t('network.ip.interfaceDescription') }} <code>ip -f inet6 -br addr</code></p>
             </FormGroup>
           </fieldset>
         </form>

dashboard/src/components/SystemInfo.vue

@@ -32,6 +32,7 @@ async function onReboot() {
     confirmLabel: t('main.rebootDialog.rebootAction'),
     confirmStyle: 'danger',
     rejectLabel: t('main.dialog.cancel'),
+    rejectStyle: 'secondary'
   });
 
   if (!confirmed) return;