Setting page added

[madhushree007]

@giolaq I have added a setting page. Please have a look. If the UI looks ok, I will add language selector on this page.

[giolaq]

Thank you, can you link this PR to this issue ? Attach a couple of the screenshots on the issue too.

It's preferred to include Settings not at the same level of the main navigation paths but inside a page that the user can access from the profile.

[Neha]

Thank you @madhushree007 for implementing the comments. PR looks great.

I ran the PR at local , here are the few things to take care of:

1. Web and tvOS: settings font-size is not consistent with other in the left navigation
2. Web: not able to navigate the options on setting page by keyboard
3. Web: not able to select any other language beside English
4. Web: UI is breaking on clicking on "Sound" and "display"

tvOS:

1. there is extra space on top of settings in left navigation
2. Navigation between language, sound, and display is little confusing . It sometimes skip the language (white background didn't get visible)

[madhushree007]

@Neha I have made changes according to your comments. I am not able to the PR template. Could you please guide me how and where I can fill PR template?

[madhushree007]

@neha Here is the screen recording for from tvOS simulator and web browser. I am aware of the issues @giolaq has mentioned. Those issues still needs to be fixed. II’m finding it a bit challenging to manage CSS for both tvOS and web platforms simultaneously. Any suggestions on balancing or streamlining the process would be really helpful.

https://github.com/user-attachments/assets/800ce0cb-3389-4d94-9586-676f1882bec3

https://github.com/user-attachments/assets/e4da2f32-8bde-4e12-9b74-ddbfdb6d61df

[Neha]

@Neha I have made changes according to your comments. I am not able to the PR template. Could you please guide me how and where I can fill PR template?

When you raise the PR, it should show you default template for raising PR.

[Neha]

@Neha Here is the screen recording for from tvOS simulator and web browser. I am aware of the issues @giolaq has mentioned. Those issues still needs to be fixed. II’m finding it a bit challenging to manage CSS for both tvOS and web platforms simultaneously. Any suggestions on balancing or streamlining the process would be really helpful.

tvOS.mov web_browser.mov

have you checked Platform.OS?

here is the documention: https://reactnative.dev/docs/platform-specific-code

[madhushree007]

@Neha @giolaq I have added some css fix as per your suggestions :)

[madhushree007]

Thanks for your comments @Neha

For the formatting issue - I am using Prettier in VS code that might have different setting from yours because code looks well formatted in my code editor.

I have just checked and I can confirm that It is working as expected in TvOS. I am not sure why it is not working at your side. I can see there is a conflict in the PR but I am not able to resolve the conflict. I did try to pull the branch but I am not authorised.

Setting menu is separated from the rest of the menu as suggested by @giolaq. It is supposed to be smaller in font size and separated from Drawer menu.

I had a look at the Screenshot for web view and I think this is the expected behaviour because we do not have any data for other menus so we are not displaying the submenu for "Sound" and "Display". These are only placeholder. Here is the SS from my web view.

Thanks.