From 0b3f9c58454a7be4d50b79963c060a86469b7524 Mon Sep 17 00:00:00 2001
From: bburgess19 <bburgess19@cs.uchicago.edu>
Date: Tue, 5 Dec 2023 11:22:43 -0600
Subject: [PATCH 01/10] Small push -- helping to fix merge conflict

---
 src/templates/forum/board_base.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/templates/forum/board_base.html b/src/templates/forum/board_base.html
index 538aed97..b36717a9 100644
--- a/src/templates/forum/board_base.html
+++ b/src/templates/forum/board_base.html
@@ -19,7 +19,7 @@
   <link rel="stylesheet" href="{% static 'machina/custom-styling.css' %}" />
 {% endblock css %}
 {% block body %}
-  <div class="my-5 container" id="main_container">
+  <div class="my-5 container " id="main_container">
     <div class="row">
       <div class="col-12">
         {% block breadcrumb %}

From 95b22e0a31683d4bcec30362b5141caf5944ba0a Mon Sep 17 00:00:00 2001
From: giovannimhern <giovannimhern@uchicago.edu>
Date: Tue, 5 Dec 2023 12:23:26 -0600
Subject: [PATCH 02/10] Redid the vote buttons

---
 .../0021_alter_tournament_matches.py          | 17 +++++++++++++
 .../migrations/0005_alter_user_username.py    | 25 +++++++++++++++++++
 .../forum_conversation/topic_detail.html      | 18 ++++++++++---
 3 files changed, 56 insertions(+), 4 deletions(-)
 create mode 100644 src/chigame/games/migrations/0021_alter_tournament_matches.py
 create mode 100644 src/chigame/users/migrations/0005_alter_user_username.py

