⚡ Upgrade design & moved backend here & login and settings work with api

assets/ArrowRightIcon.tsx

@@ -1,4 +1,6 @@
-const ArrowRightIcon = (props) => {
+import { SVGProps } from 'react';
+
+const ArrowRightIcon = (props?: SVGProps<SVGSVGElement>) => {
 	return (
 		<svg
 			xmlns='http://www.w3.org/2000/svg'

assets/CheckIcon.tsx

@@ -0,0 +1,22 @@
+import { SVGProps } from 'react';
+
+const CheckIcon = (props: SVGProps<SVGSVGElement>) => {
+	return (
+		<svg
+			xmlns='http://www.w3.org/2000/svg'
+			viewBox='0 0 512 512'
+			{...props}
+		>
+			<path
+				fill='none'
+				stroke='currentColor'
+				strokeLinecap='round'
+				strokeLinejoin='round'
+				strokeWidth='32'
+				d='M416 128L192 384l-96-96'
+			/>
+		</svg>
+	);
+};
+
+export default CheckIcon;

assets/CloseIcon.tsx

@@ -0,0 +1,22 @@
+import { SVGProps } from 'react';
+
+const CloseIcon = (props: SVGProps<SVGSVGElement>) => {
+	return (
+		<svg
+			xmlns='http://www.w3.org/2000/svg'
+			viewBox='0 0 512 512'
+			{...props}
+		>
+			<path
+				fill='none'
+				stroke='currentColor'
+				strokeLinecap='round'
+				strokeLinejoin='round'
+				strokeWidth='32'
+				d='M368 368L144 144M368 144L144 368'
+			/>
+		</svg>
+	);
+};
+
+export default CloseIcon;

assets/EyeIcon.tsx

@@ -1,4 +1,6 @@
-const EyeIcon = (props) => {
+import { SVGProps } from 'react';
+
+const EyeIcon = (props?: SVGProps<SVGSVGElement>) => {
 	return (
 		<svg
 			xmlns='http://www.w3.org/2000/svg'

assets/EyeSlashIcon.tsx

@@ -1,10 +1,12 @@
-const EyeSlashIcon = (props) => {
+import { SVGProps } from 'react';
+
+const EyeSlashIcon = (props?: SVGProps<SVGSVGElement>) => {
 	return (
 		<svg
 			xmlns='http://www.w3.org/2000/svg'
 			viewBox='0 0 512 512'
-			{...props}
 			fill='currentColor'
+			{...props}
 		>
 			<path d='M432 448a15.92 15.92 0 01-11.31-4.69l-352-352a16 16 0 0122.62-22.62l352 352A16 16 0 01432 448zM255.66 384c-41.49 0-81.5-12.28-118.92-36.5-34.07-22-64.74-53.51-88.7-91v-.08c19.94-28.57 41.78-52.73 65.24-72.21a2 2 0 00.14-2.94L93.5 161.38a2 2 0 00-2.71-.12c-24.92 21-48.05 46.76-69.08 76.92a31.92 31.92 0 00-.64 35.54c26.41 41.33 60.4 76.14 98.28 100.65C162 402 207.9 416 255.66 416a239.13 239.13 0 0075.8-12.58 2 2 0 00.77-3.31l-21.58-21.58a4 4 0 00-3.83-1 204.8 204.8 0 01-51.16 6.47zM490.84 238.6c-26.46-40.92-60.79-75.68-99.27-100.53C349 110.55 302 96 255.66 96a227.34 227.34 0 00-74.89 12.83 2 2 0 00-.75 3.31l21.55 21.55a4 4 0 003.88 1 192.82 192.82 0 0150.21-6.69c40.69 0 80.58 12.43 118.55 37 34.71 22.4 65.74 53.88 89.76 91a.13.13 0 010 .16 310.72 310.72 0 01-64.12 72.73 2 2 0 00-.15 2.95l19.9 19.89a2 2 0 002.7.13 343.49 343.49 0 0068.64-78.48 32.2 32.2 0 00-.1-34.78z' />
 			<path d='M256 160a95.88 95.88 0 00-21.37 2.4 2 2 0 00-1 3.38l112.59 112.56a2 2 0 003.38-1A96 96 0 00256 160zM165.78 233.66a2 2 0 00-3.38 1 96 96 0 00115 115 2 2 0 001-3.38z' />

assets/HeartIcon.tsx

@@ -1,4 +1,6 @@
-const HeartIcon = (props) => {
+import { SVGProps } from 'react';
+
+const HeartIcon = (props?: SVGProps<SVGSVGElement>) => {
 	return (
 		<svg
 			xmlns='http://www.w3.org/2000/svg'

assets/Loader.tsx

@@ -1,4 +1,6 @@
-const Loader = (props) => {
+import { SVGProps } from 'react';
+
+const Loader = (props?: SVGProps<SVGSVGElement>) => {
 	return (
 		<svg
 			viewBox='0 0 57 57'

assets/Logout.tsx

@@ -0,0 +1,20 @@
+import { SVGProps } from 'react';
+
+export const Logout = (props?: SVGProps<SVGSVGElement>) => {
+	return (
+		<svg
+			xmlns='http://www.w3.org/2000/svg'
+			viewBox='0 0 512 512'
+			{...props}
+		>
+			<path
+				d='M304 336v40a40 40 0 01-40 40H104a40 40 0 01-40-40V136a40 40 0 0140-40h152c22.09 0 48 17.91 48 40v40M368 336l80-80-80-80M176 256h256'
+				fill='none'
+				stroke='currentColor'
+				strokeLinecap='round'
+				strokeLinejoin='round'
+				strokeWidth='32'
+			/>
+		</svg>
+	);
+};

assets/MapIcon.tsx

@@ -1,4 +1,6 @@
-const MapIcon = (props) => {
+import { SVGProps } from 'react';
+
+const MapIcon = (props?: SVGProps<SVGSVGElement>) => {
 	return (
 		<svg
 			xmlns='http://www.w3.org/2000/svg'

assets/SettingsIcon.tsx

@@ -1,4 +1,6 @@
-const SettingsIcon = (props) => {
+import { SVGProps } from 'react';
+
+const SettingsIcon = (props?: SVGProps<SVGSVGElement>) => {
 	return (
 		<svg
 			xmlns='http://www.w3.org/2000/svg'

assets/StatsIcon.tsx

@@ -1,4 +1,6 @@
-const StatsIcon = (props) => {
+import { SVGProps } from 'react';
+
+const StatsIcon = (props?: SVGProps<SVGSVGElement>) => {
 	return (
 		<svg
 			xmlns='http://www.w3.org/2000/svg'

assets/TrashIcon.tsx

@@ -0,0 +1,37 @@
+import { SVGProps } from 'react';
+
+const TrashIcon = (props: SVGProps<SVGSVGElement>) => {
+	return (
+		<svg
+			xmlns='http://www.w3.org/2000/svg'
+			viewBox='0 0 512 512'
+			{...props}
+		>
+			<path
+				d='M112 112l20 320c.95 18.49 14.4 32 32 32h184c17.67 0 30.87-13.51 32-32l20-320'
+				fill='none'
+				stroke='currentColor'
+				strokeLinecap='round'
+				strokeLinejoin='round'
+				strokeWidth='32'
+			/>
+			<path
+				stroke='currentColor'
+				strokeLinecap='round'
+				stroke-miterlimit='10'
+				strokeWidth='32'
+				d='M80 112h352'
+			/>
+			<path
+				d='M192 112V72h0a23.93 23.93 0 0124-24h80a23.93 23.93 0 0124 24h0v40M256 176v224M184 176l8 224M328 176l-8 224'
+				fill='none'
+				stroke='currentColor'
+				strokeLinecap='round'
+				strokeLinejoin='round'
+				strokeWidth='32'
+			/>
+		</svg>
+	);
+};
+
+export default TrashIcon;