chore: limit order ui

package.json

@@ -83,6 +83,7 @@
 		"redux": "4.1.2",
 		"redux-persist": "^6.0.0",
 		"redux-saga": "^1.1.3",
+		"sass": "^1.62.1",
 		"scroll-lock": "^2.1.5",
 		"tiny-invariant": "^1.2.0",
 		"typescript": "^4.6.4",
@@ -110,7 +111,6 @@
 		"fontello-cli": "0.6.2",
 		"husky": ">=6",
 		"lint-staged": "12.3.4",
-		"node-sass": "^6.0.0",
 		"prettier": "^2.6.2"
 	},
 	"resolutions": {

src/assets/styles/styles.module.scss

@@ -90,7 +90,7 @@
 
 	.nav_link {
 		cursor: pointer;
-		@extend .link;
+		// @extend .link;
 		display: flex;
 		width: 100%;
 		direction: ltr;
@@ -132,7 +132,7 @@
 
 	.nav_link_desktop_only {
 		cursor: pointer;
-		@extend .link;
+		// @extend .link;
 		display: flex;
 		align-items: center;
 	}

src/components/common/Toggle/index.tsx

@@ -0,0 +1,23 @@
+import { toast, ToastOptions, TypeOptions } from 'react-toastify';
+import React, { ChangeEvent, useState } from 'react';
+import './styles.module.scss';
+type Props = {
+	label: string;
+	toggled: boolean;
+	onClick: any;
+};
+const ToggleButton = () => {
+	const [toggle, setToggle] = useState(false);
+
+	const handleToggle = () => {
+		setToggle(!toggle);
+	};
+
+	return (
+		<div className={`toggle-btn${toggle ? ' active' : ''}`} onClick={handleToggle}>
+			<div className="toggle-btn__circle"></div>
+		</div>
+	);
+};
+
+export default ToggleButton;

src/components/common/Toggle/styles.module.scss

@@ -0,0 +1,31 @@
+@import 'assets/styles/_mixins.scss';
+
+.toggle-btn {
+	display: inline-block;
+	width: 50px;
+	height: 25px;
+	background-color: #ccc;
+	border-radius: 25px;
+	position: relative;
+	cursor: pointer;
+	transition: background-color 0.3s;
+
+	&__circle {
+		width: 20px;
+		height: 20px;
+		border-radius: 50%;
+		background-color: white;
+		position: absolute;
+		top: 2px;
+		left: 2px;
+		transition: transform 0.3s;
+	}
+
+	&.active {
+		background-color: #2196f3;
+
+		.toggle-btn__circle {
+			transform: translateX(25px);
+		}
+	}
+}