diff --git a/src/chigame/games/migrations/0021_alter_tournament_matches.py b/src/chigame/games/migrations/0021_alter_tournament_matches.py
new file mode 100644
index 00000000..a0cf1e24
--- /dev/null
+++ b/src/chigame/games/migrations/0021_alter_tournament_matches.py
@@ -0,0 +1,17 @@
+# Generated by Django 4.2.4 on 2023-12-05 04:24
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("games", "0020_merge_20231204_1517"),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name="tournament",
+            name="matches",
+            field=models.ManyToManyField(blank=True, related_name="tournament", to="games.match"),
+        ),
+    ]
diff --git a/src/chigame/users/migrations/0005_alter_user_username.py b/src/chigame/users/migrations/0005_alter_user_username.py
new file mode 100644
index 00000000..4124706c
--- /dev/null
+++ b/src/chigame/users/migrations/0005_alter_user_username.py
@@ -0,0 +1,25 @@
+# Generated by Django 4.2.4 on 2023-12-05 04:24
+
+import chigame.users.models
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("users", "0004_user_username"),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name="user",
+            name="username",
+            field=models.CharField(
+                blank=True,
+                max_length=255,
+                null=True,
+                unique=True,
+                validators=[chigame.users.models.validate_username],
+                verbose_name="username",
+            ),
+        ),
+    ]
diff --git a/src/templates/forum_conversation/topic_detail.html b/src/templates/forum_conversation/topic_detail.html
index cb811b33..b89fc8a8 100644
--- a/src/templates/forum_conversation/topic_detail.html
+++ b/src/templates/forum_conversation/topic_detail.html
@@ -77,13 +77,23 @@ <h4 class="m-0 subject">
                   <div class="post-signature">{{ post.poster.forum_profile.signature.rendered }}</div>
                 {% endif %}
                 {# Vote buttons #}
-                <div class="vote-container d-flex p-2 flex-column w-25"
+                <div class="vote-container d-flex p-2 gap-3 align-items-center"
                      data-post-id="{{ post.id }}"
                      data-user-rating="{{ post.user_rating }}"
                      data-rating="{{ post.rating }}">
-                  <button class="like-button" type="submit" name="rate" value="like">Like</button>
-                  <span class="like-count">{{ post.rating }}</span>
-                  <button class="dislike-button" type="submit" name="rate" value="dislike">Dislike</button>
+                  <button class="like-button btn btn-primary btn-sm"
+                          type="submit"
+                          name="rate"
+                          value="like">
+                    <i class="fas fa-thumbs-up"></i> Like
+                  </button>
+                  <span class="like-coun fas">{{ post.rating }}</span>
+                  <button class="dislike-button btn btn-danger btn-sm"
+                          type="submit"
+                          name="rate"
+                          value="dislike">
+                    <i class="fas fa-thumbs-down"></i> Dislike
+                  </button>
                 </div>
                 {% if post.updates_count %}
                   <div class="mt-4 edit-info">

From 7b118e6b42677a842382d1f641abb3f342409175 Mon Sep 17 00:00:00 2001
From: giovannimhern <giovannimhern@uchicago.edu>
Date: Tue, 5 Dec 2023 12:25:42 -0600
Subject: [PATCH 03/10] Small syntax error fix

---
 src/templates/forum_conversation/topic_detail.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/templates/forum_conversation/topic_detail.html b/src/templates/forum_conversation/topic_detail.html
index b89fc8a8..f53919dd 100644
--- a/src/templates/forum_conversation/topic_detail.html
+++ b/src/templates/forum_conversation/topic_detail.html
@@ -87,7 +87,7 @@ <h4 class="m-0 subject">
                           value="like">
                     <i class="fas fa-thumbs-up"></i> Like
                   </button>
-                  <span class="like-coun fas">{{ post.rating }}</span>
+                  <span class="like-count fas">{{ post.rating }}</span>
                   <button class="dislike-button btn btn-danger btn-sm"
                           type="submit"
                           name="rate"

From 21e9b1c49dfcfadd9cac371d32ee3c3d10c489c2 Mon Sep 17 00:00:00 2001
From: giovannimhern <giovannimhern@uchicago.edu>
Date: Tue, 5 Dec 2023 14:56:03 -0600
Subject: [PATCH 04/10] Active selecting on buttons

---
 .../forum_conversation/topic_detail.html      | 87 +++++++++++++++++--
 1 file changed, 80 insertions(+), 7 deletions(-)

diff --git a/src/templates/forum_conversation/topic_detail.html b/src/templates/forum_conversation/topic_detail.html
index f53919dd..821fde01 100644
--- a/src/templates/forum_conversation/topic_detail.html
+++ b/src/templates/forum_conversation/topic_detail.html
@@ -81,18 +81,20 @@ <h4 class="m-0 subject">
                      data-post-id="{{ post.id }}"
                      data-user-rating="{{ post.user_rating }}"
                      data-rating="{{ post.rating }}">
-                  <button class="like-button btn btn-primary btn-sm"
+                  <button class="like-button btn btn-sm"
                           type="submit"
                           name="rate"
-                          value="like">
-                    <i class="fas fa-thumbs-up"></i> Like
+                          value="like"
+                          onclick="toggleLike()">
+                    <i class="fas fa-thumbs-up"></i>
                   </button>
-                  <span class="like-count fas">{{ post.rating }}</span>
-                  <button class="dislike-button btn btn-danger btn-sm"
+                  <span class="like-count fas" id="like-count">{{ post.rating }}</span>
+                  <button class="dislike-button btn btn-sm"
                           type="submit"
                           name="rate"
-                          value="dislike">
-                    <i class="fas fa-thumbs-down"></i> Dislike
+                          value="dislike"
+                          onclick="toggleDislike()">
+                    <i class="fas fa-thumbs-down"></i>
                   </button>
                 </div>
                 {% if post.updates_count %}
@@ -152,6 +154,66 @@ <h4 class="m-0 subject">
     </div>
   </div>
   <script>
+    let liked = false;
+    let disliked = false;
+
+    function toggleLike() {
+      const likeButton = document.querySelector('.like-button');
+      const dislikeButton = document.querySelector('.dislike-button');
+
+      if (!liked) {
+        liked = true;
+        likeButton.classList.add('active_two');
+        dislikeButton.classList.remove('active');
+
+      } else {
+        liked = false;
+        likeButton.classList.remove('active_two');
+      }
+    }
+
+    function toggleDislike() {
+      const dislikeButton = document.querySelector('.dislike-button');
+      const likeButton = document.querySelector('.like-button');
+
+      if (!disliked) {
+        disliked = true;
+        dislikeButton.classList.add('active');
+        likeButton.classList.remove('active_two');
+
+      } else {
+        disliked = false;
+        dislikeButton.classList.remove('active');
+      }
+    }
+
+
+    function toggleDislike() {
+      const dislikeButton = document.querySelector('.dislike-button');
+      const likeButton = document.querySelector('.like-button');
+      const likeCount = document.querySelector('#like-count');
+
+      if (!disliked) {
+        disliked = true;
+        dislikeButton.classList.add('active');
+        likeButton.classList.remove('active_two');
+
+        // Handle the case when the like button was previously selected
+        if (liked) {
+          liked = false;
+          // Update the like button styles if needed
+        }
+
+        // Handle other actions when disliking
+      } else {
+        disliked = false;
+        dislikeButton.classList.remove('active');
+        // Handle the case when the dislike button is deselected
+        // You can also handle other actions here if needed
+      }
+    }
+
+
     $('.like-button, .dislike-button').click(function() {
       var vote = $(this).val();
       var voteContainer = $(this).closest('.vote-container');
@@ -201,4 +263,15 @@ <h4 class="m-0 subject">
       })
     });
   </script>
