made UI changes in the settings page

[FireFistisDead]

Fixes

Closes #136

Description

This pull request significantly updates the SettingsScreen UI to provide a more modern, consistent, and visually appealing experience. The main changes revolve around introducing a new card style for section containers, improving spacing and typography, and enhancing component styling for better usability and aesthetics.

UI Structure and Theming Improvements:

• Replaced all section containers (headers, info, notifications, utilities, data management, about) with a new card style (styles.card), unifying the look and feel across the screen and improving visual hierarchy. [1] [2] [3] [4] [5]
• Added new styles for buttons (styles.button, styles.buttonText) and sliders (styles.sliderContainer), making interactive elements more prominent and accessible. [1] [2]

Styling and Layout Enhancements:

• Updated paddings, margins, border radii, and shadow/elevation properties across multiple components (contentContainer, headerContainer, infoCard, settingItem, actionButton, utilityButton, modalContainer) for improved spacing, depth, and readability. [1] [2] [3] [4] [5] [6]
• Refined typography: increased font sizes, weights, and added letter spacing and text shadows to section titles and headers for better emphasis and clarity. [1] [2]

Component and Usability Tweaks:

• Changed the "Save Settings" action from a plain button to a styled TouchableOpacity, and grouped it with the lead time slider for better UX.
• Adjusted the multi-select wrapper style for more seamless integration with the new card-based layout.
• Updated utility icon sizes and descriptions for clarity and consistency. [1] [2]

Minor Content Adjustments:

• Revised some text labels and descriptions for clarity (e.g., "Save your schedule to Device" instead of "Save your schedule as CSV to Downloads").

These changes collectively modernize the SettingsScreen, improve user experience, and ensure consistent styling throughout the app.

Files Changed

• src/screens/user-settings/SettingsScreen.tsx

GSSoC Contributor

• Yes, I am a GSSoC contributor

Testing Device

• Physical Android Device

[FireFistisDead]

@anisharma07 i have made some minor changes in ui and i cant think of much like searching of schedule in the notification section and wrapping every section in card like that

[FireFistisDead]

@anisharma07 @Irtesaam any changes required?

[anisharma07]

@FireFistisDead I'm unable to build the app on my pc, it would be great if you can drop a video or screenshots