From ee567165f17193978010e537b3180cd3f268956e Mon Sep 17 00:00:00 2001
From: chapoi <101828855+chapoi@users.noreply.github.com>
Date: Thu, 12 Dec 2024 23:09:44 +0800
Subject: [PATCH] UX: increase button sizes and timeline size (#30240)

* UX: increase button sizes and timeline size

* UX: bring back tracking btn on topic timeline desktop

* Scope flexing topic-navigation area to mobile + make all buttons same font-size
---
 .../components/topic-timeline/container.gjs   |  5 +++++
 .../stylesheets/common/base/topic-footer.scss | 10 ++--------
 .../stylesheets/mobile/topic-footer.scss      | 19 +++++++++++++++++++
 3 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/topic-timeline/container.gjs b/app/assets/javascripts/discourse/app/components/topic-timeline/container.gjs
index e78c7ff56d9..97065b2be47 100644
--- a/app/assets/javascripts/discourse/app/components/topic-timeline/container.gjs
+++ b/app/assets/javascripts/discourse/app/components/topic-timeline/container.gjs
@@ -21,6 +21,7 @@ import icon from "discourse-common/helpers/d-icon";
 import { bind, debounce } from "discourse-common/utils/decorators";
 import domUtils from "discourse-common/utils/dom-utils";
 import { i18n } from "discourse-i18n";
+import TopicNotificationsButton from "select-kit/components/topic-notifications-button";
 import BackButton from "./back-button";
 import Scroller from "./scroller";
 
@@ -659,6 +660,10 @@ export default class TopicTimelineScrollArea extends Component {
           />
         {{/if}}
 
+        {{#if (and this.currentUser this.site.desktopView)}}
+          <TopicNotificationsButton @topic={{@model}} @expanded={{false}} />
+        {{/if}}
+
         <PluginOutlet
           @name="timeline-footer-controls-after"
           @outletArgs={{hash model=@model fullscreen=@fullscreen}}
diff --git a/app/assets/stylesheets/common/base/topic-footer.scss b/app/assets/stylesheets/common/base/topic-footer.scss
index 0192b569e5f..abb6e7e0d97 100644
--- a/app/assets/stylesheets/common/base/topic-footer.scss
+++ b/app/assets/stylesheets/common/base/topic-footer.scss
@@ -18,7 +18,6 @@
       display: flex;
       gap: 0.5rem;
       flex-wrap: wrap;
-      align-items: center;
     }
 
     .bookmark.bookmarked {
@@ -41,12 +40,6 @@
   }
 }
 
-.topic-navigation {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-}
-
 #topic-progress-wrapper {
   position: fixed;
   &.docked {
@@ -94,7 +87,7 @@
     background-color: var(--secondary);
     color: var(--tertiary);
 
-    padding: 0.35em 1em;
+    padding: 0.5rem 1em;
     border: 1px solid var(--tertiary-low);
 
     /* as a big ol' click target, don't let text inside be selected */
@@ -107,6 +100,7 @@
       height: 100%;
       position: relative;
       z-index: z("base");
+      font-size: var(--font-up-1);
       font-weight: bold;
     }
     .d-icon {
diff --git a/app/assets/stylesheets/mobile/topic-footer.scss b/app/assets/stylesheets/mobile/topic-footer.scss
index 58f3415f39a..0eea67aaff3 100644
--- a/app/assets/stylesheets/mobile/topic-footer.scss
+++ b/app/assets/stylesheets/mobile/topic-footer.scss
@@ -1,5 +1,24 @@
+.container.posts .topic-navigation {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
 html:not(.anon) #topic-footer-buttons {
   .topic-footer-main-buttons {
+    width: 100%;
+    justify-content: space-between;
+    gap: 0.75rem;
+
+    button,
+    .topic-notifications-button,
+    .pinned-button {
+      font-size: var(--font-up-1);
+    }
+
+    &__actions {
+      gap: 0.75rem;
+    }
+
     .d-button-label {
       display: none;
     }