+  <style>
+    .like-button.active .fas.fa-thumbs-up,
+    .dislike-button.active .fas.fa-thumbs-down {
+      color: red;
+    }
+
+    .like-button.active_two .fas.fa-thumbs-up,
+    .dislike-button.active_two .fas.fa-thumbs-down {
+      color: #00aeff;
+    }
+  </style>
 {% endblock content %}

From f2daceed3c1ba365e15d1b5e381e6b012c263d26 Mon Sep 17 00:00:00 2001
From: giovannimhern <giovannimhern@uchicago.edu>
Date: Tue, 5 Dec 2023 14:57:49 -0600
Subject: [PATCH 05/10] Active selecting on buttons

---
 src/templates/forum_conversation/topic_detail.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/templates/forum_conversation/topic_detail.html b/src/templates/forum_conversation/topic_detail.html
index 821fde01..298be654 100644
--- a/src/templates/forum_conversation/topic_detail.html
+++ b/src/templates/forum_conversation/topic_detail.html
@@ -266,7 +266,7 @@ <h4 class="m-0 subject">
   <style>
     .like-button.active .fas.fa-thumbs-up,
     .dislike-button.active .fas.fa-thumbs-down {
-      color: red;
+      color: orange;
     }
 
     .like-button.active_two .fas.fa-thumbs-up,

From e2d63def8a8a971a160e01197b26435669e9358c Mon Sep 17 00:00:00 2001
From: giovannimhern <giovannimhern@uchicago.edu>
Date: Tue, 5 Dec 2023 14:58:04 -0600
Subject: [PATCH 06/10] Active selecting on buttons

---
 src/templates/forum_conversation/topic_detail.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/templates/forum_conversation/topic_detail.html b/src/templates/forum_conversation/topic_detail.html
index 298be654..821fde01 100644
--- a/src/templates/forum_conversation/topic_detail.html
+++ b/src/templates/forum_conversation/topic_detail.html
@@ -266,7 +266,7 @@ <h4 class="m-0 subject">
   <style>
     .like-button.active .fas.fa-thumbs-up,
     .dislike-button.active .fas.fa-thumbs-down {
-      color: orange;
+      color: red;
     }
 
     .like-button.active_two .fas.fa-thumbs-up,

From 116b6819422ebee1a3bb3fe27c43b7d622684115 Mon Sep 17 00:00:00 2001
From: giovannimhern <giovannimhern@uchicago.edu>
Date: Tue, 5 Dec 2023 15:02:50 -0600
Subject: [PATCH 07/10] Fixing merge conflicts

