feat(SettingsPageItem): Added danger prop

BlueBaseJS · Jul 25, 2022 · 5e0e022 · 5e0e022
1 parent 98bed69
commit 5e0e022
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 35 deletions.
diff --git a/src/index.ts b/src/index.ts
@@ -34,7 +34,7 @@ export default createPlugin({
 		...settings,
 		...layouts,
 
-		SettingsPageItem: SettingsPageItem
+		SettingsPageItem: SettingsPageItem,
 	},
 
 	indexRoute: 'SettingsApp',

diff --git a/src/layouts/SettingsPageItem/SettingsPageItem.tsx b/src/layouts/SettingsPageItem/SettingsPageItem.tsx
@@ -29,6 +29,8 @@ export interface SettingsPageItemProps {
 	/** Styles to apply to the description component */
 	descriptionStyle?: TextStyle;
 
+	danger?: boolean;
+
 	children?: React.ReactNode;
 	style?: ViewStyle;
 }

diff --git a/src/layouts/SettingsPageItem/SettingsPageItemDesktop.tsx b/src/layouts/SettingsPageItem/SettingsPageItemDesktop.tsx
@@ -17,39 +17,44 @@ export interface SettingsPageItemDesktopProps extends SettingsPageItemProps {
 	styles?: Partial<SettingsPageItemDesktopStyles>;
 }
 
-const defaultStyles = (theme: Theme): SettingsPageItemDesktopStyles => ({
-	root: {
-		backgroundColor: theme.palette.background.card,
-		borderColor: theme.palette.divider,
-		borderRadius: theme.shape.borderRadius * 2,
-		borderWidth: 1,
-		overflow: 'hidden',
-	},
-
-	header: {
-		borderBottomColor: theme.palette.divider,
-		borderBottomWidth: 1,
-		paddingHorizontal: theme.spacing.unit * 2,
-		paddingVertical: theme.spacing.unit,
-	},
-
-	titleStyles: {
-		paddingVertical: theme.spacing.unit / 2,
-	},
-
-	descriptionStyles: {
-		color: theme.palette.text.hint,
-		paddingVertical: theme.spacing.unit / 2,
-	},
-
-	content: {
-		// backgroundColor: theme.palette.background.card,
-		borderBottomWidth: Platform.select({ default: undefined, ios: 1 }),
-		borderColor: Platform.select({ default: undefined, ios: theme.palette.divider }),
-		borderTopWidth: Platform.select({ default: undefined, ios: 1 }),
-		flex: 1,
-	},
-});
+const defaultStyles = (theme: Theme, props: SettingsPageItemDesktopProps): SettingsPageItemDesktopStyles => {
+	const { danger }= props;
+	return {
+		root: {
+			backgroundColor: theme.palette.background.card,
+			borderColor: danger ? 'rgba(239, 83, 80, .5)' : theme.palette.divider,
+			borderRadius: theme.shape.borderRadius * 2,
+			borderWidth: 1,
+			overflow: 'hidden',
+		},
+
+		header: {
+			backgroundColor: danger ? 'rgba(239, 83, 80, .1)' : theme.palette.background.card,
+			borderBottomColor: danger ? 'rgba(239, 83, 80, .5)' : theme.palette.divider,
+			borderBottomWidth: 1,
+			paddingHorizontal: theme.spacing.unit * 2,
+			paddingVertical: theme.spacing.unit,
+		},
+
+		titleStyles: {
+			color: danger ? 'rgba(239, 83, 80, 1)' : theme.palette.text.primary,
+			paddingVertical: theme.spacing.unit / 2,
+		},
+
+		descriptionStyles: {
+			color: danger ? 'rgba(239, 83, 80, .87)' : theme.palette.text.secondary,
+			paddingVertical: theme.spacing.unit / 2,
+		},
+
+		content: {
+			// backgroundColor: theme.palette.background.card,
+			borderBottomWidth: Platform.select({ default: undefined, ios: 1 }),
+			borderColor: Platform.select({ default: undefined, ios: theme.palette.divider }),
+			borderTopWidth: Platform.select({ default: undefined, ios: 1 }),
+			flex: 1,
+		},
+	};
+};
 
 export const SettingsPageItemDesktop = (props: SettingsPageItemDesktopProps) => {
 	const { description, descriptionStyle, title, titleStyle, style, component, children } = props;

diff --git a/src/layouts/SettingsPageItem/SettingsPageItemMobile.tsx b/src/layouts/SettingsPageItem/SettingsPageItemMobile.tsx
@@ -19,7 +19,7 @@ export interface SettingsPageItemMobileProps extends SettingsPageItemProps {
 	styles?: Partial<SettingsPageItemMobileStyles>;
 }
 
-const defaultStyles = (theme: Theme): SettingsPageItemMobileStyles => ({
+const defaultStyles = (theme: Theme, { danger }: SettingsPageItemMobileProps): SettingsPageItemMobileStyles => ({
 	contentStyles: {},
 
 	descriptionStyles: {
@@ -33,6 +33,7 @@ const defaultStyles = (theme: Theme): SettingsPageItemMobileStyles => ({
 		paddingVertical: theme.spacing.unit,
 	},
 	titleStyles: {
+		color: danger ? 'rgba(239, 83, 80, 1)' : theme.palette.text.primary,
 		paddingVertical: theme.spacing.unit,
 	},
 });