TACT-111: Goal setting rework

components/pages/Goals/components/EmptyGoalListMessage/EmptyGoalListMessage.tsx

@@ -0,0 +1,36 @@
+import { Flex, Text } from "@chakra-ui/react";
+import ImageComponent from "../../../../shared/Image";
+import mascotGoals from "../../../../../assets/images/mascot-goals.png";
+import { GoalCreateNewButton } from "../GoalCreateNewButton";
+import React from "react";
+
+export function EmptyGoalListMessage() {
+  return (
+    <Flex
+      flexDirection='column'
+      alignItems='center'
+      justifyContent='center'
+      maxW={500}
+      margin='auto'
+      pt={10}
+    >
+      <ImageComponent src={mascotGoals} width={336} />
+      <Text
+        fontSize='sm'
+        fontWeight='normal'
+        color='gray.700'
+        textAlign='center'
+        mt={4}
+        mb={6}
+        lineHeight={5}
+      >
+        You can define a meaningful destination point that will
+        help you focus and&nbsp;complete only essential things that
+        bring you closer to it, postponing or&nbsp;canceling the rest.
+      </Text>
+      <GoalCreateNewButton withHotkey>
+        Create new goal 🎯
+      </GoalCreateNewButton>
+    </Flex>
+  );
+}

components/pages/Goals/components/GoalCreateNewButton/index.tsx

@@ -1,34 +1,60 @@
 import { observer } from 'mobx-react-lite';
-import { Box, Button, Text } from '@chakra-ui/react';
-import { LargePlusIcon } from '../../../../shared/Icons/LargePlusIcon';
+import { Button, Text, ButtonProps } from '@chakra-ui/react';
 import { useGoalsStore } from '../../store';
+import React from 'react';
+import { HotkeyBlock } from '../../../../shared/HotkeyBlock';
+import { Tooltip } from "../../../../shared/Tooltip";
 
-export const GoalCreateNewButton = observer(function GoalCreateNewButton() {
-  const store = useGoalsStore();
+type Props = ButtonProps & {
+  withHotkey?: boolean;
+  withTooltip?: boolean;
+}
 
-  return (
-    <Button
-      onClick={store.startGoalCreation}
-      size='xl'
-      display='inline-flex'
-      flexDirection='column'
-      alignItems='center'
-      borderRadius='xl'
-      h={60}
-      w={56}
-      pt={6}
-      pl={14}
-      pr={14}
-      pb={6}
-      mb={10}
-      mr={10}
-    >
-      <Box mb={6}>
-        <LargePlusIcon />
-      </Box>
-      <Text fontSize='lg' fontWeight='semibold' color='gray.400'>
-        New goal
-      </Text>
-    </Button>
-  );
-});
+export const GoalCreateNewButton = observer(
+  function GoalCreateNewButton({ children, withHotkey, withTooltip, ...buttonProps }: Props) {
+    const store = useGoalsStore();
+
+    return (
+      <>
+        <Tooltip
+          isDisabled={!withTooltip}
+          label='Create goal'
+          hotkey={withHotkey ? 'Press N' : ''}
+          placement='left'
+        >
+          <Button
+            onClick={store.startGoalCreation}
+            size='md'
+            minH={8}
+            mb={2}
+            bg='blue.400'
+            color='white'
+            _hover={{
+              bg: 'blue.500',
+            }}
+            _focus={{
+              boxShadow: 'var(--chakra-shadows-outline)',
+              outline: 'none',
+            }}
+            {...buttonProps}
+          >
+            {children}
+          </Button>
+        </Tooltip>
+        {withHotkey && !withTooltip && (
+          <Text
+            fontSize='xs'
+            fontWeight='normal'
+            lineHeight={4}
+            color='gray.400'
+            display='flex'
+            justifyContent='center'
+          >
+            Press
+            <HotkeyBlock hotkey='N' ml={1} fontSize='xs' lineHeight={4} />
+          </Text>
+        )}
+      </>
+    );
+  }
+);