feat: create button variant

src/components/Button.tsx

@@ -3,26 +3,33 @@ import { ComponentProps } from "react";
 
 type Props = ComponentProps<typeof GSButton> & {
   title: string,
+  variant?: 'solid' | 'outline',
   isLoading?: boolean,
 }
 
-export function Button({ title, isLoading = false, ...others }: Props) {
+export function Button({
+  title,
+  isLoading = false,
+  variant = 'solid',
+  ...others
+}: Props) {
   return (
     <GSButton
       w="$full"
       h="$14"
-      bg="$green700"
+      bg={variant === 'solid' ? '$green700' : 'transparent'}
       rounded="$sm"
+      borderWidth={variant === 'solid' ? '$0' : '$1'}
       borderColor="$green500"
-      $active-bg="$green500"
+      $active-bg={variant === 'solid' ? '$green500' : '$gray500'}
       disabled={isLoading}
       {...others}
     >
       { isLoading ? (
-        <ButtonSpinner color="$white" />
+        <ButtonSpinner color={ variant === 'solid' ? '$white' : '$green500'} />
       ) : (
         <Text
-          color="$white"
+          color={ variant === 'solid' ? '$white' : '$green500'}
           fontFamily="$heading"
           fontSize="$sm"
         >

src/screens/SignIn.tsx

@@ -47,6 +47,23 @@ export function SignIn() {
             title="Acessar"
           />
         </Center>
+
+        <Center
+          flex={1}
+          justifyContent="flex-end"
+          mt="$4"
+        >
+          <Text
+            color="$gray100"
+            fontSize="$sm"
+            mb="$3"
+            fontFamily="$body"
+          >
+            Ainda não tem acesso?
+          </Text>
+
+          <Button title="Criar Conta" variant="outline" />
+        </Center>
       </VStack>
     </VStack>
   )