From 5422d63d83b1e52dfe51bebbadae990d32cb216a Mon Sep 17 00:00:00 2001
From: Yasen Pramatarov <yasen@lindeas.com>
Date: Wed, 19 Nov 2025 22:28:15 +0200
Subject: [PATCH] Redesigns profile edit page

---
 app/templates/profile-edit.php  | 193 ++++++++++++++------------------
 public_html/static/css/main.css | 133 ++++++++++++++++++++++
 2 files changed, 217 insertions(+), 109 deletions(-)

diff --git a/app/templates/profile-edit.php b/app/templates/profile-edit.php
index 45ab00f..1feb529 100644
--- a/app/templates/profile-edit.php
+++ b/app/templates/profile-edit.php
@@ -1,95 +1,76 @@
 
                 <!-- user profile -->
-                <div class="card text-center w-50 mx-auto">
+                <div class="tm-profile-card mx-auto">
+                    <div class="tm-profile-header">
+                        <div>
+                            <p class="tm-profile-eyebrow">Account</p>
+                            <h2 class="tm-profile-title">Profile of <?= htmlspecialchars($userDetails[0]['username']) ?></h2>
+                            <p class="tm-profile-subtitle">Update your personal details, avatar, and access rights in one streamlined view.</p>
+                        </div>
+                    </div>
 
-                    <p class="h4 card-header">Profile of <?= htmlspecialchars($userDetails[0]['username']) ?></p>
-                    <div class="card-body">
-
-                        <form method="POST" action="<?= htmlspecialchars($app_root) ?>?page=profile" enctype="multipart/form-data">
+                    <form method="POST" action="<?= htmlspecialchars($app_root) ?>?page=profile" enctype="multipart/form-data" class="tm-profile-form" novalidate>
 <?php include CSRF_TOKEN_INCLUDE; ?>
-                            <div class="row">
-                                <p class="border rounded bg-light mb-4"><small>edit the profile fields</small></p>
-                                <div class="col-md-4 avatar-container">
+                        <div class="row g-4 align-items-start">
+                            <div class="col-lg-4">
+                                <div class="tm-profile-avatar card h-100">
                                     <div class="avatar-wrapper">
                                         <img class="avatar-img" src="<?= htmlspecialchars($app_root) . htmlspecialchars($avatar) ?>" alt="avatar" />
-        <div class="avatar-btn-container">
-
-                                        <label for="avatar-upload" class="avatar-btn avatar-btn-select btn btn-primary">
-                                            <i class="fas fa-folder" data-toggle="tooltip" data-placement="right" data-offset="30.0" title="select new avatar"></i>
+                                    </div>
+                                    <div class="avatar-btn-group">
+                                        <label for="avatar-upload" class="btn btn-outline-primary w-100">
+                                            <i class="fas fa-upload me-2"></i>Upload new
                                         </label>
                                         <input type="file" id="avatar-upload" name="avatar_file" accept="image/*" style="display:none;">
-
 <?php if ($default_avatar) { ?>
-                                        <button type="button" class="avatar-btn avatar-btn-remove btn btn-secondary" data-toggle="modal" data-target="#confirmDeleteModal" disabled>
+                                        <button type="button" class="btn btn-outline-secondary w-100" data-toggle="modal" data-target="#confirmDeleteModal" disabled>
 <?php } else { ?>
-                                        <button type="button" class="avatar-btn avatar-btn-remove btn btn-danger" data-toggle="modal" data-target="#confirmDeleteModal">
+                                        <button type="button" class="btn btn-outline-danger w-100" data-toggle="modal" data-target="#confirmDeleteModal">
 <?php } ?>
-                                        <i class="fas fa-trash" data-toggle="tooltip" data-placement="right" data-offset="30.0" title="remove current avatar"></i>
+                                            <i class="fas fa-trash me-2"></i>Remove avatar
                                         </button>
