fix: small fixes in Header, ScreenContainer and adjust screenContentM…

…axWidthLarge
TERITORI · Sep 14, 2023 · 98edf0b · 98edf0b
1 parent 5d9b376
commit 98edf0b
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 65 deletions.
diff --git a/packages/components/ScreenContainer/Header.tsx b/packages/components/ScreenContainer/Header.tsx
@@ -36,6 +36,7 @@ export const Header: React.FC<{
           marginLeft: layout.contentSpacing,
         }}
       >
+        {/*If you want to add buttons or something in the Header in desktop mode, refer to ScreenContainer/index.tsx for now*/}
         {onBackPress && <BackButton onPress={onBackPress} />}
         {children && (
           <>

diff --git a/packages/components/ScreenContainer/HeaderMobile.tsx b/packages/components/ScreenContainer/HeaderMobile.tsx
@@ -1,5 +1,5 @@
 import React, { FC } from "react";
-import { View, StyleSheet, TouchableOpacity } from "react-native";
+import { View, TouchableOpacity, ViewStyle } from "react-native";
 import { useSelector } from "react-redux";
 
 import hamburgerCrossSVG from "../../../assets/icons/hamburger-button-cross.svg";
@@ -33,11 +33,15 @@ export const HeaderMobile: FC<{
   const selectedNFTDataInCart = useSelector(selectAllSelectedNFTData);
 
   return (
-    <View style={styles.container}>
+    <View style={containerCStyle}>
       <TopLogoMobile />
-      <View style={styles.rightContainer}>
-        <SpacerRow size={1} />
-        {onBackPress && <BackButton onPress={onBackPress} />}
+      <View style={rightContainerCStyle}>
+        {onBackPress && (
+          <>
+            <SpacerRow size={1} />
+            <BackButton onPress={onBackPress} />
+          </>
+        )}
         <SpacerRow size={1} />
         <SearchButtonMobile />
 
@@ -69,28 +73,24 @@ export const HeaderMobile: FC<{
   );
 };
 
-// FIXME: remove StyleSheet.create
-// eslint-disable-next-line no-restricted-syntax
-const styles = StyleSheet.create({
-  container: {
-    height: MOBILE_HEADER_HEIGHT,
-    maxHeight: MOBILE_HEADER_HEIGHT,
-    width: "100%",
-    flex: 1,
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-    borderBottomColor: neutral33,
-    borderBottomWidth: 1,
-    paddingHorizontal: layout.spacing_x1_5,
-    position: "absolute",
-    top: 0,
-    zIndex: 99999,
-    backgroundColor: neutral00,
-  },
-  rightContainer: {
-    height: MOBILE_HEADER_HEIGHT,
-    flexDirection: "row",
-    alignItems: "center",
-  },
-});
+const containerCStyle: ViewStyle = {
+  height: MOBILE_HEADER_HEIGHT,
+  maxHeight: MOBILE_HEADER_HEIGHT,
+  width: "100%",
+  flex: 1,
+  flexDirection: "row",
+  justifyContent: "space-between",
+  alignItems: "center",
+  borderBottomColor: neutral33,
+  borderBottomWidth: 1,
+  paddingHorizontal: layout.spacing_x1_5,
+  position: "absolute",
+  top: 0,
+  zIndex: 99999,
+  backgroundColor: neutral00,
+};
+const rightContainerCStyle: ViewStyle = {
+  height: MOBILE_HEADER_HEIGHT,
+  flexDirection: "row",
+  alignItems: "center",
+};
diff --git a/packages/components/ScreenContainer/index.tsx b/packages/components/ScreenContainer/index.tsx
@@ -3,8 +3,8 @@ import {
   SafeAreaView,
   ScrollView,
   View,
-  StyleSheet,
   useWindowDimensions,
+  ViewStyle,
 } from "react-native";
 
 import { Header } from "./Header";
@@ -16,16 +16,17 @@ import { useIsMobile } from "../../hooks/useIsMobile";
 import { useMaxResolution } from "../../hooks/useMaxResolution";
 import { NetworkFeature, NetworkInfo, NetworkKind } from "../../networks";
 import { DAppStoreData } from "../../screens/DAppStore/components/DAppStoreData";
-import { neutral33 } from "../../utils/style/colors";
 import {
   getResponsiveScreenContainerMarginHorizontal,
   headerHeight,
   headerMarginHorizontal,
+  layout,
   screenContainerContentMarginHorizontal,
 } from "../../utils/style/layout";
 import { NetworkSelector } from "../NetworkSelector/NetworkSelector";
 import { SearchBar } from "../Search/SearchBar";
 import { SelectedNetworkGate } from "../SelectedNetworkGate";
+import { Separator } from "../Separator";
 import { ConnectWalletButton } from "../TopMenu/ConnectWalletButton";
 import { Footer } from "../footers/Footer";
 import { Sidebar } from "../navigation/Sidebar";
@@ -119,7 +120,7 @@ export const ScreenContainer: React.FC<{
       <DAppStoreData />
       {/*FIXME: Too many containers levels*/}
 
-      <View style={styles.container}>
+      <View style={containerCStyle}>
         {!hideSidebar ? <Sidebar /> : null}
 
         <View style={{ width: "100%", flex: 1 }}>
@@ -143,7 +144,7 @@ export const ScreenContainer: React.FC<{
                   >
                     <View
                       style={[
-                        styles.childrenContainer,
+                        childrenContainerCStyle,
                         marginStyle,
                         { width, flex: 1 },
                       ]}
@@ -154,7 +155,7 @@ export const ScreenContainer: React.FC<{
                   </ScrollView>
                 ) : (
                   <View
-                    style={[styles.childrenContainer, marginStyle, { width }]}
+                    style={[childrenContainerCStyle, marginStyle, { width }]}
                   >
                     {children}
                     {footerChildren ? footerChildren : <Footer />}
@@ -163,7 +164,7 @@ export const ScreenContainer: React.FC<{
               </SelectedNetworkGate>
             </View>
           </View>
-          {/*
+          {/*-----
             We render the wallet selector here with absolute position to make sure
             the popup is on top of everything else, otherwise it's unusable
             TODO: Fix that and put this in Header.tsx
@@ -179,41 +180,35 @@ export const ScreenContainer: React.FC<{
             }}
           >
             <SearchBar />
-            <View
-              style={{
-                height: "100%",
-                backgroundColor: neutral33,
-                marginHorizontal: 16,
-                width: 1,
-              }}
+            <Separator
+              horizontal
+              style={{ height: "100%", marginHorizontal: layout.spacing_x2 }}
             />
-            <CartIconButtonBadge style={{ marginRight: 12 }} />
+            <CartIconButtonBadge style={{ marginRight: layout.spacing_x1_5 }} />
             <NetworkSelector
               forceNetworkId={forceNetworkId}
               forceNetworkKind={forceNetworkKind}
               forceNetworkFeatures={forceNetworkFeatures}
-              style={{ marginRight: 12 }}
+              style={{ marginRight: layout.spacing_x1_5 }}
             />
             <ConnectWalletButton
               style={{ marginRight: headerMarginHorizontal }}
             />
           </View>
         </View>
+        {/*-----END TODO*/}
       </View>
     </SafeAreaView>
   );
 };
 
-// FIXME: remove StyleSheet.create
-// eslint-disable-next-line no-restricted-syntax
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: "#000000",
-    flexDirection: "row",
-  },
-  childrenContainer: {
-    height: "100%",
-    alignSelf: "center",
-  },
-});
+const containerCStyle: ViewStyle = {
+  flex: 1,
+  backgroundColor: "#000000",
+  flexDirection: "row",
+  zIndex: 999,
+};
+const childrenContainerCStyle: ViewStyle = {
+  height: "100%",
+  alignSelf: "center",
+};
diff --git a/packages/hooks/useMaxResolution.ts b/packages/hooks/useMaxResolution.ts
@@ -22,24 +22,26 @@ export const useMaxResolution = ({
   const { width: windowWidth, height: windowHeight } = useWindowDimensions();
   const { isSidebarExpanded } = useSidebar();
   const isMobile = useIsMobile();
+  const contentWidth = useMemo(
+    () =>
+      windowWidth - (isSidebarExpanded ? fullSidebarWidth : smallSidebarWidth),
+    [windowWidth, isSidebarExpanded]
+  );
 
   const width = useMemo(() => {
     if (isMobile) {
       const mobileMargin =
         getMobileScreenContainerMarginHorizontal(windowWidth);
       return windowWidth - mobileMargin * 2;
     }
-
-    const containerWidth =
-      windowWidth - (isSidebarExpanded ? fullSidebarWidth : smallSidebarWidth);
     const responsiveMargin =
-      getResponsiveScreenContainerMarginHorizontal(containerWidth);
+      getResponsiveScreenContainerMarginHorizontal(contentWidth);
     const defaultMargin = responsive
       ? responsiveMargin
       : screenContainerContentMarginHorizontal * 2;
 
-    return containerWidth - (noMargin ? 0 : defaultMargin);
-  }, [windowWidth, isSidebarExpanded, noMargin, responsive, isMobile]);
+    return contentWidth - (noMargin ? 0 : defaultMargin);
+  }, [windowWidth, noMargin, responsive, isMobile, contentWidth]);
 
   return {
     width: isLarge
@@ -50,5 +52,6 @@ export const useMaxResolution = ({
       ? screenContentMaxWidth
       : width,
     height: windowHeight - headerHeight,
+    contentWidth,
   };
 };
diff --git a/packages/utils/style/layout.ts b/packages/utils/style/layout.ts
@@ -3,7 +3,7 @@ export const headerHeight = 80;
 export const MOBILE_HEADER_HEIGHT = 64;
 export const legalFooterHeight = 58;
 export const screenContentMaxWidth = 1092;
-export const screenContentMaxWidthLarge = 1600; //"100%";
+export const screenContentMaxWidthLarge = 1290; //"100%";
 export const headerMarginHorizontal = 22;
 export const avatarWidth = 40;
 export const topMenuWidth = 332;