From 7a6e7301a19484ace4081d6ce265deb06077ef40 Mon Sep 17 00:00:00 2001
From: Ben Halpern <bendhalpern@gmail.com>
Date: Sun, 26 Apr 2020 13:26:49 -0400
Subject: [PATCH] [deploy] Small update to /connect design (#7510)

* Initial work

* Full screen mode adjustments

* Update snapshots
---
 app/assets/stylesheets/chat.scss              | 104 +++++++++++-------
 .../__snapshots__/channels.test.jsx.snap      |  20 ++--
 .../__snapshots__/chat.test.jsx.snap          |  12 +-
 .../__snapshots__/compose.test.jsx.snap       |   2 +-
 .../chat/__tests__/compose.test.jsx           |   2 +-
 app/javascript/chat/channels.jsx              |   4 +-
 app/javascript/chat/chat.jsx                  |  14 +--
 app/javascript/chat/compose.jsx               |   4 +-
 8 files changed, 92 insertions(+), 70 deletions(-)

diff --git a/app/assets/stylesheets/chat.scss b/app/assets/stylesheets/chat.scss
index 7147989b2..b6a20ff4e 100644
--- a/app/assets/stylesheets/chat.scss
+++ b/app/assets/stylesheets/chat.scss
@@ -3,39 +3,29 @@
 
 // High level classes
 .chat-page-wrapper {
-  margin: 10px auto 0px;
-  width: 96%;
+  margin: 0px auto 0px;
+  width: 100%;
   max-width: calc(1540px + 10vw);
 }
 
 .live-chat {
-  height: calc(100vh - 70px);
+  height: calc(100vh - 56px);
 
   &.live-chat--iossafari {
     height: calc(100vh - 190px);
   }
 
   overflow-y: hidden;
-
-  @media screen and (min-width: 400px) {
-    height: calc(100vh - 70px);
-  }
 }
 
 //chat
 .chat {
   display: flex;
-  height: calc(100vh - 80px);
+  height: calc(100vh - 56px);
 
   &.chat--iossafari {
     height: calc(100vh - 201px);
   }
-
-  padding-right: 3px;
-
-  @media screen and (min-width: 400px) {
-    height: calc(100vh - 80px);
-  }
 }
 
 .chat--expanded {
@@ -76,6 +66,7 @@
   height: inherit;
   position: relative;
   overflow: hidden;
+  padding-top: 5px;
 
   .chat__channelssearchtoggle {
     background: transparent;
@@ -156,7 +147,7 @@
   color: var(--body-color);
 
   @media screen and (min-width: 1000px) {
-    width: calc(100% - 13px);
+    width: 98%;
   }
 }
 
@@ -215,11 +206,22 @@
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  border-radius: 5px;
-  @include themeable(border, theme-container-border, 1px solid $outline-color);
   background: var(--card-bg);
   flex-flow: row nowrap;
   position: relative;
+  @include themeable(
+    border-left,
+    theme-container-border,
+    1px solid $outline-color
+  );
+  @media screen and (min-width: 1540px) {
+    @include themeable(
+      border,
+      theme-container-border,
+      1px solid $outline-color
+    );
+    border-top: 0px;
+  }
 }
 
 .activechatchannel__conversation {
@@ -300,17 +302,11 @@
 }
 
 .activechatchannel__form {
-  @include themeable(
-    border-top,
-    theme-container-border,
-    1px solid $outline-color
-  );
-  @include themeable(background, theme-container-accent-background, #ededed);
   width: 100%;
-  height: 63px;
+  height: 73px;
   position: relative;
   @media screen and (min-height: 1000px) {
-    height: 85px;
+    height: 95px;
   }
 }
 
@@ -417,7 +413,6 @@
     bottom: 0;
     width: 100%;
     min-width: 100%;
-    border-radius: 5px;
   }
   .activechatchannel__activecontent.activechatchannel__activecontent--video {
     position: absolute;
@@ -439,7 +434,6 @@
     bottom: 0;
     width: 100%;
     min-width: 100%;
-    border-radius: 5px;
   }
   .activechatchannel__activecontent.activechatchannel__activecontent--sidecar {
     display: none;
@@ -561,7 +555,7 @@
 }
 
 .chatchanneltabbutton {
-  width: calc(95% - 2px);
+  width: calc(100% - 2px);
   border: none;
   background: transparent;
   padding: 2px 0px;
@@ -597,10 +591,14 @@
 
 .chatchanneltab--active {
   border: 1px solid var(--base-30);
+  background: var(--base-10);
+  img {
+    border: 1px solid var(--base-30);
+  }
 }
 
 .chatchanneltab--new {
-  border: 1px solid var(--accent-brand);
+  border: 1px solid var(--accent-brand-darker);
   color: var(--accent-brand-darker);
 }
 
@@ -613,15 +611,15 @@
   display: inline-block;
   min-height: 0.3em;
   min-width: 0.3em;
-  border-radius: 100px;
   margin-right: 5px;
-  border: 1px solid var(--base-30);
 
   img {
     height: calc(22px + 0.3vw);
     width: calc(22px + 0.3vw);
     vertical-align: calc(-6px - 0.14vw);
     border-radius: 100px;
+    border: 1px solid var(--base-30);
+    background: white;
   }
 
   .chatchanneltabgroupicon {
@@ -630,7 +628,34 @@
   }
 }
 
-.chatchanneltabindicator--new {
+.chat--contracted {
+  .chatchannels {
+    width: 45px;
+  }
+  .chatchanneltabbutton {
+    margin-left: 1px;
+  }
+  .chatchanneltab {
+    padding: 6px 1px;
+    img {
+      height: 36px;
+      width: 36px;
+    }
+  }
+  .chatchanneltab--active {
+    background: var(--base-20);
+  }
+  .chatchanneltab--new {
+    background: var(--accent-brand-darker);
+    color: white;
+  }
+}
+
+.chatchanneltabindicator .chatchanneltabindicatorgroupimage {
+  border-radius: 3px;
+}
+
+.chatchanneltabindicator--new img {
   border: 1px solid var(--accent-brand);
 }
 
@@ -802,9 +827,6 @@
   }
 }
 
