feat: Design adjustments for classifiedBar (SQSERVICES-1733) (#14799)

* feat: Design adjustments for classifiedBar (SQSERVICES-1733) * fix no handle * delete temp changes
wireapp · Mar 14, 2023 · cdc6d82 · cdc6d82
1 parent b6876a8
commit cdc6d82
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 3 deletions.
diff --git a/src/script/components/Modals/UserModal/UserModal.tsx b/src/script/components/Modals/UserModal/UserModal.tsx
@@ -198,7 +198,18 @@ const UserModal: React.FC<UserModalProps> = ({
         <div className={cx('modal__body user-modal__wrapper', {'user-modal__wrapper--max': !user && !userNotFound})}>
           {user && (
             <>
-              <UserDetails participant={user} isSelfVerified={isSelfVerified} classifiedDomains={classifiedDomains} />
+              <UserDetails
+                avatarStyles={{
+                  marginTop: 60,
+                }}
+                classifiedBarStyles={{
+                  position: 'absolute',
+                  top: user.handle ? 130 : 100,
+                }}
+                participant={user}
+                isSelfVerified={isSelfVerified}
+                classifiedDomains={classifiedDomains}
+              />
 
               <EnrichedFields user={user} showDomain={isFederated} />
 

diff --git a/src/script/components/calling/FullscreenVideoCall.tsx b/src/script/components/calling/FullscreenVideoCall.tsx
@@ -215,7 +215,6 @@ const FullscreenVideoCall: React.FC<FullscreenVideoCallProps> = ({
             style={{
               lineHeight: '1.5em',
               margin: '1em 0',
-              padding: '0 1em',
               position: 'absolute',
               display: 'flex',
               right: 0,

diff --git a/src/script/components/input/ClassifiedBar.tsx b/src/script/components/input/ClassifiedBar.tsx
@@ -43,6 +43,7 @@ const ClassifiedBar: React.FC<ClassifiedBarProps> = ({users, classifiedDomains,
   if (typeof classifiedDomains === 'undefined') {
     return null;
   }
+
   const classified = isClassified(users, classifiedDomains);
   const text = classified ? t('conversationClassified') : t('conversationNotClassified');
 

diff --git a/src/script/components/panel/UserDetails.tsx b/src/script/components/panel/UserDetails.tsx
@@ -19,6 +19,7 @@
 
 import React, {useEffect} from 'react';
 
+import {CSSObject} from '@emotion/react';
 import {amplify} from 'amplify';
 
 import {WebAppEvents} from '@wireapp/webapp-events';
@@ -39,14 +40,18 @@ export interface UserDetailsProps {
   isSelfVerified: boolean;
   isVerified?: boolean;
   participant: User;
+  avatarStyles?: React.CSSProperties;
+  classifiedBarStyles?: CSSObject;
 }
 
 const UserDetails: React.FC<UserDetailsProps> = ({
   badge,
   participant,
   isSelfVerified,
   isGroupAdmin,
+  avatarStyles,
   classifiedDomains,
+  classifiedBarStyles,
 }) => {
   const user = useKoSubscribableChildren(participant, [
     'inTeam',
@@ -99,7 +104,7 @@ const UserDetails: React.FC<UserDetailsProps> = ({
         <ClassifiedBar
           users={[participant]}
           classifiedDomains={classifiedDomains}
-          style={{width: 'calc(100% + 32px)'}}
+          style={{width: 'calc(100% + 32px)', ...classifiedBarStyles}}
         />
       )}
 
@@ -108,6 +113,7 @@ const UserDetails: React.FC<UserDetailsProps> = ({
         participant={participant}
         avatarSize={AVATAR_SIZE.X_LARGE}
         data-uie-name="status-profile-picture"
+        style={avatarStyles}
       />
 
       {badge && (

diff --git a/src/script/page/RightSidebar/ConversationDetails/ConversationDetails.tsx b/src/script/page/RightSidebar/ConversationDetails/ConversationDetails.tsx
@@ -295,6 +295,7 @@ const ConversationDetails = forwardRef<HTMLDivElement, ConversationDetailsProps>
                 isSelfVerified={isSelfVerified}
                 badge={teamRepository.getRoleBadge(firstParticipant.id)}
                 classifiedDomains={classifiedDomains}
+                classifiedBarStyles={{marginTop: 16}}
               />
 
               <EnrichedFields user={firstParticipant} showDomain={isFederated} />