---
 src/chigame/games/migrations/0021_alter_tournament_matches.py | 2 +-
 src/chigame/users/migrations/0005_alter_user_username.py      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/chigame/games/migrations/0021_alter_tournament_matches.py b/src/chigame/games/migrations/0021_alter_tournament_matches.py
index a0cf1e24..3dd4d57c 100644
--- a/src/chigame/games/migrations/0021_alter_tournament_matches.py
+++ b/src/chigame/games/migrations/0021_alter_tournament_matches.py
@@ -1,4 +1,4 @@
-# Generated by Django 4.2.4 on 2023-12-05 04:24
+# Generated by Django 4.2.4 on 2023-12-05 02:14
 
 from django.db import migrations, models
 
diff --git a/src/chigame/users/migrations/0005_alter_user_username.py b/src/chigame/users/migrations/0005_alter_user_username.py
index 4124706c..d3cc9c41 100644
--- a/src/chigame/users/migrations/0005_alter_user_username.py
+++ b/src/chigame/users/migrations/0005_alter_user_username.py
@@ -1,4 +1,4 @@
-# Generated by Django 4.2.4 on 2023-12-05 04:24
+# Generated by Django 4.2.4 on 2023-12-04 22:15
 
 import chigame.users.models
 from django.db import migrations, models

From a183028a953ab66e477fc358caebbb43953a9655 Mon Sep 17 00:00:00 2001
From: bburgess19 <bburgess19@cs.uchicago.edu>
Date: Tue, 5 Dec 2023 18:08:47 -0600
Subject: [PATCH 08/10] Remove and add button stylings when toggled and changed

---
 .../forum_conversation/topic_detail.html      | 164 ++++++------------
 1 file changed, 56 insertions(+), 108 deletions(-)

diff --git a/src/templates/forum_conversation/topic_detail.html b/src/templates/forum_conversation/topic_detail.html
index f210ec31..d891d06b 100644
--- a/src/templates/forum_conversation/topic_detail.html
+++ b/src/templates/forum_conversation/topic_detail.html
@@ -83,20 +83,15 @@ <h4 class="m-0 subject">
                      data-post-id="{{ post.id }}"
                      data-user-rating="{{ post.user_rating }}"
                      data-rating="{{ post.rating }}">
-                  <button class="like-button btn btn-sm"
-                          type="submit"
-                          name="rate"
-                          value="like"
-                          onclick="toggleLike()">
-                    <i class="fas fa-thumbs-up"></i>
+                  <button class="like-button btn btn-lg" type="submit" name="rate" value="like">
+                    <i class="fa-regular fa-thumbs-up"></i>
                   </button>
                   <span class="like-count fas" id="like-count">{{ post.rating }}</span>
-                  <button class="dislike-button btn btn-sm"
+                  <button class="dislike-button btn btn-lg"
                           type="submit"
                           name="rate"
-                          value="dislike"
-                          onclick="toggleDislike()">
-                    <i class="fas fa-thumbs-down"></i>
+                          value="dislike">
+                    <i class="fa-regular fa-thumbs-down"></i>
                   </button>
                 </div>
                 {% if post.updates_count %}
@@ -156,111 +151,61 @@ <h4 class="m-0 subject">
     </div>
   </div>
   <script>
