From dd2c22ec6fa21645bcdca25d36c9406866e344cf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Corte?= Date: Fri, 6 May 2022 12:45:42 -0300 Subject: [PATCH] :sparkles: add buttons: loginButton and basicButton --- .../buttons/basicButton/BasicButton.tsx | 12 +++++++++++ .../buttons/basicButton/BasicButtonView.ts | 20 +++++++++++++++++++ .../buttons/loginButton/LoginButton.tsx | 14 +++++++++++++ .../buttons/loginButton/LoginButtonView.ts | 19 ++++++++++++++++++ 4 files changed, 65 insertions(+) create mode 100644 src/components/buttons/basicButton/BasicButton.tsx create mode 100644 src/components/buttons/basicButton/BasicButtonView.ts create mode 100644 src/components/buttons/loginButton/LoginButton.tsx create mode 100644 src/components/buttons/loginButton/LoginButtonView.ts diff --git a/src/components/buttons/basicButton/BasicButton.tsx b/src/components/buttons/basicButton/BasicButton.tsx new file mode 100644 index 0000000..fd5f3b1 --- /dev/null +++ b/src/components/buttons/basicButton/BasicButton.tsx @@ -0,0 +1,12 @@ +import React from 'react' +import { BasicButtonView } from './BasicButtonView' + +interface BasicButtonInterface { + title: string +} + +export default function BasicButton({ title }: BasicButtonInterface) { + return ( + {title} + ) +} diff --git a/src/components/buttons/basicButton/BasicButtonView.ts b/src/components/buttons/basicButton/BasicButtonView.ts new file mode 100644 index 0000000..7d12ea4 --- /dev/null +++ b/src/components/buttons/basicButton/BasicButtonView.ts @@ -0,0 +1,20 @@ +import styled from 'styled-components' + +export const BasicButtonView = styled.button` + display: flex; + justify-content: center; + align-items: center; + + background: #254F7F; + border-radius: 8px; + + font-family: 'Poppins'; + font-style: normal; + font-weight: 600; + font-size: 16px; + line-height: 24px; + /* identical to box height */ + + + color: #FFFFFF; +` diff --git a/src/components/buttons/loginButton/LoginButton.tsx b/src/components/buttons/loginButton/LoginButton.tsx new file mode 100644 index 0000000..37d374a --- /dev/null +++ b/src/components/buttons/loginButton/LoginButton.tsx @@ -0,0 +1,14 @@ +import React from 'react' +import { LoginButtonView } from './LoginButtonView' + +interface LoginButtonInterface { + title: string +} + +export default function LoginButton({ title }: LoginButtonInterface) { + return ( + + {title} + + ) +} diff --git a/src/components/buttons/loginButton/LoginButtonView.ts b/src/components/buttons/loginButton/LoginButtonView.ts new file mode 100644 index 0000000..337672b --- /dev/null +++ b/src/components/buttons/loginButton/LoginButtonView.ts @@ -0,0 +1,19 @@ +import styled from 'styled-components' + +export const LoginButtonView = styled.button` + width: 100%; + height: 95px; + + border-radius: 8px; + background: linear-gradient(88.75deg, #254F7F 0.18%, #888888 99.28); + + font-family: 'Nunito Sans'; + font-style: normal; + font-weight: 700; + font-size: 32px; + line-height: 44px; + text-align: center; + letter-spacing: 0.03em; + + color: #FFFFFF; +`