-.chatmessagebody__divider {
-}
-
 .chatmessagebody__message {
   p {
     margin-top: 0;
@@ -847,15 +869,15 @@
 }
 
 .messagecomposer__input {
-  border-radius: 3px;
+  border-radius: 5px;
   font-size: 16px;
-  margin: 4px 4px 4px 6px;
-  padding: 4px;
+  margin: 0px 4px 4px 6px;
+  padding: 5px;
   resize: none;
   flex-grow: 1;
   height: 44px;
   background: var(--card-bg);
-  @include themeable(border, theme-border, 1px solid $outline-color);
+  border: 1px solid var(--base-40);
   color: var(--body-color);
   @media screen and (min-height: 1000px) {
     height: 66px;
@@ -863,8 +885,8 @@
 }
 
 .messagecomposer__submit {
-  margin: 4px 6px 4px 0;
-  border-radius: 3px;
+  margin: 0px 6px 4px 0;
+  border-radius: 5px;
   background: var(--accent-brand);
   font-weight: 600px;
   font-family: $helvetica-condensed;
diff --git a/app/javascript/chat/__tests__/__snapshots__/channels.test.jsx.snap b/app/javascript/chat/__tests__/__snapshots__/channels.test.jsx.snap
index 2cc69af91..3b4f3d8b4 100644
--- a/app/javascript/chat/__tests__/__snapshots__/channels.test.jsx.snap
+++ b/app/javascript/chat/__tests__/__snapshots__/channels.test.jsx.snap
@@ -9,7 +9,7 @@ exports[`<Channels /> expanded with chat channels should render and test snapsho
     id="chatchannels__channelslist"
   >
     <button
-      class="chatchanneltabbutton"
+      class="chatchanneltabbutton crayons-link"
       data-channel-slug="@0"
       onClick={[Function]}
       type="button"
@@ -30,14 +30,14 @@ exports[`<Channels /> expanded with chat channels should render and test snapsho
         >
           <img
             alt="pic"
-            class="chatchanneltabindicatordirectimage invert-channel-image"
+            class="chatchanneltabindicatorgroupimage invert-channel-image"
           />
         </span>
         channel name 1
       </span>
     </button>
     <button
-      class="chatchanneltabbutton"
+      class="chatchanneltabbutton crayons-link"
       data-channel-slug="@1"
       onClick={[Function]}
       type="button"
@@ -65,7 +65,7 @@ exports[`<Channels /> expanded with chat channels should render and test snapsho
       </span>
     </button>
     <button
-      class="chatchanneltabbutton"
+      class="chatchanneltabbutton crayons-link"
       data-channel-slug="@2"
       onClick={[Function]}
       type="button"
@@ -86,7 +86,7 @@ exports[`<Channels /> expanded with chat channels should render and test snapsho
         >
           <img
             alt="pic"
-            class="chatchanneltabindicatordirectimage invert-channel-image"
+            class="chatchanneltabindicatorgroupimage invert-channel-image"
           />
         </span>
         group channel 3
@@ -186,7 +186,7 @@ exports[`<Channels /> not expanded with chat channels should render and test sna
     id="chatchannels__channelslist"
   >
     <button
-      class="chatchanneltabbutton"
+      class="chatchanneltabbutton crayons-link"
       data-channel-slug="@0"
       onClick={[Function]}
       type="button"
@@ -207,14 +207,14 @@ exports[`<Channels /> not expanded with chat channels should render and test sna
         >
           <img
             alt="pic"
-            class="chatchanneltabindicatordirectimage invert-channel-image"
+            class="chatchanneltabindicatorgroupimage invert-channel-image"
           />
         </span>
         channel name 1
       </span>
     </button>
     <button
-      class="chatchanneltabbutton"
+      class="chatchanneltabbutton crayons-link"
       data-channel-slug="@1"
       onClick={[Function]}
       type="button"
@@ -242,7 +242,7 @@ exports[`<Channels /> not expanded with chat channels should render and test sna
       </span>
     </button>
     <button
-      class="chatchanneltabbutton"
+      class="chatchanneltabbutton crayons-link"
       data-channel-slug="@2"
       onClick={[Function]}
       type="button"
@@ -263,7 +263,7 @@ exports[`<Channels /> not expanded with chat channels should render and test sna
         >
           <img
             alt="pic"
-            class="chatchanneltabindicatordirectimage invert-channel-image"
+            class="chatchanneltabindicatorgroupimage invert-channel-image"
           />
         </span>
         group channel 3
diff --git a/app/javascript/chat/__tests__/__snapshots__/chat.test.jsx.snap b/app/javascript/chat/__tests__/__snapshots__/chat.test.jsx.snap
index f0b06b2b0..c83c26a74 100644
--- a/app/javascript/chat/__tests__/__snapshots__/chat.test.jsx.snap
+++ b/app/javascript/chat/__tests__/__snapshots__/chat.test.jsx.snap
@@ -70,7 +70,7 @@ exports[`<Chat /> should load chat 1`] = `
         id="chatchannels__channelslist"
       >
         <button
-          class="chatchanneltabbutton"
+          class="chatchanneltabbutton crayons-link"
           onClick={[Function]}
           type="button"
         >
@@ -88,14 +88,14 @@ exports[`<Chat /> should load chat 1`] = `
             >
               <img
                 alt="pic"
-                class="chatchanneltabindicatordirectimage invert-channel-image"
+                class="chatchanneltabindicatorgroupimage invert-channel-image"
               />
             </span>
             channel name 1
           </span>
         </button>
         <button
-          class="chatchanneltabbutton"
+          class="chatchanneltabbutton crayons-link"
           onClick={[Function]}
           type="button"
         >
@@ -120,7 +120,7 @@ exports[`<Chat /> should load chat 1`] = `
           </span>
         </button>
         <button
-          class="chatchanneltabbutton"
+          class="chatchanneltabbutton crayons-link"
           onClick={[Function]}
           type="button"
         >
@@ -138,7 +138,7 @@ exports[`<Chat /> should load chat 1`] = `
             >
               <img
                 alt="pic"
-                class="chatchanneltabindicatordirectimage invert-channel-image"
+                class="chatchanneltabindicatorgroupimage invert-channel-image"
               />
             </span>
             group channel 3
@@ -278,7 +278,7 @@ exports[`<Chat /> should load chat 1`] = `
                 onKeyDown={[Function]}
                 onKeyPress={[Function]}
                 onKeyUp={[Function]}
-                placeholder="Message goes here"
+                placeholder="Let's connect"
               />
               <button
                 class="messagecomposer__submit cta"
diff --git a/app/javascript/chat/__tests__/__snapshots__/compose.test.jsx.snap b/app/javascript/chat/__tests__/__snapshots__/compose.test.jsx.snap
index dd310641e..18560ad89 100644
--- a/app/javascript/chat/__tests__/__snapshots__/compose.test.jsx.snap
+++ b/app/javascript/chat/__tests__/__snapshots__/compose.test.jsx.snap
@@ -12,7 +12,7 @@ exports[`<Compose /> behavior with message should render and test snapshot 1`] =
       id="messageform"
       maxLength="1000"
       onKeyDown={[Function]}
-      placeholder="Message goes here"
+      placeholder="Let's connect"
     />
     <button
       class="messagecomposer__submit cta"
diff --git a/app/javascript/chat/__tests__/compose.test.jsx b/app/javascript/chat/__tests__/compose.test.jsx
index 7af88477b..95053e6b5 100644
--- a/app/javascript/chat/__tests__/compose.test.jsx
+++ b/app/javascript/chat/__tests__/compose.test.jsx
@@ -96,7 +96,7 @@ describe('<Compose />', () => {
       expect(input.exists()).toEqual(true);
       expect(input.text()).toEqual('');
       expect(input.attr('maxLength')).toEqual('1000');
-      expect(input.attr('placeholder')).toEqual('Message goes here');
+      expect(input.attr('placeholder')).toEqual("Let's connect");
 
       const btn = context.find('.messagecomposer__submit');
       expect(btn.exists()).toEqual(true);
diff --git a/app/javascript/chat/channels.jsx b/app/javascript/chat/channels.jsx
index 6b907724f..5e10c9b4a 100644
--- a/app/javascript/chat/channels.jsx
+++ b/app/javascript/chat/channels.jsx
@@ -24,7 +24,7 @@ const Channels = ({
       <button
         type="button"
         key={channel.id}
-        className="chatchanneltabbutton"
+        className="chatchanneltabbutton crayons-link"
         onClick={handleSwitchChannel}
         data-channel-id={channel.chat_channel_id}
         data-channel-slug={channel.channel_modified_slug}
@@ -49,7 +49,7 @@ const Channels = ({
               className={
                 channel.channel_type === 'direct'
                   ? 'chatchanneltabindicatordirectimage'
-                  : 'chatchanneltabindicatordirectimage invert-channel-image'
+                  : 'chatchanneltabindicatorgroupimage invert-channel-image'
               }
             />
           </span>
diff --git a/app/javascript/chat/chat.jsx b/app/javascript/chat/chat.jsx
index d48cb37bd..a6cb3e9a2 100644
--- a/app/javascript/chat/chat.jsx
+++ b/app/javascript/chat/chat.jsx
@@ -570,7 +570,7 @@ export default class Chat extends Component {
     }
     if (escPressed && activeContent[activeChannelId]) {
       this.setActiveContentState(activeChannelId, null);
-      this.setState({fullscreenContent: null});
+      this.setState({fullscreenContent: null, expanded: window.innerWidth > 600});
     }
 
   };
@@ -831,11 +831,11 @@ export default class Chat extends Component {
         });
       } else if (target.dataset.content === 'exit') {
         this.setActiveContentState(activeChannelId, null);
-        this.setState({ fullscreenContent: null });
+        this.setState({ fullscreenContent: null, expanded: window.innerWidth > 600 });
       } else if (target.dataset.content === 'fullscreen') {
         const mode =
           this.state.fullscreenContent === 'sidecar' ? null : 'sidecar';
-        this.setState({ fullscreenContent: mode });
+        this.setState({ fullscreenContent: mode, expanded: (mode === null || window.innerWidth > 1600) });
       }
     }
     document.getElementById('messageform').focus();
@@ -1189,9 +1189,9 @@ export default class Chat extends Component {
         (this.scroller.scrollTop + this.scroller.clientHeight) /
         this.scroller.scrollHeight;
 
-      if (scrolledRatio < 0.7) {
+      if (scrolledRatio < 0.5) {
         jumpbackButton.classList.remove('chatchanneljumpback__hide');
-      } else if (scrolledRatio > 0.8) {
+      } else if (scrolledRatio > 0.6) {
         jumpbackButton.classList.add('chatchanneljumpback__hide');
       }
 
@@ -1304,11 +1304,11 @@ export default class Chat extends Component {
 
   onTriggerVideoContent = (e) => {
     if (e.target.dataset.content === 'exit') {
-      this.setState({ videoPath: null, fullscreenContent: null });
+      this.setState({ videoPath: null, fullscreenContent: null, expanded: window.innerWidth > 600 });
     } else if (this.state.fullscreenContent === 'video') {
       this.setState({ fullscreenContent: null });
     } else {
-      this.setState({ fullscreenContent: 'video' });
+      this.setState({ fullscreenContent: 'video', expanded: window.innerWidth > 1600 });
     }
   };
 
diff --git a/app/javascript/chat/compose.jsx b/app/javascript/chat/compose.jsx
index db72d9503..fffa74b36 100644
--- a/app/javascript/chat/compose.jsx
+++ b/app/javascript/chat/compose.jsx
@@ -61,7 +61,7 @@ export default class Chat extends Component {
         <textarea
           className="messagecomposer__input"
           id="messageform"
-          placeholder="Message goes here"
+          placeholder="Let's connect"
           onKeyDown={handleKeyDownEdit}
           onKeyPress={handleMention}
           onKeyUp={handleKeyUp}
@@ -90,7 +90,7 @@ export default class Chat extends Component {
         <textarea
           className="messagecomposer__input"
           id="messageform"
-          placeholder="Message goes here"
+          placeholder="Let's connect"
           onKeyDown={handleKeyDown}
           onKeyPress={handleMention}
           onKeyUp={handleKeyUp}