-        </div>
+                                    </div>
+                                    <p class="avatar-hint">PNG, JPG up to 500 KB.</p>
+                                </div>
+                            </div>
+
+                            <div class="col-lg-8">
+                                <div class="tm-profile-section">
+                                    <h3 class="tm-profile-section-title">Personal info</h3>
+                                    <div class="row g-3">
+                                        <div class="col-md-6">
+                                            <label for="name" class="form-label">Full name</label>
+                                            <input class="form-control" type="text" name="name" id="name" value="<?= htmlspecialchars($userDetails[0]['name'] ?? '') ?>" autofocus />
+                                        </div>
+                                        <div class="col-md-6">
+                                            <label for="email" class="form-label">Email address</label>
+                                            <input class="form-control" type="text" name="email" id="email" value="<?= htmlspecialchars($userDetails[0]['email'] ?? '') ?>" />
+                                        </div>
                                     </div>
                                 </div>
 
-                                <div class="col-md-8">
-                                    <!--div class="row mb-3">
-                                        <div class="col-md-4 text-end">
-                                            <label for="username" class="form-label"><small>username:</small></label>
-                                            <span class="text-danger" style="margin-right: -12px;">*</span>
-                                        </div>
-                                        <div class="col-md-8 text-start bg-light">
-                                            <input class="form-control" type="text" name="username" value="<?= htmlspecialchars($userDetails[0]['username']) ?>" required />
-                                        </div>
-                                    </div-->
-
-                                    <div class="row mb-3">
-                                        <div class="col-md-4 text-end">
-                                            <label for="name" class="form-label"><small>name:</small></label>
-                                        </div>
-                                        <div class="col-md-8 text-start bg-light">
-                                            <input class="form-control" type="text" name="name" value="<?= htmlspecialchars($userDetails[0]['name'] ?? '') ?>" autofocus />
-                                        </div>
-                                    </div>
-
-                                    <div class="row mb-3">
-                                        <div class="col-md-4 text-end">
-                                            <label for="email" class="form-label"><small>email:</small></label>
-                                        </div>
-                                        <div class="col-md-8 text-start bg-light">
-                                            <input class="form-control" type="text" name="email" value="<?= htmlspecialchars($userDetails[0]['email'] ?? '') ?>" />
-                                        </div>
-                                    </div>
-
-                                    <div class="row mb-3">
-                                        <div class="col-md-4 text-end">
-                                            <label for="timezone" class="form-label"><small>timezone:</small></label>
-                                        </div>
-                                        <div class="col-md-8 text-start bg-light">
-                                            <select class="form-control" name="timezone" id="timezone">
+                                <div class="tm-profile-section">
+                                    <h3 class="tm-profile-section-title">Timezone</h3>
+                                    <label for="timezone" class="form-label">Preferred timezone</label>
+                                    <select class="form-control" name="timezone" id="timezone">
 <?php foreach ($allTimezones as $timezone) { ?>
-                                                <option value="<?= htmlspecialchars($timezone) ?>" <?= $timezone === $userTimezone ? 'selected' : '' ?>>
-                                                    <?= htmlspecialchars($timezone) ?>&nbsp;&nbsp;(<?= htmlspecialchars(getUTCOffset($timezone)) ?>)
-                                                </option>
+                                        <option value="<?= htmlspecialchars($timezone) ?>" <?= $timezone === $userTimezone ? 'selected' : '' ?>>
+                                            <?= htmlspecialchars($timezone) ?>&nbsp;&nbsp;(<?= htmlspecialchars(getUTCOffset($timezone)) ?>)
+                                        </option>
 <?php } ?>
-                                            </select>
-                                        </div>
-                                    </div>
+                                    </select>
+                                </div>
 
-                                    <div class="row mb-3">
-                                        <div class="col-md-4 text-end">
-                                            <label for="bio" class="form-label"><small>bio:</small></label>
-                                        </div>
-                                        <div class="col-md-8 text-start bg-light">
-                                            <textarea class="form-control" name="bio" rows="10"><?= htmlspecialchars($userDetails[0]['bio'] ?? '') ?></textarea>
-                                        </div>
-                                    </div>
+                                <div class="tm-profile-section">
+                                    <h3 class="tm-profile-section-title">Bio</h3>
+                                    <textarea class="form-control" name="bio" rows="6" placeholder="Share something about yourself, your role, or preferences."><?= htmlspecialchars($userDetails[0]['bio'] ?? '') ?></textarea>
+                                </div>
 
