From 6aa76252fd43ce8514f4feb7494fc75ce8efb553 Mon Sep 17 00:00:00 2001 From: kavabunga Date: Tue, 16 Jan 2024 15:49:44 +0200 Subject: [PATCH] refactor: refactor button folder name --- src/components/button/button.module.scss | 228 ++++++++++++++++++++++ src/components/button/index.tsx | 43 ++++ src/components/making-order-btn/index.tsx | 4 +- src/components/payment-button/index.tsx | 2 +- src/pages/product/index.tsx | 2 +- 5 files changed, 275 insertions(+), 4 deletions(-) create mode 100644 src/components/button/button.module.scss create mode 100644 src/components/button/index.tsx diff --git a/src/components/button/button.module.scss b/src/components/button/button.module.scss new file mode 100644 index 00000000..75f6be7d --- /dev/null +++ b/src/components/button/button.module.scss @@ -0,0 +1,228 @@ +@use '@scss/_variables.scss' as *; +@use '@scss/_mixins' as *; + +.green-button { + padding: 0; + display: flex; + width: 161px; + height: 36px; + justify-content: center; + align-items: center; + background: $accent-color-dirty-green; + border: none; + border-radius: 8px; + color: #fff; + font-family: $ubuntu-font; + font-size: 14px; + font-weight: 400; + line-height: 20px; + cursor: pointer; + + &:hover { + background: $accent-color-bright-green; + } + + transition: 0.5s; + + &:disabled { + background-color: $accent-color-lightest-green; + cursor: initial; + } +} + +.green-button__active { + padding: 0; + display: flex; + width: 161px; + height: 36px; + justify-content: center; + align-items: center; + background: $accent-color-darkgreen; + border: none; + border-radius: 8px; + color: #fff; + font-family: $ubuntu-font; + font-size: 14px; + font-weight: 400; + line-height: 20px; + cursor: pointer; +} + +.header-button { + @extend %zero-padding-margin; + + display: flex; + height: 51px; + width: 117px; + padding: 8px 16px; + justify-content: center; + align-items: center; + color: #1a1a1a; + border-radius: 16px; + border: 1px solid var(--primary-700, #2b7a0f); + box-sizing: border-box; + + /* text */ + font-family: $ubuntu-font; + font-size: 22px; + font-style: normal; + font-weight: 500; + line-height: 140%; + + &:hover { + background: $accent-color-bright-green; + border: none; + color: white; + } + + &:active { + background: $accent-color-darkgreen; + } + + transition: 0.5s; +} + +.greenish-button { + @extend %zero-padding-margin; + + border: none; + display: flex; + max-width: 300px; + width: fit-content; + height: 40px; + padding: 8px 12px; + justify-content: center; + align-items: center; + border-radius: 16px; + background: #fff; + + /* text */ + font-family: $ubuntu-font; + font-size: 18px; + font-weight: 400; + line-height: 140%; + color: #000; + white-space: nowrap; + + @media screen and (width <= 768px) { + font-size: 13px; + } + + &:not(.greenish-button__active):hover { + color: #000; + background: $light-background-color; + } + + transition: 0.5s; +} + +.greenish-button__active { + color: #fff; + background: $dirty-greenish-color; +} + +.green-border-button { + @extend %default-button-text; + + display: flex; + background-color: white; + align-items: center; + border: 1px solid #59bf35; + justify-content: center; + border-radius: 16px; + padding: 8px 13px; + max-width: 140px; + width: 100%; + height: 50px; + cursor: pointer; + white-space: nowrap; + + &:not(.green-border-button__active):hover { + color: white; + background-color: $accent-color-bright-green; + } + + transition: 0.5s; + + @media screen and (width <= 768px) { + font-size: 13px; + max-width: 94px; + max-height: 34px; + border-radius: 12px; + } +} + +.green-border-button__active { + @extend %default-button-text; + + color: white; + background-color: $accent-color-darkgreen; + align-items: center; + justify-content: center; + border: none; + border-radius: 16px; + cursor: pointer; + display: flex; + padding: 8px 13px; + max-width: 140px; + width: 100%; + height: 50px; + transition: 0.5s; + white-space: nowrap; + + @media screen and (width <= 768px) { + font-size: 13px; + max-width: 94px; + max-height: 34px; + border-radius: 12px; + } +} + +.cart-button { + @extend %default-button-text; + + color: white; + display: flex; + background-color: $form-button-color; + align-items: center; + justify-content: center; + border: none; + border-radius: 16px; + padding: 8px 16px; + max-width: 140px; + width: 100%; + height: 50px; + cursor: pointer; + text-align: center; + + &:not(.green-border-button__active):hover { + color: white; + background-color: $accent-color-darkgreen; + } + + transition: 0.5s; + + @media screen and (width <= 768px) { + font-size: 13px; + max-width: 94px; + max-height: 34px; + border-radius: 12px; + } +} + +.cart-button__active { + @extend %default-button-text; + + display: flex; + color: white; + background-color: $accent-color-darkgreen; + align-items: center; + justify-content: center; + border: none; + border-radius: 16px; + padding: 16px; + max-width: 300px; + width: fit-content; + height: 40px; + cursor: pointer; +} diff --git a/src/components/button/index.tsx b/src/components/button/index.tsx new file mode 100644 index 00000000..da9e54e8 --- /dev/null +++ b/src/components/button/index.tsx @@ -0,0 +1,43 @@ +import clsx from 'clsx'; +import styles from './button.module.scss'; + +export type ButtonProps = { + buttonText: string; + buttonStyle: + | 'green-border-button' + | 'green-border-button__active' + | 'greenish-button' + | 'green-button'; + classNameActive?: 'greenish-button__active' | ''; + onClick?: () => void; + disabled?: boolean; + classNames?: string; + type?: 'button' | 'submit' | 'reset'; +}; + +const Button = ({ + buttonText, + buttonStyle, + classNameActive, + onClick, + disabled, + classNames, + type, +}: ButtonProps) => { + return ( + + ); +}; + +export default Button; diff --git a/src/components/making-order-btn/index.tsx b/src/components/making-order-btn/index.tsx index 8c6c7922..d3d06043 100644 --- a/src/components/making-order-btn/index.tsx +++ b/src/components/making-order-btn/index.tsx @@ -1,7 +1,7 @@ import React from 'react'; import styles from './making-order-btn.module.scss'; -import Button from '@components/Button'; -import type { ButtonProps } from '@components/Button'; +import Button from '@components/button'; +import type { ButtonProps } from '@components/button'; interface MakingOrderBtnProps extends Pick {} diff --git a/src/components/payment-button/index.tsx b/src/components/payment-button/index.tsx index aa1b6884..b7cc8b1d 100644 --- a/src/components/payment-button/index.tsx +++ b/src/components/payment-button/index.tsx @@ -1,6 +1,6 @@ import { useState } from 'react'; import api from '@services/api'; -import Button from '@components/Button'; +import Button from '@components/button'; import styles from './payment-button.module.scss'; type PaymentButtonProps = { diff --git a/src/pages/product/index.tsx b/src/pages/product/index.tsx index ad968d9a..03e149ae 100644 --- a/src/pages/product/index.tsx +++ b/src/pages/product/index.tsx @@ -1,6 +1,6 @@ import React, { useEffect } from 'react'; import styles from './product.module.scss'; -import Button from '@components/Button'; +import Button from '@components/button'; import { useParams } from 'react-router'; import api from '@services/api.ts'; import Preloader from '@components/preloader';