Spacing and typography fixes

src/views/AccountViewView.vue

@@ -179,30 +179,42 @@
     </a>
     <a ref="downloadLink" />
 
-    <div v-if="activeDid" class="flex py-2">
-      <button class="text-center text-md text-blue-500" @click="checkLimits()">
+    <div v-if="activeDid" class="my-8">
+      <h3 class="text-sm uppercase font-semibold mb-3">Rate Limits</h3>
+      <button
+        class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2"
+        @click="checkLimits()"
+      >
         Check Limits
       </button>
       <!-- show spinner if loading limits -->
-      <div v-if="loadingLimits" class="ml-2">
-        Checking... <fa icon="spinner" class="fa-spin"></fa>
+      <div v-if="loadingLimits" class="text-center mb-4">
+        Checking&hellip; <fa icon="spinner" class="fa-spin"></fa>
       </div>
-      <div class="ml-2">
+      <div class="mb-4">
         {{ limitsMessage }}
       </div>
-      <div v-if="!!limits?.nextWeekBeginDateTime" class="px-9">
-        <span class="font-bold">Rate Limits</span>
-        <p>
-          You have done {{ limits.doneClaimsThisWeek }} claims out of
-          {{ limits.maxClaimsPerWeek }} for this week. Your claims counter
-          resets at {{ readableTime(limits.nextWeekBeginDateTime) }}
+      <div v-if="!!limits?.nextWeekBeginDateTime">
+        <p class="mb-3 text-sm">
+          You have done <b>{{ limits.doneClaimsThisWeek }}</b> claims out of
+          <b>{{ limits.maxClaimsPerWeek }}</b> for this week. Your claims
+          counter resets at
+          <b class="whitespace-nowrap">{{
+            readableTime(limits.nextWeekBeginDateTime)
+          }}</b>
         </p>
-        <p>
-          You have done {{ limits.doneRegistrationsThisMonth }} registrations
-          out of {{ limits.maxRegistrationsPerMonth }} for this month. (You can
-          register nobody on your first day, and after that only one a day in
-          your first month.) Your registration counter resets at
-          {{ readableTime(limits.nextMonthBeginDateTime) }}
+        <p class="text-sm">
+          You have done
+          <b>{{ limits.doneRegistrationsThisMonth }}</b> registrations out of
+          <b>{{ limits.maxRegistrationsPerMonth }}</b> for this month.
+          <i
+            >(You can register nobody on your first day, and after that only one
+            a day in your first month.)</i
+          >
+          Your registration counter resets at
+          <b class="whitespace-nowrap">
+            {{ readableTime(limits.nextMonthBeginDateTime) }}
+          </b>
         </p>
       </div>
     </div>
@@ -216,13 +228,13 @@
       Advanced
     </h3>
     <div v-if="showAdvanced">
-      <p>
+      <p class="text-rose-600 mb-8">
         Beware: the features here can be confusing and even change data in ways
         you do not expect. But we support your freedoms!
       </p>
 
       <!-- Deep Identity Details -->
-      <h2 class="text-slate-500 text-sm font-bold mb-2 py-2">
+      <h2 class="text-sm uppercase font-semibold mb-3">
         Deep Identity Details
       </h2>
       <div class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4">
@@ -284,9 +296,7 @@
         @click="handleChange"
       >
         <!-- label -->
-        <h2 class="text-slate-500 text-sm font-bold mb-2">
-          Show amounts given with contacts
-        </h2>
+        <h2>Show amounts given with contacts</h2>
         <!-- toggle -->
         <div class="relative ml-2">
           <!-- input -->