From 60ee90cd6a4ec93f049042179f35685c2caa3aee Mon Sep 17 00:00:00 2001
From: grandeljay <github.jay@grandel.anonaddy.me>
Date: Wed, 14 Dec 2022 18:30:34 +0100
Subject: [PATCH] Add birthdate tooltip

---
 src/assets/css/default.css |  8 ++++++++
 src/assets/js/default.js   | 14 +++++++++++++-
 src/assets/js/home.js      | 17 -----------------
 src/assets/js/profile.js   |  7 +++++++
 src/pages/profile.php      |  7 +++++--
 5 files changed, 33 insertions(+), 20 deletions(-)

diff --git a/src/assets/css/default.css b/src/assets/css/default.css
index 98acb096..59878498 100644
--- a/src/assets/css/default.css
+++ b/src/assets/css/default.css
@@ -272,3 +272,11 @@ button.item {
         display: flex;
     }
 }
+
+/**
+ * Icons
+ */
+i.small.small.small.icon,
+i.small.small.small.icons {
+    vertical-align: baseline;
+}
diff --git a/src/assets/js/default.js b/src/assets/js/default.js
index 4accca79..1b619fa2 100644
--- a/src/assets/js/default.js
+++ b/src/assets/js/default.js
@@ -10,7 +10,8 @@ if ('serviceWorker' in navigator) {
     })
 }
 
-const urlParams = new URLSearchParams(wishthis.$_GET);
+const urlParams  = new URLSearchParams(wishthis.$_GET);
+const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
 
 $(function() {
     /**
@@ -162,6 +163,17 @@ $(function() {
         $('.menu.sidebar').sidebar('show');
     });
 
+    /**
+     * Popups
+     */
+    popup_settings_default = {
+        'position'  : 'top center',
+        'variation' : isDarkMode ? '' : 'inverted',
+        'hoverable' : true,
+    };
+
+    $('[data-content]').popup(popup_settings_default);
+    $('[data-html]').popup(popup_settings_default);
 });
 
 /**
diff --git a/src/assets/js/home.js b/src/assets/js/home.js
index 75da5f9c..e2beaf16 100644
--- a/src/assets/js/home.js
+++ b/src/assets/js/home.js
@@ -1,19 +1,4 @@
 $(function() {
-    /**
-     * Popups
-     */
-    const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
-
-    /** Why wishthis? */
-    popup_settings_why_wishthis = {
-        'position'  : 'top center',
-        'variation' : isDarkMode ? '' : 'inverted',
-        'hoverable' : true,
-    };
-
-    $('[data-content]').popup(popup_settings_why_wishthis);
-    $('[data-html]').popup(popup_settings_why_wishthis);
-
     /**
      * Statistics
      */
@@ -114,8 +99,6 @@ function showStatistic(elementStatistic, amount, timeout, modified) {
     );
 
     /** Set Popup */
-    const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
-
     $(elementStatistic).popup({
         'title'     : wishthis.strings.popup.last_modified,
         'content'   : modified,
diff --git a/src/assets/js/profile.js b/src/assets/js/profile.js
index 50b5922a..9790fef7 100644
--- a/src/assets/js/profile.js
+++ b/src/assets/js/profile.js
@@ -1,6 +1,9 @@
 $(function() {
     $('.menu.profile .item').tab();
 
+    /**
+     * Personal
+     */
     $('.ui.calendar').calendar({
         type           : 'date',
         firstDayOfWeek : 1,
@@ -12,6 +15,10 @@ $(function() {
             'user-email' : 'email',
         }
     });
+
+    /**
+     * Password
+     */
     $('[data-tab="password"] .ui.form').form({
         fields: {
             'user-password'        : ['minLength[8]', 'empty'],
diff --git a/src/pages/profile.php b/src/pages/profile.php
index 9929bc21..1ace41ad 100644
--- a/src/pages/profile.php
+++ b/src/pages/profile.php
@@ -230,8 +230,11 @@ $page->navigation();
                                     <input type="email" name="user-email" value="<?= $_SESSION['user']->email ?>" />
                                 </div>
 
-                                <div class="field">
-                                    <label><?= __('Birthdate') ?></label>
+                                <div class="field" data-content="<?= __('Used to suggest a wishlist called "Birthday", if it\'s coming up.') ?>">
+                                    <label>
+                                        <?= __('Birthdate') ?>
+                                        <i class="ui small circular info icon"></i>
+                                    </label>
 
                                     <div class="ui calendar">
                                         <div class="ui input left icon">