merge(sync): pull 'scidsg/main' updates into PR branch [scidsg#411]

.github/workflows/build-and-deploy-release.yml

@@ -29,20 +29,23 @@ jobs:
             ghcr.io/${{ github.repository }}/hushline:${{ github.ref_name }}
             ghcr.io/${{ github.repository }}/hushline:release
           platforms: linux/amd64,linux/arm64
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
 
   deploy:
     runs-on: ubuntu-latest
     needs: build-and-push
     steps:
       - name: Install doctl and authenticate
         run: |
-          sudo snap install doctl
+          sudo snap install doctl jq
           doctl auth init -t $DIGITALOCEAN_TOKEN
         env:
           DIGITALOCEAN_TOKEN: ${{ secrets.DIGITALOCEAN_TOKEN }}
 
       - name: Trigger deployment on DigitalOcean App Platform
         run: |
-          doctl apps create-deployment $DIGITALOCEAN_APP_ID --force-rebuild --wait
+          app_id=$(doctl apps list --output json| jq '.[] | select(.spec.name == "hushline-prod") | .id' -r)
+          doctl apps create-deployment $app_id --force-rebuild --wait
         env:
           DIGITALOCEAN_APP_ID: ${{ secrets.DIGITALOCEAN_APP_ID }}

.github/workflows/build-latest.yml

@@ -27,3 +27,5 @@ jobs:
           push: true
           tags: ghcr.io/${{ github.repository }}/hushline:latest
           platforms: linux/amd64,linux/arm64
+          cache-from: type=gha
+          cache-to: type=gha,mode=max

hushline/static/css/style.css

@@ -80,7 +80,7 @@ h2 {
 }
 
 h1+p:not(.instr):not(.message):not(.badge):not(.landing-message),
-h2+p:not(.instr):not(.message):not(.badge):not(.landing-message) {
+h2+p:not(.instr):not(.message):not(.badge):not(.landing-message):not(.helper) {
     margin-top: .5rem;
     margin-bottom: 1rem;
 }
@@ -379,6 +379,7 @@ header nav ul {
     gap: 1.125rem;
     margin: 0;
     padding: 0;
+    align-items: center;
 }
 
 header nav li {
@@ -712,14 +713,15 @@ img.upgrade {
   font-size: var(--font-size-base);
   font-family: var(--font-sans);
   white-space: nowrap;
-  border-radius: 0px;
-  border: 0px;
+  border-radius: 0em;
+  border: 1px solid transparent;
   background-color: transparent;
   color: var(--color-text);
   box-shadow: none;
   margin: 0;
   box-sizing: content-box;
   outline: none;
+  border-bottom: 1px solid transparent;
 }
 
 .tab:focus-within {
@@ -732,7 +734,8 @@ img.upgrade {
 
 /* Create an active/current tablink class */
 .tab.active {
-    box-shadow: 0 -3px 0 inset var(--color-brand);
+    box-shadow: 0 -2px 0 inset var(--color-brand);
+    border-bottom: 1px solid var(--color-brand);
 }
 
 .tab.active  {
@@ -789,18 +792,19 @@ img.upgrade {
 .dropbtn {
   cursor: pointer;
   background: none;
-  padding: 0;
+  padding: .25rem 0;
   min-height: 0px;
   min-width: 0px;
   box-shadow: none;
   margin: 0;
   color: var(--color-text);
   font-family: var(--font-sans);
+  border: 1px solid transparent;
 }
 
 .dropbtn:focus-within {
     outline: none;
-    border: 2px solid var(--color-text);
+    border: 1px solid var(--color-brand);
 }
 
  .dropdown a {
@@ -843,6 +847,10 @@ a.dropbtn:hover {
     gap: 0;
 }
 
+.dropdown-content li {
+    width: 100%;
+}
+
 /* Change color of dropdown links on hover */
 .dropdown-content a:hover {background-color: #dfffff;}
 
@@ -1015,6 +1023,14 @@ p.helper {
     margin-top: .5rem
 }
 
+p.section-intro {
+    margin-bottom: .75rem;
+}
+
+h2 + p.helper:not(h2 + .badgeContainer + p.helper) {
+    margin-top: .125rem;
+}
+
 .user-actions {
     display: flex;
     gap: .625rem;
@@ -1131,6 +1147,7 @@ p.helper {
         border-radius: .25rem;
         outline: var(--border);
         min-width: 140px;
+        align-items: start;
     }
 
     header nav .dropbtn {

hushline/templates/base.html

@@ -35,7 +35,7 @@
     {% if messages %}
     <div class="flash-messages" role="alert">
         {% for message in messages %}
-          <div class="flash-message">{{ message }}</div>
+        <div class="flash-message">{{ message }}</div>
         {% endfor %}
     </div>
     {% endif %}
@@ -55,14 +55,15 @@ <h1>🤫 Hush Line</h1>
                     <li><a href="{{ url_for('submit_message', username=session.username) }}">Submit Message</a></li>
                     <li class="dropdown">
                         <button type="button" aria-expanded="false" aria-controls="dropdown-content" class="dropbtn">
-                            @{{ session['username'] }} <img class="dropdown-icon" src="/static/img/app/dropdown.png" alt="Dropdown">
+                            @{{ session['username'] }} <img class="dropdown-icon"
+                                src="{{ url_for('static', filename='img/app/dropdown.png') }}" alt="Dropdown">
                         </button>
-                         <div id="dropdown-content" class="dropdown-content" hidden>
+                        <div id="dropdown-content" class="dropdown-content" hidden>
                             <ul>
                                 <li><a href="{{ url_for('settings.index') }}">Settings</a></li>
                                 <li><a href="{{ url_for('logout') }}">Logout</a></li>
                             </ul>
-                        </div> 
+                        </div>
                     </li>
                     {% else %}
                     <li><a href="{{ url_for('login') }}">Login</a></li>

hushline/templates/directory.html

@@ -3,25 +3,23 @@
 {% block content %}
 <h2>User Directory</h2>
 {% if not logged_in %}
-<p class="helper">👋 Welcome to Hush Line! Find users who've opted into being listed below.</p>
+<p class="helper section-intro">👋 Welcome to Hush Line! Find users who've opted into being listed below.</p>
 {% endif %}
 <div class="directory-tabs">
     <ul class="tab-list" role="tablist">
         <li role="presentation">
-            <button type="button" class="tab active" data-tab="verified" role="tab" aria-selected="true" aria-controls="verified" id="verified-tab" type="button">Verified</button>
+            <button type="button" class="tab active" data-tab="verified" role="tab" aria-selected="true"
+                aria-controls="verified" id="verified-tab" type="button">Verified</button>
         </li>
         <li role="presentation">
-            <button type="button" class="tab" data-tab="all" role="tab" aria-selected="false" aria-controls="all" id="all-tab" type="button">All</button>
+            <button type="button" class="tab" data-tab="all" role="tab" aria-selected="false" aria-controls="all"
+                id="all-tab" type="button">All</button>
         </li>
     </ul>
 </div>
 <div class="search-box">
-    <label
-        id="searchIcon"
-        for="searchInput"
-        aria-label="Search users"
-    >
-        <img src="../static/img/app/icon-search.png" alt="">
+    <label id="searchIcon" for="searchInput" aria-label="Search users">
+        <img src="{{ url_for('static', filename='img/app/icon-search.png') }}" alt="">
     </label>
     <input type="text" id="searchInput" placeholder="Search users...">
     <button id="clearIcon" type="button" style="cursor: pointer;" aria-label="Clear search field">&times;</button>

hushline/templates/submit_message.html

@@ -3,6 +3,7 @@
 
 {% block content %}
 <h2 class="submit">Submit a message to {{ display_name_or_username }}</h2>
+{% if user.is_admin or user.is_verified %}
 <div class="badgeContainer">
     {% if user.is_admin %}
     <p class="badge">⚙️&nbsp;Admin</p>
@@ -12,6 +13,7 @@ <h2 class="submit">Submit a message to {{ display_name_or_username }}</h2>
     <a class="meta" href="https://github.com/scidsg/hushline/blob/main/docs/3-managed-service.md#verified-accounts" target="_blank" rel="noopener noreferrer" aria-label="Learn more about verified accounts.">Learn more</a>
     {% endif %}
 </div>
+{% endif %}
 {% if current_user_id == user.id or (secondary_username and current_user_id == secondary_username.primary_user_id) %}
 <p class="instr">Only visible to you: This is your public tip line. Share the address on your social media profiles,
     your website, or email signature. Ensuring that someone submitting a message trusts this form belongs to you is