From 51637d6f87a05ddbe69fb5fef94614bfb20807f7 Mon Sep 17 00:00:00 2001
From: Syfaro <syfaro@huefox.com>
Date: Wed, 7 Feb 2024 14:09:48 -0500
Subject: [PATCH] Add more icons.

---
 templates/user/check_form.html | 18 +++++++++++++--
 templates/user/index.html      | 36 ++++++++++++++++++++++++++----
 templates/user/media/list.html |  9 +++++++-
 templates/user/media/view.html | 40 +++++++++++++++++++++++++++++-----
 4 files changed, 90 insertions(+), 13 deletions(-)

diff --git a/templates/user/check_form.html b/templates/user/check_form.html
index 1d7a400..74cedf1 100644
--- a/templates/user/check_form.html
+++ b/templates/user/check_form.html
@@ -11,7 +11,14 @@ <h1 class="title">Check Uploads</h1>
                 <input class="file-input" type="file" name="image" accept="image/png, image/jpeg"
                   data-file-name-label="#check-label" data-upload-button="#single-check-button" multiple>
                 <span class="file-cta">
-                  <span class="file-label">Select Photo</span>
+                  <span class="file-label">
+                    <span class="icon-text">
+                      <span class="icon">
+                        <i class="bi bi-card-image"></i>
+                      </span>
+                      <span>Select Photo</span>
+                    </span>
+                  </span>
                 </span>
                 <span class="file-name" id="check-label">No File Selected</span>
               </label>
@@ -23,7 +30,14 @@ <h1 class="title">Check Uploads</h1>
           </div>
 
           <div class="control">
-            <button id="single-check-button" class="button is-link is-fullwidth is-outlined" disabled>Check</button>
+            <button id="single-check-button" class="button is-link is-fullwidth is-outlined" disabled>
+              <span class="icon-text">
+                <span class="icon">
+                  <i class="bi bi-check-lg"></i>
+                </span>
+                <span>Check</span>
+              </span>
+            </button>
           </div>
         </form>
       </div>
diff --git a/templates/user/index.html b/templates/user/index.html
index debcf44..4ed5fe8 100644
--- a/templates/user/index.html
+++ b/templates/user/index.html
@@ -27,7 +27,14 @@ <h2 class="subtitle is-4">Monitored Accounts</h2>
 
           {% if user.has_verified_account() %}
           {% if monitored_accounts.is_empty() %}
-          <a href="/user/account/link" class="button is-primary is-large">Link First Account</a>
+          <a href="/user/account/link" class="button is-primary is-large">
+            <span class="icon-text">
+              <span class="icon">
+                <i class="bi bi-link-45deg"></i>
+              </span>
+              <span>Link Account</span>
+            </span>
+          </a>
           {% else %}
           <div class="block">
             <ul>
@@ -42,7 +49,14 @@ <h2 class="subtitle is-4">Monitored Accounts</h2>
           </div>
 
           <div class="block">
-            <a href="/user/account/link" class="button is-info is-outlined">Link Another Account</a>
+            <a href="/user/account/link" class="button is-info is-outlined">
+              <span class="icon-text">
+                <span class="icon">
+                  <i class="bi bi-link-45deg"></i>
+                </span>
+                <span>Link Another Account</span>
+              </span>
+            </a>
           </div>
           {% endif %}
           {% else if user.has_unverified_email() %}
@@ -66,7 +80,14 @@ <h2 class="subtitle is-4">Manual Upload</h2>
                   <input class="file-input" type="file" name="image" accept="image/png, image/jpeg"
                     data-file-name-label="#upload-single-label" data-upload-button="#single-upload-button" multiple>
                   <span class="file-cta">
-                    <span class="file-label">Select Photo</span>
+                    <span class="file-label">
+                      <span class="icon-text">
+                        <span class="icon">
+                          <i class="bi bi-card-image"></i>
+                        </span>
+                        <span>Select Photo</span>
+                      </span>
+                    </span>
                   </span>
                   <span class="file-name" id="upload-single-label">No File Selected</span>
                 </label>
@@ -78,7 +99,14 @@ <h2 class="subtitle is-4">Manual Upload</h2>
             </div>
 
             <div class="control">
-              <button id="single-upload-button" class="button is-link is-fullwidth is-outlined" disabled>Upload</button>
+              <button id="single-upload-button" class="button is-link is-fullwidth is-outlined" disabled>
+                <span class="icon-text">
+                  <span class="icon">
+                    <i class="bi bi-cloud-upload-fill"></i>
+                  </span>
+                  <span>Upload</span>
+                </span>
+              </button>
             </div>
           </form>
         </div>
