update the ban page

frontend/src/views/BannedPage.vue

@@ -9,42 +9,46 @@
       <!-- Title -->
       <h1 class="banned-title">Account Suspended</h1>
 
-      <!-- Ban Details -->
+      <!-- Ban Details and Appeal Section -->
-      <div v-if="banInfo" class="ban-details">
+      <div class="ban-details-container">
-        <div class="detail-item">
+        <div v-if="banInfo" class="ban-details">
-          <span class="detail-label">Reason:</span>
+          <div class="detail-item">
-          <span class="detail-value">{{
+            <span class="detail-label">Reason:</span>
-            banInfo.reason || "Violation of Terms of Service"
+            <span class="detail-value">{{
-          }}</span>
+              banInfo.reason || "Violation of Terms of Service"
+            }}</span>
+          </div>
+
+          <div v-if="banInfo.bannedAt" class="detail-item">
+            <span class="detail-label">Banned on:</span>
+            <span class="detail-value">{{ formatDate(banInfo.bannedAt) }}</span>
+          </div>
+
+          <div
+            v-if="banInfo.bannedUntil && !banInfo.isPermanent"
+            class="detail-item"
+          >
+            <span class="detail-label">Ban expires:</span>
+            <span class="detail-value">{{
+              formatDate(banInfo.bannedUntil)
+            }}</span>
+          </div>
+
+          <div v-if="banInfo.isPermanent" class="detail-item permanent-ban">
+            <AlertCircle :size="18" />
+            <span>This is a permanent ban</span>
+          </div>
         </div>
 
-        <div v-if="banInfo.bannedAt" class="detail-item">
+        <div class="appeal-section">
-          <span class="detail-label">Banned on:</span>
+          <p class="appeal-text">
-          <span class="detail-value">{{ formatDate(banInfo.bannedAt) }}</span>
+            If you believe this ban was made in error, you can submit an appeal.
+          </p>
+          <a href="/support" class="appeal-btn">
+            <Mail :size="20" />
+            <span>Contact Support</span>
+          </a>
         </div>
-
-        <div v-if="banInfo.bannedUntil" class="detail-item">
-          <span class="detail-label">Ban expires:</span>
-          <span class="detail-value">{{
-            formatDate(banInfo.bannedUntil)
-          }}</span>
-        </div>
-
-        <div v-else class="detail-item permanent-ban">
-          <AlertCircle :size="18" />
-          <span>This is a permanent ban</span>
-        </div>
-      </div>
-
-      <!-- Appeal Section -->
-      <div class="appeal-section">
-        <p class="appeal-text">
-          If you believe this ban was made in error, you can submit an appeal.
-        </p>
-        <a href="/support" class="appeal-btn">
-          <Mail :size="20" />
-          <span>Contact Support</span>
-        </a>
       </div>
 
       <!-- Logout Button -->
@@ -275,15 +279,6 @@ onMounted(() => {
   line-height: 1.6;
 }
 
-.ban-details {
-  background: rgba(239, 68, 68, 0.1);
-  border: 1px solid rgba(239, 68, 68, 0.3);
-  border-radius: 1rem;
-  padding: 1.5rem;
-  margin-bottom: 2rem;
-  text-align: left;
-}
-
 .detail-item {
   display: flex;
   justify-content: space-between;
@@ -354,23 +349,40 @@ onMounted(() => {
   line-height: 1.5;
 }
 
-.appeal-section {
+.ban-details-container {
-  margin: 2rem 0;
+  background: rgba(239, 68, 68, 0.1);
-  padding: 1.5rem;
+  border: 1px solid rgba(239, 68, 68, 0.3);
-  background: rgba(255, 255, 255, 0.05);
   border-radius: 1rem;
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  padding: 1.5rem;
+  margin-bottom: 2rem;
+}
+
+.ban-details {
+  margin-bottom: 1.5rem;
+  padding-bottom: 1.5rem;
+  border-bottom: 1px solid rgba(239, 68, 68, 0.2);
+  text-align: left;
+}
+
+.appeal-section {
+  margin: 0;
+  padding: 0;
+  background: none;
+  border: none;
+  text-align: center;
 }
 
 .appeal-text {
   font-size: 0.9375rem;
   color: #d1d5db;
   margin: 0 0 1rem 0;
+  text-align: center;
 }
 
 .appeal-btn {
   display: inline-flex;
   align-items: center;
+  justify-content: center;
   gap: 0.75rem;
   padding: 0.875rem 2rem;
   background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
@@ -382,6 +394,8 @@ onMounted(() => {
   transition: all 0.3s;
   box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
   border: 1px solid rgba(59, 130, 246, 0.5);
+  width: 100%;
+  max-width: 300px;
 }
 
 .appeal-btn:hover {
@@ -506,8 +520,7 @@ onMounted(() => {
   }
 
   .appeal-btn {
-    width: 100%;
+    max-width: 100%;
-    justify-content: center;
   }
 }
 </style>