login style

src/components/ItemContainer/ItemContainer.web.js

@@ -1,23 +1,74 @@
 import { View, StyleSheet } from "react-native";
-import React, { useState } from "react";
+import React, { useMemo, useState } from "react";
+import omit from "lodash/omit";
 import BorderGradient from "../BorderGradient/BorderGradient";
 import { responsiveHeight } from "react-native-responsive-dimensions";
 import { BlurView } from "expo-blur";
 import { Style } from "../../styles";
 
+const ITEM_BORDER_RADIUS = 24;
+const CONTAINER_STYLE_PROPS = [
+  "margin",
+  "marginTop",
+  "marginBottom",
+  "marginLeft",
+  "marginRight",
+  "marginHorizontal",
+  "marginVertical",
+  "alignSelf",
+  "alignItems",
+  "justifyContent",
+  "width",
+  "minWidth",
+  "maxWidth",
+];
+
 const ItemContainer = ({
   height = responsiveHeight(40),
+  width,
+  maxWidth,
   children,
   gradientProps,
   style,
+  disableKeyboardHeight = false, // parity with native signature
 }) => {
   const [containerLayout, setContainerLayout] = useState(null);
+  const flattenedStyle = StyleSheet.flatten(style) || {};
+  const containerStyleOverrides = useMemo(() => {
+    return CONTAINER_STYLE_PROPS.reduce((acc, key) => {
+      if (typeof flattenedStyle[key] !== "undefined") {
+        acc[key] = flattenedStyle[key];
+      }
+      return acc;
+    }, {});
+  }, [flattenedStyle]);
+
+  const {
+    width: styleWidth,
+    maxWidth: styleMaxWidth,
+    minWidth: styleMinWidth,
+    ...remainingContainerStyle
+  } = containerStyleOverrides;
+
+  const gradientStyleOverrides = useMemo(
+    () => omit(flattenedStyle, CONTAINER_STYLE_PROPS),
+    [flattenedStyle]
+  );
+
+  const baseHeight = typeof height === "number" ? height : undefined;
+  const measuredHeight = containerLayout?.height ?? baseHeight;
+  const resolvedWidth = styleWidth ?? width ?? "100%";
+  const resolvedMaxWidth = styleMaxWidth ?? maxWidth;
 
   return (
     <View
-      style={{
-        ...styles.blurContainer,
-      }}
+      style={[
+        styles.wrapper,
+        remainingContainerStyle,
+        { width: resolvedWidth },
+        resolvedMaxWidth ? { maxWidth: resolvedMaxWidth } : null,
+        styleMinWidth ? { minWidth: styleMinWidth } : null,
+      ]}
     >
       <BorderGradient
         gradientProps={{
@@ -27,34 +78,26 @@ const ItemContainer = ({
           locations: [0, 1],
           ...gradientProps,
         }}
-        style={{
-          ...styles.borderGradientStyle,
-          height: containerLayout?.height,
-          ...style,
-        }}
+        style={[
+          styles.borderGradientStyle,
+          measuredHeight ? { height: measuredHeight } : null,
+          gradientStyleOverrides,
+        ]}
       />
       <View
-        style={{
-          height,
-          ...Style.containerCenter,
-          borderRadius: 24,
-          overflow: "hidden",
-          zIndex: 1,
-        }}
+        style={[
+          styles.contentWrapper,
+          Style.containerCenter,
+          baseHeight ? { height: baseHeight } : null,
+        ]}
         onLayout={(e) => {
           setContainerLayout(e.nativeEvent.layout);
         }}
       >
         <BlurView
-          intensity={30}
+          intensity={disableKeyboardHeight ? 35 : 45}
           tint="dark"
-          style={{
-            padding: 6,
-            zIndex: 2,
-            width: "99.2%",
-            alignSelf: "center",
-            height: "99.2%",
-          }}
+          style={styles.blurView}
         >
           {children}
         </BlurView>
@@ -66,18 +109,36 @@ const ItemContainer = ({
 export default ItemContainer;
 
 const styles = StyleSheet.create({
+  wrapper: {
+    position: "relative",
+    alignSelf: "stretch",
+  },
   borderGradientStyle: {
-    borderWidth: 1,
-    borderRadius: 20,
-    shadowColor: "#000",
+    borderWidth: 1.2,
+    borderRadius: ITEM_BORDER_RADIUS,
+    shadowColor: "rgba(3, 0, 18, 0.58)",
     shadowOffset: {
       width: 0,
       height: 2,
     },
-    shadowOpacity: 0.25,
-    shadowRadius: 3.84,
-    elevation: 100,
+    shadowOpacity: 0.22,
+    shadowRadius: 18,
+    elevation: 8,
     position: "absolute",
     width: "100%",
   },
+  contentWrapper: {
+    borderRadius: ITEM_BORDER_RADIUS,
+    overflow: "hidden",
+    zIndex: 1,
+  },
+  blurView: {
+    flex: 1,
+    width: "100%",
+    height: "100%",
+    paddingHorizontal: 32,
+    paddingVertical: 28,
+    justifyContent: "center",
+    alignSelf: "stretch",
+  },
 });