From 3d0eaaea66e6369d215e6e592e669d21c8529e27 Mon Sep 17 00:00:00 2001
From: Bastard Operator <bofh@nogafam.es>
Date: Wed, 30 Dec 2020 23:17:58 +0100
Subject: [PATCH] Change Chat page UI

---
 src/intl/en-US.js                                 | 6 +++---
 src/routes/_components/DynamicPageBanner.html     | 9 +++++++--
 src/routes/_components/status/StatusMentions.html | 2 +-
 src/routes/_pages/direct.html                     | 2 +-
 src/scss/themes/ozark.scss                        | 2 +-
 5 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/intl/en-US.js b/src/intl/en-US.js
index 83f562aa..aa277e15 100644
--- a/src/intl/en-US.js
+++ b/src/intl/en-US.js
@@ -55,7 +55,7 @@ export default {
   `,
   blockedUsers: 'Blocked users',
   bookmarks: 'Bookmarks',
-  directMessages: 'Direct messages',
+  directMessages: 'Chat',
   favorites: 'Favorites',
   federated: 'Federated',
   home: 'Home',
@@ -89,7 +89,7 @@ export default {
   // not logged in
   profileNotLoggedIn: 'A user timeline will appear here when logged in.',
   bookmarksNotLoggedIn: 'Your bookmarks will appear here when logged in.',
-  directMessagesNotLoggedIn: 'Your direct messages will appear here when logged in.',
+  directMessagesNotLoggedIn: 'Your chat will appear here when logged in.',
   favoritesNotLoggedIn: 'Your favorites will appear here when logged in.',
   federatedTimelineNotLoggedIn: 'Your federated timeline will appear here when logged in.',
   localTimelineNotLoggedIn: 'Your local timeline will appear here when logged in.',
@@ -135,7 +135,7 @@ export default {
     <li><kbd>g</kbd> + <kbd>l</kbd> to go to the local timeline</li>
     <li><kbd>g</kbd> + <kbd>t</kbd> to go to the federated timeline</li>
     <li><kbd>g</kbd> + <kbd>c</kbd> to go to the community page</li>
-    <li><kbd>g</kbd> + <kbd>d</kbd> to go to the direct messages page</li>
+    <li><kbd>g</kbd> + <kbd>d</kbd> to go to the chat page</li>
     <li><kbd>h</kbd> or <kbd>?</kbd> to toggle the help dialog</li>
     <li><kbd>Backspace</kbd> to go back, close dialogs</li>
   `,
diff --git a/src/routes/_components/DynamicPageBanner.html b/src/routes/_components/DynamicPageBanner.html
index 8c768678..06b7289c 100644
--- a/src/routes/_components/DynamicPageBanner.html
+++ b/src/routes/_components/DynamicPageBanner.html
@@ -15,7 +15,11 @@
   .dynamic-page-banner {
     display: grid;
     align-items: center;
-    margin: 20px 20px 20px;
+    text-align: right;
+    margin: 0;
+    padding: .5em 1em;
+    background: #fff;
+    border-bottom: 2px solid #959595;
     grid-template-columns: 1fr min-content;
     grid-column-gap: 10px;
   }
@@ -32,6 +36,7 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    font-size: 1.3em;
   }
   .dynamic-page-go-back {
     font-size: 1.3em;
@@ -50,7 +55,7 @@
   }
   @media (max-width: 767px) {
     .dynamic-page-banner {
-      margin: 20px 10px 20px;
+      margin: 0;
     }
     .dynamic-page-title {
       font-size: 1.3em;
diff --git a/src/routes/_components/status/StatusMentions.html b/src/routes/_components/status/StatusMentions.html
index 3000fdf1..603a213e 100644
--- a/src/routes/_components/status/StatusMentions.html
+++ b/src/routes/_components/status/StatusMentions.html
@@ -21,7 +21,7 @@
 <style>
   .status-mentions {
     grid-area: mentions;
-    margin: 10px 0 10px 5px;
+    margin: 0;
     font-size: 0.9em;
   }
 
diff --git a/src/routes/_pages/direct.html b/src/routes/_pages/direct.html
index 62c13beb..df31d058 100644
--- a/src/routes/_pages/direct.html
+++ b/src/routes/_pages/direct.html
@@ -1,7 +1,7 @@
 {#if $isUserLoggedIn}
   <TimelinePage timeline="direct">
     {#if $pinnedPage !== '/direct'}
-      <DynamicPageBanner title="{intl.directMessages}" icon="#fa-envelope"/>
+      <DynamicPageBanner title="{intl.directMessages}" icon="#fa-comments"/>
     {/if}
   </TimelinePage>
 {:else}
diff --git a/src/scss/themes/ozark.scss b/src/scss/themes/ozark.scss
index c3ff4beb..2485bb86 100644
--- a/src/scss/themes/ozark.scss
+++ b/src/scss/themes/ozark.scss
@@ -210,7 +210,7 @@ div.main-content.chat {
   }
 }
 div.main-content.direct {
-  div.timeline-slot-reveal-container {
+  button.dynamic-page-go-back {
     visibility: collapse;
     display: none;
   }