-                                    <div class="row mb-3">
-                                        <div class="col-md-4 text-end">
-                                            <label for="rights" class="form-label"><small>rights:</small></label>
-                                        </div>
-                                        <div class="col-md-8 text-start bg-light">
+                                <div class="tm-profile-section">
+                                    <h3 class="tm-profile-section-title">Rights</h3>
+                                    <p class="tm-profile-section-helper">Toggle the permissions that should be associated with this user.</p>
+                                    <div class="tm-rights-grid">
 <?php foreach ($allRights as $right) {
-    // Check if the current right exists in $userRights
     $isChecked = false;
     foreach ($userRights as $userRight) {
         if ($userRight['right_id'] === $right['right_id']) {
@@ -97,51 +78,45 @@
             break;
         }
     } ?>
-                                            <div class="form-check">
-                                                <input class="form-check-input" type="checkbox" name="rights[]" value="<?= htmlspecialchars($right['right_id']) ?>" id="right_<?= htmlspecialchars($right['right_id']) ?>" <?= $isChecked ? 'checked' : '' ?> />
-                                                <label class="form-check-label" for="right_<?= htmlspecialchars($right['right_id']) ?>"><?= htmlspecialchars($right['right_name']) ?></label>
-                                            </div>
-<?php } ?>
+                                        <div class="form-check tm-right-item">
+                                            <input class="form-check-input" type="checkbox" name="rights[]" value="<?= htmlspecialchars($right['right_id']) ?>" id="right_<?= htmlspecialchars($right['right_id']) ?>" <?= $isChecked ? 'checked' : '' ?> />
+                                            <label class="form-check-label" for="right_<?= htmlspecialchars($right['right_id']) ?>"><?= htmlspecialchars($right['right_name']) ?></label>
                                         </div>
+<?php } ?>
                                     </div>
-
                                 </div>
 
-                                <p>
-                                    <a href="<?= htmlspecialchars($app_root) ?>?page=profile" class="btn btn-secondary">Cancel</a>
-                                    <input type="submit" class="btn btn-primary" value="Save" />
-                                </p>
-
+                                <div class="tm-profile-actions">
+                                    <a href="<?= htmlspecialchars($app_root) ?>?page=profile" class="btn btn-light tm-contact-back">Cancel</a>
+                                    <button type="submit" class="btn btn-primary tm-contact-submit">Save changes</button>
+                                </div>
                             </div>
-                        </form>
+                        </div>
+                    </form>
 
-                                        <!-- avatar removal modal confirmation -->
-                                        <div class="modal fade" id="confirmDeleteModal" tabindex="-1" aria-labelledby="confirmDeleteModalLabel" aria-hidden="true">
-                                            <div class="modal-dialog">
-                                                <div class="modal-content">
-                                                    <div class="modal-header">
-                                                        <h5 class="modal-title" id="confirmDeleteModalLabel">Confirm Avatar Deletion</h5>
-                                                        <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
-                                                    </div>
-                                                    <div class="modal-body">
-                                                        <img class="avatar-img" src="<?= htmlspecialchars($app_root) . htmlspecialchars($avatar) ?>" alt="avatar" />
-                                                        <br />
-                                                        Are you sure you want to delete your avatar?
-                                                        <br />
-                                                        This action cannot be undone.
-                                                    </div>
-                                                    <div class="modal-footer">
-                                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
-                                                        <form id="remove-avatar-form" data-action="remove-avatar" method="POST" action="<?= htmlspecialchars($app_root) ?>?page=profile&action=remove&item=avatar">
+                    <!-- avatar removal modal confirmation -->
+                    <div class="modal fade" id="confirmDeleteModal" tabindex="-1" aria-labelledby="confirmDeleteModalLabel" aria-hidden="true">
+                        <div class="modal-dialog">
+                            <div class="modal-content">
+                                <div class="modal-header">
+                                    <h5 class="modal-title" id="confirmDeleteModalLabel">Confirm Avatar Deletion</h5>
+                                    <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
+                                </div>
+                                <div class="modal-body text-center">
+                                    <img class="avatar-img" src="<?= htmlspecialchars($app_root) . htmlspecialchars($avatar) ?>" alt="avatar" />
+                                    <p class="mt-3 mb-0">Are you sure you want to delete your avatar?<br />This action cannot be undone.</p>
+                                </div>
+                                <div class="modal-footer">
+                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
+                                    <form id="remove-avatar-form" data-action="remove-avatar" method="POST" action="<?= htmlspecialchars($app_root) ?>?page=profile&action=remove&item=avatar">
 <?php include CSRF_TOKEN_INCLUDE; ?>
