From d42ee94149ce1b8327245da3802910c684712e27 Mon Sep 17 00:00:00 2001
From: Sergey Kintsel <sergey.kintsel@trili.tech>
Date: Sat, 21 Oct 2023 12:39:46 +0100
Subject: [PATCH] Adjust help & settings pages to design

---
 src/assets/icons/ChevronDown.tsx           |   3 +-
 src/components/ClickableCard.tsx           |  42 +++++----
 src/views/help/HelpView.tsx                | 104 +++++++++------------
 src/views/settings/BeaconDrawerCard.tsx    |   2 +-
 src/views/settings/ErrorLogsDrawerCard.tsx |   2 +-
 src/views/settings/SettingsView.tsx        |  21 +++--
 6 files changed, 84 insertions(+), 90 deletions(-)

diff --git a/src/assets/icons/ChevronDown.tsx b/src/assets/icons/ChevronDown.tsx
index b246ca8f18..b75a6b1fd5 100644
--- a/src/assets/icons/ChevronDown.tsx
+++ b/src/assets/icons/ChevronDown.tsx
@@ -4,17 +4,16 @@ import colors from "../../style/colors";
 const ChevronDownIcon: React.FC<IconProps> = props => {
   return (
     <Icon
-      data-testid="baker-icon"
       width="18px"
       height="18px"
       viewBox="0 0 18 18"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
+      stroke={colors.gray[450]}
       {...props}
     >
       <path
         d="M4.5 6.75L9 11.25L13.5 6.75"
-        stroke={colors.gray[450]}
         strokeWidth="1.2"
         strokeLinecap="round"
         strokeLinejoin="round"
diff --git a/src/components/ClickableCard.tsx b/src/components/ClickableCard.tsx
index e5b6ef4769..40d7b2d4a0 100644
--- a/src/components/ClickableCard.tsx
+++ b/src/components/ClickableCard.tsx
@@ -1,23 +1,30 @@
-import { Card, CardBody, Flex, Heading, LayoutProps } from "@chakra-ui/react";
+import { Card, CardBody, CardProps, Flex, Heading } from "@chakra-ui/react";
 import colors from "../style/colors";
 import { ChevronRightIcon } from "@chakra-ui/icons";
 
-const ClickableCard: React.FC<{
-  onClick?: () => void;
-  h?: LayoutProps["h"];
-  children: React.ReactNode;
-}> = ({ onClick, h, children }) => {
+const ClickableCard: React.FC<
+  {
+    onClick?: () => void;
+    children: React.ReactNode;
+    isSelected: boolean;
+  } & CardProps
+> = ({ onClick, children, isSelected, ...props }) => {
   return (
     <Card
-      paddingX={1}
-      marginY={2}
+      height="66px"
+      padding="24px"
+      marginBottom="10px"
       bgColor={colors.gray[900]}
       borderRadius="lg"
+      border="1px solid"
+      borderColor={isSelected ? ` ${colors.orangeL}` : "transparent"}
+      _hover={{ border: `1px solid ${colors.gray[500]}`, bg: colors.gray[800] }}
       justifyContent="center"
       cursor={onClick ? "pointer" : undefined}
-      h={h}
+      onClick={onClick}
+      {...props}
     >
-      <CardBody onClick={onClick}>{children}</CardBody>
+      <CardBody padding={0}>{children}</CardBody>
     </Card>
   );
 };
@@ -26,9 +33,10 @@ export const SettingsCard: React.FC<{
   left: string;
   onClick?: () => void;
   children: React.ReactNode;
-}> = ({ left, onClick, children }) => {
+  isSelected: boolean;
+}> = ({ left, onClick, isSelected, children }) => {
   return (
-    <ClickableCard onClick={onClick} h="66px">
+    <ClickableCard onClick={onClick} isSelected={isSelected}>
       <Flex alignItems="center" h="100%">
         <Flex justifyContent="space-between" alignItems="center" w="100%">
           <Heading size="sm">{left}</Heading>
@@ -41,19 +49,17 @@ export const SettingsCard: React.FC<{
 
 export const SettingsCardWithDrawerIcon: React.FC<{
   left: string;
+  isSelected: boolean;
   onClick?: () => void;
-}> = ({ left, onClick }) => {
+}> = ({ left, isSelected, onClick }) => {
   return (
-    <SettingsCard left={left} onClick={onClick}>
+    <SettingsCard left={left} onClick={onClick} isSelected={isSelected}>
       <ChevronRightIcon
         viewBox="0 0 18 18"
         height="18px"
         width="18px"
         marginTop="-3px"
-        color={colors.gray[450]}
-        _hover={{
-          color: colors.gray[300],
-        }}
+        stroke={colors.gray[450]}
       />
     </SettingsCard>
   );
diff --git a/src/views/help/HelpView.tsx b/src/views/help/HelpView.tsx
index 451d459549..a0674f7f9c 100644
--- a/src/views/help/HelpView.tsx
+++ b/src/views/help/HelpView.tsx
@@ -1,11 +1,11 @@
 import { Flex, Grid, GridItem } from "@chakra-ui/layout";
-import { Box, Text, Divider, Heading, Icon } from "@chakra-ui/react";
-import { FiExternalLink } from "react-icons/fi";
+import { Box, Text, Heading, Center } from "@chakra-ui/react";
 import React from "react";
 import { TopBar } from "../../components/TopBar";
 import colors from "../../style/colors";
-import ClickableCard from "../../components/ClickableCard";
+import ClickableCard, { SettingsCard } from "../../components/ClickableCard";
 import { navigateToExternalLink } from "../../utils/helpers";
+import ExternalLinkIcon from "../../assets/icons/ExternalLink";
 
 export default function HelpView() {
   return (
@@ -52,50 +52,39 @@ export default function HelpView() {
           />
         </HelpCard>
 
-        <HelpCard title="Need Help?">
-          <Box>
-            <Flex justifyContent="space-between" alignItems="center">
-              <Heading size="sm">Contact our Support Team</Heading>
-              <Flex
-                alignItems="center"
-                color={colors.gray[400]}
-                _hover={{
-                  color: colors.gray[300],
-                }}
-                cursor="pointer"
-                onClick={() => navigateToExternalLink("mailto:umami-support@trili.tech")}
-              >
-                <Text size="sm">umami-support@trili.tech</Text>
-                <Icon as={FiExternalLink} ml={2} />
-              </Flex>
-            </Flex>
-
-            <Box marginY={4}>
-              <Divider orientation="horizontal" size="lg" />
-            </Box>
-
-            <Flex justifyContent="space-between" alignItems="center">
-              <Heading size="sm">Get in touch with the Community</Heading>
-
-              <Flex
-                alignItems="center"
-                color={colors.gray[400]}
-                _hover={{
-                  color: colors.gray[300],
-                }}
-                cursor="pointer"
-                onClick={() =>
-                  navigateToExternalLink(
-                    "https://join.slack.com/t/tezos-dev/shared_invite/zt-1ur1ymxrp-G_X_bFHrvWXwoeiy53J8lg"
-                  )
-                }
-              >
-                <Text size="sm">Slack #Umami</Text>
-                <Icon as={FiExternalLink} ml={2} />
-              </Flex>
-            </Flex>
-          </Box>
-        </HelpCard>
+        <Box w="550px" data-testid="help-card">
+          <Heading size="lg" mb="16px">
+            Need Help?
+          </Heading>
+          <SettingsCard
+            left="Contact our Support Team"
+            onClick={() => navigateToExternalLink("mailto:umami-support@trili.tech")}
+            isSelected={false}
+          >
+            <Center>
+              <Text size="sm" color={colors.gray[300]}>
+                umami-support@trili.tech
+              </Text>
+              <ExternalLinkIcon ml="4px" />
+            </Center>
+          </SettingsCard>
+          <SettingsCard
+            isSelected={false}
+            left="Get in touch with the Community"
+            onClick={() =>
+              navigateToExternalLink(
+                "https://join.slack.com/t/tezos-dev/shared_invite/zt-1ur1ymxrp-G_X_bFHrvWXwoeiy53J8lg"
+              )
+            }
+          >
+            <Center>
+              <Text size="sm" color={colors.gray[300]}>
+                Slack #Umami
+              </Text>
+              <ExternalLinkIcon ml="4px" />
+            </Center>
+          </SettingsCard>
+        </Box>
 
         <HelpCard
           title="Terms of Use"
@@ -138,16 +127,7 @@ const HelpLinkRow: React.FC<{
             {linkDescription}
           </Text>
         )}
-        <Icon
-          cursor="pointer"
-          color={colors.gray[600]}
-          as={FiExternalLink}
-          _hover={{
-            color: colors.gray[300],
-          }}
-          onClick={onClickIcon}
-          ml={2}
-        />
+        <ExternalLinkIcon />
       </Flex>
     </Flex>
   );
@@ -159,11 +139,15 @@ const HelpCard: React.FC<{
   children: React.ReactNode;
 }> = ({ title, onClick, children }) => {
   return (
-    <Box marginY={2} data-testid="help-card">
+    <Box marginY="10px" data-testid="help-card">
       <Flex>
         <Box w="550px">
-          <Heading size="lg">{title}</Heading>
-          <ClickableCard onClick={onClick}>{children}</ClickableCard>
+          <Heading size="lg" mb="16px">
+            {title}
+          </Heading>
+          <ClickableCard onClick={onClick} isSelected={false}>
+            {children}
+          </ClickableCard>
         </Box>
       </Flex>
     </Box>
diff --git a/src/views/settings/BeaconDrawerCard.tsx b/src/views/settings/BeaconDrawerCard.tsx
index dfcdfca429..e2453756d3 100644
--- a/src/views/settings/BeaconDrawerCard.tsx
+++ b/src/views/settings/BeaconDrawerCard.tsx
@@ -21,7 +21,7 @@ export const BeaconDrawerCard = () => {
   const { isOpen: isDynamicModalOpen } = useDynamicModal();
   return (
     <>
-      <SettingsCardWithDrawerIcon left="dApps" onClick={onOpen} />
+      <SettingsCardWithDrawerIcon left="dApps" onClick={onOpen} isSelected={isOpen} />
       <Drawer
         blockScrollOnMount={!isDynamicModalOpen}
         isOpen={isOpen}
diff --git a/src/views/settings/ErrorLogsDrawerCard.tsx b/src/views/settings/ErrorLogsDrawerCard.tsx
index 7a7820d3a3..3dcfeda59c 100644
--- a/src/views/settings/ErrorLogsDrawerCard.tsx
+++ b/src/views/settings/ErrorLogsDrawerCard.tsx
@@ -30,7 +30,7 @@ const ErrorLogsDrawerCard = () => {
 
   return (
     <>
-      <SettingsCardWithDrawerIcon left="ErrorLogs" onClick={onOpen} />
+      <SettingsCardWithDrawerIcon left="ErrorLogs" onClick={onOpen} isSelected={isOpen} />
       <Drawer
         blockScrollOnMount={!isDynamicModalOpen}
         isOpen={isOpen}
diff --git a/src/views/settings/SettingsView.tsx b/src/views/settings/SettingsView.tsx
index 54433e5ab2..4d1d59f711 100644
--- a/src/views/settings/SettingsView.tsx
+++ b/src/views/settings/SettingsView.tsx
@@ -14,7 +14,9 @@ export default function SettingsView() {
     <Flex direction="column" height="100%">
       <TopBar title="Settings" />
       <Box overflowY="scroll">
-        <GeneralSection />
+        <Box marginTop="16px">
+          <GeneralSection />
+        </Box>
         <AppUpdatesSection />
         <BackupSection />
         <AdvancedSection />
@@ -36,10 +38,8 @@ const GeneralSection = () => {
           </Flex>
         </SettingsCard>
       */}
-      <SettingsCard left="Network">
-        <Box>
-          <NetworkSelector />
-        </Box>
+      <SettingsCard left="Network" isSelected={false}>
+        <NetworkSelector />
       </SettingsCard>
       <ErrorLogsDrawerCard />
     </SectionContainer>
@@ -129,8 +129,13 @@ const AdvancedSection = () => {
         TODO: implement this
         <SettingsCardWithDrawerIcon left="Reset Settings" onClick={() => {}} />
       */}
-      <SettingsCardWithDrawerIcon left="Off-board Wallet" onClick={onOpenOffboardingModal} />
       <SettingsCardWithDrawerIcon
+        left="Off-board Wallet"
+        onClick={onOpenOffboardingModal}
+        isSelected={false}
+      />
+      <SettingsCardWithDrawerIcon
+        isSelected={false}
         left="Change Password"
         onClick={() => openWith(<ChangePasswordForm />)}
       />
@@ -144,10 +149,10 @@ const SectionContainer: React.FC<{
   children: React.ReactNode;
 }> = ({ title, children }) => {
   return (
-    <Box marginY={2}>
+    <Box marginTop="8px">
       <Flex>
         <Box w="550px">
-          <Heading size="lg" marginY={3}>
+          <Heading size="lg" marginBottom="16px">
             {title}
           </Heading>
           {children}