fix: show correct logo on mobile + space around mobile search button (#…

…1445)

Signed-off-by: Norman Meier <[email protected]>

package.json

@@ -14,7 +14,8 @@
     "unused-exports": "ts-unused-exports ./tsconfig.json --excludePathsFromReport=\"packages/api;packages/contracts-clients;packages/evm-contracts-clients;packages/screens/RiotGame/RiotGameBridgeScreen.tsx;packages/components/socialFeed/RichText/inline-toolbar;app.config.js;weshd;./App.tsx;./cypress.config.ts;packages/modules/FileSystem/index.ts;.*\\.web|.electron|.native|.d.ts\"",
     "validate-networks": "tsx packages/scripts/validateNetworks.ts",
     "postinstall": "patch-package",
-    "install-gno": "tsx packages/scripts/install-gno"
+    "install-gno": "tsx packages/scripts/install-gno",
+    "switch-app": "tsx packages/scripts/switch-app"
   },
   "engines": {
     "node": "v18.1.0"

packages/components/ScreenContainer/HeaderMobile.tsx

@@ -1,6 +1,6 @@
 import { useNavigation } from "@react-navigation/native";
 import React, { FC } from "react";
-import { View, StyleSheet, TouchableOpacity, Platform } from "react-native";
+import { View, TouchableOpacity, Platform, ViewStyle } from "react-native";
 import { useSelector } from "react-redux";
 
 import hamburgerCrossSVG from "../../../assets/icons/hamburger-button-cross.svg";
@@ -17,7 +17,7 @@ import { ConnectWalletButtonMobile } from "../TopMenu/ConnectWalletButtonMobile"
 import { TogglePlayerButton } from "../mediaPlayer/TogglePlayerButton";
 import { BackButton } from "../navigation/components/BackButton";
 import { CartIconButtonBadge } from "../navigation/components/CartIconButtonBadge";
-import { TopLogoMobile } from "../navigation/components/TopLogoMobile";
+import { TopLogo } from "../navigation/components/TopLogo";
 import { SpacerRow } from "../spacer";
 
 export const HeaderMobile: FC<{
@@ -36,9 +36,9 @@ export const HeaderMobile: FC<{
   const navigation = useNavigation();
 
   return (
-    <View style={styles.container}>
-      <TopLogoMobile />
-      <View style={styles.rightContainer}>
+    <View style={containerCStyle}>
+      <TopLogo height={48} />
+      <View style={rightContainerCStyle}>
         {onBackPress && (
           <>
             <SpacerRow size={1} />
@@ -54,10 +54,11 @@ export const HeaderMobile: FC<{
           <>
             <SpacerRow size={1} />
             <CartIconButtonBadge isMobile />
-            <SpacerRow size={1} />
           </>
         )}
 
+        <SpacerRow size={1} />
+
         <NetworkSelectorMobile
           forceNetworkId={forceNetworkId}
           forceNetworkKind={forceNetworkKind}
@@ -91,28 +92,25 @@ 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",
+};

packages/components/navigation/Sidebar.tsx

@@ -102,7 +102,14 @@ export const Sidebar: React.FC = () => {
           <View style={headerContainerCStyle}>
             {currentRouteName === "Home" && <SideNotch />}
 
-            <TopLogo />
+            <TopLogo
+              style={{
+                flex: 1,
+                marginHorizontal: layout.spacing_x0_25,
+                justifyContent: "center",
+                overflow: "hidden",
+              }}
+            />
 
             <Separator color={neutral33} />
           </View>

packages/components/navigation/components/TopLogo.tsx

@@ -1,44 +1,35 @@
 import React from "react";
-import { View, TouchableOpacity, ViewStyle } from "react-native";
+import { View, TouchableOpacity, ViewStyle, StyleProp } from "react-native";
 
 import logoTopVersionSVG from "@/assets/logos/logo-hexagon-version-alpha.svg";
 import { SVG } from "@/components/SVG";
 import { useAppConfig } from "@/context/AppConfigProvider";
 import { useAppNavigation } from "@/hooks/navigation/useAppNavigation";
-import { layout } from "@/utils/style/layout";
 
-export const TopLogo = () => {
+export const TopLogo: React.FC<{
+  height?: number;
+  style?: StyleProp<ViewStyle>;
+}> = ({ height = 68, style }) => {
   const navigation = useAppNavigation();
   const { homeScreen, logo: configLogo } = useAppConfig();
 
   const logoSource = configLogo || logoTopVersionSVG;
-  const logo = <SVG height={68} source={logoSource} />;
-
-  const style: ViewStyle = {
-    marginHorizontal: layout.spacing_x0_25,
-    overflow: "hidden",
-  };
-
-  const content =
-    homeScreen === "Home" ? (
-      <TouchableOpacity
-        style={style}
-        onPress={() => navigation.navigate(homeScreen as any)}
-      >
-        {logo}
-      </TouchableOpacity>
-    ) : (
-      <View style={style}>{logo}</View>
-    );
+  const logo = (
+    <SVG
+      height={height}
+      preserveAspectRatio="xMinYMin meet"
+      source={logoSource}
+    />
+  );
 
-  return (
-    <View
-      style={{
-        flex: 1,
-        justifyContent: "center",
-      }}
+  return homeScreen === "Home" ? (
+    <TouchableOpacity
+      style={style}
+      onPress={() => navigation.navigate(homeScreen as any)}
     >
-      {content}
-    </View>
+      {logo}
+    </TouchableOpacity>
+  ) : (
+    <View style={style}>{logo}</View>
   );
 };