refactor: refactor button folder name

healthy-food-and-dietary-products · Jan 16, 2024 · 6aa7625 · 6aa7625
1 parent d63aa19
commit 6aa7625
Show file tree

Hide file tree

Showing 5 changed files with 275 additions and 4 deletions.
diff --git a/src/components/button/button.module.scss 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
@@ -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 (
+		<button
+			type={type ? type : 'button'}
+			className={clsx(
+				styles[buttonStyle],
+				classNameActive && styles[classNameActive],
+				classNames
+			)}
+			onClick={onClick}
+			disabled={disabled}
+		>
+			{buttonText}
+		</button>
+	);
+};
+
+export default Button;
diff --git 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<ButtonProps, 'disabled' | 'onClick'> {}
 

diff --git 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
@@ -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';