Merge pull request #2292 from urbit/mp/os1/contacts/notes-design-updates

contacts: resizable "notes" field, sidebar scroll tweak, os1 nav buttons

pkg/interface/contacts/src/js/components/lib/contact-card.js

@@ -344,7 +344,7 @@ export class ContactCard extends Component {
           {avatar}
           {sigilColor}
           {removeImage}
-          <div className="w-100 pt8 lh-copy tl">
+          <div className="w-100 pt8 pb8 lh-copy tl">
             <p className="f9 gray2">Ship Name</p>
             <p className="f8 mono">~{props.ship}</p>
             <p className="f9 gray2 mt3">Ship Type</p>
@@ -384,6 +384,7 @@ export class ContactCard extends Component {
               onChange={this.notesToSet}
               onDeleteClick={() => this.setField("removeNotes")}
               onSaveClick={() => this.setField("notes")}
+              resizable={true}
               showButtons={!props.share} />
           </div>
         </div>
@@ -503,15 +504,15 @@ export class ContactCard extends Component {
                 this.editToggle();
               }
             }}
-            className={`ml3 mt2 mb2 f9 pa1 ba br2 pointer b--black ` + ourOpt}>
+            className={`pl4 mt4 mb4 f9 pointer b--black ` + ourOpt}>
             {editInfoText}
           </button>
-          <button className={`ml3 mt2 mb2 f9 pa1 ba br2 b--black ` + localOpt}>
+          <button className={`pl4 mt4 mb4 f9 b--black ` + localOpt}>
             Share Contact Info
           </button>
           <button
             className={
-              `ml3 mt2 mb2 f9 pa1 ba red2 br2 b--red2 pointer ` + adminOpt
+              `pl4 mt4 mb4 f9 red2 b--red2 pointer ` + adminOpt
             }
             onClick={this.removeFromGroup}>
             {(

pkg/interface/contacts/src/js/components/lib/contact-sidebar.js

@@ -66,22 +66,19 @@ export class ContactSidebar extends Component {
         <div className="pt3 pb6 pl3 f8 db dn-m dn-l dn-xl">
           <Link to="/~contacts/">{"⟵ All Groups"}</Link>
         </div>
-        <div className="overflow-y-scroll h-100">
+        <div className="overflow-auto h-100">
+          <Link
+            to={"/~contacts/add" + props.path}
+            className={((this.props.path.includes(window.ship))
+              ? "dib"
+              : "dn")}>
+            <p className="f9 pl4 pt4 gray2 bn">Invite</p>
+          </Link>
           {shareSheet}
           <h2 className="f9 pt4 pr4 pb2 pl4 gray2 c-default">Members</h2>
           {contactItems}
           {groupItems}
         </div>
-        <div
-          className={"bg-white z2 bt b--gray4 absolute w-100 " +
-          ((this.props.path.includes(window.ship))
-            ? "dt"
-            : "dn")}
-          style={{ bottom: 0, height: 48 }}>
-          <Link to={"/~contacts/add" + props.path} className="dtc v-mid">
-            <p className="f9 pl4 black bn">Add New Member to Group</p>
-          </Link>
-        </div>
         </div>
     );
   }

pkg/interface/contacts/src/js/components/lib/edit-element.js

@@ -19,14 +19,18 @@ export class EditElement extends Component {
       state.currentValue !== ""
     );
 
+    let inputStyles = (props.resizable)
+      ? { resize: "vertical", height: 40, paddingTop: 10 }
+      : { resize: "none", height: 40, paddingTop: 10 }
+
     return (
-      <div>
+      <div className="pb4">
         <p className="f9 gray2">{props.title}</p>
           <div className="w-100 flex">
             <textarea
               ref={props.title}
               className="w-100 ba pl3 b--gray4"
-              style={{ resize: "none", height: 40, paddingTop: 10 }}
+              style={ inputStyles }
               onChange={(e) => {
                 let val = (' ' + e.target.value).slice(1);
                 this.setState({

pkg/interface/contacts/src/js/components/lib/group-sidebar.js

@@ -89,20 +89,16 @@ export class GroupSidebar extends Component {
         relative overflow-hidden ` + activeClasses}>
         {/*TODO Add invite items */}
         <a className="db dn-m dn-l dn-xl f8 pb6 pl3" href="/">⟵ Landscape</a>
-        <div className="overflow-y-scroll h-100">
+        <div className="overflow-auto pb8 h-100">
-          <h2 className="f9 pt4 pr4 pb2 pl4 gray2 c-default">Your Root Identity</h2>
+          <Link to="/~contacts/new" className="dib">
+            <p className="f9 pt4 pl4 green2 bn">Create Group</p>
+          </Link>
+          <h2 className="f9 pt6 pr4 pb2 pl4 gray2 c-default">Root Identity</h2>
           {rootIdentity}
           {inviteItems}
-          <h2 className="f9 pt3 pr4 pb2 pl4 gray2 c-default">Your Groups</h2>
+          <h2 className="f9 pt3 pr4 pb2 pl4 gray2 c-default">Groups</h2>
           {groupItems}
         </div>
-        <div
-          className="bg-white z2 dt bt b--gray4 absolute w-100"
-          style={{ bottom: 0, height: 48 }}>
-          <Link to="/~contacts/new" className="dtc v-mid">
-            <p className="f9 pl4 black bn">Create New Group</p>
-          </Link>
-        </div>
       </div>
     );
   }

pkg/interface/contacts/src/js/components/lib/share-sheet.js

@@ -13,7 +13,7 @@ export class ShareSheet extends Component {
 
     return (
       <div>
-        <p className="pt4 pb2 pl3 pr3 f8 gray2 f9">Share Your Profile</p>
+        <p className="pt4 pb2 pl4 pr4 f8 gray2 f9">Share Your Profile</p>
         <ContactItem
           key={props.ship}
           ship={props.ship}
@@ -22,11 +22,11 @@ export class ShareSheet extends Component {
           path={props.path}
           selected={props.selected}
           share={true} />
-        <p className="pt2 pb3 pl3 pr3 f9">
+        <p className="pt2 pb3 pl4 pr4 f9">
            Your personal information is hidden to others in this group
            by default.
         </p>
-        <p className="pl3 pr3 f9">
+        <p className="pl4 pr4 f9">
           Share whenever you are ready, or edit its contents for this group.
         </p>
       </div>

pkg/interface/contacts/src/js/components/root.js

@@ -52,7 +52,13 @@ export class Root extends Component {
                 contacts={contacts}
                 groups={groups}
                 invites={invites}>
-                <div className="h-100 w-100 overflow-x-hidden bg-white dn db-ns"></div>
+                <div className="h-100 w-100 overflow-x-hidden bg-white dn db-ns">
+                  <div className="pl3 pr3 pt2 dt pb3 w-100 h-100">
+                    <p className="f9 pt3 gray2 w-100 h-100 dtc v-mid tc">
+                      Select a group to begin.
+                    </p>
+                  </div>
+                </div>
               </Skeleton>
             );
           }} />