Merge pull request #470 from trilitech/initial-screen-ui-fixes

Update initial screen to match design
trilitech · Oct 6, 2023 · 91a8fd4 · 91a8fd4
2 parents 23fbe55 + 8d2f2eb
commit 91a8fd4
Show file tree

Hide file tree

Showing 7 changed files with 74 additions and 58 deletions.
diff --git a/src/ImportSeed.tsx b/src/ImportSeed.tsx
@@ -8,10 +8,15 @@ import { request } from "./utils/datocms/request";
 import { useEffect, useState } from "react";
 import colors from "./style/colors";
 import { AppVersion } from "./components/AppVersion";
+import BackgroundImage from "./assets/onboarding/background_image.png";
 
 function ImportSeed() {
-  const { onOpen, modalElement } = useOnboardingModal();
-
+  const [showSlider, setShowSlider] = useState(true);
+  const { onOpen, modalElement } = useOnboardingModal(() => setShowSlider(true));
+  const openModal = () => {
+    setShowSlider(false);
+    onOpen();
+  };
   const [slideItems, setSlideItems] = useState<SlideritemRecord[]>([]);
   const requestSliderItems = async () => {
     const result = await request(AllSlideritemsDocument);
@@ -23,38 +28,44 @@ function ImportSeed() {
   }, []);
 
   return (
-    <Box bg={colors.gray[900]} height="100vh" padding="60px">
-      <SimpleGrid bg={colors.gray[700]} columns={[1, 1, 2]} borderRadius="30px">
-        <Center>
-          <VStack spacing="16px" maxW="400px" padding="32px">
-            <MakiLogo size="48px" />
-            <Heading size="3xl">Welcome to Umami</Heading>
-            <Divider maxWidth="400px" />
-            <Text color={colors.gray[450]}>A powerful Tezos wallet</Text>
-            <Button w="100%" size="lg" onClick={onOpen}>
-              Get started
-            </Button>
-            <AppVersion />
-            {modalElement}
-          </VStack>
-        </Center>
-        <Box
-          width="100%"
-          borderTopRightRadius="30px"
-          borderBottomRightRadius="30px"
-          height="665px"
-          overflow="hidden"
-          bg="black"
-          display={["none", "none", "initial"]}
-        >
-          <Slider>
-            {slideItems.map((item, index) => {
-              return <SlideItem key={index} item={item} />;
-            })}
-          </Slider>
-        </Box>
-      </SimpleGrid>
-    </Box>
+    <Center bgImage={BackgroundImage} bgSize="cover" height="100vh" padding="60px">
+      {showSlider && (
+        <SimpleGrid bg={colors.gray[800]} columns={[1, 1, 2]} borderRadius="30px">
+          <Center>
+            <VStack spacing="0" maxW="400px" padding="32px">
+              <MakiLogo size="48px" mb="24px" />
+              <Heading size="3xl" mb="16px">
+                Welcome to Umami
+              </Heading>
+              <Divider maxWidth="400px" mb="16px" />
+              <Text color={colors.gray[450]} mb="32px">
+                A powerful Tezos wallet
+              </Text>
+              <Button w="100%" size="lg" mb="24px" onClick={openModal}>
+                Get started
+              </Button>
+              <AppVersion fontSize="13px" />
+            </VStack>
+          </Center>
+          <Box
+            width="100%"
+            borderTopRightRadius="30px"
+            borderBottomRightRadius="30px"
+            height="665px"
+            overflow="hidden"
+            bg="black"
+            display={["none", "none", "initial"]}
+          >
+            <Slider>
+              {slideItems.map((item, index) => {
+                return <SlideItem key={index} item={item} />;
+              })}
+            </Slider>
+          </Box>
+        </SimpleGrid>
+      )}
+      {modalElement}
+    </Center>
   );
 }
 

diff --git a/src/assets/onboarding/background_image.png b/src/assets/onboarding/background_image.png
diff --git a/src/components/CircleIcon.tsx b/src/components/CircleIcon.tsx
@@ -24,7 +24,13 @@ type Props = {
   onClick?: () => void;
 };
 
