add: better mobile ui for timeline pages

add: rename button classes (quaternary->lowered, tertiary->raised)

crates/app/src/public/html/components.lisp

@@ -75,7 +75,7 @@
 (text "{%- endmacro %} {% macro likes(id, asset_type, likes=0, dislikes=0, secondary=false) -%}")
 (button
     ("title" "Like")
-    ("class" "{% if secondary -%}quaternary{% else %}camo{%- endif %} small")
+    ("class" "{% if secondary -%}lowered{% else %}camo{%- endif %} small")
     ("hook_element" "reaction.like")
     ("onclick" "trigger('me::react', [event.target, '{{ id }}', '{{ asset_type }}', true])")
     (text "{{ icon \"heart\" }} {% if likes > 0 -%}")
@@ -86,7 +86,7 @@
 (text "{% if not user or not user.settings.hide_dislikes -%}")
 (button
     ("title" "Dislike")
-    ("class" "{% if secondary -%}quaternary{% else %}camo{%- endif %} small")
+    ("class" "{% if secondary -%}lowered{% else %}camo{%- endif %} small")
     ("hook_element" "reaction.dislike")
     ("onclick" "trigger('me::react', [event.target, '{{ id }}', '{{ asset_type }}', false])")
     (text "{{ icon \"heart-crack\" }} {% if dislikes > 0 -%}")
@@ -215,7 +215,7 @@
                         ("hook" "long")
                         (text "{{ post.title }}"))
 
-                    (button ("class" "small quaternary") (icon (text "ellipsis"))))
+                    (button ("class" "small lowered") (icon (text "ellipsis"))))
                 (text "{% else %}")
                 (text "{% if not post.context.content_warning -%}")
                 (span
@@ -232,14 +232,14 @@
                     ; content
                     (text "{{ post.content|markdown|safe }}  {% if expect_repost -%} {% if repost -%} {{ self::post(post=repost[1], owner=repost[0], secondary=not secondary, community=false, show_community=false, can_manage_post=false) }} {% else %}")
                     (div
-                        ("class" "card tertiary red flex items-center gap-2")
+                        ("class" "card lowered red flex items-center gap-2")
                         (text "{{ icon \"frown\" }}")
                         (span
                             (text "Could not find original post...")))
                     (text "{%- endif %} {%- endif %}"))
                 (text "{{ self::post_media(upload_ids=post.uploads) }} {% else %}")
                 (details
-                    ("class" "card tiny tertiary w-full")
+                    ("class" "card tiny lowered w-full")
                     (summary
                         ("class" "red w-full")
                         (b
@@ -259,7 +259,7 @@
                             ; content
                             (text "{{ post.content|markdown|safe }}  {% if expect_repost -%} {% if repost -%} {{ self::post(post=repost[1], owner=repost[0], secondary=not secondary, community=false, show_community=false, can_manage_post=false) }} {% else %}")
                             (div
-                                ("class" "card tertiary red flex items-center gap-2")
+                                ("class" "card lowered red flex items-center gap-2")
                                 (text "{{ icon \"frown\" }}")
                                 (span
                                     (text "Could not find original post...")))
@@ -438,21 +438,21 @@
             ("class" "card secondary w-full flex flex-wrap gap-2")
             (text "{% if notification.read -%}")
             (button
-                ("class" "tertiary")
+                ("class" "raised")
                 ("onclick" "trigger('me::update_notification_read_status', ['{{ notification.id }}', false])")
                 (text "{{ icon \"undo\" }}")
                 (span
                     (text "{{ text \"notifs:action.mark_as_unread\" }}")))
             (text "{% else %}")
             (button
-                ("class" "green tertiary")
+                ("class" "green raised")
                 ("onclick" "trigger('me::update_notification_read_status', ['{{ notification.id }}', true])")
                 (text "{{ icon \"check\" }}")
                 (span
                     (text "{{ text \"notifs:action.mark_as_read\" }}")))
             (text "{%- endif %}")
             (button
-                ("class" "red tertiary")
+                ("class" "red raised")
                 ("onclick" "trigger('me::remove_notification', ['{{ notification.id }}'])")
                 (text "{{ icon \"trash\" }}")
                 (span
@@ -480,7 +480,7 @@
     ("class" "flex justify-between gap-2 w-full")
     (text "{% if page > 0 -%}")
     (a
-        ("class" "button quaternary")
+        ("class" "button lowered")
         ("href" "?page={{ page - 1 }}{{ key }}{{ value }}")
         (text "{{ icon \"arrow-left\" }}")
         (span
@@ -489,7 +489,7 @@
     (div)
     (text "{%- endif %} {% if items != 0 -%}")
     (a
-        ("class" "button quaternary")
+        ("class" "button lowered")
         ("href" "?page={{ page + 1 }}{{ key }}{{ value }}")
         (span
             (text "{{ text \"general:link.next\" }}"))
@@ -676,7 +676,7 @@
         ; this is only shown if the post author is anonymous AND we are a helper
         (text "{% if is_helper and owner.id == 0 %}")
         (details
-            ("class" "card tiny tertiary w-full")
+            ("class" "card tiny lowered w-full")
             (summary
                 ("class" "w-full flex gap-2 flex-wrap items-center")
                 (icon (text "shield"))
@@ -1096,7 +1096,7 @@
 
 (text "{%- endmacro %} {% macro emoji_picker(element_id, render_dialog=false) -%}")
 (button
-    ("class" "button small square quaternary")
+    ("class" "button small square lowered")
     ("onclick" "window.EMOJI_PICKER_TEXT_ID = '{{ element_id }}'; document.getElementById('emoji_dialog').showModal()")
     ("title" "Emojis")
     ("type" "button")
@@ -1168,14 +1168,14 @@
             (div
                 ("class" "flex gap-2")
                 (button
-                    ("class" "bold red quaternary")
+                    ("class" "bold red lowered")
                     ("onclick" "document.getElementById('emoji_dialog').close()")
                     ("type" "button")
                     (text "{{ icon \"x\" }} {{ text \"dialog:action.close\" }}"))))))
 
 (text "{%- endif %} {%- endmacro %} {% macro file_picker(files_list_id) -%}")
 (button
-    ("class" "button small square quaternary")
+    ("class" "button small square lowered")
     ("onclick" "pick_file()")
     ("title" "Images")
     ("type" "button")
@@ -1270,14 +1270,14 @@
     (text "{{ components::emoji_picker(element_id=\"content\", render_dialog=true) }}  {% if not quoting -%} {% if is_supporter -%} {{ components::file_picker(files_list_id=\"files_list\") }} {%- endif %} {%- endif %}")
 
     (button
-        ("class" "small square quaternary")
+        ("class" "small square lowered")
         ("title" "Add poll")
         ("onclick" "document.getElementById('poll_options_dialog').showModal()")
         ("type" "button")
         (text "{{ icon \"list-todo\" }}"))
 
     (button
-        ("class" "small square quaternary")
+        ("class" "small square lowered")
         ("title" "More options")
         ("onclick" "document.getElementById('post_options_dialog').showModal()")
         ("type" "button")
@@ -1297,7 +1297,7 @@
             (div
                 ("class" "flex gap-2")
                 (button
-                    ("class" "bold red quaternary")
+                    ("class" "bold red lowered")
                     ("onclick" "document.getElementById('post_options_dialog').close()")
                     ("type" "button")
                     (text "{{ icon \"x\" }} {{ text \"dialog:action.close\" }}"))))
@@ -1474,7 +1474,7 @@
             (div
                 ("class" "flex gap-2")
                 (button
-                    ("class" "bold red quaternary")
+                    ("class" "bold red lowered")
                     ("onclick" "document.getElementById('poll_options_dialog').close()")
                     ("type" "button")
                     (text "{{ icon \"x\" }} {{ text \"dialog:action.close\" }}"))))))
@@ -1482,7 +1482,7 @@
 (text "{%- endmacro %}")
 (text "{% macro poll(post, poll) -%}")
 (div
-    ("class" "card tertiary w-full flex flex-col gap-2")
+    ("class" "card lowered w-full flex flex-col gap-2")
     (text "{% set total = poll[0].votes_a + poll[0].votes_b + poll[0].votes_c + poll[0].votes_d %}")
 
     (text "{% if poll[1] or poll[2] or user and user.id == poll[0].owner -%}")
@@ -1525,14 +1525,14 @@
 
     ; option a
     (button
-        ("class" "hover_left_bar tertiary justify-start w-full poll_option")
+        ("class" "hover_left_bar raised justify-start w-full poll_option")
         ("onclick" "trigger('me::vote', ['{{ post.id }}', 'A'])")
         (icon (text "tally-1"))
         (text "{{ poll[0].option_a }}"))
 
     ; option b
     (button
-        ("class" "hover_left_bar tertiary justify-start w-full poll_option")
+        ("class" "hover_left_bar raised justify-start w-full poll_option")
         ("onclick" "trigger('me::vote', ['{{ post.id }}', 'B'])")
         (icon (text "tally-2"))
         (text "{{ poll[0].option_b }}"))
@@ -1540,7 +1540,7 @@
     ; option c
     (text "{% if poll[0].option_c -%}")
     (button
-        ("class" "hover_left_bar tertiary justify-start w-full poll_option")
+        ("class" "hover_left_bar raised justify-start w-full poll_option")
         ("onclick" "trigger('me::vote', ['{{ post.id }}', 'C'])")
         (icon (text "tally-3"))
         (text "{{ poll[0].option_c }}"))
@@ -1549,7 +1549,7 @@
     ; option d
     (text "{% if poll[0].option_d -%}")
     (button
-        ("class" "hover_left_bar tertiary justify-start w-full poll_option")
+        ("class" "hover_left_bar raised justify-start w-full poll_option")
         ("onclick" "trigger('me::vote', ['{{ post.id }}', 'D'])")
         (icon (text "tally-4"))
         (text "{{ poll[0].option_d }}"))
@@ -1666,7 +1666,7 @@
         };"))
     (text "{% else %}")
     (button
-        ("class" "quaternary red")
+        ("class" "lowered red")
         ("onclick" "cancel_request()")
         (text "{{ icon \"x\" }}")
         (span
@@ -1701,21 +1701,21 @@
         };"))
     (text "{%- endif %} {% else %}")
     (button
-        ("class" "quaternary red")
+        ("class" "lowered red")
         ("onclick" "leave_community()")
         (text "{{ icon \"circle-minus\" }}")
         (span
             (text "{{ text \"communities:action.leave\" }}")))
     (a
         ("href" "/chats/{{ community.id }}/0")
-        ("class" "button quaternary")
+        ("class" "button lowered")
         (text "{{ icon \"message-circle\" }}")
         (span
             (text "{{ text \"communities:label.chats\" }}")))
     (text "{% if user and can_post -%}")
     (a
         ("href" "/communities/intents/post?community={{ community.id }}")
-        ("class" "button quaternary")
+        ("class" "button lowered")
         ("data-turbo" "false")
         (text "{{ icon \"plus\" }}")
         (span
@@ -1752,13 +1752,13 @@
     (text "{%- endif %} {% else %}")
     (a
         ("href" "/chats/{{ community.id }}/0")
-        ("class" "button quaternary")
+        ("class" "button lowered")
         (text "{{ icon \"message-circle\" }}")
         (span
             (text "{{ text \"communities:label.chats\" }}")))
     (a
         ("href" "/communities/intents/post?community={{ community.id }}")
-        ("class" "button quaternary")
+        ("class" "button lowered")
         ("data-turbo" "false")
         (text "{{ icon \"plus\" }}")
         (span