From a074985549aa39cf8816d827bcd386f0f688344c Mon Sep 17 00:00:00 2001
From: Greg Newman <greg@gregnewman.org>
Date: Thu, 15 Dec 2022 15:11:23 -0500
Subject: [PATCH 01/10] :art: set fonts in tailwind

---
 frontend/styles.css   |  9 +++++----
 static/css/styles.css | 39 +++++++++++++++++++++++++++++++--------
 templates/base.html   |  1 -
 3 files changed, 36 insertions(+), 13 deletions(-)

diff --git a/frontend/styles.css b/frontend/styles.css
index a6129677..2c511081 100644
--- a/frontend/styles.css
+++ b/frontend/styles.css
@@ -1,12 +1,13 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-body {
-  color: white;
-}
+@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;500;600;700;800;900&display=swap");
 
 @layer base {
+  body {
+    color: white;
+    @apply font-cairo;
+  }
   h1 {
     @apply text-6xl;
     @apply mb-3;
diff --git a/static/css/styles.css b/static/css/styles.css
index 8f5cd843..34e5958b 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -582,6 +582,11 @@ select {
   outline: 1px auto -webkit-focus-ring-color;
 }
 
+body {
+  color: white;
+  font-family: 'Cairo', sans-serif;
+}
+
 h1 {
   font-size: 3.75rem;
   line-height: 1;
@@ -1109,6 +1114,10 @@ textarea {
   height: 1rem;
 }
 
+.h-5 {
+  height: 1.25rem;
+}
+
 .h-\[15px\] {
   height: 15px;
 }
@@ -1157,6 +1166,10 @@ textarea {
   width: 33.333333%;
 }
 
+.w-5 {
+  width: 1.25rem;
+}
+
 .w-1\/5 {
   width: 20%;
 }
@@ -1177,6 +1190,10 @@ textarea {
   flex: 1 1 auto;
 }
 
+.flex-shrink-0 {
+  flex-shrink: 0;
+}
+
 .table-auto {
   table-layout: auto;
 }
@@ -1315,6 +1332,12 @@ textarea {
   margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
+.space-x-2 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
 .space-y-6 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
@@ -1553,6 +1576,14 @@ textarea {
   padding-right: 40px;
 }
 
+.pl-11 {
+  padding-left: 2.75rem;
+}
+
+.pr-11 {
+  padding-right: 2.75rem;
+}
+
 .pr-2 {
   padding-right: 0.5rem;
 }
@@ -1641,10 +1672,6 @@ textarea {
   padding-left: 1.25rem;
 }
 
-.pr-11 {
-  padding-right: 2.75rem;
-}
-
 .pt-5 {
   padding-top: 1.25rem;
 }
@@ -1793,10 +1820,6 @@ textarea {
   transition-duration: 150ms;
 }
 
-body {
-  color: white;
-}
-
 .last\:border-0:last-child {
   border-width: 0px;
 }
diff --git a/templates/base.html b/templates/base.html
index 41e5e64c..a2f7adf3 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -15,7 +15,6 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <script defer src="https://unpkg.com/alpinejs@3.10.5/dist/cdn.min.js"></script>
-    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@500;600&display=swap" rel="stylesheet">
     {% block extra_head %}{% endblock %}
 
     <style>

From 00394231be2fec3685182af145c5512683f8fc51 Mon Sep 17 00:00:00 2001
From: Greg Newman <greg@gregnewman.org>
Date: Thu, 15 Dec 2022 15:12:09 -0500
Subject: [PATCH 02/10] :art: pad breadcrumb

---
 templates/board_base.html | 33 ++++++++++++++++-----------------
 1 file changed, 16 insertions(+), 17 deletions(-)

diff --git a/templates/board_base.html b/templates/board_base.html
index 14542fa4..9c74d0fc 100644
--- a/templates/board_base.html
+++ b/templates/board_base.html
@@ -13,6 +13,7 @@
 
 {% block forum_body %}
 
+  {# commented out because it's not in the designs #}
 {#{% block header %}#}
 {#<nav class="navbar navbar-expand-lg navbar-dark bg-primary">#}
 {#  <a class="navbar-brand" href="{% url 'forum:index' %}">{% block brand %}{{ MACHINA_FORUM_NAME|default:"My forum" }}{% endblock %}</a>#}
@@ -34,23 +35,21 @@
 {#{% endblock header %}#}
 
 <div class="my-5 container" id="main_container">
-  <div>
-    <div class="flex w-full">
-      <div class="w-1/2">
-        {% block breadcrumb %}{% include "partials/breadcrumb.html" %}{% endblock breadcrumb %}
-      </div>
-      <div class="w-1/2 text-right controls-link-wrapper">
-        {% spaceless %}
-        {% if not request.user.is_anonymous %}
-          <a href="{% url 'forum_member:user_subscriptions' %}" class="uppercase text-sm"><img src="{% static 'img/icons/icon_subscription.svg' %}" class="inline mr-2" />{% trans "Subscriptions" %}</a>
-          <a href="{% url 'forum_member:user_posts' request.user.id %}" class="ml-11 uppercase text-sm"><img src="{% static 'img/icons/icon_my_posts.svg' %}" class="inline mr-2" />{% trans "View my posts" %}</a>
-        {% endif %}
-        {% get_permission 'can_access_moderation_queue' request.user as can_access_moderation_queue %}
-        {% if can_access_moderation_queue %}
-          <a href="{% url 'forum_moderation:queue' %}" class="ml-11 uppercase text-sm"><img src="{% static 'img/icons/icon_gavel.svg' %}" class="inline mr-2" />{% trans "Moderation queue" %}</a>
-        {% endif %}
-        {% endspaceless %}
-      </div>
+  <div class="flex w-full">
+    <div class="w-1/2 pl-11">
+      {% block breadcrumb %}{% include "partials/breadcrumb.html" %}{% endblock breadcrumb %}
+    </div>
+    <div class="w-1/2 text-right controls-link-wrapper pr-11">
+      {% spaceless %}
+      {% if not request.user.is_anonymous %}
+        <a href="{% url 'forum_member:user_subscriptions' %}" class="uppercase text-sm"><img src="{% static 'img/icons/icon_subscription.svg' %}" class="inline mr-2" />{% trans "Subscriptions" %}</a>
+        <a href="{% url 'forum_member:user_posts' request.user.id %}" class="ml-11 uppercase text-sm"><img src="{% static 'img/icons/icon_my_posts.svg' %}" class="inline mr-2" />{% trans "View my posts" %}</a>
+      {% endif %}
+      {% get_permission 'can_access_moderation_queue' request.user as can_access_moderation_queue %}
+      {% if can_access_moderation_queue %}
+        <a href="{% url 'forum_moderation:queue' %}" class="ml-11 uppercase text-sm"><img src="{% static 'img/icons/icon_gavel.svg' %}" class="inline mr-2" />{% trans "Moderation queue" %}</a>
+      {% endif %}
+      {% endspaceless %}
     </div>
   </div>
   <div class="flex">

From 21dbbcc5f324e4d3f7ebe760c2a6ee2a49dd52cf Mon Sep 17 00:00:00 2001
From: Greg Newman <greg@gregnewman.org>
Date: Thu, 15 Dec 2022 15:12:49 -0500
Subject: [PATCH 03/10] :art: cleanup breadcrumbs on forum

Use svg chevron in the breadcrumbs

Note: use these elsewhere chevrons are called for
---
 templates/partials/breadcrumb.html | 35 ++++++++++++++++++++++++------
 1 file changed, 28 insertions(+), 7 deletions(-)

diff --git a/templates/partials/breadcrumb.html b/templates/partials/breadcrumb.html
index fc9d1ccd..e7f8a058 100644
--- a/templates/partials/breadcrumb.html
+++ b/templates/partials/breadcrumb.html
@@ -1,16 +1,37 @@
 {% load i18n %}
 
 <nav aria-label="breadcrumb">
-  <ol class="breadcrumb">
-    <li class="breadcrumb-item"><a href="{% url 'forum:index' %}"><i class="fas fa-home">&nbsp;</i>{% trans "Forum index" %}</a></li>
+  <ol class="inline-flex space-x-2 items-center">
+    <li class="breadcrumb-item"><a href="{% url 'forum:index' %}"><i
+      class="fas fa-home">&nbsp;</i>{% trans "Forum index" %}</a></li>
     {% if forum %}
-    {% for ancestor in forum.get_ancestors %}
-    <li class="breadcrumb-item"><a href="{% url 'forum:forum' ancestor.slug ancestor.id %}">{{ ancestor.name }}</a></li>
-    {% endfor %}
-    <li class="breadcrumb-item"><a href="{% url 'forum:forum' forum.slug forum.id %}">{{ forum.name }}</a></li>
+      {% for ancestor in forum.get_ancestors %}
+        <svg class="h-5 w-5 flex-shrink-0 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
+             fill="currentColor" aria-hidden="true">
+          <path fill-rule="evenodd"
+                d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
+                clip-rule="evenodd"/>
+        </svg>
+        <li class="breadcrumb-item"><a href="{% url 'forum:forum' ancestor.slug ancestor.id %}">{{ ancestor.name }}</a>
+        </li>
+      {% endfor %}
+      <svg class="h-5 w-5 flex-shrink-0 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
+           fill="currentColor" aria-hidden="true">
+        <path fill-rule="evenodd"
+              d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
+              clip-rule="evenodd"/>
+      </svg>
+      <li class="breadcrumb-item"><a href="{% url 'forum:forum' forum.slug forum.id %}">{{ forum.name }}</a></li>
     {% endif %}
     {% if topic %}
-    <li class="breadcrumb-item"><a href="{% url 'forum_conversation:topic' forum.slug forum.id topic.slug topic.id %}">{{ topic.subject }}</a></li>
+      <svg class="h-5 w-5 flex-shrink-0 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
+           fill="currentColor" aria-hidden="true">
+        <path fill-rule="evenodd"
+              d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
+              clip-rule="evenodd"/>
+      </svg>
+      <li class="breadcrumb-item"><a
+        href="{% url 'forum_conversation:topic' forum.slug forum.id topic.slug topic.id %}">{{ topic.subject }}</a></li>
     {% endif %}
   </ol>
 </nav>

From 52a589762f1fe5a6f1b5832d1095fd3f80f98e37 Mon Sep 17 00:00:00 2001
From: Greg Newman <greg@gregnewman.org>
Date: Thu, 15 Dec 2022 15:13:24 -0500
Subject: [PATCH 04/10] :art: make user info smaller

---
 templates/forum_conversation/topic_detail.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/templates/forum_conversation/topic_detail.html b/templates/forum_conversation/topic_detail.html
index a496221c..e7661b86 100644
--- a/templates/forum_conversation/topic_detail.html
+++ b/templates/forum_conversation/topic_detail.html
@@ -27,7 +27,7 @@
     <div id="{{ post.id }}" class="my-3 card post">
       <div class="card-body">
         <div class="flex space-x-4 bg-charcoal border border-1 border-slate rounded p-6">
-          <div class="w-3/4 post-content-wrapper">
+          <div class="w-5/6 post-content-wrapper">
             <div class="float-right post-controls ">
               {% get_permission 'can_edit_post' post request.user as user_can_edit_post %}
               {% if user_can_edit_post %}
@@ -84,7 +84,7 @@
               </div>
               {% endif %}
           </div>
-          <div class="w-1/4 d-none d-md-block post-sidebar">
+          <div class="w-1/6 d-none d-md-block post-sidebar text-sm">
             {% if post.poster %}
             <div class="avatar">
               <a href="{% url 'forum_member:profile' post.poster_id %}">

From ab7d2f021314b25f05ff43eb2603ff5a1a78d2b8 Mon Sep 17 00:00:00 2001
From: Greg Newman <greg@gregnewman.org>
Date: Thu, 15 Dec 2022 15:15:57 -0500
Subject: [PATCH 05/10] :art: orange breadcrumb links

---
 templates/partials/breadcrumb.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/templates/partials/breadcrumb.html b/templates/partials/breadcrumb.html
index e7f8a058..647b684c 100644
--- a/templates/partials/breadcrumb.html
+++ b/templates/partials/breadcrumb.html
@@ -2,7 +2,7 @@
 
 <nav aria-label="breadcrumb">
   <ol class="inline-flex space-x-2 items-center">
-    <li class="breadcrumb-item"><a href="{% url 'forum:index' %}"><i
+    <li class="breadcrumb-item"><a class="text-orange" href="{% url 'forum:index' %}"><i
       class="fas fa-home">&nbsp;</i>{% trans "Forum index" %}</a></li>
     {% if forum %}
       {% for ancestor in forum.get_ancestors %}
@@ -12,7 +12,7 @@
                 d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
                 clip-rule="evenodd"/>
         </svg>
-        <li class="breadcrumb-item"><a href="{% url 'forum:forum' ancestor.slug ancestor.id %}">{{ ancestor.name }}</a>
+        <li class="breadcrumb-item"><a class="text-orange" href="{% url 'forum:forum' ancestor.slug ancestor.id %}">{{ ancestor.name }}</a>
         </li>
       {% endfor %}
       <svg class="h-5 w-5 flex-shrink-0 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
@@ -21,7 +21,7 @@
               d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
               clip-rule="evenodd"/>
       </svg>
-      <li class="breadcrumb-item"><a href="{% url 'forum:forum' forum.slug forum.id %}">{{ forum.name }}</a></li>
+      <li class="breadcrumb-item"><a class="text-orange" href="{% url 'forum:forum' forum.slug forum.id %}">{{ forum.name }}</a></li>
     {% endif %}
     {% if topic %}
       <svg class="h-5 w-5 flex-shrink-0 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"

From e5c790596fb3ed6dbedb86961ca9cfc31e0feea0 Mon Sep 17 00:00:00 2001
From: Greg Newman <greg@gregnewman.org>
Date: Thu, 15 Dec 2022 15:33:07 -0500
Subject: [PATCH 06/10] :art: topic actions

---
 .../partials/topic_detail_actions.html        | 72 +++++++++++++------
 .../forum_conversation/topic_detail.html      |  6 +-
 2 files changed, 54 insertions(+), 24 deletions(-)

diff --git a/templates/forum_conversation/partials/topic_detail_actions.html b/templates/forum_conversation/partials/topic_detail_actions.html
index f442676c..cc708700 100644
--- a/templates/forum_conversation/partials/topic_detail_actions.html
+++ b/templates/forum_conversation/partials/topic_detail_actions.html
@@ -12,31 +12,61 @@
 {% get_permission 'can_update_topics_to_announces' topic.forum request.user as user_can_change_to_announces %}
 
 {% if user_can_add_post %}
-<a href="{% url 'forum_conversation:post_create' forum.slug forum.pk topic.slug topic.pk %}" class="rounded rounded-lg border border-1 border-orange text-orange uppercase text-sm py-2 px-4 mr-3"><img class="inline-block mr-3" src="{% static 'img/icons/icon_button-talk-bubble.svg' %}" />{% trans "Post reply" %}</a>
+  <a href="{% url 'forum_conversation:post_create' forum.slug forum.pk topic.slug topic.pk %}"
+     class="rounded rounded-lg border border-1 border-orange text-orange uppercase text-sm py-3 px-4"><img
+    class="inline-block" src="{% static 'img/icons/icon_button-talk-bubble.svg' %}"/>{% trans "Post reply" %}</a>
 {% endif %}
 {% if user_can_subscribe_to_topic %}
-<a href="{% url 'forum_member:topic_subscribe' topic.pk %}" class="rounded rounded-lg border border-1 border-slate text-orange uppercase text-sm py-2 px-4"><img class="inline-block mr-3" src="{% static 'img/icons/icon_button-checkmark.svg' %}" />{% trans "Subscribe" %}</a>
+  <a href="{% url 'forum_member:topic_subscribe' topic.pk %}"
+     class="rounded rounded-lg border border-1 border-slate text-orange uppercase text-sm py-3 px-4"><img
+    class="inline-block" src="{% static 'img/icons/icon_button-checkmark.svg' %}"/>{% trans "Subscribe" %}</a>
 {% elif user_can_unsubscribe_from_topic %}
-<a href="{% url 'forum_member:topic_unsubscribe' topic.pk %}" class="btn btn-info btn-sm btn-subscription"><i class="fas fa-times">&nbsp;</i>{% trans "Unsubscribe" %}</a>
+  <a href="{% url 'forum_member:topic_unsubscribe' topic.pk %}" class="btn btn-info btn-sm btn-subscription"><i
+    class="fas fa-times">&nbsp;</i>{% trans "Unsubscribe" %}</a>
 {% endif %}
 {% if user_can_lock_topics and not topic.is_locked or user_can_move_topics or user_can_delete_topics %}
-<div class="btn-group moderation-dropdown">
-  <button id="id_dropdown_moderation_menu_button" class="btn btn-warning btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-gavel">&nbsp;&nbsp;</i><span class="caret"></span></button>
-  <div class="dropdown-menu" aria-labelledby="id_dropdown_moderation_menu_button" style="min-width:13rem;">
-    {% if user_can_lock_topics and not topic.is_locked %}<a href="{% url 'forum_moderation:topic_lock' slug=topic.slug pk=topic.pk %}" class="dropdown-item">{% trans "Lock topic" %}</a>{% endif %}
-    {% if user_can_lock_topics and topic.is_locked %}<a href="{% url 'forum_moderation:topic_unlock' slug=topic.slug pk=topic.pk %}" class="dropdown-item">{% trans "Unlock topic" %}</a>{% endif %}
-    {% if user_can_delete_topics %}<a href="{% url 'forum_moderation:topic_delete' slug=topic.slug pk=topic.pk %}" class="dropdown-item">{% trans "Delete topic" %}</a>{% endif %}
-    {% if user_can_move_topics %}<a href="{% url 'forum_moderation:topic_move' slug=topic.slug pk=topic.pk %}" class="dropdown-item">{% trans "Move topic" %}</a>{% endif %}
-    {% if topic.is_topic %}
-    {% if user_can_change_to_sticky_topics %}<a href="{% url 'forum_moderation:topic_update_to_sticky' slug=topic.slug pk=topic.pk %}" class="dropdown-item">{% trans "Change to sticky topic" %}</a>{% endif %}
-    {% if user_can_change_to_announces %}<a href="{% url 'forum_moderation:topic_update_to_announce' slug=topic.slug pk=topic.pk %}" class="dropdown-item">{% trans "Change to announce" %}</a>{% endif %}
-    {% elif topic.is_sticky %}
-    {% if user_can_change_to_normal_topics %}<a href="{% url 'forum_moderation:topic_update_to_post' slug=topic.slug pk=topic.pk %}" class="dropdown-item">{% trans "Change to standard topic" %}</a>{% endif %}
-    {% if user_can_change_to_announces %}<a href="{% url 'forum_moderation:topic_update_to_announce' slug=topic.slug pk=topic.pk %}" class="dropdown-item">{% trans "Change to announce" %}</a>{% endif %}
-    {% elif topic.is_announce %}
-    {% if user_can_change_to_normal_topics %}<a href="{% url 'forum_moderation:topic_update_to_post' slug=topic.slug pk=topic.pk %}" class="dropdown-item">{% trans "Change to standard topic" %}</a>{% endif %}
-    {% if user_can_change_to_sticky_topics %}<a href="{% url 'forum_moderation:topic_update_to_sticky' slug=topic.slug pk=topic.pk %}" class="dropdown-item">{% trans "Change to sticky topic" %}</a>{% endif %}
-    {% endif %}
+  <div class="inline-block">
+    <button id="id_dropdown_moderation_menu_button" class="rounded rounded-lg border border-1 border-slate text-orange py-3 px-4" type="button"
+            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+      <img src="{% static 'img/icons/icon_button-gavel.svg' %}" />
+    </button>
+
+    {# TODO: This is hidden but needs to be displayed with x-show #}
+
+
+    <div class="dropdown-menu hidden" aria-labelledby="id_dropdown_moderation_menu_button" style="min-width:13rem;">
+      {% if user_can_lock_topics and not topic.is_locked %}
+        <a href="{% url 'forum_moderation:topic_lock' slug=topic.slug pk=topic.pk %}"
+           class="dropdown-item">{% trans "Lock topic" %}</a>{% endif %}
+      {% if user_can_lock_topics and topic.is_locked %}
+        <a href="{% url 'forum_moderation:topic_unlock' slug=topic.slug pk=topic.pk %}"
+           class="dropdown-item">{% trans "Unlock topic" %}</a>{% endif %}
+      {% if user_can_delete_topics %}<a href="{% url 'forum_moderation:topic_delete' slug=topic.slug pk=topic.pk %}"
+                                        class="dropdown-item">{% trans "Delete topic" %}</a>{% endif %}
+      {% if user_can_move_topics %}<a href="{% url 'forum_moderation:topic_move' slug=topic.slug pk=topic.pk %}"
+                                      class="dropdown-item">{% trans "Move topic" %}</a>{% endif %}
+      {% if topic.is_topic %}
+        {% if user_can_change_to_sticky_topics %}
+          <a href="{% url 'forum_moderation:topic_update_to_sticky' slug=topic.slug pk=topic.pk %}"
+             class="dropdown-item">{% trans "Change to sticky topic" %}</a>{% endif %}
+        {% if user_can_change_to_announces %}
+          <a href="{% url 'forum_moderation:topic_update_to_announce' slug=topic.slug pk=topic.pk %}"
+             class="dropdown-item">{% trans "Change to announce" %}</a>{% endif %}
+      {% elif topic.is_sticky %}
+        {% if user_can_change_to_normal_topics %}
+          <a href="{% url 'forum_moderation:topic_update_to_post' slug=topic.slug pk=topic.pk %}"
+             class="dropdown-item">{% trans "Change to standard topic" %}</a>{% endif %}
+        {% if user_can_change_to_announces %}
+          <a href="{% url 'forum_moderation:topic_update_to_announce' slug=topic.slug pk=topic.pk %}"
+             class="dropdown-item">{% trans "Change to announce" %}</a>{% endif %}
+      {% elif topic.is_announce %}
+        {% if user_can_change_to_normal_topics %}
+          <a href="{% url 'forum_moderation:topic_update_to_post' slug=topic.slug pk=topic.pk %}"
+             class="dropdown-item">{% trans "Change to standard topic" %}</a>{% endif %}
+        {% if user_can_change_to_sticky_topics %}
+          <a href="{% url 'forum_moderation:topic_update_to_sticky' slug=topic.slug pk=topic.pk %}"
+             class="dropdown-item">{% trans "Change to sticky topic" %}</a>{% endif %}
+      {% endif %}
+    </div>
   </div>
-</div>
 {% endif %}
diff --git a/templates/forum_conversation/topic_detail.html b/templates/forum_conversation/topic_detail.html
index e7661b86..efae1c70 100644
--- a/templates/forum_conversation/topic_detail.html
+++ b/templates/forum_conversation/topic_detail.html
@@ -9,7 +9,7 @@
 {% block content %}
 <div class="w-full mb-8"><h1>{{ topic.subject }}</h1></div>
 <div class="w-full">
-  <div class="topic-actions-block">
+  <div class="items-center inline-flex space-x-3">
   {% include "forum_conversation/partials/topic_detail_actions.html" %}
   </div>
   <div class="pagination-block">
@@ -91,7 +91,7 @@
                 {% include "partials/avatar.html" with profile=post.poster.forum_profile show_placeholder=True %}
               </a>
             </div>
-            <div class="username"><a href="{% url 'forum_member:profile' post.poster_id %}"><b>{{ post.poster|forum_member_display_name }}</b></a></div>
+            <div class="username"><a class="text-orange" href="{% url 'forum_member:profile' post.poster_id %}"><b>{{ post.poster|forum_member_display_name }}</b></a></div>
             <div class="posts-count text-muted"><b>{% trans "Posts:" %}</b>&nbsp;{{ post.poster.forum_profile.posts_count }}</div>
             {% else %}
             <div class="username"><b>{{ post.username }}</b></div>
@@ -105,7 +105,7 @@
   </div>
 </div>
 <div class="w-full mt-11">
-  <div class="w-1/2 topic-actions-block">
+  <div class="w-1/2 items-center inline-flex space-x-3">
     {% include "forum_conversation/partials/topic_detail_actions.html" %}
   </div>
   <div class="w-full">

From 933a4f39af07955037f2a7feceff04f0035e58b3 Mon Sep 17 00:00:00 2001
From: Greg Newman <greg@gregnewman.org>
Date: Thu, 15 Dec 2022 15:33:25 -0500
Subject: [PATCH 07/10] :art: topic form

Needs accordions
---
 templates/forum_conversation/partials/topic_form.html | 8 ++++----
 templates/forum_conversation/post_create.html         | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/templates/forum_conversation/partials/topic_form.html b/templates/forum_conversation/partials/topic_form.html
index fd20dd33..7840a3e2 100644
--- a/templates/forum_conversation/partials/topic_form.html
+++ b/templates/forum_conversation/partials/topic_form.html
@@ -1,6 +1,6 @@
 {% load i18n %}
 
-<form method="post" action="." class="form" enctype="multipart/form-data" novalidate>{% csrf_token %}
+<form method="post" action="." class="form space-y-4" enctype="multipart/form-data" novalidate>{% csrf_token %}
   {% for error in post_form.non_field_errors %}
   <div class="alert alert-danger">
     <i class="icon-exclamation-sign"></i> {{ error }}
@@ -60,8 +60,8 @@
       <div class="form-group">
         <br />
         {% if poll_options_validated and poll_option_formset.non_form_errors %}<div class="alert alert-danger">{{ poll_option_formset.non_form_errors|striptags }}</div>{% endif %}
-        <div class="row">
-          <div class="col-md-6">
+        <div class="w-full flex space-x-4">
+          <div class="w-1/2 space-y-4">
             {% include "partials/form_field.html" with field=post_form.poll_question %}
             {% include "partials/form_field.html" with field=post_form.poll_max_options %}
             {% include "partials/form_field.html" with field=post_form.poll_duration %}
@@ -74,7 +74,7 @@
               </div>
             </div>
           </div>
-          <div id="poll_formset" class="col-md-6">
+          <div id="poll_formset" class="w-1/2 space-y-4">
             {% include "forum_conversation/forum_polls/poll_option_formset.html" %}
           </div>
         </div>
diff --git a/templates/forum_conversation/post_create.html b/templates/forum_conversation/post_create.html
index 0fa9e12f..8afb9311 100644
--- a/templates/forum_conversation/post_create.html
+++ b/templates/forum_conversation/post_create.html
@@ -21,7 +21,7 @@
         <h3 class="m-0 h5 card-title text-base">{% trans "Post a reply" %}</h3>
       </div>
       <div class="card-body p-4">
-        <form method="post" action="." class="form" enctype="multipart/form-data" novalidate>{% csrf_token %}
+        <form method="post" action="." class="form space-y-4" enctype="multipart/form-data" novalidate>{% csrf_token %}
           {% include "forum_conversation/partials/post_form.html" %}
           <div class="form-actions my-5">
             <input type="submit" name="preview" class="px-8 py-3 border border-slate text-base font-medium rounded-md text-orange md:py-1 md:text-lg md:px-4 uppercase text-sm" value="{% trans "Preview" %}" />&nbsp;

From 68f91f926a5caa05003ceed531c8ad3da676bfde Mon Sep 17 00:00:00 2001
From: Greg Newman <greg@gregnewman.org>
Date: Thu, 15 Dec 2022 15:33:36 -0500
Subject: [PATCH 08/10] :art: topic attachments

---
 .../forum_attachments/attachments_detail.html                 | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/templates/forum_conversation/forum_attachments/attachments_detail.html b/templates/forum_conversation/forum_attachments/attachments_detail.html
index c465f983..1a735edb 100644
--- a/templates/forum_conversation/forum_attachments/attachments_detail.html
+++ b/templates/forum_conversation/forum_attachments/attachments_detail.html
@@ -3,12 +3,12 @@
 
 {% get_permission 'can_download_files' post.topic.forum request.user as user_can_download_files %}
 {% if post.attachments.exists and user_can_download_files %}
-<div class="row attachments">
+<div class="w-full attachments space-y-4">
   <div class="col-md-12">
     <span class="text-muted attachments-title"><i class="fa fa-files-o"></i>&nbsp;{% trans "Attachments" %}</span>
   </div>
   {% for attachment in post.attachments.all %}
-  <div class="col-md-12 attachment">
+  <div class="w-full attachment">
     <a href="{% url 'forum_conversation:attachment' pk=attachment.id %}"><i class="fa fa-file"></i>&nbsp;{{ attachment.filename }} ({{ attachment.file.size|filesizeformat }})</a>
     {% if attachment.comment %}
     <p class="text-muted"><em>{{ attachment.comment }}</em></p>

From ef78d439be6890ade4d2dda08d3617e15c2ad3ae Mon Sep 17 00:00:00 2001
From: Greg Newman <greg@gregnewman.org>
Date: Fri, 16 Dec 2022 10:18:54 -0500
Subject: [PATCH 09/10] :art: styles for inputs

---
 frontend/styles.css | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/frontend/styles.css b/frontend/styles.css
index 2c511081..55c259e2 100644
--- a/frontend/styles.css
+++ b/frontend/styles.css
@@ -35,4 +35,10 @@
   textarea {
     @apply w-full rounded bg-charcoal border border-slate;
   }
+  input[type=checkbox] {
+    @apply mr-3 rounded bg-charcoal border border-slate text-orange;
+  }
+  input[type=file] {
+    @apply block w-full px-3 py-1 text-base font-normal text-orange bg-clip-padding border border-solid border-slate rounded transition ease-in-out my-2;
+  }
 }

From ccd7a0f9ed3db66419291bacdf590e60de768314 Mon Sep 17 00:00:00 2001
From: Greg Newman <greg@gregnewman.org>
Date: Fri, 16 Dec 2022 10:20:02 -0500
Subject: [PATCH 10/10] :art: styles and toggles for forum forms

* Styles the forms and inputs
* Adds toggles to show/hide form sections with navigation styles

Addresses issue: #54
---
 static/css/styles.css                         | 76 +++++++++++++++++--
 .../forum_attachments/attachment_formset.html | 10 ++-
 .../partials/post_form.html                   | 32 +++++---
 .../partials/topic_form.html                  | 49 ++++++++----
 templates/forum_conversation/post_create.html |  4 +-
 templates/forum_conversation/post_update.html | 10 +--
 .../forum_conversation/topic_create.html      |  2 +-
 .../forum_conversation/topic_update.html      | 10 +--
 8 files changed, 145 insertions(+), 48 deletions(-)

diff --git a/static/css/styles.css b/static/css/styles.css
index 34e5958b..047ea0d2 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -636,6 +636,45 @@ textarea {
   background-color: rgb(23 42 52 / var(--tw-bg-opacity));
 }
 
+input[type=checkbox] {
+  margin-right: 0.75rem;
+  border-radius: 0.25rem;
+  border-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(49 74 87 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(23 42 52 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(255 159 0 / var(--tw-text-opacity));
+}
+
+input[type=file] {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+  display: block;
+  width: 100%;
+  border-radius: 0.25rem;
+  border-width: 1px;
+  border-style: solid;
+  --tw-border-opacity: 1;
+  border-color: rgb(49 74 87 / var(--tw-border-opacity));
+  background-clip: padding-box;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: 400;
+  --tw-text-opacity: 1;
+  color: rgb(255 159 0 / var(--tw-text-opacity));
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
+  transition-duration: 150ms;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
 *, ::before, ::after {
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
@@ -1236,6 +1275,10 @@ textarea {
   grid-template-rows: repeat(5, minmax(0, 1fr));
 }
 
+.flex-row {
+  flex-direction: row;
+}
+
 .flex-col {
   flex-direction: column;
 }
@@ -1314,18 +1357,18 @@ textarea {
   margin-left: calc(6rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
-.space-y-5 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
-}
-
 .space-x-3 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(0.75rem * var(--tw-space-x-reverse));
   margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
+.space-y-5 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
+}
+
 .space-x-8 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(2rem * var(--tw-space-x-reverse));
@@ -1407,6 +1450,10 @@ textarea {
   border-right-width: 1px;
 }
 
+.border-b-4 {
+  border-bottom-width: 4px;
+}
+
 .border-orange {
   --tw-border-opacity: 1;
   border-color: rgb(255 159 0 / var(--tw-border-opacity));
@@ -1427,6 +1474,10 @@ textarea {
   border-color: rgb(23 42 52 / var(--tw-border-opacity));
 }
 
+.border-slate\/60 {
+  border-color: rgb(49 74 87 / 0.6);
+}
+
 .bg-black {
   --tw-bg-opacity: 1;
   background-color: rgb(5 26 38 / var(--tw-bg-opacity));
@@ -1441,6 +1492,10 @@ textarea {
   background-color: rgb(90 213 153 / 0.1);
 }
 
+.bg-charcoal\/60 {
+  background-color: rgb(23 42 52 / 0.6);
+}
+
 .bg-gradient-to-r {
   background-image: linear-gradient(to right, var(--tw-gradient-stops));
 }
@@ -1576,6 +1631,11 @@ textarea {
   padding-right: 40px;
 }
 
+.px-11 {
+  padding-left: 2.75rem;
+  padding-right: 2.75rem;
+}
+
 .pl-11 {
   padding-left: 2.75rem;
 }
@@ -1680,6 +1740,10 @@ textarea {
   padding-top: 0px;
 }
 
+.pb-4 {
+  padding-bottom: 1rem;
+}
+
 .text-left {
   text-align: left;
 }
diff --git a/templates/forum_conversation/forum_attachments/attachment_formset.html b/templates/forum_conversation/forum_attachments/attachment_formset.html
index 7adbb279..d842a26c 100644
--- a/templates/forum_conversation/forum_attachments/attachment_formset.html
+++ b/templates/forum_conversation/forum_attachments/attachment_formset.html
@@ -2,9 +2,9 @@
 
 {{ attachment_formset.management_form }}
 {% for form in attachment_formset.forms %}
-<div class="attachment-form row">
+<div class="attachment-form w-full space-y-3 mb-4">
   {% for field in form.visible_fields %}
-  <div class="col-md-4">
+  <div class="my-5">
     {% if forloop.first %}
     {{ form.id }}
     {% endif %}
@@ -16,7 +16,7 @@
     {% endfor %}
     {% endif %}
     {% if field.name == 'DELETE' %}
-    <div class="checkbox">
+    <div class="checkbox mt-3">
       <label for="{{ field.auto_id }}">
         {{ field }}
         {{ field.label }}
@@ -38,4 +38,6 @@
     {% endfor %}
 </div>
 {% endfor %}
-<a href="#" id="add_more_attachment" class="btn btn-sm btn-info"><i class="icon-white icon-plus-sign"></i>&nbsp;{% trans "Add another file" %}</a>
+<a href="#" id="add_more_attachment" class="border-slate border py-3 px-4 text-orange my-5 text-xs rounded uppercase">
+  <i class="icon-white icon-plus-sign"></i>&nbsp;{% trans "Add another file" %}
+</a>
diff --git a/templates/forum_conversation/partials/post_form.html b/templates/forum_conversation/partials/post_form.html
index 4943ef70..047453fd 100644
--- a/templates/forum_conversation/partials/post_form.html
+++ b/templates/forum_conversation/partials/post_form.html
@@ -15,16 +15,28 @@
 {% if post_form.update_reason %}
     {% include "partials/form_field.html" with field=post_form.update_reason %}
 {% endif %}
-<!-- Sub "forms" tabs -->
-{% if attachment_formset %}
-<ul class="nav nav-tabs nav-justified">
-  <li class="nav-item"><a href="#options" class="nav-link active" data-toggle="tab">{% trans "Options" %}</a></li>
-  <li class="nav-item"><a href="#attachments" class="nav-link" data-toggle="tab">{% trans "Attachments" %}</a></li>
-</ul>
-{% endif %}
+
 <!-- Sub "forms" panes -->
-<div class="tab-content">
-  <div class="tab-pane active" id="options">
+<div class="tab-content" x-data="{ tab: '#options' }">
+  <!-- Sub "forms" tabs -->
+  {% if attachment_formset %}
+  <ul class="w-full flex flex-row justify-between">
+    <a href="#"
+       :class="tab === '#options' ? 'border-b-4 border-orange text-orange' : 'border-b border-slate'"
+       class="px-11 w-1/2 text-center active pb-4"
+       data-toggle="tab"
+       x-on:click.prevent="tab='#options'"
+    >{% trans "Options" %}</a>
+    <a href="#"
+       :class="tab === '#attachments' ? 'border-b-4 border-orange text-orange' : 'border-b border-slate'"
+       class="px-11 w-1/2 text-center pb-4"
+       data-toggle="tab"
+       x-on:click.prevent="tab='#attachments'"
+    >{% trans "Attachments" %}</a>
+  </ul>
+  {% endif %}
+
+  <div class="tab-pane active" id="options" x-show="tab == '#options'" x-cloak>
     <div class="form-group">
       <br />
       <div class="w-full">
@@ -52,7 +64,7 @@
     </div>
   </div>
   {% if attachment_formset %}
-  <div class="tab-pane" id="attachments">
+  <div class="tab-pane" id="attachments" x-show="tab == '#attachments'" x-cloak>
     <div class="form-group">
       <br />
       <div class="row">
diff --git a/templates/forum_conversation/partials/topic_form.html b/templates/forum_conversation/partials/topic_form.html
index 7840a3e2..c92d1775 100644
--- a/templates/forum_conversation/partials/topic_form.html
+++ b/templates/forum_conversation/partials/topic_form.html
@@ -16,25 +16,44 @@
     {% include "partials/form_field.html" with field=post_form.update_reason %}
   {% endif %}
 
-  <!-- Sub "forms" tabs -->
-  {% if poll_option_formset or attachment_formset %}
-  <ul class="nav nav-tabs nav-justified">
-    <li class="nav-item"><a href="#options" class="nav-link active" data-toggle="tab">{% trans "Options" %}</a></li>
-    {% if poll_option_formset %}<li class="nav-item"><a href="#poll" class="nav-link" data-toggle="tab">{% trans "Poll" %}</a></li>{% endif %}
-    {% if attachment_formset %}<li class="nav-item"><a href="#attachments" class="nav-link" data-toggle="tab">{% trans "Attachments" %}</a></li>{% endif %}
-  </ul>
-  {% endif %}
-
   <!-- Sub "forms" panes -->
-  <div class="tab-content">
-    <div class="tab-pane active" id="options">
+  <div class="tab-content" x-data="{ tab: '#options' }">
+    <!-- Sub "forms" tabs -->
+    {% if poll_option_formset or attachment_formset %}
+    <ul class="w-full flex flex-row justify-between">
+      <a href="#options"
+         :class="tab === '#options' ? 'border-b-4 border-orange text-orange' : 'border-b border-slate'"
+         class="px-11 w-1/2 text-center active pb-4"
+         data-toggle="tab"
+         x-on:click.prevent="tab='#options'"
+      >{% trans "Options" %}</a>
+      {% if poll_option_formset %}
+        <a href="#poll"
+           :class="tab === '#poll' ? 'border-b-4 border-orange text-orange' : 'border-b border-slate'"
+           class="px-11 w-1/2 text-center active pb-4"
+           data-toggle="tab"
+           x-on:click.prevent="tab='#poll'"
+        >{% trans "Poll" %}</a>
+      {% endif %}
+      {% if attachment_formset %}
+        <a href="#attachments"
+           :class="tab === '#attachments' ? 'border-b-4 border-orange text-orange' : 'border-b border-slate'"
+           class="px-11 w-1/2 text-center active pb-4"
+           data-toggle="tab"
+           x-on:click.prevent="tab='#attachments'"
+        >{% trans "Attachments" %}</a>
+      {% endif %}
+    </ul>
+    {% endif %}
+
+    <div class="tab-pane active" id="options" x-show="tab == '#options'" x-cloak>
       <div class="form-group">
         <br />
         <div class="w-full">
           <div class="w-full">
             {% include "partials/form_field.html" with field=post_form.topic_type %}
             {% with field=post_form.enable_signature %}
-            <div class="checkbox">
+            <div class="checkbox mt-3">
               <label for="{{ field.auto_id }}">
                 {{ field }}
                 {{ field.label }}
@@ -56,7 +75,7 @@
       </div>
     </div>
     {% if poll_option_formset %}
-    <div class="tab-pane" id="poll">
+    <div class="tab-pane" id="poll" x-show="tab == '#poll'" x-cloak>
       <div class="form-group">
         <br />
         {% if poll_options_validated and poll_option_formset.non_form_errors %}<div class="alert alert-danger">{{ poll_option_formset.non_form_errors|striptags }}</div>{% endif %}
@@ -82,7 +101,7 @@
     </div>
     {% endif %}
     {% if attachment_formset %}
-    <div class="tab-pane" id="attachments">
+    <div class="tab-pane" id="attachments" x-show="tab == '#attachments'" x-cloak>
       <div class="form-group">
         <br />
         <div class="row">
@@ -95,7 +114,7 @@
     {% endif %}
   </div>
 
-  <div class="form-actions my-5">
+  <div class="form-actions pt-6">
     <input type="submit" name="preview" class="px-8 py-3 border border-slate text-base font-medium rounded-md text-orange md:py-1 md:text-lg md:px-4 uppercase text-sm" value="{% trans "Preview" %}" />&nbsp;
     <input type="submit" class="px-8 py-3 border border-orange text-base font-medium rounded-md text-orange md:py-1 md:text-lg md:px-4 uppercase text-sm" value="{% trans "Submit" %}" />
   </div>
diff --git a/templates/forum_conversation/post_create.html b/templates/forum_conversation/post_create.html
index 8afb9311..3dc1f063 100644
--- a/templates/forum_conversation/post_create.html
+++ b/templates/forum_conversation/post_create.html
@@ -15,7 +15,7 @@
   {% include "forum_conversation/post_preview.html" %}
 {% endif %}
 <div>
-  <div class="w-full bg-charcoal border border-1 border-slate rounded">
+  <div class="w-full bg-charcoal/60 border border-1 border-slate rounded">
     <div class="card post-edit">
       <div class="card-header border-b border-slate px-4 py-2">
         <h3 class="m-0 h5 card-title text-base">{% trans "Post a reply" %}</h3>
@@ -23,7 +23,7 @@
       <div class="card-body p-4">
         <form method="post" action="." class="form space-y-4" enctype="multipart/form-data" novalidate>{% csrf_token %}
           {% include "forum_conversation/partials/post_form.html" %}
-          <div class="form-actions my-5">
+          <div class="form-actions pt-6">
             <input type="submit" name="preview" class="px-8 py-3 border border-slate text-base font-medium rounded-md text-orange md:py-1 md:text-lg md:px-4 uppercase text-sm" value="{% trans "Preview" %}" />&nbsp;
             <input type="submit" class="px-8 py-3 border border-orange text-base font-medium rounded-md text-orange md:py-1 md:text-lg md:px-4 uppercase text-sm" value="{% trans "Submit" %}" />
           </div>
diff --git a/templates/forum_conversation/post_update.html b/templates/forum_conversation/post_update.html
index f6da00fe..5400bd56 100644
--- a/templates/forum_conversation/post_update.html
+++ b/templates/forum_conversation/post_update.html
@@ -13,13 +13,13 @@
 {% if preview %}
   {% include "forum_conversation/post_preview.html" %}
 {% endif %}
-<div class="row">
-  <div class="col-12">
+<div>
+  <div class="w-full bg-charcoal/60 border border-1 border-slate rounded">
     <div class="card post-edit">
-      <div class="card-header">
-        <h3 class="m-0 h5 card-title">{% trans "Edit post" %}</h3>
+      <div class="card-header border-b border-slate px-4 py-2">
+        <h3 class="m-0 h5 card-title text-base">{% trans "Edit post" %}</h3>
       </div>
-      <div class="card-body">
+      <div class="card-body p-4">
         <form method="post" action="." class="form" enctype="multipart/form-data" novalidate>{% csrf_token %}
           {% include "forum_conversation/partials/post_form.html" %}
           <div class="form-actions">
diff --git a/templates/forum_conversation/topic_create.html b/templates/forum_conversation/topic_create.html
index f5fe3497..b63abb3b 100644
--- a/templates/forum_conversation/topic_create.html
+++ b/templates/forum_conversation/topic_create.html
@@ -17,7 +17,7 @@
 {% include "forum_conversation/post_preview.html" %}
 {% endif %}
 <div class="w-full">
-  <div class="w-full bg-charcoal border border-1 border-slate rounded">
+  <div class="w-full bg-charcoal/60 border border-1 border-slate rounded">
     <div class="card post-edit">
       <div class="card-header border-b border-slate px-4 py-2">
         <h3 class="m-0 h5 card-title text-base">{% trans "Post a new topic" %}</h3>
diff --git a/templates/forum_conversation/topic_update.html b/templates/forum_conversation/topic_update.html
index 5b216aae..b7e9ce3e 100644
--- a/templates/forum_conversation/topic_update.html
+++ b/templates/forum_conversation/topic_update.html
@@ -16,13 +16,13 @@
 {% if preview %}
 {% include "forum_conversation/post_preview.html" %}
 {% endif %}
-<div class="row">
-  <div class="col-12">
+<div>
+  <div class="w-full bg-charcoal/60 border border-1 border-slate rounded">
     <div class="card post-edit">
-      <div class="card-header">
-        <h3 class="m-0 h5 card-title">{% trans "Edit post" %}</h3>
+      <div class="card-header border-b border-slate px-4 py-2">
+        <h3 class="m-0 h5 card-title text-base">{% trans "Edit post" %}</h3>
       </div>
-      <div class="card-body">
+      <div class="card-body p-4">
         {% include "forum_conversation/partials/topic_form.html" %}
       </div>
     </div>