chat, contacts, dojo, links, publish: edited existing padding/margins/color/font-size of tab/header components

Basically, this PR includes a collection of edits made to the headers across each of our OS1 modules. I flattened the font sizing, fixed edge margins/padding, and fixed some button copy in the case of the Contacts app.
2024-11-13 08:38:43 +03:00 · 2020-02-26 21:04:57 -05:00 · 2020-02-26 21:04:57 -05:00 · e8fdf3713d
commit e8fdf3713d
parent 308ebea599
17 changed files with 28 additions and 29 deletions
--- a/pkg/arvo/app/link/img/SwitcherClosed.png
+++ b/pkg/arvo/app/link/img/SwitcherClosed.png
--- a/pkg/arvo/app/link/img/SwitcherOpen.png
+++ b/pkg/arvo/app/link/img/SwitcherOpen.png
--- a/pkg/interface/chat/src/js/components/chat.js
+++ b/pkg/interface/chat/src/js/components/chat.js
@ -247,7 +247,7 @@ export class ChatScreen extends Component {
         <Link to="/~chat/">{"⟵ All Chats"}</Link>
       </div>
       <div
-         className={"pl3 pt2 bb b--gray4 b--gray1-d bg-gray0-d flex relative " +
+         className={"pl4 pt2 bb b--gray4 b--gray1-d bg-gray0-d flex relative" +
         "overflow-x-scroll overflow-x-auto-l overflow-x-auto-xl flex-shrink-0"}
         style={{ height: 48 }}>
         <SidebarSwitcher
@ -257,7 +257,7 @@ export class ChatScreen extends Component {
         <Link to={`/~chat/` + isinPopout + `room` + props.station}
         className="pt2 white-d">
           <h2
-             className="mono dib f8 fw4 v-top"
+             className="mono dib f9 fw4 v-top"
             style={{ width: "max-content" }}>
             {props.station.substr(1)}
           </h2>
--- a/pkg/interface/chat/src/js/components/lib/chat-tabbar.js
+++ b/pkg/interface/chat/src/js/components/lib/chat-tabbar.js
@ -30,9 +30,9 @@ export class ChatTabBar extends Component {
      ? "dn-m dn-l dn-xl" : "dib-m dib-l dib-xl";

    return (
-      <div className="dib pt2 flex-shrink-0 flex-grow-1">
+      <div className="dib flex-shrink-0 flex-grow-1">
        {!!props.isOwner ? (
-          <div className={"dib f8 pl6"}>
+          <div className={"dib pt2 f9 pl6"}>
            <Link
              className={"no-underline " + memColor}
              to={`/~chat/` + popout + `members` + props.station}>
@ -42,7 +42,7 @@ export class ChatTabBar extends Component {
        ) : (
          <div className="dib" style={{ width: 0 }}></div>
        )}
-        <div className={"dib f8 pl6 pr6"}>
+        <div className={"dib pt2 f9 pl6 pr6"}>
          <Link
            className={"no-underline " + setColor}
            to={`/~chat/` + popout + `settings` + props.station}>
@ -50,7 +50,7 @@ export class ChatTabBar extends Component {
          </Link>
        </div>
        <a href={`/~chat/popout/room` + props.station} target="_blank"
-        className="dib fr">
+        className="dib fr pt2 pr1">
          <img
            className={`flex-shrink-0 pr3 dn ` + hidePopoutIcon}
            src="/~chat/img/popout.png"
--- a/pkg/interface/chat/src/js/components/lib/header-bar.js
+++ b/pkg/interface/chat/src/js/components/lib/header-bar.js
@ -43,12 +43,12 @@ export class HeaderBar extends Component {
          }}>
          {title}
        </span>
-        <div className="absolute right-0 lh-copy" style={{ top: 9 }}>
+        <div className="absolute right-0 lh-copy" style={{ top: 8 }}>
          <Sigil
            ship={"~" + window.ship}
+            classes="v-mid mix-blend-diff"
            size={16}
            color={"#000000"}
-            classes="v-mid mix-blend-diff"
          />
          <span className="mono white-d f9 ml2">{"~" + window.ship}</span>
        </div>
--- a/pkg/interface/chat/src/js/components/member.js
+++ b/pkg/interface/chat/src/js/components/member.js
@ -55,7 +55,7 @@ export class MemberScreen extends Component {
          <Link to="/~chat/">{"⟵ All Chats"}</Link>
        </div>
        <div
-          className={`pl3 pt2 bb b--gray4 b--gray2-d bg-gray0-d flex relative 
+          className={`pl4 pt2 bb b--gray4 b--gray1-d bg-gray0-d flex relative 
          overflow-x-scroll overflow-x-auto-l overflow-x-auto-xl flex-shrink-0`}
          style={{ height: 48 }}>
          <SidebarSwitcher
@ -65,7 +65,7 @@ export class MemberScreen extends Component {
          <Link to={`/~chat/` + isinPopout + `room` + props.station}
          className="pt2 white-d">
            <h2
-              className="mono dib f8 fw4 v-top"
+              className="mono dib f9 fw4 v-top"
              style={{ width: "max-content" }}>
              {props.station.substr(1)}
            </h2>
--- a/pkg/interface/chat/src/js/components/settings.js
+++ b/pkg/interface/chat/src/js/components/settings.js
@ -89,7 +89,7 @@ export class SettingsScreen extends Component {
            <Link to="/~chat/">{"⟵ All Chats"}</Link>
          </div>
          <div
-            className="pl3 pt2 bb b--gray4 b--gray2-d bg-gray0-d flex relative overflow-x-scroll overflow-x-auto-l overflow-x-auto-xl flex-shrink-0"
+            className="pl4 pt2 bb b--gray4 b--gray2-d bg-gray0-d flex relative overflow-x-scroll overflow-x-auto-l overflow-x-auto-xl flex-shrink-0"
            style={{ height: 48 }}>
            <SidebarSwitcher
              sidebarShown={this.props.sidebarShown}
@ -98,7 +98,7 @@ export class SettingsScreen extends Component {
            <Link to={`/~chat/` + isinPopout + `room` + props.station}
            className="pt2 white-d">
              <h2
-                className="mono dib f8 fw4 v-top"
+                className="mono dib f9 fw4 v-top"
                style={{ width: "max-content" }}>
                {props.station.substr(1)}
              </h2>
@ -124,7 +124,7 @@ export class SettingsScreen extends Component {
          <Link to="/~chat/">{"⟵ All Chats"}</Link>
        </div>
        <div
-          className="pl3 pt2 bb b--gray4 flex relative overflow-x-scroll overflow-x-auto-l overflow-x-auto-xl flex-shrink-0"
+          className="pl4 pt2 bb b--gray4 b--gray1-d flex relative overflow-x-scroll overflow-x-auto-l overflow-x-auto-xl flex-shrink-0"
          style={{ height: 48 }}>
          <SidebarSwitcher
            sidebarShown={this.props.sidebarShown}
@ -133,7 +133,7 @@ export class SettingsScreen extends Component {
          <Link to={`/~chat/` + isinPopout + `room` + props.station}
          className="pt2">
            <h2
-              className="mono dib f8 fw4 v-top"
+              className="mono dib f9 fw4 v-top"
              style={{ width: "max-content" }}>
              {props.station.substr(1)}
            </h2>
--- a/pkg/interface/contacts/src/js/components/lib/contact-card.js
+++ b/pkg/interface/contacts/src/js/components/lib/contact-card.js
@ -521,12 +521,12 @@ export class ContactCard extends Component {
          </div>
          <button
            className={
-              `pl4 mt4 mb4 f9 red2 pointer ` + adminOpt
+              `pr4 mt4 mb4 f9 red2 pointer ` + adminOpt
            }
            onClick={this.removeFromGroup}>
            {(
              props.ship === window.ship && props.path.includes(window.ship)
-                ? "Delete" : "Remove"
+                ? "Leave Group" : "Remove from Group"
            )}
          </button>
        </div>
--- a/pkg/interface/contacts/src/js/components/lib/header-bar.js
+++ b/pkg/interface/contacts/src/js/components/lib/header-bar.js
@ -44,7 +44,7 @@ export class HeaderBar extends Component {
          }}>
          {title}
        </span>
-        <div className="absolute right-0 lh-copy" style={{ top: 9 }}>
+        <div className="absolute right-0 lh-copy" style={{ top: 8 }}>
          <Sigil
            ship={"~" + window.ship}
            size={16}
--- a/pkg/interface/link/src/js/components/lib/header-bar.js
+++ b/pkg/interface/link/src/js/components/lib/header-bar.js
@ -43,7 +43,7 @@ export class HeaderBar extends Component {
          }}>
          {title}
        </span>
-        <div className="absolute right-0 lh-copy" style={{ top: 9 }}>
+        <div className="absolute right-0 lh-copy" style={{ top: 8 }}>
          <Sigil
            ship={"~" + window.ship}
            classes="mix-blend-diff v-mid"
--- a/pkg/interface/link/src/js/components/lib/icons/icon-sidebar-switch.js
+++ b/pkg/interface/link/src/js/components/lib/icons/icon-sidebar-switch.js
@ -16,7 +16,7 @@ export class SidebarSwitcher extends Component {
            api.sidebarToggle();
          }}>
          <img
-            className={`pr3 invert-d dn ` + popoutSwitcher}
+            className={`pr3 dn ` + popoutSwitcher}
            src={
              this.props.sidebarShown
                ? "/~link/img/SwitcherOpen.png"
--- a/pkg/interface/link/src/js/components/lib/links-tabbar.js
+++ b/pkg/interface/link/src/js/components/lib/links-tabbar.js
@ -38,7 +38,7 @@ export class LinksTabBar extends Component {
        <a href={`/~link/popout` + props.groupPath} target="_blank"
        className="dib fr">
          <img
-            className={`flex-shrink-0 pr4 dn invert-d ` + hidePopoutIcon}
+            className={`flex-shrink-0 pr4 dn` + hidePopoutIcon}
            src="/~link/img/popout.png"
            height="16"
            width="16"/>
--- a/pkg/interface/link/src/js/components/link.js
+++ b/pkg/interface/link/src/js/components/link.js
@ -88,7 +88,7 @@ export class LinkDetail extends Component {
    return (
      <div className="h-100 w-100 overflow-hidden flex flex-column">
        <div
-          className={"pl3 pt2 flex relative overflow-x-scroll " +
+          className={"pl4 pt2 flex relative overflow-x-scroll " +
      "overflow-x-auto-l overflow-x-auto-xl flex-shrink-0 " +
      "bb bn-m bn-l bn-xl b--gray4"}
          style={{ height: 48 }}>
@ -97,7 +97,7 @@ export class LinkDetail extends Component {
            popout={props.popout}
          />
          <Link
-            className="dib f8 fw4 v-top pt2 gray2"
+            className="dib f9 fw4 v-top pt2 gray2"
            to={"/~link" + popout + props.groupPath + "/" + props.page}>
            {"<- Collection index"}
          </Link>
--- a/pkg/interface/link/src/js/components/links-list.js
+++ b/pkg/interface/link/src/js/components/links-list.js
@ -92,16 +92,16 @@ export class Links extends Component {
         <Link to="/~link/">{"⟵ All Channels"}</Link>
       </div>
       <div
-         className={`pl3 pt2 flex relative overflow-x-scroll
+         className={`pl4 pt2 flex relative overflow-x-scroll
         overflow-x-auto-l overflow-x-auto-xl flex-shrink-0
-         bb bn-m bn-l bn-xl b--gray4`}
+         bb bn-m bn-l bn-xl b--gray4 b--gray1-d bg-gray0-d`}
         style={{ height: 48 }}>
          <SidebarSwitcher
           sidebarShown={props.sidebarShown}
           popout={props.popout}/>
         <Link to={`/~link` + popout + props.groupPath} className="pt2">
           <h2
-             className={`dib f8 fw4 v-top ` +
+             className={`dib f9 fw4 v-top ` +
             (props.groupPath.includes("/~/")
             ? ""
             : "mono")}>
--- a/pkg/interface/publish/src/js/components/lib/header-bar.js
+++ b/pkg/interface/publish/src/js/components/lib/header-bar.js
@ -45,8 +45,7 @@ export class HeaderBar extends Component {
        }}>
          {title}
        </span>
-        <div className="absolute right-0 lh-copy"
-        style={{top: 12}}>
+        <div className="absolute right-0 lh-copy" style={{top: 12}}>
        <Sigil
          ship={"~" + window.ship}
          classes="mix-blend-diff v-mid"
--- a/pkg/interface/soto/src/js/components/lib/header-bar.js
+++ b/pkg/interface/soto/src/js/components/lib/header-bar.js
@ -31,7 +31,7 @@ export class HeaderBar extends Component {
          href='/'
          style={{ top: 14 }}>
          <IconHome classes={spinnerClasses} />
-          <span className="ml2 black white-d v-top lh-title"
+          <span className="ml2 gray2 white-d v-top lh-title"
            style={{ paddingTop: 3 }}>
            Home
          </span>
--- a/pkg/interface/soto/src/js/components/root.js
+++ b/pkg/interface/soto/src/js/components/root.js
@ -44,7 +44,7 @@ export class Root extends Component {
                    </a>
                  </div>
                  <div className={"pa3 bg-white bg-gray0-d black white-d mono w-100 f8 relative" +
-                  " h-100-m40-s b--gray0 br2 flex-auto " + popoutClasses}
+                  " h-100-m40-s b--gray2 br1 flex-auto " + popoutClasses}
                    style={{
                      lineHeight: "1.4",
                      cursor: "text"