Skip to content

Commit 98b9f7d

Browse files
Leah-Xia-MicrosoftLeah-Xia-Microsoft
authored
[Chat] Rename ImageGallery related Chat Theme (#3936)
* Stabilize inline image draft 1 * Draft 2 * Remove CC coments * Revert common-version.json * Packages * Fix duplicated inline image * Update APIs * Remove beta banner * Update APIs * Revert env change * Remove spaces * Update and fix build issues * Revert "Remove beta banner" This reverts commit def4e18. * Fix lint errors * Fix stable * Change files * Duplicate change files for beta release * Update packages/react-composites ChatComposite browser test snapshots * Update pnpm-lock * Update packages/react-composites ChatComposite browser test snapshots * Fix test * Remove the conditional compile on placeholder image * Update packages/react-components/src/components/ChatMessage/ChatMessageComponentAsMessageBubble.tsx Co-authored-by: JoshuaLai <9044372+JoshuaLai@users.noreply.github.com> Signed-off-by: Leah Xia <107075081+Leah-Xia-Microsoft@users.noreply.github.com> * Update component examples snapshots * Update packages/react-composites ChatComposite browser test snapshots * Remove additional tags * Put file under CC for ChatAttachmentType type * Remove string * Add documentation * Update beta api view * Update component examples snapshots * Update pnpm-lock.yaml * Chat ImageGallery Theme renaming * Change files * Duplicate change files for beta release --------- Signed-off-by: Leah Xia <107075081+Leah-Xia-Microsoft@users.noreply.github.com>
1 parent 6648036 commit 98b9f7d

8 files changed

Lines changed: 72 additions & 54 deletions

File tree

‎change-beta/@azure-communication-react-99ebd20a-7a27-4d7e-b690-43735bea7e93.json‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"type": "minor",
3+
"area": "improvement",
4+
"workstream": "ImageGallery",
5+
"comment": "Rename ImageGallery related Chat Theme ",
6+
"packageName": "@azure/communication-react",
7+
"email": "107075081+Leah-Xia-Microsoft@users.noreply.github.com",
8+
"dependentChangeType": "patch"
9+
}

‎change/@azure-communication-react-99ebd20a-7a27-4d7e-b690-43735bea7e93.json‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"type": "minor",
3+
"area": "improvement",
4+
"workstream": "ImageGallery",
5+
"comment": "Rename ImageGallery related Chat Theme ",
6+
"packageName": "@azure/communication-react",
7+
"email": "107075081+Leah-Xia-Microsoft@users.noreply.github.com",
8+
"dependentChangeType": "patch"
9+
}

‎packages/communication-react/review/beta/communication-react.api.md‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1745,11 +1745,11 @@ export type ChatReturnProps<Component extends (props: any) => JSX.Element> = Get
17451745
// @public
17461746
export interface ChatTheme {
17471747
chatPalette: {
1748-
modalOverlayBlack: string;
1749-
modalTitleWhite: string;
1750-
modalButtonBackground: string;
1751-
modalButtonBackgroundHover: string;
1752-
modalButtonBackgroundActive: string;
1748+
imageGalleryOverlayBlack: string;
1749+
imageGalleryTitleWhite: string;
1750+
imageGalleryDefaultButtonBackground: string;
1751+
imageGalleryButtonBackgroundHover: string;
1752+
imageGalleryButtonBackgroundActive: string;
17531753
};
17541754
}
17551755

‎packages/communication-react/review/stable/communication-react.api.md‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1398,11 +1398,11 @@ export type ChatReturnProps<Component extends (props: any) => JSX.Element> = Get
13981398
// @public
13991399
export interface ChatTheme {
14001400
chatPalette: {
1401-
modalOverlayBlack: string;
1402-
modalTitleWhite: string;
1403-
modalButtonBackground: string;
1404-
modalButtonBackgroundHover: string;
1405-
modalButtonBackgroundActive: string;
1401+
imageGalleryOverlayBlack: string;
1402+
imageGalleryTitleWhite: string;
1403+
imageGalleryDefaultButtonBackground: string;
1404+
imageGalleryButtonBackgroundHover: string;
1405+
imageGalleryButtonBackgroundActive: string;
14061406
};
14071407
}
14081408

