Change Chat page UI

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>
   `,

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;

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;
   }
 

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}

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;
   }