Skip to content

Commit 0362d84

Browse files
markbrockhoffmarkbrockhoff
authored
feat: align design of service details with figma [WPB-20363] (#21125)
* chore: add translation for description * feat: align design of service details with figma * fix: make service details take up full height of panel * fix: align add app button style with figma * fix: move actions into panel footer to fix sliding animation * refactor: re-use condition to show actions
1 parent b86fdac commit 0362d84

5 files changed

Lines changed: 134 additions & 75 deletions

File tree

‎apps/webapp/src/i18n/en-US.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1865,6 +1865,7 @@
18651865
"servicesRoomToggleInfoExtended": "Open this conversation to apps. You can always change it later.",
18661866
"servicesRoomToggleName": "Allow Apps",
18671867
"serviceDetailsAuthor": "Created by {author}",
1868+
"serviceDetailsDescription": "Description",
18681869
"setEmail.button": "Set email",
18691870
"setEmail.emailPlaceholder": "Email",
18701871
"setEmail.headline": "Set email",

‎apps/webapp/src/script/components/panel/ServiceDetails.styles.ts‎

Lines changed: 45 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,50 @@
1919

2020
import {CSSObject} from '@emotion/react';
2121

22-
export const authorLabel: CSSObject = {
22+
export const panel = {
23+
padding: '24px',
24+
} satisfies CSSObject;
25+
26+
export const header = {
27+
display: 'grid',
28+
gridTemplateColumns: '96px auto',
29+
alignItems: 'center',
30+
gap: '16px',
31+
marginBottom: '16px',
32+
33+
avatar: {
34+
width: '96px',
35+
height: '96px',
36+
},
37+
38+
info: {
39+
display: 'flex',
40+
flexDirection: 'column',
41+
gap: '16px',
42+
43+
name: {
44+
fontWeight: 'var(--font-weight-semibold)',
45+
},
46+
47+
subHeader: {
48+
fontSize: 'var(--font-size-small)',
49+
fontWeight: 'var(--font-weight-regular)',
50+
},
51+
},
52+
} satisfies CSSObject;
53+
54+
export const authorLabel = {
2355
fontSize: 'var(--font-size-medium)',
2456
fontWeight: 'var(--font-weight-regular)',
25-
marginBottom: '16px',
26-
};
57+
marginBottom: '24px',
58+
} satisfies CSSObject;
59+
60+
export const description = {
61+
display: 'flex',
62+
flexDirection: 'column',
63+
gap: '12px',
64+
65+
headline: {
66+
fontWeight: 'var(--font-weight-semibold)',
67+
},
68+
} satisfies CSSObject;

‎apps/webapp/src/script/components/panel/ServiceDetails.tsx‎

Lines changed: 29 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,8 @@
1818
*/
1919

2020
import {Avatar, AVATAR_SIZE} from 'Components/Avatar';
21-
import {authorLabel} from 'Components/panel/ServiceDetails.styles';
21+
import {authorLabel, description, header, panel} from 'Components/panel/ServiceDetails.styles';
22+
import {useId} from 'react';
2223
import type {ServiceEntity} from 'Repositories/integration/ServiceEntity';
2324
import {useKoSubscribableChildren} from 'Util/componentUtil';
2425
import {t} from 'Util/localizerUtil';
@@ -30,33 +31,38 @@ interface ServiceDetailsProps {
3031
const ServiceDetails = ({service}: ServiceDetailsProps) => {
3132
const {providerName, name, author} = useKoSubscribableChildren(service, ['providerName', 'name', 'author']);
3233

34+
const descriptionId = useId();
35+
3336
return (
34-
<div className="panel-participant">
35-
<div className="panel-participant__name" data-uie-name="status-service-name">
36-
{name}
37-
</div>
37+
<div css={panel}>
38+
<div css={header}>
39+
<Avatar
40+
css={header.avatar}
41+
participant={service}
42+
avatarSize={AVATAR_SIZE.X_LARGE}
43+
data-uie-name="status-profile-picture"
44+
/>
3845

39-
<div className="panel-participant__provider-name" data-uie-name="status-service-provider">
40-
{providerName}
46+
<div css={header.info}>
47+
<div css={header.info.name} data-uie-name="status-service-name">
48+
{name}
49+
</div>
50+
<div css={header.info.subHeader} data-uie-name="status-service-provider">
51+
{providerName}
52+
</div>
53+
</div>
4154
</div>
4255

43-
<Avatar
44-
className="panel-participant__avatar"
45-
participant={service}
46-
avatarSize={AVATAR_SIZE.X_LARGE}
47-
data-uie-name="status-profile-picture"
48-
/>
56+
<p css={authorLabel}>{t('serviceDetailsAuthor', {author})}</p>
4957

50-
<p css={authorLabel} className="panel__info-text--margin">
51-
{t('serviceDetailsAuthor', {author})}
52-
</p>
53-
54-
<p
55-
className="panel-participant__service-description panel__info-text--margin"
56-
data-uie-name="status-service-description"
57-
>
58-
{service.description}
59-
</p>
58+
<div css={description}>
59+
<div id={descriptionId} css={description.headline}>
60+
{t('serviceDetailsDescription')}
61+
</div>
62+
<p aria-labelledby={descriptionId} data-uie-name="status-service-description">
63+
{service.description}
64+
</p>
65+
</div>
6066
</div>
6167
);
6268
};

‎apps/webapp/src/script/page/RightSidebar/groupParticipantService/groupParticipantService.tsx‎

Lines changed: 58 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -122,61 +122,70 @@ const GroupParticipantService: FC<GroupParticipantServiceProps> = ({
122122

123123
<FadingScrollbar className="panel__content panel__content--fill">
124124
<ServiceDetails service={serviceEntity} />
125+
</FadingScrollbar>
125126

126-
{showActions && canChatWithServices() && (
127-
<div
128-
role="button"
129-
tabIndex={TabIndex.FOCUSABLE}
130-
className="panel__action-item"
131-
data-uie-name="go-conversation"
132-
onClick={onOpen}
133-
onKeyDown={event =>
134-
handleKeyDown({
135-
event,
136-
callback: onOpen,
137-
keys: [KEY.ENTER, KEY.SPACE],
138-
})
139-
}
140-
>
141-
<span className="panel__action-item__icon">
142-
<Icon.MessageIcon />
143-
</span>
144-
145-
<div className="panel__action-item__text">{t('groupParticipantActionOpenConversation')}</div>
146-
</div>
127+
<div className="panel__footer">
128+
{showActions && (
129+
<>
130+
{canChatWithServices() && (
131+
<div
132+
role="button"
133+
tabIndex={TabIndex.FOCUSABLE}
134+
className="panel__action-item"
135+
data-uie-name="go-conversation"
136+
onClick={onOpen}
137+
onKeyDown={event =>
138+
handleKeyDown({
139+
event,
140+
callback: onOpen,
141+
keys: [KEY.ENTER, KEY.SPACE],
142+
})
143+
}
144+
>
145+
<span className="panel__action-item__icon">
146+
<Icon.MessageIcon />
147+
</span>
148+
149+
<div className="panel__action-item__text">{t('groupParticipantActionOpenConversation')}</div>
150+
</div>
151+
)}
152+
153+
{enableRemove && (
154+
<div
155+
role="button"
156+
tabIndex={TabIndex.FOCUSABLE}
157+
className="panel__action-item"
158+
data-uie-name="do-remove"
159+
onClick={() => onRemove(serviceUser)}
160+
onKeyDown={event =>
161+
handleKeyDown({
162+
event,
163+
callback: () => onRemove(serviceUser),
164+
keys: [KEY.ENTER, KEY.SPACE],
165+
})
166+
}
167+
>
168+
<span className="panel__action-item__icon">
169+
<Icon.MinusIcon />
170+
</span>
171+
172+
<div className="panel__action-item__text">{t('groupParticipantActionRemove')}</div>
173+
</div>
174+
)}
175+
</>
147176
)}
148177

149-
{showActions && enableRemove && (
150-
<div
151-
role="button"
152-
tabIndex={TabIndex.FOCUSABLE}
153-
className="panel__action-item"
154-
data-uie-name="do-remove"
155-
onClick={() => onRemove(serviceUser)}
156-
onKeyDown={event =>
157-
handleKeyDown({
158-
event,
159-
callback: () => onRemove(serviceUser),
160-
keys: [KEY.ENTER, KEY.SPACE],
161-
})
162-
}
178+
{isAddMode && (
179+
<button
180+
className="button button-full button-text"
181+
onClick={onAdd}
182+
data-uie-name="do-add-service"
183+
type="button"
163184
>
164-
<span className="panel__action-item__icon">
165-
<Icon.MinusIcon />
166-
</span>
167-
168-
<div className="panel__action-item__text">{t('groupParticipantActionRemove')}</div>
169-
</div>
170-
)}
171-
</FadingScrollbar>
172-
173-
{isAddMode && (
174-
<div className="panel__footer">
175-
<button className="button button-full" onClick={onAdd} data-uie-name="do-add-service" type="button">
176185
<span>{t('addParticipantsConfirmLabel')}</span>
177186
</button>
178-
</div>
179-
)}
187+
)}
188+
</div>
180189
</div>
181190
);
182191
};

‎apps/webapp/src/types/i18n.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1869,6 +1869,7 @@ declare module 'I18n/en-US.json' {
18691869
'servicesRoomToggleInfoExtended': `Open this conversation to apps. You can always change it later.`;
18701870
'servicesRoomToggleName': `Allow Apps`;
18711871
'serviceDetailsAuthor': `Created by {author}`;
1872+
'serviceDetailsDescription': `Description`;
18721873
'setEmail.button': `Set email`;
18731874
'setEmail.emailPlaceholder': `Email`;
18741875
'setEmail.headline': `Set email`;

0 commit comments

Comments
 (0)