‎packages/react-components/review/beta/react-components.api.md‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -490,11 +490,11 @@ export interface ChatMessage extends MessageCommon {
490490
// @public
491491
export interface ChatTheme {
492492
chatPalette: {
493-
modalOverlayBlack: string;
494-
modalTitleWhite: string;
495-
modalButtonBackground: string;
496-
modalButtonBackgroundHover: string;
497-
modalButtonBackgroundActive: string;
493+
imageGalleryOverlayBlack: string;
494+
imageGalleryTitleWhite: string;
495+
imageGalleryDefaultButtonBackground: string;
496+
imageGalleryButtonBackgroundHover: string;
497+
imageGalleryButtonBackgroundActive: string;
498498
};
499499
}
500500

‎packages/react-components/review/stable/react-components.api.md‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -346,11 +346,11 @@ export interface ChatMessage extends MessageCommon {
346346
// @public
347347
export interface ChatTheme {
348348
chatPalette: {
349-
modalOverlayBlack: string;
350-
modalTitleWhite: string;
351-
modalButtonBackground: string;
352-
modalButtonBackgroundHover: string;
353-
modalButtonBackgroundActive: string;
349+
imageGalleryOverlayBlack: string;
350+
imageGalleryTitleWhite: string;
351+
imageGalleryDefaultButtonBackground: string;
352+
imageGalleryButtonBackgroundHover: string;
353+
imageGalleryButtonBackgroundActive: string;
354354
};
355355
}
356356

‎packages/react-components/src/components/styles/ImageGallery.style.ts‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export const downloadIcon: IIconProps = {
2323
export const overlayStyles = (theme: ChatTheme): IOverlayStyles => {
2424
return {
2525
root: {
26-
background: theme.chatPalette.modalOverlayBlack,
26+
background: theme.chatPalette.imageGalleryOverlayBlack,
2727
opacity: '0.85'
2828
}
2929
};
@@ -84,7 +84,7 @@ export const titleBarContainerStyle: IStyle = {
8484
export const titleStyle = (theme: ChatTheme): IStyle => {
8585
return {
8686
paddingLeft: '0.5rem',
87-
color: theme.chatPalette.modalTitleWhite,
87+
color: theme.chatPalette.imageGalleryTitleWhite,
8888
fontFamily: 'inherit',
8989
fontSize: '0.875rem',
9090
fontStyle: 'normal',
@@ -142,7 +142,7 @@ export const normalImageStyle: IStyle = {
142142
*/
143143
export const brokenImageStyle = (theme: ChatTheme): IStyle => {
144144
return {
145-
color: theme.chatPalette.modalTitleWhite
145+
color: theme.chatPalette.imageGalleryTitleWhite
146146
};
147147
};
148148

@@ -151,14 +151,14 @@ export const brokenImageStyle = (theme: ChatTheme): IStyle => {
151151
*/
152152
export const closeButtonStyles = (theme: ChatTheme): IStyle => {
153153
return {
154-
color: theme.chatPalette.modalTitleWhite,
154+
color: theme.chatPalette.imageGalleryTitleWhite,
155155
':hover': {
156-
color: theme.chatPalette.modalTitleWhite,
157-
backgroundColor: theme.chatPalette.modalButtonBackgroundHover
156+
color: theme.chatPalette.imageGalleryTitleWhite,
157+
backgroundColor: theme.chatPalette.imageGalleryButtonBackgroundHover
158158
},
159159
':active': {
160-
color: theme.chatPalette.modalTitleWhite,
161-
backgroundColor: theme.chatPalette.modalButtonBackgroundActive
160+
color: theme.chatPalette.imageGalleryTitleWhite,
161+
backgroundColor: theme.chatPalette.imageGalleryButtonBackgroundActive
162162
}
163163
};
164164
};
@@ -175,16 +175,16 @@ export const downloadButtonStyle = (theme: ChatTheme): IStyle => {
175175
fontWeight: 600,
176176
padding: '0.38rem 0.75rem',
177177
borderRadius: '4px',
178-
backgroundColor: theme.chatPalette.modalButtonBackground,
179-
color: theme.chatPalette.modalTitleWhite,
178+
backgroundColor: theme.chatPalette.imageGalleryDefaultButtonBackground,
179+
color: theme.chatPalette.imageGalleryTitleWhite,
180180
whiteSpace: 'nowrap',
181181
':hover': {
182-
color: theme.chatPalette.modalTitleWhite,
183-
backgroundColor: theme.chatPalette.modalButtonBackgroundHover
182+
color: theme.chatPalette.imageGalleryTitleWhite,
183+
backgroundColor: theme.chatPalette.imageGalleryButtonBackgroundHover
184184
},
185185
':active': {
186-
color: theme.chatPalette.modalTitleWhite,
187-
backgroundColor: theme.chatPalette.modalButtonBackgroundActive
186+
color: theme.chatPalette.imageGalleryTitleWhite,
187+
backgroundColor: theme.chatPalette.imageGalleryButtonBackgroundActive
188188
},
189189
'@media (max-width: 25rem)': {
190190
display: 'none'
@@ -198,15 +198,15 @@ export const downloadButtonStyle = (theme: ChatTheme): IStyle => {
198198
export const smallDownloadButtonContainerStyle = (theme: ChatTheme): IStyle => {
199199
return {
200200
marginRight: '0.5rem',
201-
color: theme.chatPalette.modalTitleWhite,
201+
color: theme.chatPalette.imageGalleryTitleWhite,
202202
whiteSpace: 'nowrap',
203203
':hover': {
204-
color: theme.chatPalette.modalTitleWhite,
205-
backgroundColor: theme.chatPalette.modalButtonBackgroundHover
204+
color: theme.chatPalette.imageGalleryTitleWhite,
205+
backgroundColor: theme.chatPalette.imageGalleryButtonBackgroundHover
206206
},
207207
':active': {
208-
color: theme.chatPalette.modalTitleWhite,
209-
backgroundColor: theme.chatPalette.modalButtonBackgroundActive
208+
color: theme.chatPalette.imageGalleryTitleWhite,
209+
backgroundColor: theme.chatPalette.imageGalleryButtonBackgroundActive
210210
},
211211
'@media (min-width: 25rem)': {
212212
display: 'none'

‎packages/react-components/src/theming/themes.ts‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -31,11 +31,11 @@ export interface ChatTheme {
3131
* @public
3232
*/
3333
chatPalette: {
34-
modalOverlayBlack: string;
35-
modalTitleWhite: string;
36-
modalButtonBackground: string;
37-
modalButtonBackgroundHover: string;
38-
modalButtonBackgroundActive: string;
34+
imageGalleryOverlayBlack: string;
35+
imageGalleryTitleWhite: string;
36+
imageGalleryDefaultButtonBackground: string;
37+
imageGalleryButtonBackgroundHover: string;
38+
imageGalleryButtonBackgroundActive: string;
3939
};
4040
}
4141

@@ -80,11 +80,11 @@ export const lightTheme: PartialTheme & CallingTheme & ChatTheme = {
8080
},
8181

8282
chatPalette: {
83-
modalOverlayBlack: '#000000',
84-
modalTitleWhite: '#ffffff',
85-
modalButtonBackground: '#1b1a19',
86-
modalButtonBackgroundHover: '#252423',
87-
modalButtonBackgroundActive: '#292827'
83+
imageGalleryOverlayBlack: '#000000',
84+
imageGalleryTitleWhite: '#ffffff',
85+
imageGalleryDefaultButtonBackground: '#1b1a19',
86+
imageGalleryButtonBackgroundHover: '#252423',
87+
imageGalleryButtonBackgroundActive: '#292827'
8888
},
8989
semanticColors: {
9090
errorText: '#a80000'
@@ -131,11 +131,11 @@ export const darkTheme: PartialTheme & CallingTheme & ChatTheme = {
131131
raiseHandGold: '#eaa300'
132132
},
133133
chatPalette: {
134-
modalOverlayBlack: '#000000',
135-
modalTitleWhite: '#ffffff',
136-
modalButtonBackground: '#1b1a19',
137-
modalButtonBackgroundHover: '#252423',
138-
modalButtonBackgroundActive: '#292827'
134+
imageGalleryOverlayBlack: '#000000',
135+
imageGalleryTitleWhite: '#ffffff',
136+
imageGalleryDefaultButtonBackground: '#1b1a19',
137+
imageGalleryButtonBackgroundHover: '#252423',
138+
imageGalleryButtonBackgroundActive: '#292827'
139139
},
140140
semanticColors: {
141141
errorText: '#f1707b'

0 commit comments

Comments
 (0)
⚡