Skip to content

Commit 534b952

Browse files
SkitPieSkitPie
committed
Large Fix
1 parent 120bd1f commit 534b952

File tree

10 files changed

+59
-73
lines changed

10 files changed

+59
-73
lines changed

‎assets/icons/svg_js/placeholderIcon.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,8 @@ function PlaceholderIcon(props) {
1515
fillRule="evenodd"
1616
clipRule="evenodd"
1717
d="M9 5H5v4a1 1 0 01-2 0V4.5A1.5 1.5 0 014.5 3H9a1 1 0 010 2zM5 15a1 1 0 10-2 0v4.5A1.5 1.5 0 004.5 21H9a1 1 0 100-2H5v-4zm9-11a1 1 0 011-1h4.5A1.5 1.5 0 0121 4.5V9a1 1 0 11-2 0V5h-4a1 1 0 01-1-1zm7 11a1 1 0 10-2 0v4h-4a1 1 0 100 2h4.5a1.5 1.5 0 001.5-1.5V15z"
18-
fill="#757575"
18+
fill={"#757575"}
19+
{...props}
1920
/>
2021
</Svg>
2122
)

‎src/components/common/CustomButtonDock.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react';
22
import { View, StyleSheet, Platform } from 'react-native';
33
import { colors, paddings } from '../../style';
4+
import { useSafeAreaInsets } from 'react-native-safe-area-context';
45