-    let liked = false;
-    let disliked = false;
+    function likeButtonToggle(voteContainer, likeCountElement, likeIcon, dislikeIcon, userRating) {
+      var voteDelta = 1;
+      voteDelta += userRating === 1 ? -2 : userRating === -1 ? 1 : 0;
 
-    function toggleLike() {
-      const likeButton = document.querySelector('.like-button');
-      const dislikeButton = document.querySelector('.dislike-button');
-
-      if (!liked) {
-        liked = true;
-        likeButton.classList.add('active_two');
-        dislikeButton.classList.remove('active');
+      likeCountElement.text(`${parseInt(likeCountElement.text()) + voteDelta}`);
+      resetVoteIconStyles(dislikeIcon);
 
+      if (userRating === 1) {
+        updateUI(voteContainer, likeIcon, 'fa-regular', '', 0);
       } else {
-        liked = false;
-        likeButton.classList.remove('active_two');
+        updateUI(voteContainer, likeIcon, 'fa-solid', 'rgb(53, 121, 246)', 1);
       }
     }
 
-    function toggleDislike() {
-      const dislikeButton = document.querySelector('.dislike-button');
-      const likeButton = document.querySelector('.like-button');
+    function dislikeButtonToggle(voteContainer, likeCountElement, likeIcon, dislikeIcon, userRating) {
+      var voteDelta = -1;
+      voteDelta += userRating === -1 ? 2 : userRating === 1 ? -1 : 0;
 
-      if (!disliked) {
-        disliked = true;
-        dislikeButton.classList.add('active');
-        likeButton.classList.remove('active_two');
+      likeCountElement.text(`${parseInt(likeCountElement.text()) + voteDelta}`);
+      resetVoteIconStyles(likeIcon);
 
+      if (userRating === -1) {
+        updateUI(voteContainer, dislikeIcon, 'fa-regular', '', 0);
       } else {
-        disliked = false;
-        dislikeButton.classList.remove('active');
+        updateUI(voteContainer, dislikeIcon, 'fa-solid', 'rgb(203, 68, 74)', -1);
       }
     }
 
+    function resetVoteIconStyles(button) {
+      button.removeClass('fa-solid').addClass('fa-regular').css('color', '');
+    }
 
-    function toggleDislike() {
-      const dislikeButton = document.querySelector('.dislike-button');
-      const likeButton = document.querySelector('.like-button');
-      const likeCount = document.querySelector('#like-count');
-
-      if (!disliked) {
-        disliked = true;
-        dislikeButton.classList.add('active');
-        likeButton.classList.remove('active_two');
-
-        // Handle the case when the like button was previously selected
-        if (liked) {
-          liked = false;
-          // Update the like button styles if needed
-        }
+    function updateUI(voteContainer, button, iconClass, color, rating) {
 
-        // Handle other actions when disliking
-      } else {
-        disliked = false;
-        dislikeButton.classList.remove('active');
-        // Handle the case when the dislike button is deselected
-        // You can also handle other actions here if needed
-      }
+      button.removeClass('fa-solid fa-regular').addClass(iconClass).css('color', color);
+      voteContainer.data('user-rating', rating);
     }
 
-
     $('.like-button, .dislike-button').click(function() {
       var vote = $(this).val();
       var voteContainer = $(this).closest('.vote-container');
       var postId = voteContainer.data('post-id');
-      var userRating = voteContainer.data('user-rating');
       var likeCountElement = voteContainer.find('.like-count');
-      var likeCountInt = parseInt(likeCountElement.text());
-      var voteDelta = 0;
+      var likeIcon = voteContainer.find('.like-button').find('i');
+      var dislikeIcon = voteContainer.find('.dislike-button').find('i');
+      var userRating = voteContainer.data('user-rating');
 
-      if (isNaN(likeCountInt)) {
+      if (isNaN(parseInt(likeCountElement.text()))) {
         alert('Failed to add like to non-number');
-        return;
-      }
-
-      // Increase or decrease the HTML value depending on the button clicked
-      if (vote === "like") {
-        voteDelta = 1;
-        voteDelta += userRating === 1 ? -2 : userRating === -1 ? 1 : 0;
-        likeCountElement.text(`${likeCountInt + voteDelta}`);
-
-        // Change the user rating
-        if (userRating === 1) {
-          likeCountElement.css('color', '');
-          voteContainer.data('user-rating', 0)
-        } else {
-          likeCountElement.css('color', 'rgb(53, 121, 246)');
-          voteContainer.data('user-rating', 1)
-        }
-
-      } else if (vote === "dislike") {
-        voteDelta = -1;
-        voteDelta += userRating === -1 ? 2 : userRating === 1 ? -1 : 0;
-        likeCountElement.text(`${likeCountInt + voteDelta}`);
-
-        // Change the user rating
-        if (userRating === -1) {
-          likeCountElement.css('color', '');
-          voteContainer.data('user-rating', 0)
-        } else {
-          likeCountElement.css('color', 'rgb(203, 68, 74)');
-          voteContainer.data('user-rating', -1)
-        }
-        voteContainer.data('user-rating', userRating === -1 ? 0 : -1)
       } else {
-        return;
+        if (vote === "like") {
+          likeButtonToggle(voteContainer, likeCountElement, likeIcon, dislikeIcon, userRating);
+        } else if (vote === "dislike") {
+          dislikeButtonToggle(voteContainer, likeCountElement, likeIcon, dislikeIcon, userRating);
+        }
       }
 
       // Send the vote to the backend
@@ -273,7 +218,7 @@ <h4 class="m-0 subject">
           csrfmiddlewaretoken: "{{ csrf_token }}"
         },
         success: function() {
-          console.log(`${vote}d!`);
+          console.debug(`${vote}d!`);
         }
       })
     });
@@ -284,26 +229,29 @@ <h4 class="m-0 subject">
 
       // Iterate through the selected elements
       voteContainers.each(function() {
+        container = $(this);
         // Get the 'data-user-rating' field value
         var userRating = $(this).data('user-rating');
 
         // Add styling to the vote counter based on userRating
-        $(this).find('.like-count').css('color',
-          userRating === 1 ? 'rgb(53, 121, 246)' :
-          userRating === -1 ? 'rgb(203, 68, 74)' :
-          '');
-      });
+        if (userRating === 1) {
+          updateUI(container,
+            $(this).find('.like-button').find('i'),
+            'fa-solid',
+            'rgb(53, 121, 246)',
+            1);
+        } else if (userRating === -1) {
+          updateUI(container,
+            $(this).find('.dislike-button').find('i'),
+            'fa-solid',
+            'rgb(203, 68, 74)',
+            -1);
+        } else {
+          container.find('.like-button, .dislike-button').each(function() {
+            resetVoteIconStyles($(this).find('i'));
+          });
+        }
+      })
     });
   </script>
