misc: update third party auth ui (#858)

* misc: update third party auth ui

* misc: update auth setting ui

src/components/SettingsPanel/AuthSettingsSection.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import type { FunctionComponent } from 'react';
 
 import {
@@ -8,32 +8,26 @@ import {
   RcTypography,
   styled,
   palette2,
-  RcChip,
-  RcIcon,
 } from '@ringcentral/juno';
-import { ArrowDown2, ArrowUp2 } from '@ringcentral/juno-icon';
-
 import { StyledSettingItem } from './SettingItem';
 
 const StyledAuthSettingItem = styled(StyledSettingItem)`
   align-items: flex-start;
 
+  .RcListItemText-multiline {
+    margin: 0;
+  }
+
   .RcListItemText-primary {
     display: flex;
     flex-direction: row;
+    line-height: 30px;
+    margin-right: 100px;
+    align-items: center;
   }
-`;
 
-const StyledChip = styled(RcChip)`
-  height: 22px;
-  font-size: 0.75rem;
-  margin-right: 5px;
-  position: absolute;
-  right: 38px;
-  top: 10px;
-
-  .MuiChip-label {
-    padding: 0 6px;
+  .RcListItemText-secondary {
+    margin-top: 5px;
   }
 `;
 
@@ -48,23 +42,17 @@ const RedDot = styled.div`
 `;
 
 const AuthAction = styled.div`
-  position: relative;
-  margin-top: 5px;
-  display: inline-block;
-`;
-
-const StyledArrowIcon = styled(RcIcon)`
   position: absolute;
+  display: inline-block;
   right: 16px;
-  top: 8px;
+  top: 6px;
 `;
 
 const IconWrapper = styled.div`
-  margin-right: 10px;
-  margin-top: 8px;
+  margin-right: 8px;
+  height: 30px;
 
   img {
-    vertical-align: middle;
     height: 30px;
     max-width: 86px;
     position: relative;
@@ -96,22 +84,16 @@ export const AuthSettingsSection: FunctionComponent<AuthorizeSettingsSectionProp
   authorizedAccount = null,
   showAuthRedDot,
 }) => {
-  const [showDetail, setShowDetail] = useState(!authorized);
-
   let status = authorized ? authorizedTitle : unauthorizedTitle;
   if (authorized && contactSyncing) {
     status = 'Syncing';
   }
   let icon = null;
   if (authorizationLogo) {
     icon = (
-      <RcListItemIcon
-        onClick={() => setShowDetail(!showDetail)}
-      >
-        <IconWrapper>
-          <img src={authorizationLogo} alt={serviceName} />
-        </IconWrapper>
-      </RcListItemIcon>
+      <IconWrapper>
+        <img src={authorizationLogo} alt={serviceName} />
+      </IconWrapper>
     );
   }
   return (
@@ -121,44 +103,25 @@ export const AuthSettingsSection: FunctionComponent<AuthorizeSettingsSectionProp
       disableRipple
       data-sign="thirdPartyAuthSetting"
     >
-      {icon}
       <RcListItemText
-        primary={serviceName}
+        primary={
+          <>
+            {icon}
+            <RcTypography variant="body1" color="neutral.f06">
+              {serviceName}
+            </RcTypography>
+          </>
+        }
+        primaryTypographyProps={{
+          component: 'div',
+        }}
         secondary={
           <>
+            <RcTypography variant="caption1" color="neutral.f04">
+              { authorized ? 'Connected' : 'Disconnected'} { authorized && authorizedAccount ? `as ${authorizedAccount}` : '' }
+            </RcTypography>
             {
-              authorized && authorizedAccount ? (
-                <RcTypography variant="caption1" color="neutral.f04">
-                  {authorizedAccount}
-                </RcTypography>
-              ) : (
-                null
-              )
-            }
-            {
-              showDetail ? (
-                <AuthAction>
-                  <RcButton
-                    size="small"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      onAuthorize();
-                    }}
-                    variant="outlined"
-                    color={(authorized && !contactSyncing) ? 'danger.b04' : 'action.primary'}
-                  >
-                    {status}
-                  </RcButton>
-                  {
-                    !authorized && showAuthRedDot ? (
-                      <RedDot />
-                    ) : null
-                  }
-                </AuthAction>
-              ) : null
-            }
-            {
-              serviceInfo && showDetail ? (
+              serviceInfo ? (
                 <RcTypography variant="caption1" color="neutral.f04">
                   {serviceInfo}
                 </RcTypography>
@@ -171,19 +134,25 @@ export const AuthSettingsSection: FunctionComponent<AuthorizeSettingsSectionProp
         secondaryTypographyProps={{
           component: 'div',
         }}
-        onClick={() => setShowDetail(!showDetail)}
-      />
-      <StyledChip
-        label={authorized? 'Connected' : 'Disconnected'}
-        color={authorized ? 'success.b03' : 'danger.b03'}
-        variant="outlined"
-        onClick={() => setShowDetail(!showDetail)}
-      />
-      <StyledArrowIcon
-        symbol={showDetail ? ArrowUp2 : ArrowDown2}
-        onClick={() => setShowDetail(!showDetail)}
-        color="neutral.f04"
       />
+      <AuthAction>
+        <RcButton
+          size="small"
+          onClick={(e) => {
+            e.stopPropagation();
+            onAuthorize();
+          }}
+          variant="outlined"
+          color={(authorized && !contactSyncing) ? 'danger.b04' : 'action.primary'}
+        >
+          {status}
+        </RcButton>
+        {
+          !authorized && showAuthRedDot ? (
+            <RedDot />
+          ) : null
+        }
+      </AuthAction>
     </StyledAuthSettingItem>
   );
 }