From 3f35658643583922f9943c9740b75ba4fed5c46c Mon Sep 17 00:00:00 2001
From: Alex Tselegidis <alextselegidis@gmail.com>
Date: Sat, 18 Dec 2021 19:16:22 +0100
Subject: [PATCH] HTML structure changes to the account page

---
 application/views/pages/account.php | 255 ++++++++++++++--------------
 1 file changed, 129 insertions(+), 126 deletions(-)

diff --git a/application/views/pages/account.php b/application/views/pages/account.php
index 2f978847..7b4859e1 100644
--- a/application/views/pages/account.php
+++ b/application/views/pages/account.php
@@ -4,151 +4,154 @@
 
 <div id="account-page" class="container backend-page">
     <div id="account">
-        <form>
-            <div class="row">
-                <fieldset class="col-12 col-sm-6 personal-info-wrapper">
-                    <legend class="border-bottom mb-4">
-                        <?= lang('personal_information') ?>
-                        <?php if (can('edit', PRIV_USER_SETTINGS)): ?>
-                            <button type="button" id="save-settings" class="btn btn-primary btn-sm mb-2"
-                                    data-tippy-content="<?= lang('save') ?>">
-                                <i class="fas fa-check-square me-2"></i>
-                                <?= lang('save') ?>
-                            </button>
-                        <?php endif ?>
-                    </legend>
+        <div class="row">
+            <div class="col-lg-8 offset-lg-2">
+                <form>
+                    <fieldset>
+                        <legend class="d-flex justify-content-between align-items-center border-bottom mb-4 py-2">
+                            <?= lang('personal_information') ?>
 
-                    <input type="hidden" id="user-id">
+                            <?php if (can('edit', PRIV_USER_SETTINGS)): ?>
+                                <button type="button" id="save-settings" class="btn btn-primary btn-sm">
+                                    <i class="fas fa-check-square me-2"></i>
+                                    <?= lang('save') ?>
+                                </button>
+                            <?php endif ?>
+                        </legend>
 
-                    <div class="mb-3">
-                        <label class="form-label" for="first-name">
-                            <?= lang('first_name') ?>
-                            <span class="text-danger">*</span>
-                        </label>
-                        <input id="first-name" class="form-control required">
-                    </div>
+                        <div class="row">
+                            <div class="col-lg-6">
+                                <input type="hidden" id="user-id">
 
-                    <div class="mb-3">
-                        <label class="form-label" for="last-name">
-                            <?= lang('last_name') ?>
-                            <span class="text-danger">*</span>
-                        </label>
-                        <input id="last-name" class="form-control required">
-                    </div>
+                                <div class="mb-3">
+                                    <label class="form-label" for="first-name">
+                                        <?= lang('first_name') ?>
+                                        <span class="text-danger">*</span>
+                                    </label>
+                                    <input id="first-name" class="form-control required">
+                                </div>
 
-                    <div class="mb-3">
-                        <label class="form-label" for="email">
-                            <?= lang('email') ?>
-                            <span class="text-danger">*</span>
-                        </label>
-                        <input id="email" class="form-control required">
-                    </div>
+                                <div class="mb-3">
+                                    <label class="form-label" for="last-name">
+                                        <?= lang('last_name') ?>
+                                        <span class="text-danger">*</span>
+                                    </label>
+                                    <input id="last-name" class="form-control required">
+                                </div>
 
-                    <div class="mb-3">
-                        <label class="form-label" for="phone-number">
-                            <?= lang('phone_number') ?>
-                            <span class="text-danger">*</span>
-                        </label>
-                        <input id="phone-number" class="form-control required">
-                    </div>
+                                <div class="mb-3">
+                                    <label class="form-label" for="email">
+                                        <?= lang('email') ?>
+                                        <span class="text-danger">*</span>
+                                    </label>
+                                    <input id="email" class="form-control required">
+                                </div>
 
-                    <div class="mb-3">
-                        <label class="form-label" for="mobile-number">
-                            <?= lang('mobile_number') ?>
-                        </label>
-                        <input id="mobile-number" class="form-control">
-                    </div>
+                                <div class="mb-3">
+                                    <label class="form-label" for="phone-number">
+                                        <?= lang('phone_number') ?>
+                                        <span class="text-danger">*</span>
+                                    </label>
+                                    <input id="phone-number" class="form-control required">
+                                </div>
 
-                    <div class="mb-3">
-                        <label class="form-label" for="address">
-                            <?= lang('address') ?>
-                        </label>
-                        <input id="address" class="form-control">
-                    </div>
+                                <div class="mb-3">
+                                    <label class="form-label" for="mobile-number">
+                                        <?= lang('mobile_number') ?>
+                                    </label>
+                                    <input id="mobile-number" class="form-control">
+                                </div>
 
-                    <div class="mb-3">
-                        <label class="form-label" for="city">
-                            <?= lang('city') ?>
-                        </label>
-                        <input id="city" class="form-control">
-                    </div>
+                                <div class="mb-3">
+                                    <label class="form-label" for="address">
+                                        <?= lang('address') ?>
+                                    </label>
+                                    <input id="address" class="form-control">
+                                </div>
 