-  <style>
-    .like-button.active .fas.fa-thumbs-up,
-    .dislike-button.active .fas.fa-thumbs-down {
-      color: red;
-    }
-
-    .like-button.active_two .fas.fa-thumbs-up,
-    .dislike-button.active_two .fas.fa-thumbs-down {
-      color: #00aeff;
-    }
-  </style>
 {% endblock content %}

From da437c19d0ea165899959dc9a6f5cda388d5dbfb Mon Sep 17 00:00:00 2001
From: bburgess19 <bburgess19@cs.uchicago.edu>
Date: Tue, 5 Dec 2023 18:35:27 -0600
Subject: [PATCH 09/10] Use FA5 icons for Firefox compatability

---
 .../forum_conversation/topic_detail.html      | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/templates/forum_conversation/topic_detail.html b/src/templates/forum_conversation/topic_detail.html
index d891d06b..40d2e12a 100644
--- a/src/templates/forum_conversation/topic_detail.html
+++ b/src/templates/forum_conversation/topic_detail.html
@@ -84,14 +84,14 @@ <h4 class="m-0 subject">
                      data-user-rating="{{ post.user_rating }}"
                      data-rating="{{ post.rating }}">
                   <button class="like-button btn btn-lg" type="submit" name="rate" value="like">
-                    <i class="fa-regular fa-thumbs-up"></i>
+                    <i class="far fa-thumbs-up"></i>
                   </button>
                   <span class="like-count fas" id="like-count">{{ post.rating }}</span>
                   <button class="dislike-button btn btn-lg"
                           type="submit"
                           name="rate"
                           value="dislike">
-                    <i class="fa-regular fa-thumbs-down"></i>
+                    <i class="far fa-thumbs-down"></i>
                   </button>
                 </div>
                 {% if post.updates_count %}
@@ -159,9 +159,9 @@ <h4 class="m-0 subject">
       resetVoteIconStyles(dislikeIcon);
 
       if (userRating === 1) {
-        updateUI(voteContainer, likeIcon, 'fa-regular', '', 0);
+        updateUI(voteContainer, likeIcon, 'far', '', 0);
       } else {
-        updateUI(voteContainer, likeIcon, 'fa-solid', 'rgb(53, 121, 246)', 1);
+        updateUI(voteContainer, likeIcon, 'fas', 'rgb(53, 121, 246)', 1);
       }
     }
 
