From 69bc1a687fb8158a86ff95ad9065c8d603b19f08 Mon Sep 17 00:00:00 2001
From: JoaoSaIvador <j.salvador@kigroup.de>
Date: Mon, 30 Jan 2023 11:08:12 +0000
Subject: [PATCH] fix: text primitive tech debt

---
 .../src/components/Board/Card/CardFooter.tsx  |  4 ++--
 frontend/src/components/Primitives/Text.tsx   |  8 +++++++
 .../components/Primitives/UnorderedList.tsx   | 11 ---------
 .../auth/ForgotPassword/TroubleLogin.tsx      | 23 ++++++++-----------
 .../src/components/auth/LoginForm/index.tsx   | 14 ++++-------
 .../components/auth/SignUp/RegisterForm.tsx   | 23 ++++++++-----------
 frontend/src/stories/Text.stories.tsx         | 12 ++++++++++
 7 files changed, 46 insertions(+), 49 deletions(-)
 delete mode 100644 frontend/src/components/Primitives/UnorderedList.tsx

diff --git a/frontend/src/components/Board/Card/CardFooter.tsx b/frontend/src/components/Board/Card/CardFooter.tsx
index 3b3f223e2..2374165fa 100644
--- a/frontend/src/components/Board/Card/CardFooter.tsx
+++ b/frontend/src/components/Board/Card/CardFooter.tsx
@@ -196,8 +196,8 @@ const CardFooter = ({
             </Button>
             <Text
               size="xs"
+              visible={votesInThisCard.length > 0}
               css={{
-                visibility: votesInThisCard.length > 0 ? 'visible' : 'hidden',
                 width: '10px',
               }}
             >
@@ -248,7 +248,7 @@ const CardFooter = ({
             >
               <Icon name={isCommentsOpened ? 'comment-filled' : 'comment'} />
             </Button>
-            <Text css={{ visibility: comments.length > 0 ? 'visible' : 'hidden' }} size="xs">
+            <Text visible={comments.length > 0} size="xs">
               {comments.length}
             </Text>
           </Flex>
diff --git a/frontend/src/components/Primitives/Text.tsx b/frontend/src/components/Primitives/Text.tsx
index 485a3885b..ba3a9a3ba 100644
--- a/frontend/src/components/Primitives/Text.tsx
+++ b/frontend/src/components/Primitives/Text.tsx
@@ -143,6 +143,14 @@ const Text = styled('span', {
         color: '$primary300',
       },
     },
+    visible: {
+      true: {
+        visibility: 'visible',
+      },
+      false: {
+        visibility: 'hidden',
+      },
+    },
     color: {
       white: {
         color: '$white',
diff --git a/frontend/src/components/Primitives/UnorderedList.tsx b/frontend/src/components/Primitives/UnorderedList.tsx
deleted file mode 100644
index ff45cd602..000000000
--- a/frontend/src/components/Primitives/UnorderedList.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { styled } from '@/styles/stitches/stitches.config';
-
-const UnorderedList = styled('ul', {
-  variants: {
-    variant: {
-      wOutMargin: { m: 0 },
-    },
-  },
-});
-
-export default UnorderedList;
diff --git a/frontend/src/components/auth/ForgotPassword/TroubleLogin.tsx b/frontend/src/components/auth/ForgotPassword/TroubleLogin.tsx
index 26f87d218..e743e1045 100644
--- a/frontend/src/components/auth/ForgotPassword/TroubleLogin.tsx
+++ b/frontend/src/components/auth/ForgotPassword/TroubleLogin.tsx
@@ -21,15 +21,6 @@ const MainContainer = styled('form', Flex, {
   width: '100%',
 });
 
-const GoBackWrapper = styled(Flex, {
-  mt: '$24',
-  textAlign: 'center',
-  '&:hover': {
-    textDecorationLine: 'underline',
-    cursor: 'pointer',
-  },
-});
-
 interface TroubleLoginProps {
   setShowTroubleLogin: Dispatch<SetStateAction<boolean>>;
 }
@@ -87,10 +78,16 @@ const TroubleLogin: React.FC<TroubleLoginProps> = ({ setShowTroubleLogin }) => {
         <Button size="lg" type="submit">
           Recover password
         </Button>
-        <GoBackWrapper align="center" gap="8" onClick={handleShowTroubleLogginIn}>
-          <Icon name="arrow-left" />
-          <Text>Go back</Text>
-        </GoBackWrapper>
+        <Flex>
+          <Button
+            variant="link"
+            css={{ pl: '0', mt: '$24', color: '$primary500' }}
+            onClick={handleShowTroubleLogginIn}
+          >
+            <Icon name="arrow-long-left" />
+            Go Back
+          </Button>
+        </Flex>
       </FormProvider>
     </MainContainer>
   );
diff --git a/frontend/src/components/auth/LoginForm/index.tsx b/frontend/src/components/auth/LoginForm/index.tsx
index d609c85df..e85471745 100644
--- a/frontend/src/components/auth/LoginForm/index.tsx
+++ b/frontend/src/components/auth/LoginForm/index.tsx
@@ -132,21 +132,15 @@ const LoginForm: React.FC<LoginFormProps> = ({ setShowTroubleLogin }) => {
           {loading.credentials && <DotsLoading color="primary800" size={10} />}
           {!loading.credentials && 'Log in'}
         </Button>
-        <Text
+        <Button
           data-testid="forgot-password-button"
+          variant="link"
           size="sm"
-          css={{
-            alignSelf: 'center',
-            mt: '$16',
-            '&:hover': {
-              textDecorationLine: 'underline',
-              cursor: 'pointer',
-            },
-          }}
+          css={{ color: '$primary500', mt: '$16' }}
           onClick={handleShowTroubleLogginIn}
         >
           Forgot password
-        </Text>
+        </Button>
         {AUTH_SSO && (
           <Flex align="center" direction="column" justify="center">
             <OrSeparator>
diff --git a/frontend/src/components/auth/SignUp/RegisterForm.tsx b/frontend/src/components/auth/SignUp/RegisterForm.tsx
index efd5d6772..66efcb1ff 100644
--- a/frontend/src/components/auth/SignUp/RegisterForm.tsx
+++ b/frontend/src/components/auth/SignUp/RegisterForm.tsx
@@ -24,15 +24,6 @@ import { SignUpEnum } from '@/utils/signUp.enum';
 
 const StyledForm = styled('form', Flex, { width: '100%' });
 
-const GoBackWrapper = styled(Flex, {
-  mt: '$24',
-  textAlign: 'center',
-  '&:hover': {
-    textDecorationLine: 'underline',
-    cursor: 'pointer',
-  },
-});
-
 interface RegisterFormProps {
   emailName: { email: string; goback: boolean };
   setShowSignUp: Dispatch<React.SetStateAction<SignUpEnum>>;
@@ -148,10 +139,16 @@ const RegisterForm: React.FC<RegisterFormProps> = ({
         >
           Sign up
         </Button>
-        <GoBackWrapper align="center" gap="8" onClick={handleShowSignUp}>
-          <Icon css={{ width: '$20', height: '$20' }} name="arrow-long-left" />
-          <Text>Go back</Text>
-        </GoBackWrapper>
+        <Flex>
+          <Button
+            variant="link"
+            css={{ pl: '0', mt: '$24', color: '$primary500' }}
+            onClick={handleShowSignUp}
+          >
+            <Icon name="arrow-long-left" />
+            Go Back
+          </Button>
+        </Flex>
       </StyledForm>
     </FormProvider>
   );
diff --git a/frontend/src/stories/Text.stories.tsx b/frontend/src/stories/Text.stories.tsx
index 27aee4365..7d4fff5ae 100644
--- a/frontend/src/stories/Text.stories.tsx
+++ b/frontend/src/stories/Text.stories.tsx
@@ -54,6 +54,9 @@ const DISABLE_ARG_TYPES = {
   size: {
     control: false,
   },
+  visible: {
+    control: false,
+  },
 };
 
 export default {
@@ -151,6 +154,15 @@ export default {
         type: { summary: COLOR_OPTIONS.join('|') },
       },
     },
+    visible: {
+      control: { type: 'boolean' },
+      description: 'Controls the component visibility.',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'true' },
+      },
+      defaultValue: true,
+    },
   },
 };