56
/**
67
* CustomButtonDock Component
@@ -12,8 +13,10 @@ import { colors, paddings } from '../../style';
1213
* @param {React.ReactNode} secondButton - The second button component to display
1314
*/
1415
const CustomButtonDock = ({ direction = "vertical", firstButton, secondButton }) => {
16+
const insets = useSafeAreaInsets();
17+
1518
return (
16-
<View style={styles.overlay} pointerEvents="box-none">
19+
<View style={[styles.overlay, { marginBottom: insets.bottom }]} pointerEvents="box-none">
1720
<View style={styles.bottomContainer} pointerEvents="box-none">
1821
<View style={[styles.dock, direction === "horizontal" ? styles.horizontal : styles.vertical]}>
1922
{firstButton && (

‎src/components/common/CustomCard.js‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -64,27 +64,29 @@ const styles = StyleSheet.create({
6464
// Active Styles
6565
// -------------------------------
6666
cardMdContainer: {
67+
flexGrow: 1,
68+
width: 160,
69+
height: 64,
6770
gap: paddings.p_12,
6871
padding: paddings.p_12,
6972
flexDirection: "row",
7073
alignItems: "center",
7174
backgroundColor: colors.white,
7275
borderStyle: "solid",
7376
borderRadius: rounded.rounded_lg,
74-
width: 160,
75-
height: 64,
7677
borderWidth: 1,
7778
borderColor: colors.grey200,
7879
},
7980
cardLgContainer: {
81+
flexGrow: 1,
82+
width: 160,
83+
height: 112,
8084
gap: paddings.p_16,
8185
padding: paddings.p_16,
8286
alignItems: "center",
8387
backgroundColor: colors.white,
8488
borderStyle: "solid",
8589
borderRadius: rounded.rounded_lg,
86-
width: 160,
87-
height: 112,
8890
borderWidth: 1,
8991
borderColor: colors.grey200,
9092
},
@@ -94,27 +96,29 @@ const styles = StyleSheet.create({
9496
// Used for both default and disabled states
9597
// The only difference is text strikethrough in disabled state
9698
cardMdDisabled: {
99+
flexGrow: 1,
100+
width: 160,
101+
height: 64,
97102
gap: paddings.p_12,
98103
padding: paddings.p_12,
99104
flexDirection: "row",
100105
alignItems: "center",
101106
backgroundColor: colors.white,
102107
borderStyle: "solid",
103108
borderRadius: rounded.rounded_lg,
104-
width: 160,
105-
height: 64,
106109
borderWidth: 1,
107110
borderColor: colors.grey200,
108111
},
109112
cardLgDisabled: {
113+
flexGrow: 1,
114+
width: 160,
115+
height: 112,
110116
gap: paddings.p_16,
111117
padding: paddings.p_16,
112118
alignItems: "center",
113119
backgroundColor: colors.white,
114120
borderStyle: "solid",
115121
borderRadius: rounded.rounded_lg,
116-
width: 160,
117-
height: 112,
118122
borderWidth: 1,
119123
borderColor: colors.grey200,
120124
},

‎src/components/common/CustomInput.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -254,7 +254,7 @@ const styles = StyleSheet.create({
254254
iconContainer: { justifyContent: "center", alignItems: "center" },
255255
icon: { width: 24, height: 24 },
256256
errorText: {
257-
marginTop: paddings.p_8,
257+
paddingTop: paddings.p_16,
258258
...textStyles.text_sm_medium,
259259
color: colors.red500,
260260
},

‎src/navigation/AppNavigator.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import CustomTopNavigation from '../components/navigation/CustomTopNavigation';
88

99
// Main Screens
1010
import HomeScreen from '../screens/Main/HomeScreen';
11-
import ProfileScreen from '../screens/Main/ProfileScreen';
11+
import TemplatesScreen from '../screens/Main/TemplatesScreen';
1212
import ButtonScreen from '../screens/PreviewScreens/buttonScreen';
1313
import BottomNavigationScreen from '../screens/PreviewScreens/bottomNavigationScreen';
1414
import InputFieldScreen from '../screens/PreviewScreens/inputFieldScreen';
@@ -42,8 +42,8 @@ const defaultScreenOptions = {
4242
// Tab Screen Configuration
4343
const tabScreens = [
4444
{ name: 'Home', component: HomeScreen, icon: HomeIcon, notifications: 0 },
45-
{ name: 'Templates', component: ProfileScreen, icon: TemplatesIcon, notifications: 5 },
46-
{ name: 'Settings', component: ProfileScreen, icon: SettingsIcon, notifications: 3 },
45+
{ name: 'Templates', component: TemplatesScreen, icon: TemplatesIcon, notifications: 5 },
46+
{ name: 'Settings', component: TemplatesScreen, icon: SettingsIcon, notifications: 3 },
4747
];
4848

4949
// Main Tab Navigation

‎src/screens/Main/HomeScreen.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -116,8 +116,7 @@ const styles = StyleSheet.create({
116116
cardsContainer: {
117117
flexDirection: 'row',
118118
flexWrap: 'wrap',
119-
width: '100%',
120-
justifyContent: "space-around",
119+
justifyContent: 'space-between',
121120
gap: 16
122121
},
123122
});

‎src/screens/Main/ProfileScreen.js‎ renamed to ‎src/screens/Main/TemplatesScreen.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@ import React from 'react';
33
import { View, Text, StyleSheet } from 'react-native';
44
import { SafeAreaView } from 'react-native-safe-area-context';
55

6-
export default function ProfileScreen() {
6+
export default function TemplatesScreen() {
77
return (
88
<SafeAreaView style={styles.container}>
9-
<Text>Profile Screen</Text>
9+
<Text>Templates</Text>
1010
</SafeAreaView>
1111
);
1212
}

‎src/screens/PreviewScreens/bottomNavigationScreen.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import CustomIcon from '../../../assets/icons/svg_js/customIcon';
55
import { ScrollView } from 'react-native-gesture-handler';
66
import CustomTabNavigator from '../../components/navigation/CustomTabNavigator';
77
import HomeScreen from '../Main/HomeScreen';
8-
import ProfileScreen from '../Main/ProfileScreen';
8+
import ProfileScreen from '../Main/TemplatesScreen';
99
import TemplatesIcon from '../../../assets/icons/Navigation/templateIcon';
1010

1111
const BottomNavigationScreen = () => {

‎src/screens/PreviewScreens/buttonDockScreen.js‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -56,13 +56,6 @@ const ButtonDockScreen = () => {
5656

5757

5858
</ScrollView>
59-
60-
{/* Der Button-Dock wird als absolutes Element am unteren Rand gerendert */}
61-
<CustomButtonDock
62-
direction="horizontal"
63-
firstButton={<CustomButton text="Primary" type="primary" />}
64-
secondButton={<CustomButton text="Secondary" type="secondary" />}
65-
/>
6659
</View>
6760
);
6861
};

‎src/screens/PreviewScreens/customCardScreen.js‎

Lines changed: 33 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -19,25 +19,22 @@ const CustomCardScreen = () => {
1919
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.
2020
</Text>
2121
<View style={styles.sectionContainer}>
22+
2223
<View style={styles.rowContainer}>
23-
<View style={styles.itemContainer}>
24-
<CustomCard
25-
iconSource={<PlaceholderIcon />}
26-
title="Title"
27-
description="Description"
28-
size="md"
29-
state="active" // Standard: aktive Darstellung
30-
/>
31-
</View>
32-
<View style={styles.itemContainer}>
33-
<CustomCard
34-
iconSource={<PlaceholderIcon />}
35-
title="Title"
36-
description="Description"
37-
size="lg"
38-
state="active"
39-
/>
40-
</View>
24+
<CustomCard
25+
iconSource={<PlaceholderIcon fill={colors.black} />}
26+
title="Title"
27+
description="Description"
28+
size="md"
29+
state="active" // Standard: aktive Darstellung
30+
/>
31+
<CustomCard
32+
iconSource={<PlaceholderIcon fill={colors.black} />}
33+
title="Title"
34+
description="Description"
35+
size="lg"
36+
state="active"
37+
/>
4138
</View>
4239
</View>
4340

@@ -54,33 +51,27 @@ const CustomCardScreen = () => {
5451
</Text>
5552
<View style={styles.sectionContainer}>
5653
<View style={styles.rowContainer}>
57-
<View style={styles.itemContainer}>
5854
<CustomCard
59-
iconSource={<PlaceholderIcon />}
55+
iconSource={<PlaceholderIcon fill={colors.black} />}
6056
title="Title"
6157
description="Description"
6258
size="lg"
6359
state="active"
6460
/>
65-
</View>
66-
<View style={styles.itemContainer}>
6761
<CustomCard
68-
iconSource={<PlaceholderIcon />}
62+
iconSource={<PlaceholderIcon fill={colors.black} />}
6963
title="Title"
7064
description="Description"
7165
size="lg"
7266
state="default"
7367
/>
74-
</View>
75-
<View style={styles.itemContainer}>
7668
<CustomCard
7769
iconSource={<PlaceholderIcon />}
7870
title="Title"
7971
description="Description"
8072
size="lg"
8173
state="disabled"
8274
/>
83-
</View>
8475
</View>
8576
</View>
8677

@@ -97,26 +88,22 @@ const CustomCardScreen = () => {
9788
</Text>
9889
<View style={styles.sectionContainer}>
9990
<View style={styles.rowContainer}>
100-
<View style={styles.itemContainer}>
101-
<CustomCard
102-
iconSource={<PlaceholderIcon />}
103-
title="Title"
104-
description="Description"
105-
size="lg"
106-
state="active"
107-
showDescription={true}
108-
/>
109-
</View>
110-
<View style={styles.itemContainer}>
111-
<CustomCard
112-
iconSource={<PlaceholderIcon />}
113-
title="Title"
114-
description="Description"
115-
size="lg"
116-
state="active"
117-
showDescription={false}
118-
/>
119-
</View>
91+
<CustomCard
92+
iconSource={<PlaceholderIcon fill={colors.black} />}
93+
title="Title"
94+
description="Description"
95+
size="lg"
96+
state="active"
97+
showDescription={true}
98+
/>
99+
<CustomCard
100+
iconSource={<PlaceholderIcon fill={colors.black} />}
101+
title="Title"
102+
description="Description"
103+
size="lg"
104+
state="active"
105+
showDescription={false}
106+
/>
120107
</View>
121108
</View>
122109
</ScrollView>
@@ -128,7 +115,6 @@ const styles = StyleSheet.create({
128115
flex: 1,
129116
paddingHorizontal: paddings.p_16,
130117
paddingVertical: paddings.p_32,
131-
marginBottom: paddings.p_32,
132118
backgroundColor: colors.white,
133119
},
134120
sectionContainer: {

0 commit comments

Comments
 (0)