Merge branch 'mp/chat-design-tweak' (#2049)

* mp/chat-design-tweak:
  chat: chat tab bar re-aligned and resized

Signed-off-by: Jared Tobin <jared@tlon.io>

pkg/interface/chat/src/js/components/chat.js

@@ -231,15 +231,16 @@ export class ChatScreen extends Component {
                  <Link to="/~chat/">{"⟵ All Chats"}</Link>
                </div>
                <div
-                 className="pl3 pt4 bb b--gray4 flex relative overflow-x-scroll overflow-x-auto-l overflow-x-auto-xl flex-shrink-0"
+                 className="pl3 pt2 bb b--gray4 flex relative overflow-x-scroll overflow-x-auto-l overflow-x-auto-xl flex-shrink-0"
                  style={{ height: 48 }}>
                  <SidebarSwitcher
                    sidebarShown={this.props.sidebarShown}
                    popout={this.props.popout}
                  />
-                 <Link to={`/~chat/` + isinPopout + `room` + state.station}>
+                 <Link to={`/~chat/` + isinPopout + `room` + state.station}
+                 className="pt2">
                    <h2
-                     className="mono dib f7 fw4 v-top"
+                     className="mono dib f8 fw4 v-top"
                      style={{ width: "max-content" }}>
                      {state.station.substr(1)}
                    </h2>

pkg/interface/chat/src/js/components/lib/chat-tabbar.js

@@ -33,11 +33,11 @@ export class ChatTabBar extends Component {
 
 
     return (
-      <div className="dib flex-shrink-0 flex-grow-1">
+      <div className="dib pt2 flex-shrink-0 flex-grow-1">
         {!!props.isOwner ? (
           <div className={"dib f8 pl6"}>
             <Link
-              className={"no-underline v-top " + memColor}
+              className={"no-underline " + memColor}
               to={`/~chat/` + popout + `members` + props.station}>
               Members
             </Link>
@@ -47,7 +47,7 @@ export class ChatTabBar extends Component {
         )}
         <div className={"dib f8 pl6 pr6"}>
           <Link
-            className={"no-underline v-top " + setColor}
+            className={"no-underline " + setColor}
             to={`/~chat/` + popout + `settings` + props.station}>
             Settings
           </Link>
@@ -55,11 +55,10 @@ export class ChatTabBar extends Component {
         <a href={`/~chat/popout/room` + props.station} target="_blank"
         className="dib fr">
           <img
-            className={`v-btm flex-shrink-0 pr2 dn ` + hidePopoutIcon}
+            className={`flex-shrink-0 pr2 dn ` + hidePopoutIcon}
             src="/~chat/img/popout.png"
             height="16"
-            width="16"
-            style={{ paddingTop: "2px" }}/>
+            width="16"/>
         </a>
       </div>
     );

pkg/interface/chat/src/js/components/lib/icons/icon-sidebar-switch.js

@@ -9,14 +9,14 @@ export class SidebarSwitcher extends Component {
       : "dib-m dib-l dib-xl";
     
     return (
-      <div>
+      <div className="pt2">
         <a
           className="pointer flex-shrink-0"
           onClick={() => {
             api.sidebarToggle();
           }}>
           <img
-            className={`v-btm pr3 dn ` + popoutSwitcher}
+            className={`pr3 dn ` + popoutSwitcher}
             src={
               this.props.sidebarShown
                 ? "/~chat/img/ChatSwitcherLink.png"

pkg/interface/chat/src/js/components/member.js

@@ -83,15 +83,16 @@ export class MemberScreen extends Component {
           <Link to="/~chat/">{"⟵ All Chats"}</Link>
         </div>
         <div
-          className="pl3 pt4 bb b--gray4 flex relative overflow-x-scroll overflow-x-auto-l overflow-x-auto-xl flex-shrink-0"
+          className="pl3 pt2 bb b--gray4 flex relative overflow-x-scroll overflow-x-auto-l overflow-x-auto-xl flex-shrink-0"
           style={{ height: 48 }}>
           <SidebarSwitcher
             sidebarShown={this.props.sidebarShown}
             popout={this.props.popout}
           />
-          <Link to={`/~chat/` + isinPopout + `room` + state.station}>
+          <Link to={`/~chat/` + isinPopout + `room` + state.station}
+          className="pt2">
             <h2
-              className="mono dib f7 fw4 v-top"
+              className="mono dib f8 fw4 v-top"
               style={{ width: "max-content" }}>
               {state.station.substr(1)}
             </h2>

pkg/interface/chat/src/js/components/settings.js

@@ -90,15 +90,16 @@ export class SettingsScreen extends Component {
             <Link to="/~chat/">{"⟵ All Chats"}</Link>
           </div>
           <div
-            className="pl3 pt4 bb b--gray4 flex relative overflow-x-scroll overflow-x-auto-l overflow-x-auto-xl flex-shrink-0"
+            className="pl3 pt2 bb b--gray4 flex relative overflow-x-scroll overflow-x-auto-l overflow-x-auto-xl flex-shrink-0"
             style={{ height: 48 }}>
             <SidebarSwitcher
               sidebarShown={this.props.sidebarShown}
               popout={this.props.popout}
             />
-            <Link to={`/~chat/` + isinPopout + `room` + state.station}>
+            <Link to={`/~chat/` + isinPopout + `room` + state.station}
+            className="pt2">
               <h2
-                className="mono dib f7 fw4 v-top"
+                className="mono dib f8 fw4 v-top"
                 style={{ width: "max-content" }}>
                 {state.station.substr(1)}
               </h2>
@@ -124,15 +125,16 @@ export class SettingsScreen extends Component {
           <Link to="/~chat/">{"⟵ All Chats"}</Link>
         </div>
         <div
-          className="pl3 pt4 bb b--gray4 flex relative overflow-x-scroll overflow-x-auto-l overflow-x-auto-xl flex-shrink-0"
+          className="pl3 pt2 bb b--gray4 flex relative overflow-x-scroll overflow-x-auto-l overflow-x-auto-xl flex-shrink-0"
           style={{ height: 48 }}>
           <SidebarSwitcher
             sidebarShown={this.props.sidebarShown}
             popout={this.props.popout}
           />
-          <Link to={`/~chat/` + isinPopout + `room` + state.station}>
+          <Link to={`/~chat/` + isinPopout + `room` + state.station}
+          className="pt2">
             <h2
-              className="mono dib f7 fw4 v-top"
+              className="mono dib f8 fw4 v-top"
               style={{ width: "max-content" }}>
               {state.station.substr(1)}
             </h2>