From dbb6890fe68e720f41892a4db9370d07243aa3d8 Mon Sep 17 00:00:00 2001 From: Maria A Nunez Date: Fri, 20 Jun 2025 11:41:26 -0400 Subject: [PATCH] Update additional images branding (#8672) * Updated search empty images * Updated channel empty state images * Styling * Added unreads, threads, mentions and saved messages empty state images * Removed withTheme * Update snapshot * Update review app image * Updated loading error svg * Added draft svg * Removed unused image * update snapshots --- app/components/illustrations/draft_empty.tsx | 173 ++++ .../illustrations/loading_error.tsx | 115 +++ app/components/illustrations/review_app.tsx | 320 ++++---- .../__snapshots__/index.test.tsx.snap | 372 ++++++++- app/components/loading_error/index.tsx | 24 +- .../components/draft_empty_component.tsx | 10 +- .../__snapshots__/index.test.tsx.snap | 744 +++++++++++++++++- app/screens/review_app/index.tsx | 2 +- assets/base/images/Draft_Message.png | Bin 2954 -> 0 bytes 9 files changed, 1538 insertions(+), 222 deletions(-) create mode 100644 app/components/illustrations/draft_empty.tsx create mode 100644 app/components/illustrations/loading_error.tsx delete mode 100644 assets/base/images/Draft_Message.png diff --git a/app/components/illustrations/draft_empty.tsx b/app/components/illustrations/draft_empty.tsx new file mode 100644 index 000000000..b03c2ac13 --- /dev/null +++ b/app/components/illustrations/draft_empty.tsx @@ -0,0 +1,173 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import React from 'react'; +import Svg, {Circle, ClipPath, Defs, G, Line, Path, Rect} from 'react-native-svg'; + +import {useTheme} from '@context/theme'; + +const DraftEmpty = () => { + const theme = useTheme(); + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export default DraftEmpty; diff --git a/app/components/illustrations/loading_error.tsx b/app/components/illustrations/loading_error.tsx new file mode 100644 index 000000000..c43fca9d5 --- /dev/null +++ b/app/components/illustrations/loading_error.tsx @@ -0,0 +1,115 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import React from 'react'; +import Svg, {Circle, Ellipse, Path, Rect} from 'react-native-svg'; + +import {useTheme} from '@context/theme'; + +const LoadingError = () => { + const theme = useTheme(); + + return ( + + + + + + + + + + + + + + + + + ); +}; + +export default LoadingError; diff --git a/app/components/illustrations/review_app.tsx b/app/components/illustrations/review_app.tsx index 5ebaf5a7d..263eab5ad 100644 --- a/app/components/illustrations/review_app.tsx +++ b/app/components/illustrations/review_app.tsx @@ -3,9 +3,9 @@ import * as React from 'react'; import Svg, { Path, - Mask, G, Rect, + Circle, } from 'react-native-svg'; type Props = { @@ -15,180 +15,234 @@ type Props = { function ReviewAppIllustration({theme}: Props) { return ( - - - - - - - - - - - - - - + + + + - - - - - - - - - - - + + + + + + + + + + + + + + + + + + ); diff --git a/app/components/loading_error/__snapshots__/index.test.tsx.snap b/app/components/loading_error/__snapshots__/index.test.tsx.snap index 6b65f1227..b5110cafb 100644 --- a/app/components/loading_error/__snapshots__/index.test.tsx.snap +++ b/app/components/loading_error/__snapshots__/index.test.tsx.snap @@ -11,29 +11,361 @@ exports[`Loading Error should match snapshot 1`] = ` } } > - - + - + > + + + + + + + + + + + + + + + + ({ justifyContent: 'center', padding: 20, }, - iconWrapper: { - height: 120, - width: 120, - backgroundColor: changeOpacity(theme.sidebarText, 0.08), - borderRadius: 60, - justifyContent: 'center', - alignItems: 'center', - }, - icon: { - fontSize: 72, - lineHeight: 72, - color: changeOpacity(theme.sidebarText, 0.48), - }, header: { color: theme.sidebarHeaderTextColor, marginTop: 20, @@ -70,12 +57,7 @@ const LoadingError = ({loading, message, onRetry, title}: Props) => { return ( - - - + {title} diff --git a/app/screens/global_drafts/components/draft_empty_component.tsx b/app/screens/global_drafts/components/draft_empty_component.tsx index 046ae00d4..1f1b51437 100644 --- a/app/screens/global_drafts/components/draft_empty_component.tsx +++ b/app/screens/global_drafts/components/draft_empty_component.tsx @@ -1,17 +1,15 @@ // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See LICENSE.txt for license information. -import {Image} from 'expo-image'; import React from 'react'; import {View} from 'react-native'; import FormattedText from '@components/formatted_text'; +import DraftEmpty from '@components/illustrations/draft_empty'; import {useTheme} from '@context/theme'; import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme'; import {typography} from '@utils/typography'; -const draft_message_image = require('@assets/images/Draft_Message.png'); - const getStyleSheet = makeStyleSheetFromTheme((theme) => { return { container: { @@ -27,6 +25,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => { title: { ...typography('Heading', 400, 'SemiBold'), color: theme.centerChannelColor, + marginTop: 20, }, subtitle: { ...typography('Body'), @@ -45,10 +44,7 @@ const DraftEmptyComponent = () => { style={styles.container} testID='draft_empty_component' > - + - - + - + > + + + + + + + + + + + + + + + + - - + - + > + + + + + + + + + + + + + + + + ({ title: { ...typography('Heading', 600, 'SemiBold'), color: theme.centerChannelColor, - marginTop: 0, + marginTop: 24, marginBottom: 8, textAlign: 'center', }, diff --git a/assets/base/images/Draft_Message.png b/assets/base/images/Draft_Message.png deleted file mode 100644 index 0f065934acfd5ecb1a2a2caa7a1e1b375a1771a4..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2954 zcmai0dpr}28lDidMz-89^+~$OC^OewhS0t#sfiJ}4#RS(+*1^}%%xn0G$NDnEq9_w zmdmgsbN`Sfvbi%7j_>@=-{(BP-}652`@GNl|C?~l+5#*hD*^xjz*d%K*AF!JfF$9= z2esvr-q`~I5-jb5000p5AMyc6dC~_aU(j_6B%q>Ke*Rz(@G?Q0001;1==UALgVb>= zGm{$+__z}RcqmVSzS6hEF^0T)t*Q~TwdznUWVIL*hSi1e`Be4->I5xDOiqpYlam$Sodp%JC& zh?ceO#fZK4$}{a=bVSt7{b+mvpVI%uvtx09d81Q$ce0)1F!?OCd4O(F+M|D+#m&_D z1pNfZI-a1R%}dt(7wFch+Rr5vzuw;1z9EL};tj8-wfp0mg>D?b!uzOkkAkL{#3ohJ z=1+F>?5le6Uxh80{^=)zB^-_@6gz!S13syIhtwo~u_X!r3#Y_qTkuX2mroUFpJk^c zOP0uOz8l+MzqbrFG`J zsoXALYngb2p$5f@LpBPMJqOm zHC8qDR5!f!gyjMcwu(Y3PmP(=V#r&%@?9QcRsCA9pj58Sv9aZ*S2z$1A=8O}2Trc)`vQX1whif8?1P@Q zOu2TmEf6x(DzJxz>K}(!)rVF*N=v5unhdW@CoZ5**AKT314=^$wB?FRJ`I1-PD+mW zuRuAYrE+Tb`9QS*Dk|s$v7ozo-;X125W+j`vdGWc?{{jL{H|AV{OOx#ODIq2t+`Yl z@07CaX+)??roT{TK!ND1{tiTVGSl$>2G}AhH*xId!;{$Nn^ofy0tEqfdif^Vu|^1O zU$+@i^^Cg>n?KjXI-JI{l6KI#(2OKT4hmN5tvj)GPONmG+fv6`eQo*=9n7aE>|nh_ z4PZ2WwSenxmb%tBGWRpMX+%(JXc~Sk6mmrVAr_jK+_+3!!f5NKt$hidNEI#v`?Di? zav_uZHXBzJ8&d8b^z@Da;f#)WwBk6l53@(i@(xtgt;DWg|C+CqZclb3VmGa z8@2xJ^8+AtJTgt{_o<6wi>P7GqGVo$SVC8#RGVs=w7WZ{PH!?RxOH@n;_gK+y)a(< zO7ZJP1$>-F#N;kly|Cx3NV7vHp)u2}t(st-=i4=}2R zdH8U`$}3x#D~t^B7qrZwV7-*}B|C1v1J|as{>^4Ad08$264E}b^mCRVId94{b@r?L zwE$4=3Oh_6Ryw2UKlRNQMXs!ArToXZjMU%lib%R0->L>&RPWr#UzT=DJgSbYIvW@H zPb;i$+Re18w9xL5{tB-LWCoM)*w#hb5fQ2X(>1-(9U;+{%li#ngGOnU0P@i>y3+58ye=H4;l z1MVGNXRhV6v>Y>NAC|Q;!PV9)wxzEOiEDdB31*B~zTDaW61|M$B+ zey#bJqGf*cI-7(sT^)aQ)J1~OXSU3aTg%t%aRpxdxPzkv4dj|6ZF*$$<`#6KBUv|a zZE)r;qcWNzWVjmO2Y=$P$~{(Etrw@_?%uS=vaOGpZ606Zi&cq`8;La}S$_O#k+whX zTGi!1td00}Hg~XL!oi*#qFnp+R5db#Mw~GMg&zWH`>AJS`M%dyJXwgKfIm>=WbzJyf`J|DMY+7PoR)aX&szg|t$` zH1uU`SqZ$hH-$24++;@9T}#moc3QuOddLa0G9%IsQ>2r%^ZnO_0jAvvQTQWj@Ir;$ zwpS9P8AsIQ3+1pdxD4}9=vv8Q^b4{?f+#zjC(mE zWZ)pX$;i0#+V;boP+oJmPRQzsikI8Io!&MgXafDBV(2WT65mYlQ099I@vWPFDIw>T zr&!Y;Yp2f$211H<Vq)zf-u4-tKzTkz70sMr+WW%n}KTcqL-I=DH7<4>b}EHo?*3ZlNu<;+GQ`^ zPWh{I~0_4M_y6nV(mz_BIAsKa;?=u>SZ%m)f+lZ)kN;V!!fU7_RC9hS|CxS#Cc}< za&Vv4PZ8wwqvmsZ3a6qZi!&b|JEv|m=v!15`qaB|uKKzv*fXb~%A9U&i8&hoKOw(u ZbhR7^F-*Bxaqv0=tjw*=Dv&OZ{tcKEryl?S