From ecdc08ac03eb70eabcae1dd51e9bf58a6720bc15 Mon Sep 17 00:00:00 2001
From: Chad Birch <chad.birch@gmail.com>
Date: Fri, 12 Apr 2019 18:28:16 -0600
Subject: [PATCH] Change comment collapse/expand all button styles

These buttons were basically icons, and it's better to have them with
text labels like this. Their left border was also disappearing at
smaller screen sizes due to re-using the .btn-comment-collapse style, so
it's better to do a separate style for "light buttons" like this, and
keep that behavior specifically to the actual comment collapse buttons.
---
 tildes/scss/modules/_btn.scss                  | 8 ++++----
 tildes/scss/themes/_theme_base.scss            | 2 +-
 tildes/tildes/templates/macros/comments.jinja2 | 2 +-
 tildes/tildes/templates/topic.jinja2           | 6 ++++--
 4 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/tildes/scss/modules/_btn.scss b/tildes/scss/modules/_btn.scss
index 459de5e..cbae636 100644
--- a/tildes/scss/modules/_btn.scss
+++ b/tildes/scss/modules/_btn.scss
@@ -30,14 +30,10 @@
 }
 
 .btn-comment-collapse {
-  @include min-touch-size;
-
   height: 100%;
   line-height: 100%;
   padding: 0;
 
-  font-weight: normal;
-
   @media (max-width: $size-md) {
     border-left: 0;
   }
@@ -73,6 +69,10 @@
   }
 }
 
+.btn-light {
+  font-weight: normal;
+}
+
 .btn-post {
   display: flex;
   flex-wrap: wrap;
diff --git a/tildes/scss/themes/_theme_base.scss b/tildes/scss/themes/_theme_base.scss
index dcbedfe..dcaad93 100644
--- a/tildes/scss/themes/_theme_base.scss
+++ b/tildes/scss/themes/_theme_base.scss
@@ -111,7 +111,7 @@
     }
   }
 
-  .btn-comment-collapse {
+  .btn-light {
     color: map-get($theme, "foreground-secondary");
     border-color: map-get($theme, "border");
 
diff --git a/tildes/tildes/templates/macros/comments.jinja2 b/tildes/tildes/templates/macros/comments.jinja2
index 17bbd13..384e5f8 100644
--- a/tildes/tildes/templates/macros/comments.jinja2
+++ b/tildes/tildes/templates/macros/comments.jinja2
@@ -40,7 +40,7 @@
 {% macro render_comment_contents(comment, is_individual_comment=False) %}
   <div class="comment-itself">
     <header>
-      <button class="btn btn-comment-collapse" data-js-comment-collapse-button>
+      <button class="btn btn-light btn-comment-collapse" data-js-comment-collapse-button>
         {{ "+" if comment.collapsed_state in ("full", "individual") else "−" }}
       </button>
 
diff --git a/tildes/tildes/templates/topic.jinja2 b/tildes/tildes/templates/topic.jinja2
index 1cca6f4..c34a8a2 100644
--- a/tildes/tildes/templates/topic.jinja2
+++ b/tildes/tildes/templates/topic.jinja2
@@ -219,8 +219,10 @@
       {% endtrans %}
       </h2>
 
-      <button class="btn btn-comment-collapse" title="Collapse reply comments" data-js-comment-collapse-all-button>&minus;</button>
-      <button class="btn btn-comment-collapse" title="Expand all comments" data-js-comment-expand-all-button>+</button>
+      <div class="btn-group">
+        <button class="btn btn-sm btn-light" data-js-comment-collapse-all-button>Collapse replies</button>
+        <button class="btn btn-sm btn-light" data-js-comment-expand-all-button>Expand all</button>
+      </div>
 
       <form class="form-listing-options" method="get">
         <div class="form-group">