fix: image preview padding

[BalogunofAfrica]

Fixes #17542

Summary

Image previews cut off due to padding horizontal, so it doesn't scroll to the edge of the screen on both ends.

Platforms

• Android
• iOS

Before:

After:

Functional

• 1-1 chats

status: ready

[status-im-auto]

Jenkins Builds

Click to see older builds (12)

❔	Commit	#️⃣	Finished (UTC)	Duration	Platform	Result
✔️	0dbef5b	#1	2023-10-04 21:51:34	~6 min	android-e2e	🤖apk 📲
✔️	0dbef5b	#1	2023-10-04 21:51:46	~6 min	android	🤖apk 📲
✔️	0dbef5b	#1	2023-10-04 21:52:27	~7 min	ios	📱ipa 📲
✔️	0dbef5b	#1	2023-10-04 21:54:14	~8 min	tests	📄log
✔️	8290a7a	#2	2023-10-05 12:26:15	~6 min	android-e2e	🤖apk 📲
✔️	8290a7a	#2	2023-10-05 12:26:23	~6 min	android	🤖apk 📲
✔️	8290a7a	#2	2023-10-05 12:27:16	~7 min	ios	📱ipa 📲
✔️	8290a7a	#2	2023-10-05 12:28:57	~8 min	tests	📄log
✔️	6d16856	#3	2023-10-05 15:56:28	~5 min	android-e2e	🤖apk 📲
✔️	6d16856	#3	2023-10-05 15:59:17	~8 min	ios	📱ipa 📲
✔️	6d16856	#3	2023-10-05 16:00:57	~9 min	android	🤖apk 📲
✔️	6d16856	#3	2023-10-05 16:01:10	~10 min	tests	📄log

❔	Commit	#️⃣	Finished (UTC)	Duration	Platform	Result
✔️	d64b8d9	#5	2023-10-12 11:01:40	~6 min	android	🤖apk 📲
✔️	d64b8d9	#5	2023-10-12 11:05:07	~9 min	android-e2e	🤖apk 📲
✔️	d64b8d9	#5	2023-10-12 11:05:18	~9 min	tests	📄log
✔️	d64b8d9	#5	2023-10-12 11:08:57	~13 min	ios	📱ipa 📲
❌	ced7753	#6	2023-10-12 15:24:43	~3 min	ios	📄log
✔️	ced7753	#6	2023-10-12 15:27:28	~6 min	android-e2e	🤖apk 📲
✔️	ced7753	#6	2023-10-12 15:27:29	~6 min	android	🤖apk 📲
✔️	ced7753	#6	2023-10-12 15:29:55	~8 min	tests	📄log
✔️	ced7753	#7	2023-10-12 15:40:13	~10 min	ios	📱ipa 📲

[Francesca-G]

Padding looks good :)

Adding follow up required due to the "x" button icon on the photos, as commented here it doesn't match design

[qoqobolo]

@BalogunofAfrica thanks for the padding fix!

However, this PR introduces a new change that is different, as Francesca noted:

1. A cutout has been added around the close image (x) button in the composer, but it does not correspond to the design on iOS (extra dark circle around, sorry for the poor quality screenshot)
2. The button itself still doesn't match the design (wrong size of the X icon)

Please tell me what would be more convenient for you @BalogunofAfrica :

1. reverse adding a cutout around the button so that it looks exactly the same as in the current nightly
   or
2. completely align the button with the design in this PR?

PR iOS

PR Android

Nightly (iOS and Android)

Design

[qoqobolo]

Adding follow up required due to the "x" button icon on the photos, as commented here it doesn't match design

@Francesca-G thanks a lot for your review as always! <3
but can I ask you, please, do not request for follow-ups in PR reviews if a similar comment is already in 1.25 feedback, okay?
Example: https://www.figma.com/file/Tf5nfkYvpbnNCo4rKLK7lS?node-id=5960:8244&mode=design#567174088

This can lead to a lot of duplicates.
The entire team is now logging feedback, so all comments should be covered in the end 🙌

[BalogunofAfrica]

@qoqobolo Thanks for the review. I noticed the exiting implementation didn't match the designs when implementing, that's why I added cut out and changed radius of the image.

I would prefer trying to match the designs

[qoqobolo]

I would prefer trying to match the designs

Cool, thanks! Ping me once the PR is ready to be re-tested, please

[qoqobolo]

@BalogunofAfrica could you also remove this 1 pixel left margin on Android, please?
The right margin looks good.
Device on the screenshot: Google Pixel 7a

Right:

[BalogunofAfrica]

Hi @Francesca-G @qoqobolo I have updated the (X) icon and also addressed the extra dark circle around (iOS).

For the 1px on Android on the left, I couldn't reproduce.

Here are screenshot from Android (Pixel 4a)

[qoqobolo]

@BalogunofAfrica thank you!

One more thing: now it looks like the button is not centered on Pixel 7a.
Could you check, please?

On Huawei it looks okay though. But it was agreed that our standard is Pixel 7a, so we should focus specifically on this model..

[qoqobolo]

Hey @BalogunofAfrica, any updates on this PR?
Would you prefer to fix the close button on Pixel 7a in this PR or as a follow-up?

[BalogunofAfrica]

@qoqobolo It appears like that due to pixelation in the screenshot. In the screenshot the object don't appear to have perfect round shapes. The closer the items are to each other the more it looks pixelated.

Heres' the size according to the the design:

And here I increased the space which made the screenshot less pixelated:

[qoqobolo]

@BalogunofAfrica okay, thanks for the explanation!
But now the icons are black, could you return the gray color please? :)
I'll recheck and we'll merge it.

[BalogunofAfrica]

@BalogunofAfrica okay, thanks for the explanation! But now the icons are black, could you return the gray color please? :) I'll recheck and we'll merge it.

Oh I think that was introduced by one of the newer PR's would check fix now

[BalogunofAfrica]

@qoqobolo reverted the color change

[qoqobolo]

Thanks a lot for your work @BalogunofAfrica!
PR is ready for merge.