-                    <div class="mb-3">
-                        <label class="form-label" for="state">
-                            <?= lang('state') ?>
-                        </label>
-                        <input id="state" class="form-control">
-                    </div>
+                                <div class="mb-3">
+                                    <label class="form-label" for="city">
+                                        <?= lang('city') ?>
+                                    </label>
+                                    <input id="city" class="form-control">
+                                </div>
 
-                    <div class="mb-3">
-                        <label class="form-label" for="zip-code">
-                            <?= lang('zip_code') ?>
-                        </label>
-                        <input id="zip-code" class="form-control">
-                    </div>
+                                <div class="mb-3">
+                                    <label class="form-label" for="state">
+                                        <?= lang('state') ?>
+                                    </label>
+                                    <input id="state" class="form-control">
+                                </div>
 
-                    <div class="mb-3">
-                        <label class="form-label" for="notes">
-                            <?= lang('notes') ?>
-                        </label>
-                        <textarea id="notes" class="form-control" rows="3"></textarea>
-                    </div>
-                </fieldset>
+                                <div class="mb-3">
+                                    <label class="form-label" for="zip-code">
+                                        <?= lang('zip_code') ?>
+                                    </label>
+                                    <input id="zip-code" class="form-control">
+                                </div>
 
-                <fieldset class="col-12 col-sm-6 miscellaneous-wrapper">
-                    <legend class="border-bottom mb-4">
-                        <?= lang('system_login') ?>
-                    </legend>
+                                <div class="mb-3">
+                                    <label class="form-label" for="notes">
+                                        <?= lang('notes') ?>
+                                    </label>
+                                    <textarea id="notes" class="form-control" rows="3"></textarea>
+                                </div>
+                            </div>
 
-                    <div class="mb-3">
-                        <label class="form-label" for="username">
-                            <?= lang('username') ?>
-                            <span class="text-danger">*</span>
-                        </label>
-                        <input id="username" class="form-control required">
-                    </div>
+                            <div class="col-lg-6">
+                                <div class="mb-3">
+                                    <label class="form-label" for="username">
+                                        <?= lang('username') ?>
+                                        <span class="text-danger">*</span>
+                                    </label>
+                                    <input id="username" class="form-control required">
+                                </div>
 
-                    <div class="mb-3">
-                        <label class="form-label" for="password">
-                            <?= lang('password') ?>
-                        </label>
-                        <input type="password" id="password" class="form-control" autocomplete="new-password">
-                    </div>
+                                <div class="mb-3">
+                                    <label class="form-label" for="password">
+                                        <?= lang('password') ?>
+                                    </label>
+                                    <input type="password" id="password" class="form-control" autocomplete="new-password">
+                                </div>
 
-                    <div class="mb-3">
-                        <label class="form-label" for="retype-password">
-                            <?= lang('retype_password') ?>
-                        </label>
-                        <input type="password" id="retype-password" class="form-control"
-                               autocomplete="new-password">
-                    </div>
+                                <div class="mb-3">
+                                    <label class="form-label" for="retype-password">
+                                        <?= lang('retype_password') ?>
+                                    </label>
+                                    <input type="password" id="retype-password" class="form-control"
+                                           autocomplete="new-password">
+                                </div>
 
-                    <div class="mb-3">
-                        <label class="form-label" for="calendar-view"><?= lang('calendar') ?>
-                            <span class="text-danger">*</span>
-                        </label>
-                        <select id="calendar-view" class="form-control required">
-                            <option value="default">Default</option>
-                            <option value="table">Table</option>
-                        </select>
-                    </div>
+                                <div class="mb-3">
+                                    <label class="form-label" for="calendar-view"><?= lang('calendar') ?>
+                                        <span class="text-danger">*</span>
+                                    </label>
+                                    <select id="calendar-view" class="form-control required">
+                                        <option value="default">Default</option>
+                                        <option value="table">Table</option>
+                                    </select>
+                                </div>
 
-                    <div class="mb-3">
-                        <label class="form-label" for="timezone">
-                            <?= lang('timezone') ?>
-                        </label>
-                        <?= render_timezone_dropdown('id="timezone" class="form-control"') ?>
-                    </div>
+                                <div class="mb-3">
+                                    <label class="form-label" for="timezone">
+                                        <?= lang('timezone') ?>
+                                    </label>
+                                    <?= render_timezone_dropdown('id="timezone" class="form-control"') ?>
+                                </div>
 
-                    <div class="custom-control custom-switch">
-                        <input type="checkbox" class="custom-control-input" id="notifications">
-                        <label class="custom-form-label" for="notifications">
-                            <?= lang('receive_notifications') ?>
-                        </label>
-                    </div>
-                </fieldset>
+                                <div class="form-check form-switch">
+                                    <input class="form-check-input" id="notifications" type="checkbox">
+                                    <label class="form-check-label" for="notifications">
+                                        <?= lang('receive_notifications') ?>
+                                    </label>
+                                </div>
+                            </div>
+                        </div>
+                    </fieldset>
+                </form>
             </div>
-        </form>
+        </div>
+        
     </div>
 </div>