Adjust styling and added spacing to bottom of views

Author: CommanderRedYT

src/components/styled/StyledListItem.tsx

@@ -6,7 +6,7 @@ const StyledListItem: FC<ListItemProps> = props => {
   return (
     <Surface
       mode="flat"
-      elevation={props.disabled ? 1 : 5}
+      elevation={props.disabled ? 1 : 3}
       style={{
         borderRadius: 16,
         ...(props.disabled && { opacity: 0.5 }),

src/style.tsx

@@ -10,6 +10,8 @@ import { ScrollView, View } from 'react-native';
 
 import styled from 'styled-components';
 
+import { spacing } from '@/constants.ts';
+
 import { DarkTheme, DefaultTheme } from '@react-navigation/native';
 
 export const ReactNavigationDarkTheme = {
@@ -34,20 +36,15 @@ export const ReactNavigationLightTheme = {
   },*/
 };
 
-export const StyledView = styled(View)`
-  background-color: ${props => props.theme.colors.background};
-  color: ${props => props.theme.colors.onBackground};
-  flex: 1;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-`;
-
 export interface StyledScrollViewProps extends ScrollViewProps {
   theme: MD3Theme;
+  disableSafeBottomMargin?: boolean;
 }
 
-export const StyledScrollView: FC<StyledScrollViewProps> = props => {
+export const StyledScrollView: FC<StyledScrollViewProps> = ({
+  children,
+  ...props
+}) => {
   const rnpTheme = useTheme();
   const theme = props.theme ?? rnpTheme;
 
@@ -60,21 +57,32 @@ export const StyledScrollView: FC<StyledScrollViewProps> = props => {
         color: theme.colors.onBackground,
         width: '100%',
       }}
-    />
+    >
+      {children}
+      {props.disableSafeBottomMargin ? null : (
+        <View style={{ height: spacing * 2 }} />
+      )}
+    </ScrollView>
   );
 };
 
 export type StyledSafeAreaViewProps = {
   theme?: MD3Theme;
+  disableSafeBottomMargin?: boolean;
 } & SafeAreaViewProps;
 
-const InternalStyledSafeAreaView = styled(SafeAreaView)<{ theme: MD3Theme }>`
+const InternalStyledSafeAreaView = styled(SafeAreaView)<{
+  theme: MD3Theme;
+  disableSafeBottomMargin?: boolean;
+}>`
   height: 100%;
   flex: 1;
   align-items: center;
   background-color: ${props => props.theme.colors.background};
   display: flex;
   color: ${props => props.theme.colors.onBackground};
+  padding-bottom: ${props =>
+    props.disableSafeBottomMargin ? 0 : spacing * 2}px;
 `;
 
 export const StyledSafeAreaView: FC<StyledSafeAreaViewProps> = props => {