updating overlay styles

2026-04-29 09:02:20 -04:00
parent 849675c74c
commit f3a86e5c42
4 changed files with 347 additions and 224 deletions
@@ -6,10 +6,9 @@ import {
 } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import GetThemeColors from '../../../../../hooks/themeColors';
-import { CENTER, COLORS, FONT, SIZES } from '../../../../../constants';
+import { COLORS, SIZES } from '../../../../../constants';
 import { ThemeText } from '../../../../../functions/CustomElements';
 import { copyToClipboard } from '../../../../../functions';
-import CustomButton from '../../../../../functions/CustomElements/button';
 import { openInbox } from 'react-native-email-link';

 import { useToast } from '../../../../../../context-store/toastManager';
@@ -18,9 +17,12 @@ import {
  HIDDEN_OPACITY,
  INSET_WINDOW_WIDTH,
 } from '../../../../../constants/theme';
+import { useGlobalThemeContext } from '../../../../../../context-store/theme';

 export default function GiftCardOrderDetails(props) {
-  const { backgroundColor, transparentOveraly } = GetThemeColors();
+  const { backgroundColor, backgroundOffset, transparentOveraly } =
+    GetThemeColors();
+  const { theme, darkModeType } = useGlobalThemeContext();
  const { showToast } = useToast();
  const { t } = useTranslation();

@@ -40,66 +42,82 @@ export default function GiftCardOrderDetails(props) {
            style={[
              styles.content,
              {
-                backgroundColor: backgroundColor,
+                backgroundColor:
+                  theme && darkModeType ? backgroundOffset : backgroundColor,
              },
            ]}
          >
-            <ThemeText
-              styles={styles.headerText}
-              content={t('apps.giftCards.giftCardOrderDetails.title')}
+            {/* Details */}
+            <View style={styles.detailsContainer}>
+              <ThemeText
+                styles={styles.headerText}
+                content={t('apps.giftCards.giftCardOrderDetails.title')}
+              />
+
+              <ThemeText
+                styles={[styles.itemDescription, { marginTop: 20 }]}
+                content={t('apps.giftCards.giftCardOrderDetails.invoice')}
+              />
+              <TouchableOpacity
+                style={styles.itemContainer}
+                onPress={() => {
+                  copyToClipboard(item.invoice, showToast);
+                }}
+              >
+                <ThemeText
+                  CustomNumberOfLines={2}
+                  styles={styles.itemValue}
+                  content={item.invoice}
+                />
+              </TouchableOpacity>
+
+              <ThemeText
+                styles={styles.itemDescription}
+                content={t('apps.giftCards.giftCardOrderDetails.orderId')}
+              />
+              <TouchableOpacity
+                style={styles.itemContainer}
+                onPress={() => {
+                  copyToClipboard(JSON.stringify(item.id), showToast);
+                }}
+              >
+                <ThemeText styles={styles.itemValue} content={item.id} />
+              </TouchableOpacity>
+
+              <ThemeText
+                styles={styles.itemDescription}
+                content={t('apps.giftCards.giftCardOrderDetails.uuid')}
+              />
+              <TouchableOpacity
+                style={styles.itemContainer}
+                onPress={() => {
+                  copyToClipboard(item.uuid, showToast);
+                }}
+              >
+                <ThemeText
+                  CustomNumberOfLines={1}
+                  styles={styles.itemValue}
+                  content={item.uuid}
+                />
+              </TouchableOpacity>
+            </View>
+
+            {/* Divider */}
+            <View
+              style={[
+                styles.divider,
+                {
+                  backgroundColor:
+                    theme && darkModeType ? backgroundColor : backgroundOffset,
+                },
+              ]}
            />

-            <ThemeText
-              styles={[styles.itemDescription, { marginTop: 20 }]}
-              content={t('apps.giftCards.giftCardOrderDetails.invoice')}
-            />
+            {/* Open Inbox button */}
            <TouchableOpacity
-              style={styles.itemContainer}
-              onPress={() => {
-                copyToClipboard(item.invoice, showToast);
-              }}
-            >
-              <ThemeText
-                CustomNumberOfLines={2}
-                styles={styles.itemValue}
-                content={item.invoice}
-              />
-            </TouchableOpacity>
-            <ThemeText
-              styles={styles.itemDescription}
-              content={t('apps.giftCards.giftCardOrderDetails.orderId')}
-            />
-            <TouchableOpacity
-              style={styles.itemContainer}
-              onPress={() => {
-                copyToClipboard(JSON.stringify(item.id), showToast);
-              }}
-            >
-              <ThemeText styles={styles.itemValue} content={item.id} />
-            </TouchableOpacity>
-            <ThemeText
-              styles={styles.itemDescription}
-              content={t('apps.giftCards.giftCardOrderDetails.uuid')}
-            />
-            <TouchableOpacity
-              style={styles.itemContainer}
-              onPress={() => {
-                copyToClipboard(item.uuid, showToast);
-              }}
-            >
-              <ThemeText
-                CustomNumberOfLines={1}
-                styles={styles.itemValue}
-                content={item.uuid}
-              />
-            </TouchableOpacity>
-            <CustomButton
-              buttonStyles={{
-                marginTop: 20,
-                width: '100%',
-                ...CENTER,
-              }}
-              actionFunction={async () => {
+              activeOpacity={0.6}
+              style={styles.btn}
+              onPress={async () => {
                try {
                  await openInbox();
                } catch (err) {
@@ -108,8 +126,20 @@ export default function GiftCardOrderDetails(props) {
                  });
                }
              }}
-              textContent={t('apps.giftCards.giftCardOrderDetails.openInbox')}
-            />
+            >
+              <ThemeText
+                styles={[
+                  styles.btnText,
+                  {
+                    color:
+                      theme && darkModeType
+                        ? COLORS.darkModeText
+                        : COLORS.primary,
+                  },
+                ]}
+                content={t('apps.giftCards.giftCardOrderDetails.openInbox')}
+              />
+            </TouchableOpacity>
          </View>
        </TouchableWithoutFeedback>
      </View>
@@ -120,18 +150,19 @@ export default function GiftCardOrderDetails(props) {
 const styles = StyleSheet.create({
  globalContainer: {
    flex: 1,
-
    alignItems: 'center',
    justifyContent: 'center',
  },
  content: {
    width: INSET_WINDOW_WIDTH,
    maxWidth: 300,
-    backgroundColor: COLORS.lightModeBackground,
-
-    // paddingVertical: 10,
-    borderRadius: 8,
-    padding: 10,
+    borderRadius: 16,
+    overflow: 'hidden',
+  },
+  detailsContainer: {
+    paddingHorizontal: 24,
+    paddingTop: 24,
+    paddingBottom: 20,
  },
  headerText: {
    fontSize: SIZES.large,
@@ -140,11 +171,22 @@ const styles = StyleSheet.create({
  itemContainer: {
    marginBottom: 10,
  },
-  itemDescription: {
-    // fontWeight: 500,
-  },
+  itemDescription: {},
  itemValue: {
    opacity: HIDDEN_OPACITY,
    fontSize: SIZES.small,
  },
+  divider: {
+    height: 2,
+    width: '100%',
+  },
+  btn: {
+    height: 50,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  btnText: {
+    fontSize: SIZES.medium,
+    includeFontPadding: false,
+  },
 });
@@ -24,7 +24,8 @@ export default function ContactsPageLongPressActions({
  const navigate = useNavigation();
  const { contactsPrivateKey, publicKey } = useKeysContext();
  const { theme, darkModeType } = useGlobalThemeContext();
-  const { textColor, backgroundColor } = GetThemeColors();
+  const { backgroundColor, backgroundOffset, transparentOveraly } =
+    GetThemeColors();
  const {
    decodedAddedContacts,
    globalContactsInformation,
@@ -36,42 +37,56 @@ export default function ContactsPageLongPressActions({

  return (
    <TouchableWithoutFeedback onPress={() => navigate.goBack()}>
-      <View style={styles.globalContainer}>
+      <View
+        style={[
+          styles.globalContainer,
+          { backgroundColor: transparentOveraly },
+        ]}
+      >
        <TouchableWithoutFeedback>
          <View
            style={[
              styles.content,
              {
-                backgroundColor: backgroundColor,
+                backgroundColor:
+                  theme && darkModeType ? backgroundOffset : backgroundColor,
              },
            ]}
          >
            <TouchableOpacity
+              activeOpacity={0.6}
+              style={styles.btn}
              onPress={() => {
                toggleContactPin(contact);
                navigate.goBack();
              }}
            >
              <ThemeText
-                styles={styles.cancelButton}
+                styles={styles.btnText}
                content={t(`constants.${contact.isFavorite ? 'unpin' : 'pin'}`)}
              />
            </TouchableOpacity>
+
            <View
-              style={{
-                ...styles.border,
-                backgroundColor:
-                  theme && darkModeType ? COLORS.darkModeText : COLORS.primary,
-              }}
+              style={[
+                styles.divider,
+                {
+                  backgroundColor:
+                    theme && darkModeType ? backgroundColor : backgroundOffset,
+                },
+              ]}
            />
+
            <TouchableOpacity
+              activeOpacity={0.6}
+              style={styles.btn}
              onPress={() => {
                deleteContact(contact);
                navigate.goBack();
              }}
            >
              <ThemeText
-                styles={styles.cancelButton}
+                styles={styles.btnText}
                content={t('constants.delete')}
              />
            </TouchableOpacity>
@@ -105,27 +120,26 @@ export default function ContactsPageLongPressActions({
 const styles = StyleSheet.create({
  globalContainer: {
    flex: 1,
-    backgroundColor: COLORS.opaicityGray,
    alignItems: 'center',
    justifyContent: 'center',
  },
  content: {
    width: INSET_WINDOW_WIDTH,
    maxWidth: 300,
-    backgroundColor: COLORS.lightModeBackground,
-
-    // paddingVertical: 10,
-    borderRadius: 8,
+    borderRadius: 16,
+    overflow: 'hidden',
  },
-
-  border: {
-    height: 1,
+  divider: {
+    height: 2,
    width: '100%',
-    backgroundColor: COLORS.primary,
  },
-  cancelButton: {
+  btn: {
+    height: 50,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  btnText: {
    textAlign: 'center',
-    paddingVertical: 15,
    includeFontPadding: false,
  },
 });
@@ -5,7 +5,7 @@ import {
  TouchableWithoutFeedback,
  View,
 } from 'react-native';
-import { COLORS } from '../../../constants';
+import { COLORS, SIZES } from '../../../constants';
 import { useNavigation } from '@react-navigation/native';

 import GetThemeColors from '../../../hooks/themeColors';
@@ -15,14 +15,13 @@ import { useTranslation } from 'react-i18next';
 import { INSET_WINDOW_WIDTH } from '../../../constants/theme';

 export default function ErrorScreen(props) {
-  const { textColor, backgroundColor, backgroundOffset, transparentOveraly } =
+  const { backgroundColor, backgroundOffset, transparentOveraly } =
    GetThemeColors();
  const { t } = useTranslation();
  const errorMessage = props.route.params.errorMessage;
  const navigationFunction = props.route.params?.navigationFunction;
  const customNavigator = props.route.params?.customNavigator;
  const useTranslationString = props.route.params?.useTranslationString;
-  const height = props.route.params?.height;
  const navigate = useNavigation();
  const { theme, darkModeType } = useGlobalThemeContext();

@@ -36,45 +35,65 @@ export default function ErrorScreen(props) {
  };

  return (
-    <View
-      style={[styles.globalContainer, { backgroundColor: transparentOveraly }]}
-    >
-      <TouchableWithoutFeedback onPress={handleNaviagation}>
-        <View style={StyleSheet.absoluteFill} />
-      </TouchableWithoutFeedback>
-
+    <TouchableWithoutFeedback onPress={handleNaviagation}>
      <View
        style={[
-          styles.content,
-          {
-            backgroundColor: theme ? backgroundOffset : backgroundColor,
-            // maxHeight: height || 200,
-          },
+          styles.globalContainer,
+          { backgroundColor: transparentOveraly },
        ]}
      >
-        <ScrollView>
-          <ThemeText
-            styles={styles.headerText}
-            content={useTranslationString ? t(errorMessage) : errorMessage}
-          />
-        </ScrollView>
+        <TouchableWithoutFeedback>
+          <View
+            style={[
+              styles.content,
+              {
+                backgroundColor:
+                  theme && darkModeType ? backgroundOffset : backgroundColor,
+              },
+            ]}
+          >
+            {/* Message */}
+            <ScrollView>
+              <ThemeText
+                styles={styles.headerText}
+                content={useTranslationString ? t(errorMessage) : errorMessage}
+              />
+            </ScrollView>

-        <View
-          style={{
-            ...styles.border,
-            backgroundColor:
-              theme && darkModeType ? COLORS.darkModeText : COLORS.primary,
-          }}
-        />
+            {/* Divider */}
+            <View
+              style={[
+                styles.divider,
+                {
+                  backgroundColor:
+                    theme && darkModeType ? backgroundColor : backgroundOffset,
+                },
+              ]}
+            />

-        <TouchableOpacity onPress={handleNaviagation}>
-          <ThemeText
-            styles={styles.cancelButton}
-            content={t('wallet.sendPages.errorScreen.ok')}
-          />
-        </TouchableOpacity>
+            {/* OK button */}
+            <TouchableOpacity
+              onPress={handleNaviagation}
+              activeOpacity={0.6}
+              style={styles.btn}
+            >
+              <ThemeText
+                styles={[
+                  styles.btnText,
+                  {
+                    color:
+                      theme && darkModeType
+                        ? COLORS.darkModeText
+                        : COLORS.primary,
+                  },
+                ]}
+                content={t('wallet.sendPages.errorScreen.ok')}
+              />
+            </TouchableOpacity>
+          </View>
+        </TouchableWithoutFeedback>
      </View>
-    </View>
+    </TouchableWithoutFeedback>
  );
 }

@@ -87,24 +106,39 @@ const styles = StyleSheet.create({
  content: {
    width: INSET_WINDOW_WIDTH,
    maxWidth: 300,
-    borderRadius: 8,
+    borderRadius: 16,
+    overflow: 'hidden',
    maxHeight: '70%',
  },
+  iconWrap: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+    alignSelf: 'center',
+    marginTop: 28,
+    marginBottom: 12,
+  },
  headerText: {
-    width: '100%',
-    paddingVertical: 15,
+    fontSize: SIZES.medium,
    textAlign: 'center',
-    paddingHorizontal: 20,
+    lineHeight: 22,
+    paddingHorizontal: 24,
+    paddingVertical: 20,
    includeFontPadding: false,
  },
-  border: {
-    height: 1,
+  divider: {
+    height: 2,
    width: '100%',
-    backgroundColor: COLORS.primary,
  },
-  cancelButton: {
-    textAlign: 'center',
-    paddingVertical: 10,
+  btn: {
+    height: 50,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  btnText: {
+    fontSize: SIZES.medium,
    includeFontPadding: false,
  },
 });
@@ -1,125 +1,158 @@
-import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import {
+  StyleSheet,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+  View,
+} from 'react-native';
 import { useNavigation } from '@react-navigation/native';
-import { useEffect, useRef, useState } from 'react';
-import { COLORS } from '../../constants';
+import { useCallback } from 'react';
+import { COLORS, SIZES } from '../../constants';
 import ThemeText from './textTheme';
-import CustomButton from './button';
 import GetThemeColors from '../../hooks/themeColors';
 import { useGlobalThemeContext } from '../../../context-store/theme';
-import Animated, {
-  useSharedValue,
-  withTiming,
-  useAnimatedStyle,
-} from 'react-native-reanimated';
-import { scheduleOnRN } from 'react-native-worklets';
 import ThemeIcon from './themeIcon';
+import { INSET_WINDOW_WIDTH } from '../../constants/theme';

 export default function InformationPopup(props) {
-  const BlurViewAnimation = useSharedValue(0);
-  const isInitialLoad = useRef(true);
  const navigate = useNavigation();
-  const [goBack, setGoGack] = useState(false);
  const { theme, darkModeType } = useGlobalThemeContext();
  const { backgroundOffset, backgroundColor, transparentOveraly } =
    GetThemeColors();
  const {
    route: {
-      params: {
-        textContent,
-        buttonText,
-        CustomTextComponent,
-        customNavigation,
-      },
+      params: { textContent, buttonText, CustomTextComponent, customNavigation },
    },
  } = props;

-  useEffect(() => {
-    if (isInitialLoad.current) {
-      BlurViewAnimation.value = withTiming(1, { duration: 500 });
-
-      isInitialLoad.current = false;
+  const handleGoBack = useCallback(() => {
+    try {
+      if (customNavigation) {
+        customNavigation();
+      } else {
+        navigate.goBack();
+      }
+    } catch (err) {
+      navigate.goBack();
    }
-    if (goBack) {
-      BlurViewAnimation.value = withTiming(0, { duration: 500 }, isFinished => {
-        if (isFinished) {
-          if (customNavigation) {
-            scheduleOnRN(customNavigation);
-          } else {
-            scheduleOnRN(navigate.goBack);
-          }
-        }
-      });
-    }
-  }, [goBack]);
-
-  const animatedStyle = useAnimatedStyle(() => ({
-    opacity: BlurViewAnimation.value,
-  }));
+  }, [customNavigation, navigate]);

  return (
-    <Animated.View style={[styles.absolute, animatedStyle]}>
-      <View style={[styles.container, { backgroundColor: transparentOveraly }]}>
-        <View
-          style={{
-            ...styles.contentContainer,
-            backgroundColor: backgroundOffset,
-          }}
-        >
-          <TouchableOpacity
-            onPress={() => setGoGack(true)}
-            style={{ marginLeft: 'auto', marginBottom: 10 }}
+    <TouchableWithoutFeedback onPress={handleGoBack}>
+      <View style={[styles.overlay, { backgroundColor: transparentOveraly }]}>
+        <TouchableWithoutFeedback>
+          <View
+            style={[
+              styles.modal,
+              {
+                backgroundColor:
+                  theme && darkModeType ? backgroundOffset : backgroundColor,
+              },
+            ]}
          >
-            <ThemeIcon iconName={'X'} />
-          </TouchableOpacity>
+            {/* Icon */}
+            <View
+              style={[
+                styles.iconWrap,
+                {
+                  backgroundColor:
+                    theme && darkModeType
+                      ? COLORS.darkModeText
+                      : COLORS.expandedTXLightModeConfirmd,
+                },
+              ]}
+            >
+              <ThemeIcon
+                colorOverride={
+                  theme && darkModeType ? COLORS.lightModeText : COLORS.primary
+                }
+                size={20}
+                iconName={'Info'}
+              />
+            </View>

-          {textContent && (
-            <ThemeText
-              styles={{
-                marginBottom: 30,
-                textAlign: 'center',
-              }}
-              content={textContent}
+            {/* Content */}
+            {textContent && (
+              <ThemeText styles={styles.message} content={textContent} />
+            )}
+            {CustomTextComponent && <CustomTextComponent />}
+
+            {/* Divider */}
+            <View
+              style={[
+                styles.divider,
+                {
+                  backgroundColor:
+                    theme && darkModeType ? backgroundColor : backgroundOffset,
+                },
+              ]}
            />
-          )}
-          {CustomTextComponent && <CustomTextComponent />}
-          <CustomButton
-            buttonStyles={{
-              width: 'auto',
-              backgroundColor:
-                theme && darkModeType ? backgroundColor : COLORS.primary,
-            }}
-            textStyles={{
-              color: COLORS.darkModeText,
-            }}
-            textContent={buttonText}
-            actionFunction={() => {
-              setGoGack(true);
-            }}
-          />
-        </View>
+
+            {/* Button row */}
+            <TouchableOpacity
+              onPress={handleGoBack}
+              activeOpacity={0.6}
+              style={styles.btn}
+            >
+              <ThemeText
+                styles={[
+                  styles.btnText,
+                  {
+                    color:
+                      theme && darkModeType
+                        ? COLORS.darkModeText
+                        : COLORS.primary,
+                  },
+                ]}
+                content={buttonText}
+              />
+            </TouchableOpacity>
+          </View>
+        </TouchableWithoutFeedback>
      </View>
-    </Animated.View>
+    </TouchableWithoutFeedback>
  );
 }

 const styles = StyleSheet.create({
-  container: {
+  overlay: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
-  absolute: {
-    width: '100%',
-    height: '100%',
-    position: 'absolute',
-    top: 0,
-    left: 0,
+  modal: {
+    width: INSET_WINDOW_WIDTH,
+    maxWidth: 300,
+    borderRadius: 16,
+    overflow: 'hidden',
  },
-  contentContainer: {
-    width: '70%',
-    backgroundColor: COLORS.darkModeText,
-    padding: 10,
-    borderRadius: 8,
+  iconWrap: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
    alignItems: 'center',
+    justifyContent: 'center',
+    alignSelf: 'center',
+    marginTop: 28,
+    marginBottom: 12,
+  },
+  message: {
+    fontSize: SIZES.medium,
+    textAlign: 'center',
+    lineHeight: 22,
+    paddingHorizontal: 24,
+    paddingBottom: 20,
+  },
+  divider: {
+    height: 2,
+    width: '100%',
+  },
+  btn: {
+    height: 50,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  btnText: {
+    fontSize: SIZES.medium,
+    includeFontPadding: false,
  },
 });