diff --git a/templates/user/media/list.html b/templates/user/media/list.html
index 7bc56a7..8f24aed 100644
--- a/templates/user/media/list.html
+++ b/templates/user/media/list.html
@@ -35,7 +35,14 @@ <h1 class="title has-text-centered">All Media</h1>
                 </div>
 
                 <div class="control">
-                  <button class="button is-primary">Sort</button>
+                  <button class="button is-primary">
+                    <span class="icon-text">
+                      <span>Sort</span>
+                      <span class="icon">
+                        <i class="bi bi-sort-down"></i>
+                      </span>
+                    </span>
+                  </button>
                 </div>
               </div>
             </form>
diff --git a/templates/user/media/view.html b/templates/user/media/view.html
index 3301ee4..32018af 100644
--- a/templates/user/media/view.html
+++ b/templates/user/media/view.html
@@ -68,7 +68,14 @@ <h3 class="subtitle has-text-centered absolute-time" data-timestamp="{{ posted_a
 
           <div>
             <div class="control is-flex-grow-1">
-              <button class="button is-fullwidth is-info">Merge</button>
+              <button class="button is-fullwidth is-info">
+                <span class="icon-text">
+                  <span class="icon">
+                    <i class="bi bi-lightning-charge-fill"></i>
+                  </span>
+                  <span>Merge</span>
+                </span>
+              </button>
             </div>
           </div>
         </form>
@@ -89,7 +96,7 @@ <h2 class="subtitle has-text-centered">Matched Images</h2>
                 <th>Posted By</th>
                 <th>Found</th>
                 <th>Link</th>
-                <th>Actions</th>
+                <th class="has-text-right">Actions</th>
               </tr>
             </thead>
             <tbody>
@@ -116,7 +123,7 @@ <h2 class="subtitle has-text-centered">Matched Images</h2>
                     <a href="{{ image.best_link() }}" target="_blank">{{ image.best_link()|clean_link }}</a>
                   </span>
                 </td>
-                <td class="has-text-centered">
+                <td class="has-text-right">
                   <form method="POST">
                     <input type="hidden" name="redirect_url" value="{{ url }}">
                     <input type="hidden" name="site" value="{{ image.site.to_string() }}">
@@ -124,9 +131,23 @@ <h2 class="subtitle has-text-centered">Matched Images</h2>
                     {% match image.poster_pair() %}
                     {% when Some with (poster_pair) %}
                     {% if allowlisted_users.contains_key(poster_pair) %}
-                    <button formaction="/user/allowlist/remove" class="button has-tooltip-left" data-tooltip="Receive notifications when this account posts on this site">Un-allowlist Poster</a>
+                    <button formaction="/user/allowlist/remove" class="button has-tooltip-left" data-tooltip="Receive notifications when this account posts on this site">
+                      <span class="icon-text">
+                        <span class="icon">
+                          <i class="bi bi-clipboard-x-fill"></i>
+                        </span>
+                        <span>Un-Allowlist Poster</span>
+                      </span>
+                    </button>
                     {% else %}
-                    <button formaction="/user/allowlist/add" class="button has-tooltip-left" data-tooltip="Skip sending notifications when this account posts on this site">Allowlist Poster</a>
+                    <button formaction="/user/allowlist/add" class="button has-tooltip-left" data-tooltip="Skip sending notifications when this account posts on this site">
+                      <span class="icon-text">
+                        <span class="icon">
+                          <i class="bi bi-clipboard-plus"></i>
+                        </span>
+                        <span>Allowlist Poster</span>
+                      </span>
+                    </button>
                     {% endif %}
                     {% else %}
                     <button class="button is-text" disabled>No Actions Available</button>
@@ -217,7 +238,14 @@ <h2 class="subtitle has-text-centered">My Uploads</h2>
           <form method="POST" action="/user/media/remove">
             <input type="hidden" name="media_id" value="{{ media.id }}">
             <div class="control is-flex-grow-1">
-              <button class="button is-fullwidth is-danger">Remove Media</button>
+              <button class="button is-fullwidth is-danger">
+                <span class="icon-text">
+                  <span class="icon">
+                    <i class="bi bi-trash-fill"></i>
+                  </span>
+                  <span>Remove Media</span>
+                </span>
+              </button>
             </div>
           </form>
         </div>