@@ -173,19 +173,19 @@ <h4 class="m-0 subject">
       resetVoteIconStyles(likeIcon);
 
       if (userRating === -1) {
-        updateUI(voteContainer, dislikeIcon, 'fa-regular', '', 0);
+        updateUI(voteContainer, dislikeIcon, 'far', '', 0);
       } else {
-        updateUI(voteContainer, dislikeIcon, 'fa-solid', 'rgb(203, 68, 74)', -1);
+        updateUI(voteContainer, dislikeIcon, 'fas', 'rgb(203, 68, 74)', -1);
       }
     }
 
     function resetVoteIconStyles(button) {
-      button.removeClass('fa-solid').addClass('fa-regular').css('color', '');
+      button.removeClass('fas').addClass('far').css('color', '');
     }
 
     function updateUI(voteContainer, button, iconClass, color, rating) {
 
-      button.removeClass('fa-solid fa-regular').addClass(iconClass).css('color', color);
+      button.removeClass('fas far').addClass(iconClass).css('color', color);
       voteContainer.data('user-rating', rating);
     }
 
@@ -237,13 +237,13 @@ <h4 class="m-0 subject">
         if (userRating === 1) {
           updateUI(container,
             $(this).find('.like-button').find('i'),
-            'fa-solid',
+            'fas',
             'rgb(53, 121, 246)',
             1);
         } else if (userRating === -1) {
           updateUI(container,
             $(this).find('.dislike-button').find('i'),
-            'fa-solid',
+            'fas',
             'rgb(203, 68, 74)',
             -1);
         } else {

From 6b50ffcf1efef35215f22b6abec7a57a3bdc9db0 Mon Sep 17 00:00:00 2001
From: bburgess19 <bburgess19@cs.uchicago.edu>
Date: Tue, 5 Dec 2023 19:11:12 -0600
Subject: [PATCH 10/10] Prevent like buttons from shifting (for reasonable vote
 numbers)

---
 src/templates/forum/board_base.html                |  2 +-
 src/templates/forum_conversation/topic_detail.html | 11 ++++++++++-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/templates/forum/board_base.html b/src/templates/forum/board_base.html
index b36717a9..538aed97 100644
--- a/src/templates/forum/board_base.html
+++ b/src/templates/forum/board_base.html
@@ -19,7 +19,7 @@
   <link rel="stylesheet" href="{% static 'machina/custom-styling.css' %}" />
 {% endblock css %}
 {% block body %}
-  <div class="my-5 container " id="main_container">
+  <div class="my-5 container" id="main_container">
     <div class="row">
       <div class="col-12">
         {% block breadcrumb %}
diff --git a/src/templates/forum_conversation/topic_detail.html b/src/templates/forum_conversation/topic_detail.html
index 40d2e12a..d73f28db 100644
--- a/src/templates/forum_conversation/topic_detail.html
+++ b/src/templates/forum_conversation/topic_detail.html
@@ -7,6 +7,15 @@
 {% load forum_member_tags %}
 {% load forum_permission_tags %}
 
+{% block css %}
+  {{ block.super }}
+  <style>
+    .vote-container span {
+      min-width: 60px;
+      text-align: center;
+    }
+  </style>
+{% endblock css %}
 {% block sub_title %}
   {{ topic.subject }}
 {% endblock sub_title %}
@@ -86,7 +95,7 @@ <h4 class="m-0 subject">
                   <button class="like-button btn btn-lg" type="submit" name="rate" value="like">
                     <i class="far fa-thumbs-up"></i>
                   </button>
-                  <span class="like-count fas" id="like-count">{{ post.rating }}</span>
+                  <span class="like-count h5 mb-0" id="like-count">{{ post.rating }}</span>
                   <button class="dislike-button btn btn-lg"
                           type="submit"
                           name="rate"