fix about page

css/base.css

@@ -65,6 +65,7 @@
 
 .banner.header {
     margin-bottom: var(--spacing-4,1rem);
+    max-width: inherit !important;
 }
 
 .banner.footer {
@@ -431,6 +432,7 @@ pre {
     white-space: -pre-wrap;      /* Opera 4-6 */
     white-space: -o-pre-wrap;    /* Opera 7 */
     word-wrap: break-word;       /* Internet Explorer 5.5+ */
+    background-color: var(--color-content-high) !important;
 }
 
 .circle {

html/admin.html

@@ -49,23 +49,23 @@
                 <p>{{ .strings.version }} <span class="code monospace">{{ .version }}</span></p>
                 <p>{{ .strings.commitNoun }} <span class="code monospace">{{ .commit }}</span></p>
                 <div class="row col flex">
-                    <a class="button ~neutral mr-4 mt-4 mb-4 lang-link" href="https://github.com/hrfee/jfa-go"><i class="ri-github-line mr-4"></i>github</a>
-                    <a class="button ~urge mt-4 mb-4 mr-4 lang-link" href="https://wiki.jfa-go.com">wiki/docs</a>
-                    <a class="button ~positive mt-4 mb-4 mr-4 lang-link" href="https://weblate.jfa-go.com">translation</a>
-                    <div class="dropdown mr-4" tabindex="0">
+                    <a class="button ~neutral mr-2 mt-4 mb-4 lang-link" href="https://github.com/hrfee/jfa-go"><i class="ri-github-line mr-2"></i>github</a>
+                    <a class="button ~urge mt-4 mb-4 mr-2 lang-link" href="https://wiki.jfa-go.com">wiki/docs</a>
+                    <a class="button ~positive mt-4 mb-4 mr-2 lang-link" href="https://weblate.jfa-go.com">translation</a>
+                    <div class="dropdown mr-2" tabindex="0">
                         <a href="https://github.com/sponsors/hrfee" target="_blank" class="button ~info mt-4 mb-4 dropdown-button lang-link">
-                            <i class="ri-hand-heart-line mr-4"></i>
+                            <i class="ri-hand-heart-line mr-2"></i>
                             donate
                             <span class="ml-2 chev"></span>
                         </a>
                         <div class="dropdown-display">
-                            <div class="card ~info @low">
+                            <div class="card ~neutral @low">
                                 <a href="https://github.com/sponsors/hrfee" target="_blank" class="button input ~neutral field mb-2 lang-link">GitHub</a>
                                 <a href="https://ko-fi.com/hrfee" target="_blank" class="button input ~neutral field mb-2 lang-link">Ko-fi</a>
                             </div>
                         </div>
                     </div>
-                    <a class="button ~urge mt-4 mb-4 @low discord lang-link" href="https://discord.com/invite/MrtvuQmyhP" target="_blank"><i class="ri-discord-line mr-4"></i>discord</a>
+                    <a class="button ~urge mt-4 mb-4 @low discord lang-link" href="https://discord.com/invite/MrtvuQmyhP" target="_blank"><i class="ri-discord-line mr-2"></i>discord</a>
                 </div>
                 <p><a href="https://github.com/hrfee/jfa-go/blob/main/LICENSE">Available under the MIT License.</a></p>
                 <pre class="monospace">{{ .license }}</pre>
@@ -593,7 +593,7 @@
                                 <span class="h-100 sm button ~positive @low center mb-2" id="accounts-disable-enable">{{ .strings.disable }}</span>
                                 <div class="dropdown-display">
                                     <div class="card ~neutral @low">
-                                        <span class="button ~neutral sm full-width accounts-announce-template-button" id="accounts-enable-expiry">{{ .strings.setExpiry }}</span>
+                                        <span class="button ~urge sm full-width accounts-announce-template-button" id="accounts-enable-expiry">{{ .strings.setExpiry }}</span>
                                     </div>
                                 </div>
                             </div>

ts/modules/accounts.ts

@@ -136,24 +136,24 @@ class user implements User {
                 <div class="card ~neutral @low">
                     <span class="supra sm">${window.lang.strings("contactThrough")}</span>
                     <label class="row switch pb-4 mt-2">
-                        <input type="checkbox" name="accounts-contact-${this.id}" class="accounts-contact-email">
+                        <input type="checkbox" name="accounts-contact-${this.id}" class="accounts-contact-email mr-2">
                         </span>Email</span>
                     </label>
                     <div class="accounts-area-telegram">
                         <label class="row switch pb-4">
-                            <input type="checkbox" name="accounts-contact-${this.id}" class="accounts-contact-telegram">
+                            <input type="checkbox" name="accounts-contact-${this.id}" class="accounts-contact-telegram mr-2">
                             <span>Telegram</span>
                         </label>
                     </div>
                     <div class="accounts-area-discord">
                         <label class="row switch pb-4">
-                            <input type="checkbox" name="accounts-contact-${this.id}" class="accounts-contact-discord">
+                            <input type="checkbox" name="accounts-contact-${this.id}" class="accounts-contact-discord mr-2">
                             <span>Discord</span>
                         </label>
                     </div>
                     <div class="accounts-area-matrix">
                         <label class="row switch pb-4">
-                            <input type="checkbox" name="accounts-contact-${this.id}" class="accounts-contact-matrix">
+                            <input type="checkbox" name="accounts-contact-${this.id}" class="accounts-contact-matrix mr-2">
                             <span>Matrix</span>
                         </label>
                     </div>