fix(ui): small fixes to share popup, archive inspector

frontend/app/components/Session_/Player/Controls/Controls.js

@@ -366,6 +366,7 @@ export default class Controls extends React.Component {
 
             <div className="flex items-center h-full">
               { !live && <div className={cn(styles.divider, 'h-full')} /> }
+              {/* ! TEMP DISABLED !
               {!live && (
                 <ControlButton
                   disabled={ disabled && !inspectorMode }
@@ -376,7 +377,7 @@ export default class Controls extends React.Component {
                   label="INSPECT"
                   containerClassName="mx-2"
                 />
-              )}
+              )} */}
               <ControlButton
                 disabled={ disabled && !inspectorMode }
                 onClick={ () => toggleBottomTools(CONSOLE) }

frontend/app/components/shared/SharePopup/SessionCopyLink/SessionCopyLink.tsx

@@ -20,12 +20,12 @@ function SessionCopyLink({ content = '', time }: Props) {
 
   return (
     <div className="flex justify-between items-center w-full mt-2">
-        <IconButton label="Copy Link" primaryText icon="link-45deg" onClick={copyHandler} />
-        { copied && <div className="color-teal">Copied to Clipboard</div> }
+        <IconButton label="Copy URL at current time" primaryText icon="link-45deg" onClick={copyHandler} />
+        { copied && <div className="color-gray-medium">Copied</div> }
     </div>
   )
 }
 
 export default connectPlayer(state => ({
   time: state.time,
-}))(SessionCopyLink);
+}))(SessionCopyLink);

frontend/app/components/shared/SharePopup/SharePopup.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { toast } from 'react-toastify';
 import withRequest from 'HOCs/withRequest';
-import { Popup, Icon } from 'UI';
+import { Popup, Dropdown, Icon, Button } from 'UI';
 import { pause } from 'Player';
 import styles from './sharePopup.module.css';
 import IntegrateSlackButton from '../IntegrateSlackButton/IntegrateSlackButton';
@@ -15,7 +15,7 @@ import { Tooltip } from 'react-tippy';
   tenantId: state.getIn([ 'user', 'account', 'tenantId' ]),
 }))
 @withRequest({
-  endpoint: ({ id, entity }, integrationId) => 
+  endpoint: ({ id, entity }, integrationId) =>
     `/integrations/slack/notify/${ integrationId }/${entity}/${ id }`,
   method: "POST",
 })
@@ -38,12 +38,12 @@ export default class SharePopup extends React.PureComponent {
     }, 100)
   }
 
-  handleClose = () => { 
+  handleClose = () => {
     this.setState({ isOpen: false, comment: '' });
   }
 
   handleSuccess = () => {
-    toast.success('Your comment is shared.');
+    toast.success('Sent to Slack.');
     this.handleClose();
   }
 
@@ -60,10 +60,10 @@ export default class SharePopup extends React.PureComponent {
         interactive
         // onOpen={ this.handleOpen }
         // onClose={ this.handleClose }
-        content={ 
+        content={
           <div className={ styles.wrapper }>
             <div className={ styles.header }>
-              <div className={ styles.title }>{ 'Comment' }</div>
+              <div className={ styles.title }>Share this session link to Slack</div>
             </div>
             { options.length === 0 ?
               <>
@@ -72,7 +72,7 @@ export default class SharePopup extends React.PureComponent {
                 </div>
                 { showCopyLink && (
                   <div className={styles.footer}>
-                    <SessionCopyLink /> 
+                    <SessionCopyLink />
                   </div>
                 )}
               </>
@@ -87,32 +87,34 @@ export default class SharePopup extends React.PureComponent {
                     resize="none"
                     onChange={ this.editMessage }
                     value={ comment }
-                    placeholder="Type here..."
+                    placeholder="Add Message (Optional)"
                     className="p-4"
                   />
 
                   <div className="flex items-center justify-between">
                     <Select
-                      options={ options } 
-                      defaultValue={ channelId } 
+                      options={ options }
+                      defaultValue={ channelId }
                       onChange={ this.changeChannel }
                       className="mr-4"
                     />
                     <div>
-                      <button
-                        className={ styles.shareButton }
+                      <Button
                         onClick={ this.share }
+                        primary
                       >
-                        <Icon name="integrations/slack" size="18" marginRight="10" />
-                        { loading ? 'Sharing...' : 'Share' }
-                      </button>
+                        <div className='flex items-center'>
+                          <Icon name="integrations/slack-bw" size="18" marginRight="10" />
+                          { loading ? 'Sending...' : 'Send' }
+                        </div>
+                      </Button>
                     </div>
                   </div>
                 </div>
                 <div className={ styles.footer }>
-                  <SessionCopyLink /> 
+                  <SessionCopyLink />
                 </div>
-               
+
               </div>
             }
           </div>

frontend/app/components/shared/SharePopup/sharePopup.module.css

@@ -85,14 +85,13 @@ $iconsize: 30px;
 .shareButton {
   display: flex;
   align-items: center;
-  box-shadow: 0px 1px 3px 0 $gray-light;
   border: solid thin transparent;
   padding: 10px 15px;
   border-radius: 3px;
   cursor: pointer;
-  color: $teal;
+  background: $main;
+  color: white;
   &:hover {
-    background-color: $active-blue;
-    border-color: $active-blue-border;
+    box-shadow: 0px 1px 3px 0 $gray-light;
   }
-}
+}

frontend/app/svg/icons/integrations/slack-bw.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-slack" viewBox="0 0 16 16">
+  <path d="M3.362 10.11c0 .926-.756 1.681-1.681 1.681S0 11.036 0 10.111C0 9.186.756 8.43 1.68 8.43h1.682v1.68zm.846 0c0-.924.756-1.68 1.681-1.68s1.681.756 1.681 1.68v4.21c0 .924-.756 1.68-1.68 1.68a1.685 1.685 0 0 1-1.682-1.68v-4.21zM5.89 3.362c-.926 0-1.682-.756-1.682-1.681S4.964 0 5.89 0s1.68.756 1.68 1.68v1.682H5.89zm0 .846c.924 0 1.68.756 1.68 1.681S6.814 7.57 5.89 7.57H1.68C.757 7.57 0 6.814 0 5.89c0-.926.756-1.682 1.68-1.682h4.21zm6.749 1.682c0-.926.755-1.682 1.68-1.682.925 0 1.681.756 1.681 1.681s-.756 1.681-1.68 1.681h-1.681V5.89zm-.848 0c0 .924-.755 1.68-1.68 1.68A1.685 1.685 0 0 1 8.43 5.89V1.68C8.43.757 9.186 0 10.11 0c.926 0 1.681.756 1.681 1.68v4.21zm-1.681 6.748c.926 0 1.682.756 1.682 1.681S11.036 16 10.11 16s-1.681-.756-1.681-1.68v-1.682h1.68zm0-.847c-.924 0-1.68-.755-1.68-1.68 0-.925.756-1.681 1.68-1.681h4.21c.924 0 1.68.756 1.68 1.68 0 .926-.756 1.681-1.68 1.681h-4.21z"/>
+</svg>