-                                                            <button type="button" class="btn btn-danger" id="confirm-delete">Delete Avatar</button>
-                                                        </form>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-
+                                        <button type="button" class="btn btn-danger" id="confirm-delete">Delete Avatar</button>
+                                    </form>
+                                </div>
+                            </div>
+                        </div>
                     </div>
+
                 </div>
                 <!-- /user profile -->
 
diff --git a/public_html/static/css/main.css b/public_html/static/css/main.css
index 6ef7d97..e68009d 100644
--- a/public_html/static/css/main.css
+++ b/public_html/static/css/main.css
@@ -5,6 +5,139 @@ html, body {
     padding: 0;
 }
 
+/* Profile form */
+.tm-profile-card {
+    max-width: 1100px;
+    margin: 2.5rem auto;
+    background: rgba(255, 255, 255, 0.97);
+    border-radius: 1.5rem;
+    box-shadow: 0 30px 70px rgba(15, 23, 42, 0.12);
+    padding: 2.75rem;
+}
+
+.tm-profile-header {
+    margin-bottom: 2rem;
+}
+
+.tm-profile-eyebrow {
+    font-size: 0.78rem;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: #94a3b8;
+    margin-bottom: 0.4rem;
+}
+
+.tm-profile-title {
+    margin: 0;
+    font-size: 2.1rem;
+    color: #0f172a;
+    font-weight: 700;
+}
+
+.tm-profile-subtitle {
+    margin-top: 0.4rem;
+    color: #64748b;
+    font-size: 1rem;
+}
+
+.tm-profile-section {
+    border: 1px solid rgba(148, 163, 184, 0.25);
+    border-radius: 1.2rem;
+    padding: 1.5rem;
+    margin-bottom: 1.5rem;
+    background: rgba(248, 250, 252, 0.7);
+}
+
+.tm-profile-section-title {
+    font-size: 0.9rem;
+    text-transform: uppercase;
+    letter-spacing: 0.12em;
+    color: #94a3b8;
+    margin-bottom: 1rem;
+}
+
+.tm-profile-section-helper {
+    font-size: 0.85rem;
+    color: #64748b;
+    margin-bottom: 0.8rem;
+}
+
+.tm-profile-form .form-label {
+    font-size: 0.85rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: #475569;
+}
+
+.tm-profile-form .form-control {
+    border-radius: 0.85rem;
+    border: 1px solid rgba(148, 163, 184, 0.7);
+    padding: 0.85rem 1rem;
+}
+
+.tm-profile-form .form-control:focus {
+    border-color: #3b82f6;
+    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.25);
+}
+
+.tm-profile-avatar .avatar-wrapper {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 1rem;
+}
+
+.tm-profile-avatar .avatar-img {
+    width: 160px;
+    height: 160px;
+    border-radius: 50%;
+    object-fit: cover;
+    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.2);
+}
+
+.avatar-btn-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+
+.avatar-hint {
+    margin-top: 0.75rem;
+    font-size: 0.8rem;
+    color: #94a3b8;
+    text-align: center;
+}
+
+.tm-rights-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+    gap: 0.75rem;
+}
+
+.tm-right-item {
+    padding: 0.75rem 0.85rem;
+    border: 1px solid rgba(148, 163, 184, 0.3);
+    border-radius: 0.85rem;
+    background: white;
+}
+
+.tm-profile-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.75rem;
+    margin-top: 1.5rem;
+}
+
+@media (max-width: 768px) {
+    .tm-profile-card {
+        padding: 2rem 1.5rem;
+    }
+
+    .tm-profile-actions {
+        flex-direction: column;
+        align-items: stretch;
+    }
+}
+
 .dashboard-stats-row {
     margin-bottom: 1.5rem;
     justify-content: center;