From ca669445464d8f78b78b734ed9695d91716df179 Mon Sep 17 00:00:00 2001
From: elysseaa <121833752+elysseaa@users.noreply.github.com>
Date: Fri, 7 Nov 2025 17:57:04 -0500
Subject: [PATCH 1/3] Add Insufficient Permissions Screen
- Follows structure of InsufficientPermissions.kt
- Can be used for both Attendance and Merchandise Screens
- Uses inline styles + stylesheet
---
Auth/InsufficientPermissions.tsx | 104 +++++++++++++++++++++++++++++++
1 file changed, 104 insertions(+)
create mode 100644 Auth/InsufficientPermissions.tsx
diff --git a/Auth/InsufficientPermissions.tsx b/Auth/InsufficientPermissions.tsx
new file mode 100644
index 0000000..df89778
--- /dev/null
+++ b/Auth/InsufficientPermissions.tsx
@@ -0,0 +1,104 @@
+import MaterialIcons from '@react-native-vector-icons/material-icons';
+import React, { useState } from 'react';
+import { Button, Modal, StyleSheet, Text, View } from 'react-native';
+
+type InsufficientPermissionsProps = {
+ featureName: string,
+ onRetry: () => void,
+ missingPermissions: string[],
+ requiredPermissions: string[],
+};
+
+function InsufficientPermissions({ featureName, onRetry,
+ missingPermissions, requiredPermissions }: InsufficientPermissionsProps) {
+ const [detailsVisible, setDetailsVisible] = useState(false);
+
+ type PermissionDetailsListProps = {
+ permissions: string[],
+ hasPermission: boolean
+ };
+ const PermissionDetailsList = ({permissions, hasPermission} : PermissionDetailsListProps) => {
+ return permissions.map((permission, index) => (
+
+ {hasPermission?
+
+ :
+
+ }
+ {permission}
+
+ ));
+ }
+
+ const PermissionDetailsDialog = () => {
+ return (
+
+
+
+ Required Permissions
+
+
+
+
+
+
+
+ );
+ };
+
+ return (
+
+ {
+ detailsVisible &&
+
+ }
+
+
+ {featureName} permissions required
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+const styles = StyleSheet.create({
+ modalView: {
+ margin: 30,
+ backgroundColor: 'white',
+ borderRadius: 20,
+ padding: 20,
+ shadowOffset: {
+ width: 0,
+ height: 2,
+ },
+ shadowOpacity: 0.25,
+ shadowRadius: 4,
+ elevation: 5,
+ width:"75%"
+ },
+ permissionItem: {
+ justifyContent: 'flex-start',
+ alignItems: "center",
+ flexDirection:"row",
+ borderBlockColor:"gray",
+ borderBottomWidth: 1
+ }
+});
+
+export default InsufficientPermissions;
\ No newline at end of file
From 4fcb23ba05f6573f005ba95534b649690e31d2dd Mon Sep 17 00:00:00 2001
From: elysseaa
Date: Sun, 18 Jan 2026 20:45:25 -0500
Subject: [PATCH 2/3] Fix inline styles, permission handling
- Moved all inline styles to stylesheet
- Fixed permission handling to render satisfied permissions as complete
- Updated icon/button colors to use Colors.ts colors
- Ran linter to reduce tab size
---
Auth/InsufficientPermissions.tsx | 227 +++++++++++++++++++------------
1 file changed, 140 insertions(+), 87 deletions(-)
diff --git a/Auth/InsufficientPermissions.tsx b/Auth/InsufficientPermissions.tsx
index df89778..0e3cecf 100644
--- a/Auth/InsufficientPermissions.tsx
+++ b/Auth/InsufficientPermissions.tsx
@@ -1,104 +1,157 @@
import MaterialIcons from '@react-native-vector-icons/material-icons';
import React, { useState } from 'react';
import { Button, Modal, StyleSheet, Text, View } from 'react-native';
+import { Colors } from '../Themes/Colors';
-type InsufficientPermissionsProps = {
- featureName: string,
- onRetry: () => void,
- missingPermissions: string[],
- requiredPermissions: string[],
+type InsufficientPermissionsProps = {
+ featureName: string;
+ onRetry: () => void;
+ missingPermissions: string[];
+ requiredPermissions: string[];
};
-function InsufficientPermissions({ featureName, onRetry,
- missingPermissions, requiredPermissions }: InsufficientPermissionsProps) {
- const [detailsVisible, setDetailsVisible] = useState(false);
+function InsufficientPermissions({
+ featureName,
+ onRetry,
+ missingPermissions,
+ requiredPermissions,
+}: InsufficientPermissionsProps) {
+ const [detailsVisible, setDetailsVisible] = useState(false);
+ const satisfiedPermissions = requiredPermissions.filter(
+ (item) => !missingPermissions.includes(item),
+ );
- type PermissionDetailsListProps = {
- permissions: string[],
- hasPermission: boolean
- };
- const PermissionDetailsList = ({permissions, hasPermission} : PermissionDetailsListProps) => {
- return permissions.map((permission, index) => (
-
- {hasPermission?
-
- :
-
- }
- {permission}
-
- ));
- }
+ type PermissionDetailsListProps = {
+ permissions: string[];
+ hasPermission: boolean;
+ };
+ const PermissionDetailsList = ({ permissions, hasPermission }: PermissionDetailsListProps) => {
+ return permissions.map((permission, index) => (
+
+ {hasPermission ? (
+
+ ) : (
+
+ )}
+ {permission}
+
+ ));
+ };
- const PermissionDetailsDialog = () => {
- return (
-
-
-
- Required Permissions
-
-
-
-
-
-
-
- );
- };
-
+ const PermissionDetailsDialog = () => {
return (
-
- {
- detailsVisible &&
-
- }
-
-
- {featureName} permissions required
-
-
-
-
-
-
-
-
-
-
+
);
+ };
+
+ return (
+
+ {detailsVisible && }
+
+ {featureName} permissions required
+
+
+
+
+
+
+
+
+
+
+ );
}
const styles = StyleSheet.create({
- modalView: {
- margin: 30,
- backgroundColor: 'white',
- borderRadius: 20,
- padding: 20,
- shadowOffset: {
- width: 0,
- height: 2,
- },
- shadowOpacity: 0.25,
- shadowRadius: 4,
- elevation: 5,
- width:"75%"
+ button: {
+ marginHorizontal: 5,
+ },
+ buttonBottomRow: {
+ marginTop: 10,
+ },
+ buttonTopRow: {
+ display: 'flex',
+ flexDirection: 'row',
+ flexWrap: 'wrap',
+ },
+ icon: {
+ margin: 10,
+ },
+ mainText: {
+ fontSize: 30,
+ marginBottom: 20,
+ textAlign: 'center',
+ },
+ modalButton: {
+ alignItems: 'flex-end',
+ marginVertical: 20,
+ },
+ modalText: {
+ fontSize: 20,
+ marginVertical: 20,
+ },
+ modalView: {
+ backgroundColor: 'white',
+ borderRadius: 20,
+ elevation: 5,
+ margin: 20,
+ padding: 20,
+ shadowOffset: {
+ width: 0,
+ height: 2,
},
- permissionItem: {
- justifyContent: 'flex-start',
- alignItems: "center",
- flexDirection:"row",
- borderBlockColor:"gray",
- borderBottomWidth: 1
- }
+ shadowOpacity: 0.25,
+ shadowRadius: 4,
+ width: '75%',
+ },
+ permissionItem: {
+ alignItems: 'center',
+ borderBlockColor: 'gray',
+ borderBottomWidth: 1,
+ borderTopWidth: 0,
+ flexDirection: 'row',
+ justifyContent: 'flex-start',
+ },
+ permissionItemFirst: {
+ alignItems: 'center',
+ borderBlockColor: 'gray',
+ borderBottomWidth: 1,
+ borderTopWidth: 1,
+ flexDirection: 'row',
+ justifyContent: 'flex-start',
+ },
+ permissionItemText: {
+ fontSize: 15,
+ },
+ viewContainer: {
+ alignItems: 'center',
+ flex: 1,
+ justifyContent: 'center',
+ margin: 10,
+ },
});
-export default InsufficientPermissions;
\ No newline at end of file
+export default InsufficientPermissions;
From 18f50a9d8ac871859909f3a8c79be3bfa03343e2 Mon Sep 17 00:00:00 2001
From: elysseaa
Date: Sat, 31 Jan 2026 12:50:00 -0500
Subject: [PATCH 3/3] Implement theme colors
---
Auth/InsufficientPermissions.tsx | 16 +++++++++++-----
Themes/Themes.ts | 3 +++
2 files changed, 14 insertions(+), 5 deletions(-)
diff --git a/Auth/InsufficientPermissions.tsx b/Auth/InsufficientPermissions.tsx
index 0e3cecf..69085ec 100644
--- a/Auth/InsufficientPermissions.tsx
+++ b/Auth/InsufficientPermissions.tsx
@@ -1,7 +1,7 @@
import MaterialIcons from '@react-native-vector-icons/material-icons';
import React, { useState } from 'react';
import { Button, Modal, StyleSheet, Text, View } from 'react-native';
-import { Colors } from '../Themes/Colors';
+import { useTheme } from '../Themes/ThemeContextProvider';
type InsufficientPermissionsProps = {
featureName: string;
@@ -16,6 +16,7 @@ function InsufficientPermissions({
missingPermissions,
requiredPermissions,
}: InsufficientPermissionsProps) {
+ const { currentTheme } = useTheme();
const [detailsVisible, setDetailsVisible] = useState(false);
const satisfiedPermissions = requiredPermissions.filter(
(item) => !missingPermissions.includes(item),
@@ -32,14 +33,14 @@ function InsufficientPermissions({
) : (
)}
@@ -68,14 +69,19 @@ function InsufficientPermissions({
return (
{detailsVisible && }
-
+
{featureName} permissions required
-
+
diff --git a/Themes/Themes.ts b/Themes/Themes.ts
index 80365f2..858150f 100644
--- a/Themes/Themes.ts
+++ b/Themes/Themes.ts
@@ -36,6 +36,7 @@ export type Theme = {
surfaceContainer: ColorValue;
surfaceContainerHigh: ColorValue;
surfaceContainerHighest: ColorValue;
+ success: ColorValue;
};
export const LightMode: Theme = {
@@ -74,6 +75,7 @@ export const LightMode: Theme = {
surfaceContainer: Colors.surfaceContainerLight,
surfaceContainerHigh: Colors.surfaceContainerHighLight,
surfaceContainerHighest: Colors.surfaceContainerHighestLight,
+ success: Colors.success,
};
export const DarkMode: Theme = {
@@ -112,4 +114,5 @@ export const DarkMode: Theme = {
surfaceContainer: Colors.surfaceContainerDark,
surfaceContainerHigh: Colors.surfaceContainerHighDark,
surfaceContainerHighest: Colors.surfaceContainerHighestDark,
+ success: Colors.success,
};