From bbc35f63e848a1f5918ad942ed3a81861ac2093f Mon Sep 17 00:00:00 2001
From: Zlatko Fedor <zfedor@gmail.com>
Date: Wed, 19 Jan 2022 18:13:46 +0100
Subject: [PATCH] updated welcome page and added buttons for action

---
 packages/core/src/components/Card/Card.tsx    |  16 ++-
 .../gui/src/components/app/AppSelectMode.tsx  | 100 ++++++++++++------
 2 files changed, 80 insertions(+), 36 deletions(-)

diff --git a/packages/core/src/components/Card/Card.tsx b/packages/core/src/components/Card/Card.tsx
index 54c957d9cd..1db8926bd5 100644
--- a/packages/core/src/components/Card/Card.tsx
+++ b/packages/core/src/components/Card/Card.tsx
@@ -22,6 +22,14 @@ const StyledCardMaterial = styled(({ cursor, opacity, clickable, fullHeight, ...
   height: ${({ fullHeight }) => fullHeight ? '100%': 'auto'};
 `;
 
+const StyledCardContent = styled(({ fullHeight, ...rest }) => (
+  <CardContent {...rest}/>
+))`
+  display: flex;
+  flex-direction: column;
+  height: ${({ fullHeight }) => fullHeight ? '100%': 'auto'};
+`;
+
 type Props = {
   children?: ReactNode;
   title?: ReactNode;
@@ -65,9 +73,9 @@ export default function Card(props: Props) {
           </Flex>
         </StyledCardTitle>
       )}
-      <CardContent>
-        <Flex flexDirection="column" gap={3}>
-          <Flex flexDirection="column" gap={gap}>
+      <StyledCardContent fullHeight={fullHeight}>
+        <Flex flexDirection="column" gap={3} flexGrow={1}>
+          <Flex flexDirection="column" gap={gap} flexGrow={1}>
             {children}
           </Flex>
           {actions && (
@@ -76,7 +84,7 @@ export default function Card(props: Props) {
             </Grid>
           )}
         </Flex>
-      </CardContent>
+      </StyledCardContent>
     </StyledCardMaterial>
   );
 }
diff --git a/packages/gui/src/components/app/AppSelectMode.tsx b/packages/gui/src/components/app/AppSelectMode.tsx
index 78e17a676e..f25c0dcd1d 100644
--- a/packages/gui/src/components/app/AppSelectMode.tsx
+++ b/packages/gui/src/components/app/AppSelectMode.tsx
@@ -1,11 +1,12 @@
 import React from 'react';
 import { Trans } from '@lingui/macro';
 import styled from 'styled-components';
-import { Flex, Logo, Card, useMode, Mode, Tooltip } from '@chia/core';
+import { Button, Flex, Logo, Card, useMode, Mode, Tooltip } from '@chia/core';
 import { 
   AccountBalanceWallet as AccountBalanceWalletIcon, 
   Eco as EcoIcon,
   Settings as SettingsIcon,
+  Check as CheckIcon,
 } from '@material-ui/icons';
 import { Box, Typography, Container, Grid } from '@material-ui/core';
 
@@ -14,7 +15,11 @@ const StyledSettingsIcon = styled(SettingsIcon)`
 `;
 
 const StyledCardContent = styled(Box)`
-  padding: 3rem 0rem;
+  display: flex;
+  padding: 0.5rem 0rem;
+  flex-direction: column;
+  height: 100%;
+  flex-grow: 1;
 `;
 
 const StyledContainer = styled(Container)`
@@ -54,24 +59,39 @@ export default function AppSelectMode() {
           <Grid xs={12} sm={6} item>
             <Card onSelect={() => handleModeChange(Mode.WALLET)} fullHeight>
               <StyledCardContent>
-                <Flex flexDirection="column" gap={2} alignItems="center">
-                  <StyledAccountBalanceWalletIcon />
-
-                  <Typography variant="h5" align="center">
-                    <Trans>Wallet Mode</Trans>
-                  </Typography>
+                <Flex flexDirection="column" gap={4} flexGrow={1} alignItems="center">
+                  <Flex flexDirection="column" gap={1} alignItems="center">
+                    <StyledAccountBalanceWalletIcon />
 
-                  <Flex flexDirection="column" gap={0.5}>
-                    <Typography variant="body2" align="center">
-                      <Trans>Store and Send XCH</Trans>
-                    </Typography>
-                    <Typography variant="body2" align="center">
-                      <Trans>Manage CAT tokens</Trans>
-                    </Typography>
-                    <Typography variant="body2" align="center">
-                      <Trans>Trade tokens</Trans>
+                    <Typography variant="h5" align="center">
+                      <Trans>Wallet Mode</Trans>
                     </Typography>
                   </Flex>
+
+                  <Flex flexDirection="column" gap={0.5} flexGrow={1}>
+                    <Flex gap={1}>
+                      <CheckIcon color="primary" />
+                      <Typography variant="body2">
+                        <Trans>Store and Send XCH</Trans>
+                      </Typography>
+                    </Flex>
+                    <Flex gap={1}>
+                      <CheckIcon color="primary" />
+                      <Typography variant="body2">
+                        <Trans>Manage CAT tokens</Trans>
+                      </Typography>
+                    </Flex>
+                    <Flex gap={1}>
+                      <CheckIcon color="primary" />
+                      <Typography variant="body2">
+                        <Trans>Trade tokens</Trans>
+                      </Typography>
+                    </Flex>
+                  </Flex>
+
+                  <Button variant="outlined" fullWidth>
+                    <Trans>Choose Wallet Mode</Trans>
+                  </Button>
                 </Flex>
               </StyledCardContent>
             </Card>
@@ -79,27 +99,43 @@ export default function AppSelectMode() {
           <Grid xs={12} sm={6} item>
             <Card onSelect={() => handleModeChange(Mode.FARMING)} fullHeight>
               <StyledCardContent>
-                <Flex flexDirection="column" gap={2} alignItems="center">
-                  <StyledEcoIcon />
+                <Flex flexDirection="column" gap={4} alignItems="center">
+                  <Flex flexDirection="column" gap={1} alignItems="center">
+                    <StyledEcoIcon />
 
-                  <Typography variant="h5" align="center">
-                    <Trans>Farming Mode</Trans>
-                  </Typography>
-
-                  <Flex flexDirection="column" gap={0.5}>
-                    <Typography variant="body2" align="center">
-                      <Trans>Wallet Mode</Trans>
+                    <Typography variant="h5" align="center">
+                      <Trans>Farming Mode</Trans>
                     </Typography>
+                  </Flex>
+
+                  <Flex flexDirection="column" gap={0.5} flexGrow={1}>
+                    <Flex gap={1}>
+                      <CheckIcon color="primary" />
+                      <Typography variant="body2">
+                        <Trans>Wallet Mode</Trans>
+                      </Typography>
+                    </Flex>
+
                     <Typography variant="body2" align="center">
                       <Trans>+</Trans>
                     </Typography>
-                    <Typography variant="body2" align="center">
-                      <Trans>Create &amp; Manage plots</Trans>
-                    </Typography>
-                    <Typography variant="body2" align="center">
-                      <Trans>Join farming pools</Trans>
-                    </Typography>
+                    <Flex gap={1}>
+                      <CheckIcon color="primary" />
+                      <Typography variant="body2">
+                        <Trans>Create &amp; Manage plots</Trans>
+                      </Typography>
+                    </Flex>
+                    <Flex gap={1}>
+                      <CheckIcon color="primary" />
+                      <Typography variant="body2">
+                        <Trans>Join farming pools</Trans>
+                      </Typography>
+                    </Flex>
                   </Flex>
+
+                  <Button color="primary" variant="outlined" fullWidth>
+                    <Trans>Choose Farming Mode</Trans>
+                  </Button>
                 </Flex>
               </StyledCardContent>
             </Card>