💄 Change Settings tabs order

src/src/app/components/dashboard/dashboard.component.html

@@ -157,20 +157,55 @@
     <p-tabs value="0" scrollable>
       <p-tablist>
         <p-tab value="0" class="flex items-center gap-2">
-          <i class="pi pi-map"></i><span class="font-bold whitespace-nowrap">Settings</span>
+          <i class="pi pi-info-circle"></i><span class="font-bold whitespace-nowrap">About</span>
         </p-tab>
         <p-tab value="1" class="flex items-center gap-2">
-          <i class="pi pi-th-large"></i><span class="font-bold whitespace-nowrap">Categories</span>
+          <i class="pi pi-map"></i><span class="font-bold whitespace-nowrap">Settings</span>
         </p-tab>
         <p-tab value="2" class="flex items-center gap-2">
-          <i class="pi pi-database"></i><span class="font-bold whitespace-nowrap">Data</span>
+          <i class="pi pi-th-large"></i><span class="font-bold whitespace-nowrap">Categories</span>
         </p-tab>
         <p-tab value="3" class="flex items-center gap-2">
-          <i class="pi pi-info-circle"></i><span class="font-bold whitespace-nowrap">About</span>
+          <i class="pi pi-database"></i><span class="font-bold whitespace-nowrap">Data</span>
         </p-tab>
       </p-tablist>
       <p-tabpanels>
         <p-tabpanel value="0">
+          <div class="mt-1 flex justify-between align-items">
+            <h1 class="font-semibold tracking-tight text-xl">About</h1>
+
+            <div class="flex">
+              <p-button (click)="logout()" text severity="primary" icon="pi pi-sign-out" label="Log out" />
+              <p-button (click)="toGithub()" text severity="primary" icon="pi pi-github" size="large" />
+            </div>
+          </div>
+
+          <div class="flex flex-col md:flex-row justify-center md:justify-start items-center gap-4 mt-8 md:mt-4">
+            <a href="https://ko-fi.com/itskovacs" target="_blank" class="custom-button flex items-center">Buy me
+              a
+              coffee</a>
+            <span class="text-center text-gray-400">Coffee and contributions are greatly appreciated!</span>
+          </div>
+
+          <div class="flex flex-col md:flex-row justify-center md:justify-start items-center gap-4 mt-8 md:mt-4">
+            @if (this.info?.update) {
+            <button class="custom-button orange" (click)="toGithub()">
+              Open Github
+            </button>
+            <span class="text-center flex items-center gap-2 text-gray-400">TRIP {{ this.info?.update }}
+              available on
+              Github</span>
+            } @else {
+            <button class="custom-button" (click)="check_update()">
+              Check for updates
+            </button>
+            <span class="text-center flex items-center gap-2 text-gray-400">TRIP {{ info?.version }}</span>
+            }
+          </div>
+
+          <div class="mt-4 text-center text-sm text-gray-500 dark:text-gray-400">Made with ❤️ in BZH</div>
+        </p-tabpanel>
+        <p-tabpanel value="1">
           <div class="mt-4">
             <h1 class="font-semibold tracking-tight text-xl">Low Network Mode</h1>
             <span class="text-xs text-gray-500 dark:text-gray-400">You can disable Low Network Mode. Default is true.
@@ -244,7 +279,7 @@
             </div>
           </section>
         </p-tabpanel>
-        <p-tabpanel value="1">
+        <p-tabpanel value="2">
 
           <div class="mt-1 p-2 mb-2 flex justify-between items-center">
             <div>
@@ -271,7 +306,7 @@
             }
           </div>
         </p-tabpanel>
-        <p-tabpanel value="2">
+        <p-tabpanel value="3">
           <div class="mt-1">
             <h1 class="font-semibold tracking-tight text-xl">Data</h1>
             <span class="text-xs text-gray-500">You can import/export your data</span>
@@ -283,41 +318,6 @@
             <input type="file" class="file-input" style="display: none;" (change)="importData($event)" #fileUpload>
           </div>
         </p-tabpanel>
-        <p-tabpanel value="3">
-          <div class="mt-1 flex justify-between align-items">
-            <h1 class="font-semibold tracking-tight text-xl">About</h1>
-
-            <div class="flex">
-              <p-button (click)="logout()" text severity="primary" icon="pi pi-sign-out" label="Log out" />
-              <p-button (click)="toGithub()" text severity="primary" icon="pi pi-github" size="large" />
-            </div>
-          </div>
-
-          <div class="flex flex-col md:flex-row justify-center md:justify-start items-center gap-4 mt-8 md:mt-4">
-            <a href="https://ko-fi.com/itskovacs" target="_blank" class="custom-button flex items-center">Buy me
-              a
-              coffee</a>
-            <span class="text-center text-gray-400">Coffee and contributions are greatly appreciated!</span>
-          </div>
-
-          <div class="flex flex-col md:flex-row justify-center md:justify-start items-center gap-4 mt-8 md:mt-4">
-            @if (this.info?.update) {
-            <button class="custom-button orange" (click)="toGithub()">
-              Open Github
-            </button>
-            <span class="text-center flex items-center gap-2 text-gray-400">TRIP {{ this.info?.update }}
-              available on
-              Github</span>
-            } @else {
-            <button class="custom-button" (click)="check_update()">
-              Check for updates
-            </button>
-            <span class="text-center flex items-center gap-2 text-gray-400">TRIP {{ info?.version }}</span>
-            }
-          </div>
-
-          <div class="mt-4 text-center text-sm text-gray-500 dark:text-gray-400">Made with ❤️ in BZH</div>
-        </p-tabpanel>
       </p-tabpanels>
     </p-tabs>
   </div>