From 8e7d44ec5763ca8484ae36b4d0a25a3c4cdcaa64 Mon Sep 17 00:00:00 2001
From: Patrick Jentsch <p.jentsch@uni-bielefeld.de>
Date: Tue, 11 Apr 2023 15:03:12 +0200
Subject: [PATCH] Settings ui polish

---
 app/static/js/App.js                          |  4 +++
 app/templates/admin/user_settings.html.j2     | 31 +++++++---------
 app/templates/users/settings/settings.html.j2 | 35 ++++++++++++-------
 3 files changed, 39 insertions(+), 31 deletions(-)

diff --git a/app/static/js/App.js b/app/static/js/App.js
index 6d54a7a5..0741592d 100644
--- a/app/static/js/App.js
+++ b/app/static/js/App.js
@@ -60,6 +60,10 @@ class App {
         iconPrefix = '<i class="left nopaque-icons">J</i>';
         break;
       }
+      case 'settings': {
+        iconPrefix = '<i class="left material-icons">settings</i>';
+        break;
+      }
       default: {
         iconPrefix = '<i class="left material-icons">notifications</i>';
         break;
diff --git a/app/templates/admin/user_settings.html.j2 b/app/templates/admin/user_settings.html.j2
index 527e96d2..48391a71 100644
--- a/app/templates/admin/user_settings.html.j2
+++ b/app/templates/admin/user_settings.html.j2
@@ -19,25 +19,18 @@
         <i class="caret material-icons">keyboard_arrow_right</i>
       </div>
       <div class="collapsible-body">
-        <div class="row">
-          <div class="col s12 l1">
-            <p><i class="material-icons">check</i></p>
-          </div>
-          <div class="col s12 l7">
-            <p>
-              Confirmed<br>
-              <span class="light">Change confirmation status manually.</span>
-            </p>
-          </div>
-          <div class="col s3 l4">
-            <div class="switch">
-              <label>
-                unconfirmed
-                <input {% if user.confirmed %}checked{% endif %} id="user-confirmed-switch" type="checkbox">
-                <span class="lever"></span>
-                confirmed
-              </label>
-            </div>
+        <div style="overflow: auto;">
+          <p class="left"><i class="material-icons">check</i></p>
+          <p class="left" style="margin-left: 10px;">
+            Confirmed<br>
+            <span class="light">Change confirmation status manually.</span>
+          </p>
+          <br class="hide-on-med-and-down">
+          <div class="switch right">
+            <label>
+              <input {% if user.confirmed %}checked{% endif %} id="user-confirmed-switch" type="checkbox">
+              <span class="lever"></span>
+            </label>
           </div>
         </div>
       </div>
diff --git a/app/templates/users/settings/settings.html.j2 b/app/templates/users/settings/settings.html.j2
index f862840d..3f028e7a 100644
--- a/app/templates/users/settings/settings.html.j2
+++ b/app/templates/users/settings/settings.html.j2
@@ -20,21 +20,32 @@
       <ul class="collapsible no-autoinit settings-collapsible">
         <li>
           <div class="collapsible-header" style="justify-content: space-between;">
-            <span>Profile Privacy</span>
+            <span>Privacy</span>
             <i class="material-icons caret">keyboard_arrow_right</i>
           </div>
           <div class="collapsible-body">
-            <div class="row">
-              <div class="col s12 l3">
-                <div class="switch">
-                  <label>
-                    private
-                    <input {% if user.is_public %}checked{% endif %} id="profile-is-public-switch" type="checkbox">
-                    <span class="lever"></span>
-                    public
-                  </label>
-                </div>
+            <div style="overflow: auto;">
+              <p class="left"><i class="material-icons">public</i></p>
+              <p class="left" style="margin-left: 10px;">
+                Public status<br>
+                <span class="light">Choose whether your profile is visible to other users.</span>
+              </p>
+              <br class="hide-on-med-and-down">
+              <div class="switch right">
+                <label>
+                  <input {% if user.is_public %}checked{% endif %} id="profile-is-public-switch" type="checkbox">
+                  <span class="lever"></span>
+                </label>
               </div>
+            </div>
+            <div style="overflow: auto;">
+              <p class="left"><i class="material-icons">badge</i></p>
+              <p class="left" style="margin-left: 10px;">
+                Public data<br>
+                <span class="light">Choose which data is visible on your profile.</span>
+              </p>
+            </div>
+            <div class="row" style="margin-left: 24px;">
               <div class="col s12 l3">
                 <label>
                   <input {% if user.has_profile_privacy_setting('SHOW_EMAIL') %}checked{% endif %} class="profile-privacy-setting-checkbox" data-profile-privacy-setting-name="SHOW_EMAIL" {% if not user.is_public %}disabled{% endif %} type="checkbox">
@@ -58,7 +69,7 @@
         </li>
         <li>
           <div class="collapsible-header" style="justify-content: space-between;">
-            <span>Profile information</span>
+            <span>Information</span>
             <i class="material-icons caret">keyboard_arrow_right</i>
           </div>
           <div class="collapsible-body">