frontend: make use of new width space and use more icons

assets/sass/_vars.scss

@@ -29,5 +29,5 @@ $errorText: darken($error, 30%);
 $errorColor: desaturate($errorText, 50%);
 
 // Responsivity
-$mobileThreshold: 632px;
+$mobileThreshold: 850px;
 $desktopThreshold: 940px;

views/desktop-utility.njk

@@ -1,6 +1,6 @@
 <div class="container">
     <section class="panel">
-        <h2>Setup a desktop utility</h2>
+        <h2><i data-feather="tool"></i> Setup a desktop utility</h2>
         <p>There may be a desktop client at some point. For now, if you're an advanced user, you can setup
             scripts/macros.</p>
 
@@ -12,7 +12,7 @@
             <table class="data-table">
                 <thead>
                 <tr>
-                    <th>Name</th>
+                    <th class="table-col-grow">Name</th>
                     <th>Download link</th>
                 </tr>
                 </thead>
@@ -114,10 +114,9 @@
             <p>For examples with curl, please download and review the scripts above.</p>
         </section>
     </section>
-</div>
 
     <section class="panel">
-    <h2>Auth tokens</h2>
+        <h2><i data-feather="key"></i> Auth tokens</h2>
         <form action="{{ route('generate-token') }}" method="POST">
             {{ macros.csrf(getCsrfToken) }}
 
@@ -128,7 +127,7 @@
             <thead>
             <tr>
                 <th>#</th>
-            <th>Secret</th>
+                <th class="table-col-grow">Secret</th>
                 <th>Created at</th>
                 <th>Last used at</th>
                 <th>Actions</th>
@@ -147,9 +146,9 @@
                     </td>
                     <td>{{ token.created_at.toISOString() }}</td>
                     <td>{{ token.used_at.toISOString() }}</td>
-                <td>
+                    <td class="actions">
                         <form action="{{ route('revoke-token', token.id) }}" method="POST">
-                        <button class="button danger"><i data-feather="trash"></i> Revoke</button>
+                            <button class="button danger"><i data-feather="trash"></i> <span class="tip">Revoke</span></button>
                         </form>
                     </td>
                 </tr>
@@ -157,3 +156,4 @@
             </tbody>
         </table>
     </section>
+</div>

views/file-manager.njk

@@ -10,13 +10,14 @@
     <h1>File manager</h1>
     <p>You're their manager, please be nice with them.</p>
 
+    <div class="container">
         <section class="panel">
-        <h2>File list</h2>
+            <h2><i data-feather="folder"></i> File list</h2>
             <table class="data-table">
                 <thead>
                 <tr>
                     <th>#</th>
-                <th>URL</th>
+                    <th class="table-col-grow">URL</th>
                     <th>Name</th>
                     <th>Size</th>
                     <th>Expires at</th>
@@ -34,17 +35,17 @@
                                 <button class="copy-button"><i data-feather="copy"></i></button>
                             </div>
                         </td>
-                    <td>{{ file.real_name }}</td>
+                        <td><pre>{{ file.real_name }}</pre></td>
                         <td>{{ (file.size / (1024 * 1024)).toFixed(2) }}MB</td>
                         {% set expires_at = file.getExpirationDate() %}
                         <td>{% if expires_at %}{{ expires_at.toISOString() }}{% else %}Never{% endif %}</td>
-                    <td>
+                        <td class="actions">
                             {% if file.shouldBeDeleted() %}
                                 Pending deletion
                             {% else %}
                                 <form action="{{ route('delete-file-frontend', file.slug) }}" method="post">
                                     {{ macros.csrf(getCsrfToken) }}
-                                <button class="button danger"><i data-feather="trash"></i> Delete</button>
+                                    <button class="button danger"><i data-feather="trash"></i> <span class="tip">Delete</span></button>
                                 </form>
                             {% endif %}
                         </td>
@@ -53,4 +54,5 @@
                 </tbody>
             </table>
         </section>
+    </div>
 {% endblock %}

views/file-upload.njk

@@ -12,7 +12,7 @@
 
     <div class="container">
         <section class="panel">
-            <h2>Upload a file</h2>
+            <h2><i data-feather="upload"></i> Upload a file</h2>
 
             <form action="{{ route('post-file-frontend') }}" method="POST" enctype="multipart/form-data"
                   id="upload-form">

views/url-manager.njk

@@ -8,13 +8,14 @@
     <h1>URL manager</h1>
     <p>These are permanent.</p>
 
+    <div class="container">
         <section class="panel">
-        <h2>URL list</h2>
+            <h2><i data-feather="link"></i> URL list</h2>
             <table class="data-table">
                 <thead>
                 <tr>
                     <th>#</th>
-                <th>URL</th>
+                    <th class="table-col-grow">URL</th>
                     <th>Target</th>
                 </tr>
                 </thead>
@@ -29,10 +30,11 @@
                                 <button class="copy-button"><i data-feather="copy"></i></button>
                             </div>
                         </td>
-                    <td>{{ url.target_url }}</td>
+                        <td><pre>{{ url.target_url }}</pre></td>
                     </tr>
                 {% endfor %}
                 </tbody>
             </table>
         </section>
+    </div>
 {% endblock %}

views/url-shrinker.njk

@@ -12,7 +12,7 @@
 
     <div class="container">
         <section class="panel">
-            <h2>Shrink a URL</h2>
+            <h2><i data-feather="crosshair"></i> Shrink a URL</h2>
 
             <form action="{{ route('shrink-url') }}" method="POST" id="url-shrink-form">
                 {{ macros.field(_locals, 'text', 'target_url', '', 'Target URL', 'Only valid URLs starting with http:// or https://', validation_attributes='required') }}