-export const CircleIcon = ({ icon, size, color = colors.gray[400], onClick = () => {} }: Props) => {
+export const CircleIcon = ({
+  icon,
+  size,
+  iconSize = "18px",
+  color = colors.gray[400],
+  onClick = () => {},
+}: Props) => {
   const CompName = iconMap[icon];
   return (
     <Box
@@ -36,7 +42,7 @@ export const CircleIcon = ({ icon, size, color = colors.gray[400], onClick = ()
       onClick={onClick}
     >
       <Center h="100%">
-        <CompName {...{ color }} />
+        <CompName width={iconSize} height={iconSize} {...{ color }} />
       </Center>
     </Box>
   );

diff --git a/src/components/MakiLogo.tsx b/src/components/MakiLogo.tsx
@@ -1,9 +1,12 @@
 import React from "react";
 
-import { Image } from "@chakra-ui/react";
+import { Image, ImageProps } from "@chakra-ui/react";
 
 import makiLogo from "../assets/maki-default.png";
 
-export const MakiLogo: React.FC<{ size?: string | number }> = ({ size = 100 }) => {
-  return <Image boxSize={size} objectFit="cover" src={makiLogo} alt="Maki logo" />;
+export const MakiLogo: React.FC<{ size?: string | number } & ImageProps> = ({
+  size = 100,
+  ...props
+}) => {
+  return <Image boxSize={size} objectFit="cover" src={makiLogo} alt="Maki logo" {...props} />;
 };
diff --git a/src/components/Onboarding/useOnboardingModal.tsx b/src/components/Onboarding/useOnboardingModal.tsx
@@ -5,7 +5,6 @@ import {
   ModalOverlay,
   useDisclosure,
 } from "@chakra-ui/react";
-import ModalBackground from "../../assets/onboarding/background_image.svg";
 import { useImplicitAccounts } from "../../utils/hooks/accountHooks";
 import ConnectOptions from "./connectOptions/ConnectOptions";
 import ConnectOrCreate from "./connectOrCreate/ConnectOrCreate";
@@ -85,7 +84,7 @@ export type Step =
   | MasterPasswordStep
   | FakeAccountStep;
 
-export const useOnboardingModal = () => {
+export const useOnboardingModal = (onModalClose?: () => void) => {
   const { isOpen, onOpen, onClose } = useDisclosure();
   const hasAccounts = useImplicitAccounts().length !== 0;
   const history = useStepHistory<Step>({
@@ -95,6 +94,9 @@ export const useOnboardingModal = () => {
 
   const closeModal = () => {
     history.reset();
+    if (onModalClose) {
+      onModalClose();
+    }
     onClose();
   };
 
@@ -137,13 +139,7 @@ export const useOnboardingModal = () => {
         isCentered
         autoFocus={false}
       >
-        <ModalOverlay
-          bgImage={hasAccounts ? undefined : ModalBackground}
-          bgColor={hasAccounts ? undefined : "#0A0A0A"}
-          backdropFilter="blur(5px)"
-          bgPosition="center"
-          bgSize="cover"
-        />
+        <ModalOverlay />
         <ModalContent
           bg={colors.gray[900]}
           border="1px solid #282828"

diff --git a/src/components/Slider.tsx b/src/components/Slider.tsx
@@ -1,14 +1,15 @@
 import "react-responsive-carousel/lib/styles/carousel.min.css";
 import { Carousel } from "react-responsive-carousel";
-import { CSSProperties, ReactChild } from "react";
+import { CSSProperties, ReactElement } from "react";
+import colors from "../style/colors";
 
 type Props = {
-  children: ReactChild[];
+  children: ReactElement[];
 };
 
 export default function Slider({ children }: Props) {
   const indicatorStyles: CSSProperties = {
-    background: "#C2C2C2",
+    background: colors.gray[400],
     width: "10px",
     height: "10px",
     display: "inline-block",

diff --git a/src/components/SliderItem.tsx b/src/components/SliderItem.tsx
@@ -1,24 +1,23 @@
 import "react-responsive-carousel/lib/styles/carousel.min.css";
 import { CircleIcon, SupportedIcons } from "./CircleIcon";
-import { Box, Text } from "@chakra-ui/react";
+import { Box, Flex, Heading } from "@chakra-ui/react";
 import { SlideritemRecord } from "../graphql/generated";
-import colors from "../style/colors";
 
 export default function SlideItem({ item }: { item: SlideritemRecord }) {
   return (
-    <Box data-testid={`slide-${item.id}`} bg={colors.gray[900]} paddingBottom="35px">
+    <Box data-testid={`slide-${item.id}`} paddingBottom="35px">
       <Box
-        paddingLeft="50px"
-        paddingRight="50px"
         backgroundRepeat="no-repeat"
         backgroundPosition="top"
         __css={{
           backgroundImage: `linear-gradient(to bottom, rgba(245, 246, 252, 0), rgba(0, 0, 0, 1)), url(${item.image?.url})`,
         }}
         height="400px"
       ></Box>
-      <CircleIcon size="58px" icon={item.icon as SupportedIcons} />
-      <Text margin="50px">{item.text}</Text>
+      <Flex flexDirection="column">
+        <CircleIcon size="58px" iconSize="24px" icon={item.icon as SupportedIcons} />
+        <Heading margin="16px 50px 50px 50px">{item.text}</Heading>
+      </Flex>
     </Box>
   );
 }