update the ban page

frontend/src/views/BannedPage.vue

@@ -9,7 +9,8 @@
       <!-- Title -->
       <h1 class="banned-title">Account Suspended</h1>
 
-      <!-- Ban Details -->
+      <!-- Ban Details and Appeal Section -->
+      <div class="ban-details-container">
         <div v-if="banInfo" class="ban-details">
           <div class="detail-item">
             <span class="detail-label">Reason:</span>
@@ -23,20 +24,22 @@
             <span class="detail-value">{{ formatDate(banInfo.bannedAt) }}</span>
           </div>
 
-        <div v-if="banInfo.bannedUntil" class="detail-item">
+          <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-else class="detail-item permanent-ban">
+          <div v-if="banInfo.isPermanent" 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.
@@ -46,6 +49,7 @@
             <span>Contact Support</span>
           </a>
         </div>
+      </div>
 
       <!-- Logout Button -->
       <button @click="handleLogout" class="logout-btn">
@@ -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>