simrail/simrail.pro
3
0
Fork 2
Code Issues 2 Pull Requests Actions Packages Projects Releases 27 Wiki Activity

refactor(v3): format files

Browse Source
This commit is contained in:
Aleksander Wilczyński 2024-11-03 00:44:09 +01:00
parent 6f7f2dad52
commit bca728414b
Signed by: alekswilc
GPG Key ID: D4464A248E5F27FE
101 changed files with 5794 additions and 5305 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.idea/codeStyles/codeStyleConfig.xml generated Normal file
View File

@ -0,0 +1,5 @@
<component name="ProjectCodeStyleConfiguration">
<state>
<option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
</state>
</component>

6
.idea/compiler.xml generated Normal file
View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="TypeScriptCompiler">
<option name="versionType" value="EMBEDDED" />
</component>
</project>

3
.vscode/settings.json vendored Normal file
View File

@ -0,0 +1,3 @@
{
"npm.packageManager": "yarn"
}

2
packages/frontend/postcss.config.cjs
View File

@ -3,4 +3,4 @@ module.exports = {
tailwindcss: {}, tailwindcss: {},
autoprefixer: {}, autoprefixer: {},
}, },
} };

39
packages/frontend/src/App.tsx
View File

@ -1,30 +1,33 @@
import { useEffect, useState } from 'react'; import { useEffect, useState } from "react";
import { Route, Routes, useLocation } from 'react-router-dom'; import { Route, Routes, useLocation } from "react-router-dom";
import { Loader } from './components/mini/loaders/PageLoader.tsx'; import { Loader } from "./components/mini/loaders/PageLoader.tsx";
import { PageTitle } from './components/mini/util/PageTitle.tsx'; import { PageTitle } from "./components/mini/util/PageTitle.tsx";
import Chart from './old/Chart.tsx'; import Chart from "./old/Chart.tsx";
import { Home } from './pages/Home'; import { Home } from "./pages/Home";
import Settings from './old/Settings.tsx'; import Settings from "./old/Settings.tsx";
import Alerts from './old/UiElements/Alerts.tsx'; import Alerts from "./old/UiElements/Alerts.tsx";
import Buttons from './old/UiElements/Buttons.tsx'; import Buttons from "./old/UiElements/Buttons.tsx";
import DefaultLayout from './layout/DefaultLayout'; import DefaultLayout from "./layout/DefaultLayout";
import "./i18n"; import "./i18n";
import { TrainLeaderboard } from './pages/leaderboard/TrainLeaderboard.tsx'; import { TrainLeaderboard } from "./pages/leaderboard/TrainLeaderboard.tsx";
import { StationLeaderboard } from './pages/leaderboard/StationsLeaderboard.tsx'; import { StationLeaderboard } from "./pages/leaderboard/StationsLeaderboard.tsx";
import { TrainLogs } from './pages/logs/TrainLogs.tsx'; import { TrainLogs } from "./pages/logs/TrainLogs.tsx";
import { StationLogs } from './pages/logs/StationLogs.tsx'; import { StationLogs } from "./pages/logs/StationLogs.tsx";
import { Profile } from './pages/profile/Profile.tsx'; import { Profile } from "./pages/profile/Profile.tsx";
function App() { function App()
{
const [ loading, setLoading ] = useState<boolean>(true); const [ loading, setLoading ] = useState<boolean>(true);
const { pathname } = useLocation(); const { pathname } = useLocation();
useEffect(() => { useEffect(() =>
{
window.scrollTo(0, 0); window.scrollTo(0, 0);
}, [ pathname ]); }, [ pathname ]);
useEffect(() => { useEffect(() =>
{
setTimeout(() => setLoading(false), 400); setTimeout(() => setLoading(false), 400);
}, []); }, []);

18
packages/frontend/src/components/mini/alerts/Error.tsx
View File

@ -1,21 +1,21 @@
export const ErrorAlert = ({ title, description }: { title: string, description: string }) => export const ErrorAlert = ({ title, description }: { title: string, description: string }) =>
<div <div
className='flex w-full border-l-6 border-[#F87171] bg-[#F87171] bg-opacity-[15%] dark:bg-[#1B1B24] px-7 py-8 shadow-md dark:bg-opacity-30 md:p-9'> className="flex w-full border-l-6 border-[#F87171] bg-[#F87171] bg-opacity-[15%] dark:bg-[#1B1B24] px-7 py-8 shadow-md dark:bg-opacity-30 md:p-9">
<div className='mr-5 flex h-9 w-full max-w-[36px] items-center justify-center rounded-lg bg-[#F87171]'> <div className="mr-5 flex h-9 w-full max-w-[36px] items-center justify-center rounded-lg bg-[#F87171]">
<svg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='<http://www.w3.org/2000/svg>'> <svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="<http://www.w3.org/2000/svg>">
<path <path
d='M6.4917 7.65579L11.106 12.2645C11.2545 12.4128 11.4715 12.5 11.6738 12.5C11.8762 12.5 12.0931 12.4128 12.2416 12.2645C12.5621 11.9445 12.5623 11.4317 12.2423 11.1114C12.2422 11.1113 12.2422 11.1113 12.2422 11.1113C12.242 11.1111 12.2418 11.1109 12.2416 11.1107L7.64539 6.50351L12.2589 1.91221L12.2595 1.91158C12.5802 1.59132 12.5802 1.07805 12.2595 0.757793C11.9393 0.437994 11.4268 0.437869 11.1064 0.757418C11.1063 0.757543 11.1062 0.757668 11.106 0.757793L6.49234 5.34931L1.89459 0.740581L1.89396 0.739942C1.57364 0.420019 1.0608 0.420019 0.740487 0.739944C0.42005 1.05999 0.419837 1.57279 0.73985 1.89309L6.4917 7.65579ZM6.4917 7.65579L1.89459 12.2639L1.89395 12.2645C1.74546 12.4128 1.52854 12.5 1.32616 12.5C1.12377 12.5 0.906853 12.4128 0.758361 12.2645L1.1117 11.9108L0.758358 12.2645C0.437984 11.9445 0.437708 11.4319 0.757539 11.1116C0.757812 11.1113 0.758086 11.111 0.75836 11.1107L5.33864 6.50287L0.740487 1.89373L6.4917 7.65579Z' d="M6.4917 7.65579L11.106 12.2645C11.2545 12.4128 11.4715 12.5 11.6738 12.5C11.8762 12.5 12.0931 12.4128 12.2416 12.2645C12.5621 11.9445 12.5623 11.4317 12.2423 11.1114C12.2422 11.1113 12.2422 11.1113 12.2422 11.1113C12.242 11.1111 12.2418 11.1109 12.2416 11.1107L7.64539 6.50351L12.2589 1.91221L12.2595 1.91158C12.5802 1.59132 12.5802 1.07805 12.2595 0.757793C11.9393 0.437994 11.4268 0.437869 11.1064 0.757418C11.1063 0.757543 11.1062 0.757668 11.106 0.757793L6.49234 5.34931L1.89459 0.740581L1.89396 0.739942C1.57364 0.420019 1.0608 0.420019 0.740487 0.739944C0.42005 1.05999 0.419837 1.57279 0.73985 1.89309L6.4917 7.65579ZM6.4917 7.65579L1.89459 12.2639L1.89395 12.2645C1.74546 12.4128 1.52854 12.5 1.32616 12.5C1.12377 12.5 0.906853 12.4128 0.758361 12.2645L1.1117 11.9108L0.758358 12.2645C0.437984 11.9445 0.437708 11.4319 0.757539 11.1116C0.757812 11.1113 0.758086 11.111 0.75836 11.1107L5.33864 6.50287L0.740487 1.89373L6.4917 7.65579Z"
fill='#ffffff' stroke='#ffffff'></path> fill="#ffffff" stroke="#ffffff"></path>
</svg> </svg>
</div> </div>
<div className='w-full'> <div className="w-full">
<h5 className='mb-3 font-semibold text-[#B45454]'> <h5 className="mb-3 font-semibold text-[#B45454]">
{ title } { title }
</h5> </h5>
<ul> <ul>
<li className='leading-relaxed text-[#CD5D5D]'> <li className="leading-relaxed text-[#CD5D5D]">
{ description } { description }
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>;

18
packages/frontend/src/components/mini/alerts/Success.tsx
View File

@ -1,19 +1,19 @@
export const SuccessAlert = ({ title, description }: { title: string, description: string }) => export const SuccessAlert = ({ title, description }: { title: string, description: string }) =>
<div <div
className='flex w-full border-l-6 border-[#34D399] bg-[#34D399] bg-opacity-[15%] dark:bg-[#1B1B24] px-7 py-8 shadow-md dark:bg-opacity-30 md:p-9'> className="flex w-full border-l-6 border-[#34D399] bg-[#34D399] bg-opacity-[15%] dark:bg-[#1B1B24] px-7 py-8 shadow-md dark:bg-opacity-30 md:p-9">
<div className='mr-5 flex h-9 w-full max-w-[36px] items-center justify-center rounded-lg bg-[#34D399]'> <div className="mr-5 flex h-9 w-full max-w-[36px] items-center justify-center rounded-lg bg-[#34D399]">
<svg width='16' height='12' viewBox='0 0 16 12' fill='none' xmlns='<http://www.w3.org/2000/svg>'> <svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="<http://www.w3.org/2000/svg>">
<path <path
d='M15.2984 0.826822L15.2868 0.811827L15.2741 0.797751C14.9173 0.401867 14.3238 0.400754 13.9657 0.794406L5.91888 9.45376L2.05667 5.2868C1.69856 4.89287 1.10487 4.89389 0.747996 5.28987C0.417335 5.65675 0.417335 6.22337 0.747996 6.59026L0.747959 6.59029L0.752701 6.59541L4.86742 11.0348C5.14445 11.3405 5.52858 11.5 5.89581 11.5C6.29242 11.5 6.65178 11.3355 6.92401 11.035L15.2162 2.11161C15.5833 1.74452 15.576 1.18615 15.2984 0.826822Z' d="M15.2984 0.826822L15.2868 0.811827L15.2741 0.797751C14.9173 0.401867 14.3238 0.400754 13.9657 0.794406L5.91888 9.45376L2.05667 5.2868C1.69856 4.89287 1.10487 4.89389 0.747996 5.28987C0.417335 5.65675 0.417335 6.22337 0.747996 6.59026L0.747959 6.59029L0.752701 6.59541L4.86742 11.0348C5.14445 11.3405 5.52858 11.5 5.89581 11.5C6.29242 11.5 6.65178 11.3355 6.92401 11.035L15.2162 2.11161C15.5833 1.74452 15.576 1.18615 15.2984 0.826822Z"
fill='white' stroke='white'></path> fill="white" stroke="white"></path>
</svg> </svg>
</div> </div>
<div className='w-full'> <div className="w-full">
<h5 className='mb-3 text-lg font-semibold text-black dark:text-[#34D399] '> <h5 className="mb-3 text-lg font-semibold text-black dark:text-[#34D399] ">
{ title } { title }
</h5> </h5>
<p className='text-base leading-relaxed text-body'> <p className="text-base leading-relaxed text-body">
{ description } { description }
</p> </p>
</div> </div>
</div> </div>;

18
packages/frontend/src/components/mini/alerts/Warning.tsx
View File

@ -1,19 +1,19 @@
export const WarningAlert = ({ title, description }: { title: string, description: string }) => export const WarningAlert = ({ title, description }: { title: string, description: string }) =>
<div <div
className='flex w-full border-l-6 border-warning bg-warning bg-opacity-[15%] dark:bg-[#1B1B24] px-7 py-8 shadow-md dark:bg-opacity-30 md:p-9'> className="flex w-full border-l-6 border-warning bg-warning bg-opacity-[15%] dark:bg-[#1B1B24] px-7 py-8 shadow-md dark:bg-opacity-30 md:p-9">
<div className='mr-5 flex h-9 w-9 items-center justify-center rounded-lg bg-warning bg-opacity-30'> <div className="mr-5 flex h-9 w-9 items-center justify-center rounded-lg bg-warning bg-opacity-30">
<svg width='19' height='16' viewBox='0 0 19 16' fill='none' xmlns='<http://www.w3.org/2000/svg>'> <svg width="19" height="16" viewBox="0 0 19 16" fill="none" xmlns="<http://www.w3.org/2000/svg>">
<path <path
d='M1.50493 16H17.5023C18.6204 16 19.3413 14.9018 18.8354 13.9735L10.8367 0.770573C10.2852 -0.256858 8.70677 -0.256858 8.15528 0.770573L0.156617 13.9735C-0.334072 14.8998 0.386764 16 1.50493 16ZM10.7585 12.9298C10.7585 13.6155 10.2223 14.1433 9.45583 14.1433C8.6894 14.1433 8.15311 13.6155 8.15311 12.9298V12.9015C8.15311 12.2159 8.6894 11.688 9.45583 11.688C10.2223 11.688 10.7585 12.2159 10.7585 12.9015V12.9298ZM8.75236 4.01062H10.2548C10.6674 4.01062 10.9127 4.33826 10.8671 4.75288L10.2071 10.1186C10.1615 10.5049 9.88572 10.7455 9.50142 10.7455C9.11929 10.7455 8.84138 10.5028 8.79579 10.1186L8.13574 4.75288C8.09449 4.33826 8.33984 4.01062 8.75236 4.01062Z' d="M1.50493 16H17.5023C18.6204 16 19.3413 14.9018 18.8354 13.9735L10.8367 0.770573C10.2852 -0.256858 8.70677 -0.256858 8.15528 0.770573L0.156617 13.9735C-0.334072 14.8998 0.386764 16 1.50493 16ZM10.7585 12.9298C10.7585 13.6155 10.2223 14.1433 9.45583 14.1433C8.6894 14.1433 8.15311 13.6155 8.15311 12.9298V12.9015C8.15311 12.2159 8.6894 11.688 9.45583 11.688C10.2223 11.688 10.7585 12.2159 10.7585 12.9015V12.9298ZM8.75236 4.01062H10.2548C10.6674 4.01062 10.9127 4.33826 10.8671 4.75288L10.2071 10.1186C10.1615 10.5049 9.88572 10.7455 9.50142 10.7455C9.11929 10.7455 8.84138 10.5028 8.79579 10.1186L8.13574 4.75288C8.09449 4.33826 8.33984 4.01062 8.75236 4.01062Z"
fill='#FBBF24'></path> fill="#FBBF24"></path>
</svg> </svg>
</div> </div>
<div className='w-full'> <div className="w-full">
<h5 className='mb-3 text-lg font-semibold text-[#9D5425]'> <h5 className="mb-3 text-lg font-semibold text-[#9D5425]">
{ title } { title }
</h5> </h5>
<p className='leading-relaxed text-[#D0915C]'> <p className="leading-relaxed text-[#D0915C]">
{ description } { description }
</p> </p>
</div> </div>
</div> </div>;

17
packages/frontend/src/components/mini/header/DarkModeSwitcher.tsx
View File

@ -1,27 +1,30 @@
import useColorMode from '../../../hooks/useColorMode'; import useColorMode from "../../../hooks/useColorMode";
const DarkModeSwitcher = () => { const DarkModeSwitcher = () =>
{
const [ colorMode, setColorMode ] = useColorMode(); const [ colorMode, setColorMode ] = useColorMode();
return ( return (
<li> <li>
<label <label
className={ `relative m-0 block h-7.5 w-14 rounded-full ${ className={ `relative m-0 block h-7.5 w-14 rounded-full ${
colorMode === 'dark' ? 'bg-primary' : 'bg-stroke' colorMode === "dark" ? "bg-primary" : "bg-stroke"
}` } }` }
> >
<input <input
type="checkbox" type="checkbox"
onChange={() => { onChange={ () =>
if (typeof setColorMode === 'function') { {
setColorMode(colorMode === 'light' ? 'dark' : 'light'); if (typeof setColorMode === "function")
{
setColorMode(colorMode === "light" ? "dark" : "light");
} }
} } } }
className="dur absolute top-0 z-50 m-0 h-full w-full cursor-pointer opacity-0" className="dur absolute top-0 z-50 m-0 h-full w-full cursor-pointer opacity-0"
/> />
<span <span
className={ `absolute top-1/2 left-[3px] flex h-6 w-6 -translate-y-1/2 translate-x-0 items-center justify-center rounded-full bg-white shadow-switcher duration-75 ease-linear ${ className={ `absolute top-1/2 left-[3px] flex h-6 w-6 -translate-y-1/2 translate-x-0 items-center justify-center rounded-full bg-white shadow-switcher duration-75 ease-linear ${
colorMode === 'dark' && '!right-[3px] !translate-x-full' colorMode === "dark" && "!right-[3px] !translate-x-full"
}` } }` }
> >
<span className="dark:hidden"> <span className="dark:hidden">

18
packages/frontend/src/components/mini/header/index.tsx
View File

@ -1,9 +1,10 @@
import DarkModeSwitcher from './DarkModeSwitcher.tsx'; import DarkModeSwitcher from "./DarkModeSwitcher.tsx";
const Header = (props: { const Header = (props: {
sidebarOpen: string | boolean | undefined; sidebarOpen: string | boolean | undefined;
setSidebarOpen: (arg0: boolean) => void; setSidebarOpen: (arg0: boolean) => void;
}) => { }) =>
{
return ( return (
<header className="sticky top-0 z-999 flex w-full bg-white drop-shadow-1 dark:bg-boxdark dark:drop-shadow-none"> <header className="sticky top-0 z-999 flex w-full bg-white drop-shadow-1 dark:bg-boxdark dark:drop-shadow-none">
<div className="flex flex-grow items-center justify-between px-4 py-4 shadow-2 md:px-6 2xl:px-11"> <div className="flex flex-grow items-center justify-between px-4 py-4 shadow-2 md:px-6 2xl:px-11">
@ -11,7 +12,8 @@ const Header = (props: {
{/* <!-- Hamburger Toggle BTN --> */ } {/* <!-- Hamburger Toggle BTN --> */ }
<button <button
aria-controls="sidebar" aria-controls="sidebar"
onClick={(e) => { onClick={ (e) =>
{
e.stopPropagation(); e.stopPropagation();
props.setSidebarOpen(!props.sidebarOpen); props.setSidebarOpen(!props.sidebarOpen);
} } } }
@ -21,29 +23,29 @@ const Header = (props: {
<span className="du-block absolute right-0 h-full w-full"> <span className="du-block absolute right-0 h-full w-full">
<span <span
className={ `relative left-0 top-0 my-1 block h-0.5 w-0 rounded-sm bg-black delay-[0] duration-200 ease-in-out dark:bg-white ${ className={ `relative left-0 top-0 my-1 block h-0.5 w-0 rounded-sm bg-black delay-[0] duration-200 ease-in-out dark:bg-white ${
!props.sidebarOpen && '!w-full delay-300' !props.sidebarOpen && "!w-full delay-300"
}` } }` }
></span> ></span>
<span <span
className={ `relative left-0 top-0 my-1 block h-0.5 w-0 rounded-sm bg-black delay-150 duration-200 ease-in-out dark:bg-white ${ className={ `relative left-0 top-0 my-1 block h-0.5 w-0 rounded-sm bg-black delay-150 duration-200 ease-in-out dark:bg-white ${
!props.sidebarOpen && 'delay-400 !w-full' !props.sidebarOpen && "delay-400 !w-full"
}` } }` }
></span> ></span>
<span <span
className={ `relative left-0 top-0 my-1 block h-0.5 w-0 rounded-sm bg-black delay-200 duration-200 ease-in-out dark:bg-white ${ className={ `relative left-0 top-0 my-1 block h-0.5 w-0 rounded-sm bg-black delay-200 duration-200 ease-in-out dark:bg-white ${
!props.sidebarOpen && '!w-full delay-500' !props.sidebarOpen && "!w-full delay-500"
}` } }` }
></span> ></span>
</span> </span>
<span className="absolute right-0 h-full w-full rotate-45"> <span className="absolute right-0 h-full w-full rotate-45">
<span <span
className={ `absolute left-2.5 top-0 block h-full w-0.5 rounded-sm bg-black delay-300 duration-200 ease-in-out dark:bg-white ${ className={ `absolute left-2.5 top-0 block h-full w-0.5 rounded-sm bg-black delay-300 duration-200 ease-in-out dark:bg-white ${
!props.sidebarOpen && '!h-0 !delay-[0]' !props.sidebarOpen && "!h-0 !delay-[0]"
}` } }` }
></span> ></span>
<span <span
className={ `delay-400 absolute left-0 top-2.5 block h-0.5 w-full rounded-sm bg-black duration-200 ease-in-out dark:bg-white ${ className={ `delay-400 absolute left-0 top-2.5 block h-0.5 w-full rounded-sm bg-black duration-200 ease-in-out dark:bg-white ${
!props.sidebarOpen && '!h-0 !delay-200' !props.sidebarOpen && "!h-0 !delay-200"
}` } }` }
></span> ></span>
</span> </span>

53
packages/frontend/src/components/mini/loaders/ContentLoader.tsx
View File

@ -1,35 +1,41 @@
import { useEffect, useState } from 'react'; import { useEffect, useState } from "react";
import { useTranslation } from 'react-i18next'; import { useTranslation } from "react-i18next";
import { Link } from 'react-router-dom'; import { Link } from "react-router-dom";
export const LoadError = () => { export const LoadError = () =>
{
const { t } = useTranslation(); const { t } = useTranslation();
return <div return <div
className='flex w-full border-l-6 border-[#F87171] bg-[#F87171] bg-opacity-[15%] dark:bg-[#1B1B24] px-7 py-8 shadow-md dark:bg-opacity-30 md:p-9'> className="flex w-full border-l-6 border-[#F87171] bg-[#F87171] bg-opacity-[15%] dark:bg-[#1B1B24] px-7 py-8 shadow-md dark:bg-opacity-30 md:p-9">
<div className='mr-5 flex h-9 w-full max-w-[36px] items-center justify-center rounded-lg bg-[#F87171]'> <div className="mr-5 flex h-9 w-full max-w-[36px] items-center justify-center rounded-lg bg-[#F87171]">
<svg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='<http://www.w3.org/2000/svg>'> <svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="<http://www.w3.org/2000/svg>">
<path <path
d='M6.4917 7.65579L11.106 12.2645C11.2545 12.4128 11.4715 12.5 11.6738 12.5C11.8762 12.5 12.0931 12.4128 12.2416 12.2645C12.5621 11.9445 12.5623 11.4317 12.2423 11.1114C12.2422 11.1113 12.2422 11.1113 12.2422 11.1113C12.242 11.1111 12.2418 11.1109 12.2416 11.1107L7.64539 6.50351L12.2589 1.91221L12.2595 1.91158C12.5802 1.59132 12.5802 1.07805 12.2595 0.757793C11.9393 0.437994 11.4268 0.437869 11.1064 0.757418C11.1063 0.757543 11.1062 0.757668 11.106 0.757793L6.49234 5.34931L1.89459 0.740581L1.89396 0.739942C1.57364 0.420019 1.0608 0.420019 0.740487 0.739944C0.42005 1.05999 0.419837 1.57279 0.73985 1.89309L6.4917 7.65579ZM6.4917 7.65579L1.89459 12.2639L1.89395 12.2645C1.74546 12.4128 1.52854 12.5 1.32616 12.5C1.12377 12.5 0.906853 12.4128 0.758361 12.2645L1.1117 11.9108L0.758358 12.2645C0.437984 11.9445 0.437708 11.4319 0.757539 11.1116C0.757812 11.1113 0.758086 11.111 0.75836 11.1107L5.33864 6.50287L0.740487 1.89373L6.4917 7.65579Z' d="M6.4917 7.65579L11.106 12.2645C11.2545 12.4128 11.4715 12.5 11.6738 12.5C11.8762 12.5 12.0931 12.4128 12.2416 12.2645C12.5621 11.9445 12.5623 11.4317 12.2423 11.1114C12.2422 11.1113 12.2422 11.1113 12.2422 11.1113C12.242 11.1111 12.2418 11.1109 12.2416 11.1107L7.64539 6.50351L12.2589 1.91221L12.2595 1.91158C12.5802 1.59132 12.5802 1.07805 12.2595 0.757793C11.9393 0.437994 11.4268 0.437869 11.1064 0.757418C11.1063 0.757543 11.1062 0.757668 11.106 0.757793L6.49234 5.34931L1.89459 0.740581L1.89396 0.739942C1.57364 0.420019 1.0608 0.420019 0.740487 0.739944C0.42005 1.05999 0.419837 1.57279 0.73985 1.89309L6.4917 7.65579ZM6.4917 7.65579L1.89459 12.2639L1.89395 12.2645C1.74546 12.4128 1.52854 12.5 1.32616 12.5C1.12377 12.5 0.906853 12.4128 0.758361 12.2645L1.1117 11.9108L0.758358 12.2645C0.437984 11.9445 0.437708 11.4319 0.757539 11.1116C0.757812 11.1113 0.758086 11.111 0.75836 11.1107L5.33864 6.50287L0.740487 1.89373L6.4917 7.65579Z"
fill='#ffffff' stroke='#ffffff'></path> fill="#ffffff" stroke="#ffffff"></path>
</svg> </svg>
</div> </div>
<div className='w-full'> <div className="w-full">
<h5 className='mb-3 font-semibold text-[#B45454]'> <h5 className="mb-3 font-semibold text-[#B45454]">
{ t("contentloader.error.header") } { t("contentloader.error.header") }
</h5> </h5>
<ul> <ul>
<li className='leading-relaxed text-[#CD5D5D]'> <li className="leading-relaxed text-[#CD5D5D]">
{ t("contentloader.error.description") } { t("contentloader.error.description") }
</li> </li>
<li className='leading-relaxed text-[#CD5D5D]'> <li className="leading-relaxed text-[#CD5D5D]">
<div className="pt-4"> <div className="pt-4">
{/* TODO: add git issue params */ } {/* TODO: add git issue params */ }
<div className="mb-7.5 flex flex-wrap gap-4"> <div className="mb-7.5 flex flex-wrap gap-4">
<Link className="inline-flex items-center justify-center rounded-md bg-primary py-2 px-8 text-center font-medium text-white hover:bg-opacity-70 lg:px-6 xl:px-8" to="https://git.alekswilc.dev/simrail/simrail.alekswilc.dev/issues/new">{t("contentloader.error.report")}</Link> <Link
className="inline-flex items-center justify-center rounded-md bg-primary py-2 px-8 text-center font-medium text-white hover:bg-opacity-70 lg:px-6 xl:px-8"
to="https://git.alekswilc.dev/simrail/simrail.alekswilc.dev/issues/new">{ t("contentloader.error.report") }</Link>
<Link className="inline-flex items-center justify-center rounded-md bg-primary py-2 px-8 text-center font-medium text-white hover:bg-opacity-70 lg:px-6 xl:px-8" to="#" onClick={() => window.location.reload()}>{t("contentloader.error.refresh")}</Link> <Link
className="inline-flex items-center justify-center rounded-md bg-primary py-2 px-8 text-center font-medium text-white hover:bg-opacity-70 lg:px-6 xl:px-8"
to="#"
onClick={ () => window.location.reload() }>{ t("contentloader.error.refresh") }</Link>
</div> </div>
</div> </div>
@ -38,12 +44,15 @@ export const LoadError = () => {
</ul> </ul>
</div> </div>
</div>; </div>;
} };
export const ContentLoader = () => { export const ContentLoader = () =>
{
const [ error, setError ] = useState(false); const [ error, setError ] = useState(false);
useEffect(() => { useEffect(() =>
new Promise(res => setTimeout(res, 5000)).then(() => { {
new Promise(res => setTimeout(res, 5000)).then(() =>
{
setError(true); setError(true);
}); });
@ -52,8 +61,10 @@ export const ContentLoader = () => {
return ( return (
<> <>
{error ? <LoadError /> : <div className="flex h-screen items-center justify-center shadow-default bg-white dark:border-strokedark dark:bg-boxdark"> { error ? <LoadError/> : <div
<div className="h-16 w-16 animate-spin rounded-full border-4 border-solid border-primary border-t-transparent"></div> className="flex h-screen items-center justify-center shadow-default bg-white dark:border-strokedark dark:bg-boxdark">
<div
className="h-16 w-16 animate-spin rounded-full border-4 border-solid border-primary border-t-transparent"></div>
</div> } </div> }
</> </>
); );

6
packages/frontend/src/components/mini/loaders/PageLoader.tsx
View File

@ -1,7 +1,9 @@
export const Loader = () => { export const Loader = () =>
{
return ( return (
<div className="flex h-screen items-center justify-center bg-black"> <div className="flex h-screen items-center justify-center bg-black">
<div className="h-16 w-16 animate-spin rounded-full border-4 border-solid border-primary border-t-transparent"></div> <div
className="h-16 w-16 animate-spin rounded-full border-4 border-solid border-primary border-t-transparent"></div>
</div> </div>
); );
}; };

11
packages/frontend/src/components/mini/sidebar/SidebarLinkGroup.tsx
View File

@ -1,6 +1,7 @@
import { ReactNode, useState } from 'react'; import { ReactNode, useState } from "react";
interface SidebarLinkGroupProps { interface SidebarLinkGroupProps
{
children: (handleClick: () => void, open: boolean) => ReactNode; children: (handleClick: () => void, open: boolean) => ReactNode;
activeCondition: boolean; activeCondition: boolean;
} }
@ -8,10 +9,12 @@ interface SidebarLinkGroupProps {
const SidebarLinkGroup = ({ const SidebarLinkGroup = ({
children, children,
activeCondition, activeCondition,
}: SidebarLinkGroupProps) => { }: SidebarLinkGroupProps) =>
{
const [ open, setOpen ] = useState<boolean>(activeCondition); const [ open, setOpen ] = useState<boolean>(activeCondition);
const handleClick = () => { const handleClick = () =>
{
setOpen(!open); setOpen(!open);
}; };

192
packages/frontend/src/components/mini/sidebar/index.tsx
View File

@ -1,59 +1,77 @@
import React, { useEffect, useRef, useState } from 'react'; import React, { useEffect, useRef, useState } from "react";
import { NavLink, useLocation } from 'react-router-dom'; import { NavLink, useLocation } from "react-router-dom";
import SidebarLinkGroup from './SidebarLinkGroup.tsx'; import SidebarLinkGroup from "./SidebarLinkGroup.tsx";
import { useTranslation } from 'react-i18next'; import { useTranslation } from "react-i18next";
interface SidebarProps { interface SidebarProps
{
sidebarOpen: boolean; sidebarOpen: boolean;
setSidebarOpen: (arg: boolean) => void; setSidebarOpen: (arg: boolean) => void;
} }
const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => { const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) =>
{
const location = useLocation(); const location = useLocation();
const { pathname } = location; const { pathname } = location;
const trigger = useRef<any>(null); const trigger = useRef<any>(null);
const sidebar = useRef<any>(null); const sidebar = useRef<any>(null);
const storedSidebarExpanded = localStorage.getItem('sidebar-expanded'); const storedSidebarExpanded = localStorage.getItem("sidebar-expanded");
const [ sidebarExpanded, setSidebarExpanded ] = useState( const [ sidebarExpanded, setSidebarExpanded ] = useState(
storedSidebarExpanded === null ? false : storedSidebarExpanded === 'true' storedSidebarExpanded === null ? false : storedSidebarExpanded === "true",
); );
const { t } = useTranslation(); const { t } = useTranslation();
// close on click outside // close on click outside
useEffect(() => { useEffect(() =>
const clickHandler = ({ target }: MouseEvent) => { {
if (!sidebar.current || !trigger.current) return; const clickHandler = ({ target }: MouseEvent) =>
{
if (!sidebar.current || !trigger.current)
{
return;
}
if ( if (
!sidebarOpen || !sidebarOpen ||
sidebar.current.contains(target) || sidebar.current.contains(target) ||
trigger.current.contains(target) trigger.current.contains(target)
) )
{
return; return;
}
setSidebarOpen(false); setSidebarOpen(false);
}; };
document.addEventListener('click', clickHandler); document.addEventListener("click", clickHandler);
return () => document.removeEventListener('click', clickHandler); return () => document.removeEventListener("click", clickHandler);
}); });
// close if the esc key is pressed // close if the esc key is pressed
useEffect(() => { useEffect(() =>
const keyHandler = ({ keyCode }: KeyboardEvent) => { {
if (!sidebarOpen || keyCode !== 27) return; const keyHandler = ({ keyCode }: KeyboardEvent) =>
{
if (!sidebarOpen || keyCode !== 27)
{
return;
}
setSidebarOpen(false); setSidebarOpen(false);
}; };
document.addEventListener('keydown', keyHandler); document.addEventListener("keydown", keyHandler);
return () => document.removeEventListener('keydown', keyHandler); return () => document.removeEventListener("keydown", keyHandler);
}); });
useEffect(() => { useEffect(() =>
localStorage.setItem('sidebar-expanded', sidebarExpanded.toString()); {
if (sidebarExpanded) { localStorage.setItem("sidebar-expanded", sidebarExpanded.toString());
document.querySelector('body')?.classList.add('sidebar-expanded'); if (sidebarExpanded)
} else { {
document.querySelector('body')?.classList.remove('sidebar-expanded'); document.querySelector("body")?.classList.add("sidebar-expanded");
}
else
{
document.querySelector("body")?.classList.remove("sidebar-expanded");
} }
}, [ sidebarExpanded ]); }, [ sidebarExpanded ]);
@ -61,7 +79,7 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
<aside <aside
ref={ sidebar } ref={ sidebar }
className={ `absolute left-0 top-0 z-9999 flex h-screen w-72.5 flex-col overflow-y-hidden bg-black duration-300 ease-linear dark:bg-boxdark lg:static lg:translate-x-0 ${ className={ `absolute left-0 top-0 z-9999 flex h-screen w-72.5 flex-col overflow-y-hidden bg-black duration-300 ease-linear dark:bg-boxdark lg:static lg:translate-x-0 ${
sidebarOpen ? 'translate-x-0' : '-translate-x-full' sidebarOpen ? "translate-x-0" : "-translate-x-full"
}` } }` }
> >
{/* <!-- SIDEBAR HEADER --> */ } {/* <!-- SIDEBAR HEADER --> */ }
@ -102,31 +120,33 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
<NavLink <NavLink
to="/" to="/"
className={ `group relative flex items-center gap-2.5 rounded-sm py-2 px-4 font-medium text-bodydark1 duration-300 ease-in-out hover:bg-graydark dark:hover:bg-meta-4 ${ className={ `group relative flex items-center gap-2.5 rounded-sm py-2 px-4 font-medium text-bodydark1 duration-300 ease-in-out hover:bg-graydark dark:hover:bg-meta-4 ${
pathname === '/' && pathname === "/" &&
'bg-graydark dark:bg-meta-4' "bg-graydark dark:bg-meta-4"
}` } }` }
> >
{t('pages.home')} { t("pages.home") }
</NavLink> </NavLink>
</li> </li>
<SidebarLinkGroup <SidebarLinkGroup
activeCondition={ activeCondition={
pathname === '/logs' || pathname.includes('logs') pathname === "/logs" || pathname.includes("logs")
} }
> >
{(handleClick, open) => { { (handleClick, open) =>
{
return ( return (
<React.Fragment> <React.Fragment>
<NavLink <NavLink
to="#" to="#"
className={ `group relative flex items-center gap-2.5 rounded-sm py-2 px-4 font-medium text-bodydark1 duration-300 ease-in-out hover:bg-graydark dark:hover:bg-meta-4 ${ className={ `group relative flex items-center gap-2.5 rounded-sm py-2 px-4 font-medium text-bodydark1 duration-300 ease-in-out hover:bg-graydark dark:hover:bg-meta-4 ${
(pathname === '/logs' || (pathname === "/logs" ||
pathname.includes('logs')) && pathname.includes("logs")) &&
'bg-graydark dark:bg-meta-4' "bg-graydark dark:bg-meta-4"
}` } }` }
onClick={(e) => { onClick={ (e) =>
{
e.preventDefault(); e.preventDefault();
sidebarExpanded sidebarExpanded
? handleClick() ? handleClick()
@ -134,10 +154,10 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
} } } }
> >
{t('pages.logs')} { t("pages.logs") }
<svg <svg
className={ `absolute right-4 top-1/2 -translate-y-1/2 fill-current ${ className={ `absolute right-4 top-1/2 -translate-y-1/2 fill-current ${
open && 'rotate-180' open && "rotate-180"
}` } }` }
width="20" width="20"
height="20" height="20"
@ -156,7 +176,7 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
{/* <!-- Dropdown Menu Start --> */ } {/* <!-- Dropdown Menu Start --> */ }
<div <div
className={ `translate transform overflow-hidden ${ className={ `translate transform overflow-hidden ${
!open && 'hidden' !open && "hidden"
}` } }` }
> >
<ul className="mt-4 mb-5.5 flex flex-col gap-2.5 pl-6"> <ul className="mt-4 mb-5.5 flex flex-col gap-2.5 pl-6">
@ -164,22 +184,22 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
<NavLink <NavLink
to="/logs/stations" to="/logs/stations"
className={ ({ isActive }) => className={ ({ isActive }) =>
'group relative flex items-center gap-2.5 rounded-md px-4 font-medium text-bodydark2 duration-300 ease-in-out hover:text-white ' + "group relative flex items-center gap-2.5 rounded-md px-4 font-medium text-bodydark2 duration-300 ease-in-out hover:text-white " +
(isActive && '!text-white') (isActive && "!text-white")
} }
> >
{t('pages.stations')} { t("pages.stations") }
</NavLink> </NavLink>
</li> </li>
<li> <li>
<NavLink <NavLink
to="/logs/trains" to="/logs/trains"
className={ ({ isActive }) => className={ ({ isActive }) =>
'group relative flex items-center gap-2.5 rounded-md px-4 font-medium text-bodydark2 duration-300 ease-in-out hover:text-white ' + "group relative flex items-center gap-2.5 rounded-md px-4 font-medium text-bodydark2 duration-300 ease-in-out hover:text-white " +
(isActive && '!text-white') (isActive && "!text-white")
} }
> >
{t('pages.trains')} { t("pages.trains") }
</NavLink> </NavLink>
</li> </li>
</ul> </ul>
@ -192,20 +212,22 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
<SidebarLinkGroup <SidebarLinkGroup
activeCondition={ activeCondition={
pathname === '/leaderboard' || pathname.includes('leaderboard') pathname === "/leaderboard" || pathname.includes("leaderboard")
} }
> >
{(handleClick, open) => { { (handleClick, open) =>
{
return ( return (
<React.Fragment> <React.Fragment>
<NavLink <NavLink
to="#" to="#"
className={ `group relative flex items-center gap-2.5 rounded-sm py-2 px-4 font-medium text-bodydark1 duration-300 ease-in-out hover:bg-graydark dark:hover:bg-meta-4 ${ className={ `group relative flex items-center gap-2.5 rounded-sm py-2 px-4 font-medium text-bodydark1 duration-300 ease-in-out hover:bg-graydark dark:hover:bg-meta-4 ${
(pathname === '/leaderboard' || (pathname === "/leaderboard" ||
pathname.includes('leaderboard')) && pathname.includes("leaderboard")) &&
'bg-graydark dark:bg-meta-4' "bg-graydark dark:bg-meta-4"
}` } }` }
onClick={(e) => { onClick={ (e) =>
{
e.preventDefault(); e.preventDefault();
sidebarExpanded sidebarExpanded
? handleClick() ? handleClick()
@ -213,10 +235,10 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
} } } }
> >
{t('pages.leaderboard')} { t("pages.leaderboard") }
<svg <svg
className={ `absolute right-4 top-1/2 -translate-y-1/2 fill-current ${ className={ `absolute right-4 top-1/2 -translate-y-1/2 fill-current ${
open && 'rotate-180' open && "rotate-180"
}` } }` }
width="20" width="20"
height="20" height="20"
@ -235,7 +257,7 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
{/* <!-- Dropdown Menu Start --> */ } {/* <!-- Dropdown Menu Start --> */ }
<div <div
className={ `translate transform overflow-hidden ${ className={ `translate transform overflow-hidden ${
!open && 'hidden' !open && "hidden"
}` } }` }
> >
<ul className="mt-4 mb-5.5 flex flex-col gap-2.5 pl-6"> <ul className="mt-4 mb-5.5 flex flex-col gap-2.5 pl-6">
@ -243,22 +265,22 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
<NavLink <NavLink
to="/leaderboard/stations" to="/leaderboard/stations"
className={ ({ isActive }) => className={ ({ isActive }) =>
'group relative flex items-center gap-2.5 rounded-md px-4 font-medium text-bodydark2 duration-300 ease-in-out hover:text-white ' + "group relative flex items-center gap-2.5 rounded-md px-4 font-medium text-bodydark2 duration-300 ease-in-out hover:text-white " +
(isActive && '!text-white') (isActive && "!text-white")
} }
> >
{t('pages.stations')} { t("pages.stations") }
</NavLink> </NavLink>
</li> </li>
<li> <li>
<NavLink <NavLink
to="/leaderboard/trains" to="/leaderboard/trains"
className={ ({ isActive }) => className={ ({ isActive }) =>
'group relative flex items-center gap-2.5 rounded-md px-4 font-medium text-bodydark2 duration-300 ease-in-out hover:text-white ' + "group relative flex items-center gap-2.5 rounded-md px-4 font-medium text-bodydark2 duration-300 ease-in-out hover:text-white " +
(isActive && '!text-white') (isActive && "!text-white")
} }
> >
{t('pages.trains')} { t("pages.trains") }
</NavLink> </NavLink>
</li> </li>
</ul> </ul>
@ -274,8 +296,8 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
<NavLink <NavLink
to="/settings" to="/settings"
className={ `group relative flex items-center gap-2.5 rounded-sm py-2 px-4 font-medium text-bodydark1 duration-300 ease-in-out hover:bg-graydark dark:hover:bg-meta-4 ${ className={ `group relative flex items-center gap-2.5 rounded-sm py-2 px-4 font-medium text-bodydark1 duration-300 ease-in-out hover:bg-graydark dark:hover:bg-meta-4 ${
pathname.includes('settings') && pathname.includes("settings") &&
'bg-graydark dark:bg-meta-4' "bg-graydark dark:bg-meta-4"
}` } }` }
> >
<svg <svg
@ -326,7 +348,7 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
<NavLink <NavLink
to="/chart" to="/chart"
className={ `group relative flex items-center gap-2.5 rounded-sm py-2 px-4 font-medium text-bodydark1 duration-300 ease-in-out hover:bg-graydark dark:hover:bg-meta-4 ${ className={ `group relative flex items-center gap-2.5 rounded-sm py-2 px-4 font-medium text-bodydark1 duration-300 ease-in-out hover:bg-graydark dark:hover:bg-meta-4 ${
pathname.includes('chart') && 'bg-graydark dark:bg-meta-4' pathname.includes("chart") && "bg-graydark dark:bg-meta-4"
}` } }` }
> >
<svg <svg
@ -365,18 +387,20 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
{/* <!-- Menu Item Ui Elements --> */ } {/* <!-- Menu Item Ui Elements --> */ }
<SidebarLinkGroup <SidebarLinkGroup
activeCondition={pathname === '/ui' || pathname.includes('ui')} activeCondition={ pathname === "/ui" || pathname.includes("ui") }
> >
{(handleClick, open) => { { (handleClick, open) =>
{
return ( return (
<React.Fragment> <React.Fragment>
<NavLink <NavLink
to="#" to="#"
className={ `group relative flex items-center gap-2.5 rounded-sm px-4 py-2 font-medium text-bodydark1 duration-300 ease-in-out hover:bg-graydark dark:hover:bg-meta-4 ${ className={ `group relative flex items-center gap-2.5 rounded-sm px-4 py-2 font-medium text-bodydark1 duration-300 ease-in-out hover:bg-graydark dark:hover:bg-meta-4 ${
(pathname === '/ui' || pathname.includes('ui')) && (pathname === "/ui" || pathname.includes("ui")) &&
'bg-graydark dark:bg-meta-4' "bg-graydark dark:bg-meta-4"
}` } }` }
onClick={(e) => { onClick={ (e) =>
{
e.preventDefault(); e.preventDefault();
sidebarExpanded sidebarExpanded
? handleClick() ? handleClick()
@ -419,7 +443,7 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
UI Elements UI Elements
<svg <svg
className={ `absolute right-4 top-1/2 -translate-y-1/2 fill-current ${ className={ `absolute right-4 top-1/2 -translate-y-1/2 fill-current ${
open && 'rotate-180' open && "rotate-180"
}` } }` }
width="20" width="20"
height="20" height="20"
@ -438,7 +462,7 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
{/* <!-- Dropdown Menu Start --> */ } {/* <!-- Dropdown Menu Start --> */ }
<div <div
className={ `translate transform overflow-hidden ${ className={ `translate transform overflow-hidden ${
!open && 'hidden' !open && "hidden"
}` } }` }
> >
<ul className="mb-5.5 mt-4 flex flex-col gap-2.5 pl-6"> <ul className="mb-5.5 mt-4 flex flex-col gap-2.5 pl-6">
@ -446,8 +470,8 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
<NavLink <NavLink
to="/ui/alerts" to="/ui/alerts"
className={ ({ isActive }) => className={ ({ isActive }) =>
'group relative flex items-center gap-2.5 rounded-md px-4 font-medium text-bodydark2 duration-300 ease-in-out hover:text-white ' + "group relative flex items-center gap-2.5 rounded-md px-4 font-medium text-bodydark2 duration-300 ease-in-out hover:text-white " +
(isActive && '!text-white') (isActive && "!text-white")
} }
> >
Alerts Alerts
@ -457,8 +481,8 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
<NavLink <NavLink
to="/ui/buttons" to="/ui/buttons"
className={ ({ isActive }) => className={ ({ isActive }) =>
'group relative flex items-center gap-2.5 rounded-md px-4 font-medium text-bodydark2 duration-300 ease-in-out hover:text-white ' + "group relative flex items-center gap-2.5 rounded-md px-4 font-medium text-bodydark2 duration-300 ease-in-out hover:text-white " +
(isActive && '!text-white') (isActive && "!text-white")
} }
> >
Buttons Buttons
@ -476,19 +500,21 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
{/* <!-- Menu Item Auth Pages --> */ } {/* <!-- Menu Item Auth Pages --> */ }
<SidebarLinkGroup <SidebarLinkGroup
activeCondition={ activeCondition={
pathname === '/auth' || pathname.includes('auth') pathname === "/auth" || pathname.includes("auth")
} }
> >
{(handleClick, open) => { { (handleClick, open) =>
{
return ( return (
<React.Fragment> <React.Fragment>
<NavLink <NavLink
to="#" to="#"
className={ `group relative flex items-center gap-2.5 rounded-sm py-2 px-4 font-medium text-bodydark1 duration-300 ease-in-out hover:bg-graydark dark:hover:bg-meta-4 ${ className={ `group relative flex items-center gap-2.5 rounded-sm py-2 px-4 font-medium text-bodydark1 duration-300 ease-in-out hover:bg-graydark dark:hover:bg-meta-4 ${
(pathname === '/auth' || pathname.includes('auth')) && (pathname === "/auth" || pathname.includes("auth")) &&
'bg-graydark dark:bg-meta-4' "bg-graydark dark:bg-meta-4"
}` } }` }
onClick={(e) => { onClick={ (e) =>
{
e.preventDefault(); e.preventDefault();
sidebarExpanded sidebarExpanded
? handleClick() ? handleClick()
@ -527,7 +553,7 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
Authentication Authentication
<svg <svg
className={ `absolute right-4 top-1/2 -translate-y-1/2 fill-current ${ className={ `absolute right-4 top-1/2 -translate-y-1/2 fill-current ${
open && 'rotate-180' open && "rotate-180"
}` } }` }
width="20" width="20"
height="20" height="20"
@ -546,7 +572,7 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
{/* <!-- Dropdown Menu Start --> */ } {/* <!-- Dropdown Menu Start --> */ }
<div <div
className={ `translate transform overflow-hidden ${ className={ `translate transform overflow-hidden ${
!open && 'hidden' !open && "hidden"
}` } }` }
> >
<ul className="mt-4 mb-5.5 flex flex-col gap-2.5 pl-6"> <ul className="mt-4 mb-5.5 flex flex-col gap-2.5 pl-6">
@ -554,8 +580,8 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
<NavLink <NavLink
to="/auth/signin" to="/auth/signin"
className={ ({ isActive }) => className={ ({ isActive }) =>
'group relative flex items-center gap-2.5 rounded-md px-4 font-medium text-bodydark2 duration-300 ease-in-out hover:text-white ' + "group relative flex items-center gap-2.5 rounded-md px-4 font-medium text-bodydark2 duration-300 ease-in-out hover:text-white " +
(isActive && '!text-white') (isActive && "!text-white")
} }
> >
Sign In Sign In
@ -565,8 +591,8 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
<NavLink <NavLink
to="/auth/signup" to="/auth/signup"
className={ ({ isActive }) => className={ ({ isActive }) =>
'group relative flex items-center gap-2.5 rounded-md px-4 font-medium text-bodydark2 duration-300 ease-in-out hover:text-white ' + "group relative flex items-center gap-2.5 rounded-md px-4 font-medium text-bodydark2 duration-300 ease-in-out hover:text-white " +
(isActive && '!text-white') (isActive && "!text-white")
} }
> >
Sign Up Sign Up

13
packages/frontend/src/components/mini/util/PageTitle.tsx
View File

@ -1,14 +1,17 @@
import { useEffect } from 'react' import { useEffect } from "react";
import { useLocation } from 'react-router-dom' import { useLocation } from "react-router-dom";
interface PageTitleProps { interface PageTitleProps
{
title: string; title: string;
} }
export const PageTitle: React.FC<PageTitleProps> = ({ title }) => { export const PageTitle: React.FC<PageTitleProps> = ({ title }) =>
{
const location = useLocation(); const location = useLocation();
useEffect(() => { useEffect(() =>
{
document.title = title; document.title = title;
}, [ location, title ]); }, [ location, title ]);

17
packages/frontend/src/components/mini/util/Search.tsx
View File

@ -1,9 +1,14 @@
import { ChangeEventHandler } from 'react'; import { ChangeEventHandler } from "react";
import { useTranslation } from 'react-i18next'; import { useTranslation } from "react-i18next";
export const Search = ({ searchItem, handleInputChange }: { searchItem: string; handleInputChange: ChangeEventHandler }) => { export const Search = ({ searchItem, handleInputChange }: {
searchItem: string;
handleInputChange: ChangeEventHandler
}) =>
{
const { t } = useTranslation(); const { t } = useTranslation();
return <div className="col-span-12 rounded-sm border border-stroke bg-white px-5 pt-7.5 pb-5 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:col-span-8"> return <div
className="col-span-12 rounded-sm border border-stroke bg-white px-5 pt-7.5 pb-5 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:col-span-8">
<div className="flex justify-center items-center"> <div className="flex justify-center items-center">
<input <input
className="w-full rounded border border-stroke bg-gray py-3 pl-5 pr-5 text-black focus:border-primary focus-visible:outline-none dark:border-strokedark dark:bg-meta-4 dark:text-white dark:focus:border-primary" className="w-full rounded border border-stroke bg-gray py-3 pl-5 pr-5 text-black focus:border-primary focus-visible:outline-none dark:border-strokedark dark:bg-meta-4 dark:text-white dark:focus:border-primary"
@ -13,5 +18,5 @@ export const Search = ({ searchItem, handleInputChange }: { searchItem: string;
placeholder={ t("logs.search") } placeholder={ t("logs.search") }
/> />
</div> </div>
</div> </div>;
} };

27
packages/frontend/src/components/pages/leaderboard/StationTable.tsx
View File

@ -1,20 +1,23 @@
import { useTranslation } from 'react-i18next'; import { useTranslation } from "react-i18next";
import { Link } from 'react-router-dom'; import { Link } from "react-router-dom";
import { TLeaderboardRecord } from '../../../types/leaderboard.ts'; import { TLeaderboardRecord } from "../../../types/leaderboard.ts";
import { ContentLoader } from '../../mini/loaders/ContentLoader.tsx'; import { ContentLoader } from "../../mini/loaders/ContentLoader.tsx";
import { WarningAlert } from '../../mini/alerts/Warning.tsx'; import { WarningAlert } from "../../mini/alerts/Warning.tsx";
export const StationTable = ({ stations, error }: { stations: TLeaderboardRecord[], error: number }) => { export const StationTable = ({ stations, error }: { stations: TLeaderboardRecord[], error: number }) =>
{
const { t } = useTranslation(); const { t } = useTranslation();
return ( return (
<> <>
{error === 2 && <WarningAlert title={t("contentloader.notfound.header")} description={t("contentloader.notfound.description")} />} { error === 2 && <WarningAlert title={ t("contentloader.notfound.header") }
description={ t("contentloader.notfound.description") }/> }
{ error === 0 && <ContentLoader/> } { error === 0 && <ContentLoader/> }
{error === 1 && <div className="rounded-sm border border-stroke bg-white px-5 pt-6 pb-2.5 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:pb-1"> { error === 1 && <div
className="rounded-sm border border-stroke bg-white px-5 pt-6 pb-2.5 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:pb-1">
<div className="flex flex-col"> <div className="flex flex-col">
<div className="grid grid-cols-2 rounded-sm bg-gray-2 dark:bg-meta-4 sm:grid-cols-3"> <div className="grid grid-cols-2 rounded-sm bg-gray-2 dark:bg-meta-4 sm:grid-cols-3">
@ -38,15 +41,15 @@ export const StationTable = ({ stations, error }: { stations: TLeaderboardRecor
{ stations.map((station, key) => ( { stations.map((station, key) => (
<div <div
className={ `grid grid-cols-2 sm:grid-cols-3 ${ stations.length === (key + 1) // todo: ... className={ `grid grid-cols-2 sm:grid-cols-3 ${ stations.length === (key + 1) // todo: ...
? '' ? ""
: 'border-b border-stroke dark:border-strokedark' : "border-b border-stroke dark:border-strokedark"
}` } }` }
key={ station.id } key={ station.id }
> >
<div className="flex justify-center items-center gap-3 p-5 lg:p-5"> <div className="flex justify-center items-center gap-3 p-5 lg:p-5">
<p className="text-black dark:text-white sm:block break-all"> <p className="text-black dark:text-white sm:block break-all">
<Link to={ "/profile/" + station.steam } <Link to={ "/profile/" + station.steam }
className='color-orchid'>{station.steamName}</Link> className="color-orchid">{ station.steamName }</Link>
</p> </p>
</div> </div>
@ -69,4 +72,4 @@ export const StationTable = ({ stations, error }: { stations: TLeaderboardRecor
</> </>
); );
} };

31
packages/frontend/src/components/pages/leaderboard/TrainTable.tsx
View File

@ -1,18 +1,22 @@
import { useTranslation } from 'react-i18next'; import { useTranslation } from "react-i18next";
import { Link } from 'react-router-dom'; import { Link } from "react-router-dom";
import { TLeaderboardRecord } from '../../../types/leaderboard.ts'; import { TLeaderboardRecord } from "../../../types/leaderboard.ts";
import { ContentLoader } from '../../mini/loaders/ContentLoader.tsx'; import { ContentLoader } from "../../mini/loaders/ContentLoader.tsx";
import { WarningAlert } from '../../mini/alerts/Warning.tsx'; import { WarningAlert } from "../../mini/alerts/Warning.tsx";
export const TrainTable = ({ trains, error }: { trains: TLeaderboardRecord[], error: number }) => { export const TrainTable = ({ trains, error }: { trains: TLeaderboardRecord[], error: number }) =>
{
const { t } = useTranslation(); const { t } = useTranslation();
return ( return (
<> <>
{error === 2 && <WarningAlert title={t("contentloader.notfound.header")} description={t("contentloader.notfound.description")} />} { error === 2 && <WarningAlert title={ t("contentloader.notfound.header") }
description={ t("contentloader.notfound.description") }/> }
{ error === 0 && <ContentLoader/> } { error === 0 && <ContentLoader/> }
{error === 1 && <div className="rounded-sm border border-stroke bg-white px-5 pt-6 pb-2.5 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:pb-1"> <div className="flex flex-col"> { error === 1 && <div
className="rounded-sm border border-stroke bg-white px-5 pt-6 pb-2.5 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:pb-1">
<div className="flex flex-col">
<div className="grid grid-cols-4 rounded-sm bg-gray-2 dark:bg-meta-4 sm:grid-cols-5"> <div className="grid grid-cols-4 rounded-sm bg-gray-2 dark:bg-meta-4 sm:grid-cols-5">
<div className="p-2.5 text-center xl:p-5"> <div className="p-2.5 text-center xl:p-5">
<h5 className="text-sm font-medium uppercase xsm:text-base"> <h5 className="text-sm font-medium uppercase xsm:text-base">
@ -44,15 +48,15 @@ export const TrainTable = ({ trains, error }: { trains: TLeaderboardRecord[], er
{ trains.map((train, key) => ( { trains.map((train, key) => (
<div <div
className={ `grid grid-cols-4 sm:grid-cols-5 ${ trains.length === (key + 1) className={ `grid grid-cols-4 sm:grid-cols-5 ${ trains.length === (key + 1)
? '' ? ""
: 'border-b border-stroke dark:border-strokedark' : "border-b border-stroke dark:border-strokedark"
}` } }` }
key={ train.id } key={ train.id }
> >
<div className="flex items-center justify-center gap-3 p-5 lg:p-5"> <div className="flex items-center justify-center gap-3 p-5 lg:p-5">
<p className="text-black dark:text-white sm:block break-all"> <p className="text-black dark:text-white sm:block break-all">
<Link to={ "/profile/" + train.steam } <Link to={ "/profile/" + train.steam }
className='color-orchid'>{train.steamName}</Link> className="color-orchid">{ train.steamName }</Link>
</p> </p>
</div> </div>
@ -78,8 +82,9 @@ export const TrainTable = ({ trains, error }: { trains: TLeaderboardRecord[], er
</div> </div>
</div> </div>
)) } )) }
</div> </div>} </div>
</div> }
</> </>
); );
} };

34
packages/frontend/src/components/pages/logs/StationTable.tsx
View File

@ -1,23 +1,26 @@
import { useTranslation } from 'react-i18next'; import { useTranslation } from "react-i18next";
import { Link } from 'react-router-dom'; import { Link } from "react-router-dom";
import dayjs from 'dayjs'; import dayjs from "dayjs";
import { ContentLoader } from '../../mini/loaders/ContentLoader.tsx'; import { ContentLoader } from "../../mini/loaders/ContentLoader.tsx";
import { TStationRecord } from '../../../types/station.ts'; import { TStationRecord } from "../../../types/station.ts";
import { WarningAlert } from '../../mini/alerts/Warning.tsx'; import { WarningAlert } from "../../mini/alerts/Warning.tsx";
// setSearchItem: Dispatch<SetStateAction<string>> // setSearchItem: Dispatch<SetStateAction<string>>
export const StationTable = ({ stations, error }: { export const StationTable = ({ stations, error }: {
stations: TStationRecord[], error: number stations: TStationRecord[], error: number
}) => { }) =>
{
const { t } = useTranslation(); const { t } = useTranslation();
return ( return (
<> <>
{error === 2 && <WarningAlert title={t("contentloader.notfound.header")} description={t("contentloader.notfound.description")} />} { error === 2 && <WarningAlert title={ t("contentloader.notfound.header") }
description={ t("contentloader.notfound.description") }/> }
{ error === 0 && <ContentLoader/> } { error === 0 && <ContentLoader/> }
{error === 1 && <div className="rounded-sm border border-stroke bg-white px-5 pt-6 pb-2.5 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:pb-1"> { error === 1 && <div
className="rounded-sm border border-stroke bg-white px-5 pt-6 pb-2.5 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:pb-1">
<div className="flex flex-col"> <div className="flex flex-col">
<div className="grid grid-cols-3 rounded-sm bg-gray-2 dark:bg-meta-4 sm:grid-cols-4"> <div className="grid grid-cols-3 rounded-sm bg-gray-2 dark:bg-meta-4 sm:grid-cols-4">
<div className="p-2.5 text-center xl:p-5"> <div className="p-2.5 text-center xl:p-5">
@ -45,15 +48,15 @@ export const StationTable = ({ stations, error }: {
{ stations.map((station, key) => ( { stations.map((station, key) => (
<div <div
className={ `grid grid-cols-3 sm:grid-cols-4 ${ stations.length === (key + 1) className={ `grid grid-cols-3 sm:grid-cols-4 ${ stations.length === (key + 1)
? '' ? ""
: 'border-b border-stroke dark:border-strokedark' : "border-b border-stroke dark:border-strokedark"
}` } }` }
key={ station.id } key={ station.id }
> >
<div className="flex items-center justify-center gap-3 p-2.5 lg:p-5"> <div className="flex items-center justify-center gap-3 p-2.5 lg:p-5">
<p className="text-black dark:text-white sm:block break-all"> <p className="text-black dark:text-white sm:block break-all">
<Link to={ "/profile/" + station.userSteamId } <Link to={ "/profile/" + station.userSteamId }
className='color-orchid'>{station.userUsername}</Link> className="color-orchid">{ station.userUsername }</Link>
</p> </p>
</div> </div>
@ -62,10 +65,11 @@ export const StationTable = ({ stations, error }: {
</div> </div>
<div className="hidden sm:flex items-center justify-center p-2.5 lg:p-5"> <div className="hidden sm:flex items-center justify-center p-2.5 lg:p-5">
<p className="text-meta-3">{dayjs(station.leftDate).format('HH:mm DD/MM/YYYY')}</p> <p className="text-meta-3">{ dayjs(station.leftDate).format("HH:mm DD/MM/YYYY") }</p>
</div> </div>
<div className="items-center justify-center p-2.5 flex xl:p-5 gap-2 flex-wrap sm:flex-nowrap "> <div
className="items-center justify-center p-2.5 flex xl:p-5 gap-2 flex-wrap sm:flex-nowrap ">
<Link <Link
to={ "/profile/" + station.userSteamId } to={ "/profile/" + station.userSteamId }
className="inline-flex items-center justify-center rounded-md bg-primary py-2 px-5 text-center font-medium text-white hover:bg-opacity-50 lg:px-4 xl:px-5" className="inline-flex items-center justify-center rounded-md bg-primary py-2 px-5 text-center font-medium text-white hover:bg-opacity-50 lg:px-4 xl:px-5"
@ -85,4 +89,4 @@ export const StationTable = ({ stations, error }: {
</div> } </div> }
</> </>
); );
} };

36
packages/frontend/src/components/pages/logs/TrainTable.tsx
View File

@ -1,22 +1,25 @@
import { useTranslation } from 'react-i18next'; import { useTranslation } from "react-i18next";
import { Link } from 'react-router-dom'; import { Link } from "react-router-dom";
import { TTrainRecord } from '../../../types/train.ts'; import { TTrainRecord } from "../../../types/train.ts";
import dayjs from 'dayjs'; import dayjs from "dayjs";
import { ContentLoader } from '../../mini/loaders/ContentLoader.tsx'; import { ContentLoader } from "../../mini/loaders/ContentLoader.tsx";
import { WarningAlert } from '../../mini/alerts/Warning.tsx'; import { WarningAlert } from "../../mini/alerts/Warning.tsx";
// setSearchItem: Dispatch<SetStateAction<string>> // setSearchItem: Dispatch<SetStateAction<string>>
export const TrainTable = ({ trains, error }: { export const TrainTable = ({ trains, error }: {
trains: TTrainRecord[], error: number trains: TTrainRecord[], error: number
}) => { }) =>
{
const { t } = useTranslation(); const { t } = useTranslation();
return ( return (
<> <>
{error === 2 && <WarningAlert title={t("contentloader.notfound.header")} description={t("contentloader.notfound.description")} />} { error === 2 && <WarningAlert title={ t("contentloader.notfound.header") }
description={ t("contentloader.notfound.description") }/> }
{ error === 0 && <ContentLoader/> } { error === 0 && <ContentLoader/> }
{error === 1 && <div className="rounded-sm border border-stroke bg-white px-5 pt-6 pb-2.5 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:pb-1"> { error === 1 && <div
className="rounded-sm border border-stroke bg-white px-5 pt-6 pb-2.5 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:pb-1">
<div className="flex flex-col"> <div className="flex flex-col">
<div className="grid grid-cols-3 rounded-sm bg-gray-2 dark:bg-meta-4 sm:grid-cols-6"> <div className="grid grid-cols-3 rounded-sm bg-gray-2 dark:bg-meta-4 sm:grid-cols-6">
<div className="p-2.5 text-center xl:p-5"> <div className="p-2.5 text-center xl:p-5">
@ -54,15 +57,15 @@ export const TrainTable = ({ trains, error }: {
{ trains.map((train, key) => ( { trains.map((train, key) => (
<div <div
className={ `grid grid-cols-3 sm:grid-cols-6 ${ trains.length === (key + 1) className={ `grid grid-cols-3 sm:grid-cols-6 ${ trains.length === (key + 1)
? '' ? ""
: 'border-b border-stroke dark:border-strokedark' : "border-b border-stroke dark:border-strokedark"
}` } }` }
key={ train.id } key={ train.id }
> >
<div className="flex items-center justify-center gap-3 p-2.5 lg:p-5"> <div className="flex items-center justify-center gap-3 p-2.5 lg:p-5">
<p className="text-black dark:text-white sm:block break-all"> <p className="text-black dark:text-white sm:block break-all">
<Link to={ "/profile/" + train.userSteamId } <Link to={ "/profile/" + train.userSteamId }
className='color-orchid'>{train.userUsername}</Link> className="color-orchid">{ train.userUsername }</Link>
</p> </p>
</div> </div>
@ -75,14 +78,15 @@ export const TrainTable = ({ trains, error }: {
</div> </div>
<div className="hidden sm:flex items-center justify-center p-2.5 lg:p-5"> <div className="hidden sm:flex items-center justify-center p-2.5 lg:p-5">
<p className="text-meta-5">{train.distance ? `${(train.distance / 1000).toFixed(2)}km` : '--'}</p> <p className="text-meta-5">{ train.distance ? `${ (train.distance / 1000).toFixed(2) }km` : "--" }</p>
</div> </div>
<div className="hidden sm:flex items-center justify-center p-2.5 lg:p-5"> <div className="hidden sm:flex items-center justify-center p-2.5 lg:p-5">
<p className="text-meta-3">{dayjs(train.leftDate).format('HH:mm DD/MM/YYYY')}</p> <p className="text-meta-3">{ dayjs(train.leftDate).format("HH:mm DD/MM/YYYY") }</p>
</div> </div>
<div className="items-center justify-center p-2.5 flex xl:p-5 gap-2 flex-wrap sm:flex-nowrap "> <div
className="items-center justify-center p-2.5 flex xl:p-5 gap-2 flex-wrap sm:flex-nowrap ">
<Link <Link
to={ "/profile/" + train.userSteamId } to={ "/profile/" + train.userSteamId }
className="inline-flex items-center justify-center rounded-md bg-primary py-2 px-5 text-center font-medium text-white hover:bg-opacity-50 lg:px-4 xl:px-5" className="inline-flex items-center justify-center rounded-md bg-primary py-2 px-5 text-center font-medium text-white hover:bg-opacity-50 lg:px-4 xl:px-5"
@ -102,4 +106,4 @@ export const TrainTable = ({ trains, error }: {
</div> } </div> }
</> </>
); );
} };

62
packages/frontend/src/components/pages/profile/Profile.tsx
View File

@ -1,18 +1,21 @@
import { useState } from 'react'; import { useState } from "react";
import { TProfileData } from '../../../types/profile.ts'; import { TProfileData } from "../../../types/profile.ts";
import { useTranslation } from 'react-i18next'; import { useTranslation } from "react-i18next";
export const ProfileCard = ({ data }: { data: TProfileData }) => { export const ProfileCard = ({ data }: { data: TProfileData }) =>
{
const [ showTrains, setShowTrains ] = useState(false); const [ showTrains, setShowTrains ] = useState(false);
const [ showStations, setShowStations ] = useState(false); const [ showStations, setShowStations ] = useState(false);
const { t } = useTranslation(); const { t } = useTranslation();
return <div className="overflow-hidden rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark"> return <div
className="overflow-hidden rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
<div className="px-4 pt-6 text-center lg:pb-8 xl:pb-11.5"> <div className="px-4 pt-6 text-center lg:pb-8 xl:pb-11.5">
<div className="mx-auto w-full max-w-30 rounded-full bg-white/20 p-1 backdrop-blur sm:h-44 sm:max-w-44 sm:p-3"> <div
className="mx-auto w-full max-w-30 rounded-full bg-white/20 p-1 backdrop-blur sm:h-44 sm:max-w-44 sm:p-3">
<div className="relative drop-shadow-2"> <div className="relative drop-shadow-2">
<img className='rounded-full' src={data.steam.avatarfull} alt="profile" /> <img className="rounded-full" src={ data.steam.avatarfull } alt="profile"/>
</div> </div>
</div> </div>
<div className="mt-4"> <div className="mt-4">
@ -20,14 +23,17 @@ export const ProfileCard = ({ data }: { data: TProfileData }) => {
{ data.steam.personname } { data.steam.personname }
</h3> </h3>
<div className="mx-auto mt-4.5 mb-5.5 grid max-w-94 grid-cols-2 rounded-md border border-stroke py-2.5 shadow-1 dark:border-strokedark dark:bg-[#37404F]"> <div
<div className="flex flex-col items-center justify-center gap-1 border-r border-stroke px-4 dark:border-strokedark xsm:flex-row"> className="mx-auto mt-4.5 mb-5.5 grid max-w-94 grid-cols-2 rounded-md border border-stroke py-2.5 shadow-1 dark:border-strokedark dark:bg-[#37404F]">
<div
className="flex flex-col items-center justify-center gap-1 border-r border-stroke px-4 dark:border-strokedark xsm:flex-row">
<span className="font-semibold text-black dark:text-white"> <span className="font-semibold text-black dark:text-white">
{ Math.floor(data.player.trainDistance / 1000) }km { Math.floor(data.player.trainDistance / 1000) }km
</span> </span>
<span className="text-sm text-wrap">{ t("profile.stats.distance") }</span> <span className="text-sm text-wrap">{ t("profile.stats.distance") }</span>
</div> </div>
<div className="flex flex-col items-center justify-center gap-1 border-r border-stroke px-4 dark:border-strokedark xsm:flex-row"> <div
className="flex flex-col items-center justify-center gap-1 border-r border-stroke px-4 dark:border-strokedark xsm:flex-row">
<span className="font-semibold text-black dark:text-white"> <span className="font-semibold text-black dark:text-white">
{ Math.floor(data.player.dispatcherTime / 3600000) }h { Math.floor(data.player.dispatcherTime / 3600000) }h
</span> </span>
@ -36,11 +42,12 @@ export const ProfileCard = ({ data }: { data: TProfileData }) => {
</div> </div>
</div> </div>
</div> </div>
{Object.keys(data.player.trainStats || {}).length > 0 && <div className="bg-white px-5 pt-6 pb-5 shadow-default dark:bg-boxdark sm:px-7.5"> { Object.keys(data.player.trainStats || {}).length > 0 &&
<div className="bg-white px-5 pt-6 pb-5 shadow-default dark:bg-boxdark sm:px-7.5">
<div className="group relative cursor-pointer" onClick={ () => setShowTrains(val => !val) }> <div className="group relative cursor-pointer" onClick={ () => setShowTrains(val => !val) }>
<h1 className='text-xl text-black dark:text-white pb-5'>{t("profile.trains.header")}</h1> <h1 className="text-xl text-black dark:text-white pb-5">{ t("profile.trains.header") }</h1>
<svg <svg
className={`absolute right-4 top-1/2 -translate-y-1/2 fill-current ${showTrains && 'rotate-180' className={ `absolute right-4 top-1/2 -translate-y-1/2 fill-current ${ showTrains && "rotate-180"
}` } }` }
width="20" width="20"
height="20" height="20"
@ -81,14 +88,12 @@ export const ProfileCard = ({ data }: { data: TProfileData }) => {
</div> </div>
</div> </div>
{Object.keys(data.player.trainStats).map(trainName => { { Object.keys(data.player.trainStats).map(trainName =>
{
const train = data.player.trainStats[ trainName ]; const train = data.player.trainStats[ trainName ];
return <div return <div
className={`grid grid-cols-3 sm:grid-cols-4 ${false className={ `grid grid-cols-3 sm:grid-cols-4 border-t border-t-stroke dark:border-t-strokedark` }
? ''
: 'border-t border-t-stroke dark:border-t-strokedark'
}`}
key={ 1 } key={ 1 }
> >
<div className="flex items-center justify-center gap-3 p-2.5 lg:p-5"> <div className="flex items-center justify-center gap-3 p-2.5 lg:p-5">
@ -108,18 +113,19 @@ export const ProfileCard = ({ data }: { data: TProfileData }) => {
<div className="hidden sm:flex items-center justify-center p-2.5 lg:p-5"> <div className="hidden sm:flex items-center justify-center p-2.5 lg:p-5">
<p className="text-meta-3">{ Math.floor(train.time / 3600000) }h</p> <p className="text-meta-3">{ Math.floor(train.time / 3600000) }h</p>
</div> </div>
</div> </div>;
}) } }) }
</div> } </div> }
</div> } </div> }
{Object.keys(data.player.dispatcherStats || {}).length > 0 && <div className="bg-white px-5 pt-6 pb-5 shadow-default dark:bg-boxdark sm:px-7.5"> { Object.keys(data.player.dispatcherStats || {}).length > 0 &&
<div className="bg-white px-5 pt-6 pb-5 shadow-default dark:bg-boxdark sm:px-7.5">
<div className="group relative cursor-pointer" onClick={ () => setShowStations(val => !val) }> <div className="group relative cursor-pointer" onClick={ () => setShowStations(val => !val) }>
<h1 className='text-xl text-black dark:text-white pb-5'>{t("profile.stations.header")}</h1> <h1 className="text-xl text-black dark:text-white pb-5">{ t("profile.stations.header") }</h1>
<svg <svg
className={`absolute right-4 top-1/2 -translate-y-1/2 fill-current ${showStations && 'rotate-180' className={ `absolute right-4 top-1/2 -translate-y-1/2 fill-current ${ showStations && "rotate-180"
}` } }` }
width="20" width="20"
height="20" height="20"
@ -149,13 +155,11 @@ export const ProfileCard = ({ data }: { data: TProfileData }) => {
</h5> </h5>
</div> </div>
</div> </div>
{Object.keys(data.player.dispatcherStats).map(stationName => { { Object.keys(data.player.dispatcherStats).map(stationName =>
{
const station = data.player.dispatcherStats[ stationName ]; const station = data.player.dispatcherStats[ stationName ];
return <div return <div
className={`grid grid-cols-2 ${false className={ `grid grid-cols-2 border-t border-t-stroke dark:border-t-strokedark` }
? ''
: 'border-t border-t-stroke dark:border-t-strokedark'
}`}
key={ 1 } key={ 1 }
> >
<div className="flex items-center justify-center gap-3 p-2.5 lg:p-5"> <div className="flex items-center justify-center gap-3 p-2.5 lg:p-5">
@ -173,5 +177,5 @@ export const ProfileCard = ({ data }: { data: TProfileData }) => {
</div> } </div> }
</div> } </div> }
</div> </div>;
} };

37
packages/frontend/src/css/style.css
View File

@ -25,6 +25,7 @@
.chat-height { .chat-height {
@apply h-[calc(100vh_-_8.125rem)] lg:h-[calc(100vh_-_5.625rem)]; @apply h-[calc(100vh_-_8.125rem)] lg:h-[calc(100vh_-_5.625rem)];
} }
.inbox-height { .inbox-height {
@apply h-[calc(100vh_-_8.125rem)] lg:h-[calc(100vh_-_5.625rem)]; @apply h-[calc(100vh_-_8.125rem)] lg:h-[calc(100vh_-_5.625rem)];
} }
@ -35,6 +36,7 @@
.tableCheckbox:checked ~ div span { .tableCheckbox:checked ~ div span {
@apply opacity-100; @apply opacity-100;
} }
.tableCheckbox:checked ~ div { .tableCheckbox:checked ~ div {
@apply bg-primary border-primary; @apply bg-primary border-primary;
} }
@ -42,40 +44,52 @@
.apexcharts-legend-text { .apexcharts-legend-text {
@apply !text-body dark:!text-bodydark; @apply !text-body dark:!text-bodydark;
} }
.apexcharts-text { .apexcharts-text {
@apply !fill-body dark:!fill-bodydark; @apply !fill-body dark:!fill-bodydark;
} }
.apexcharts-xcrosshairs { .apexcharts-xcrosshairs {
@apply !fill-stroke dark:!fill-strokedark; @apply !fill-stroke dark:!fill-strokedark;
} }
.apexcharts-gridline { .apexcharts-gridline {
@apply !stroke-stroke dark:!stroke-strokedark; @apply !stroke-stroke dark:!stroke-strokedark;
} }
.apexcharts-series.apexcharts-pie-series path { .apexcharts-series.apexcharts-pie-series path {
@apply dark:!stroke-transparent; @apply dark:!stroke-transparent;
} }
.apexcharts-legend-series { .apexcharts-legend-series {
@apply !inline-flex gap-1.5; @apply !inline-flex gap-1.5;
} }
.apexcharts-tooltip.apexcharts-theme-light { .apexcharts-tooltip.apexcharts-theme-light {
@apply dark:!border-strokedark dark:!bg-boxdark; @apply dark:!border-strokedark dark:!bg-boxdark;
} }
.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title { .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
@apply dark:!border-strokedark dark:!bg-meta-4; @apply dark:!border-strokedark dark:!bg-meta-4;
} }
.apexcharts-xaxistooltip, .apexcharts-xaxistooltip,
.apexcharts-yaxistooltip { .apexcharts-yaxistooltip {
@apply dark:!border-meta-4 dark:!bg-meta-4 dark:!text-bodydark1; @apply dark:!border-meta-4 dark:!bg-meta-4 dark:!text-bodydark1;
} }
.apexcharts-xaxistooltip-bottom:after { .apexcharts-xaxistooltip-bottom:after {
@apply !border-b-gray dark:!border-b-meta-4; @apply !border-b-gray dark:!border-b-meta-4;
} }
.apexcharts-xaxistooltip-bottom:before { .apexcharts-xaxistooltip-bottom:before {
@apply !border-b-gray dark:!border-b-meta-4; @apply !border-b-gray dark:!border-b-meta-4;
} }
.apexcharts-xaxistooltip-bottom { .apexcharts-xaxistooltip-bottom {
@apply !rounded !border-none !bg-gray !text-xs !font-medium !text-black dark:!text-white; @apply !rounded !border-none !bg-gray !text-xs !font-medium !text-black dark:!text-white;
} }
.apexcharts-tooltip-series-group { .apexcharts-tooltip-series-group {
@apply !pl-1.5; @apply !pl-1.5;
} }
@ -83,38 +97,48 @@
.flatpickr-wrapper { .flatpickr-wrapper {
@apply w-full; @apply w-full;
} }
.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg { .flatpickr-months .flatpickr-next-month:hover svg {
@apply !fill-primary; @apply !fill-primary;
} }
.flatpickr-calendar.arrowTop:before { .flatpickr-calendar.arrowTop:before {
@apply dark:!border-b-boxdark; @apply dark:!border-b-boxdark;
} }
.flatpickr-calendar.arrowTop:after { .flatpickr-calendar.arrowTop:after {
@apply dark:!border-b-boxdark; @apply dark:!border-b-boxdark;
} }
.flatpickr-calendar { .flatpickr-calendar {
@apply !p-6 dark:!bg-boxdark dark:!text-bodydark dark:!shadow-8 2xsm:!w-auto; @apply !p-6 dark:!bg-boxdark dark:!text-bodydark dark:!shadow-8 2xsm:!w-auto;
} }
.flatpickr-day { .flatpickr-day {
@apply dark:!text-bodydark dark:hover:!border-meta-4 dark:hover:!bg-meta-4; @apply dark:!text-bodydark dark:hover:!border-meta-4 dark:hover:!bg-meta-4;
} }
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month { .flatpickr-months .flatpickr-next-month {
@apply !top-7 dark:!fill-white dark:!text-white; @apply !top-7 dark:!fill-white dark:!text-white;
} }
.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month, .flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month.flatpickr-prev-month { .flatpickr-months .flatpickr-next-month.flatpickr-prev-month {
@apply !left-7; @apply !left-7;
} }
.flatpickr-months .flatpickr-prev-month.flatpickr-next-month, .flatpickr-months .flatpickr-prev-month.flatpickr-next-month,
.flatpickr-months .flatpickr-next-month.flatpickr-next-month { .flatpickr-months .flatpickr-next-month.flatpickr-next-month {
@apply !right-7; @apply !right-7;
} }
span.flatpickr-weekday, span.flatpickr-weekday,
.flatpickr-months .flatpickr-month { .flatpickr-months .flatpickr-month {
@apply dark:!fill-white dark:!text-white; @apply dark:!fill-white dark:!text-white;
} }
.flatpickr-day.inRange { .flatpickr-day.inRange {
@apply dark:!shadow-7; @apply dark:!shadow-7;
box-shadow: -5px 0 0 #EFF4FB, 5px 0 0 #EFF4FB; box-shadow: -5px 0 0 #EFF4FB, 5px 0 0 #EFF4FB;
@ -139,12 +163,14 @@ span.flatpickr-weekday,
.flatpickr-day.nextMonthDay:focus { .flatpickr-day.nextMonthDay:focus {
@apply border-gray bg-gray dark:!border-meta-4 dark:!bg-meta-4; @apply border-gray bg-gray dark:!border-meta-4 dark:!bg-meta-4;
} }
.flatpickr-day.selected, .flatpickr-day.selected,
.flatpickr-day.startRange, .flatpickr-day.startRange,
.flatpickr-day.selected, .flatpickr-day.selected,
.flatpickr-day.endRange { .flatpickr-day.endRange {
@apply dark:!text-white; @apply dark:!text-white;
} }
.flatpickr-day.selected, .flatpickr-day.selected,
.flatpickr-day.startRange, .flatpickr-day.startRange,
.flatpickr-day.endRange, .flatpickr-day.endRange,
@ -166,6 +192,7 @@ span.flatpickr-weekday,
background: #3c50e0; background: #3c50e0;
@apply !border-primary !bg-primary hover:!border-primary hover:!bg-primary; @apply !border-primary !bg-primary hover:!border-primary hover:!bg-primary;
} }
.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n + 1)), .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n + 1)),
.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n + 1)), .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n + 1)),
.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n + 1)) { .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n + 1)) {
@ -175,21 +202,27 @@ span.flatpickr-weekday,
.map-btn .jvm-zoom-btn { .map-btn .jvm-zoom-btn {
@apply flex items-center justify-center w-7.5 h-7.5 rounded border border-stroke dark:border-strokedark hover:border-primary dark:hover:border-primary bg-white hover:bg-primary text-body hover:text-white dark:text-bodydark dark:hover:text-white text-2xl leading-none px-0 pt-0 pb-0.5; @apply flex items-center justify-center w-7.5 h-7.5 rounded border border-stroke dark:border-strokedark hover:border-primary dark:hover:border-primary bg-white hover:bg-primary text-body hover:text-white dark:text-bodydark dark:hover:text-white text-2xl leading-none px-0 pt-0 pb-0.5;
} }
.mapOne .jvm-zoom-btn { .mapOne .jvm-zoom-btn {
@apply left-auto top-auto bottom-0; @apply left-auto top-auto bottom-0;
} }
.mapOne .jvm-zoom-btn.jvm-zoomin { .mapOne .jvm-zoom-btn.jvm-zoomin {
@apply right-10; @apply right-10;
} }
.mapOne .jvm-zoom-btn.jvm-zoomout { .mapOne .jvm-zoom-btn.jvm-zoomout {
@apply right-0; @apply right-0;
} }
.mapTwo .jvm-zoom-btn { .mapTwo .jvm-zoom-btn {
@apply top-auto bottom-0; @apply top-auto bottom-0;
} }
.mapTwo .jvm-zoom-btn.jvm-zoomin { .mapTwo .jvm-zoom-btn.jvm-zoomin {
@apply left-0; @apply left-0;
} }
.mapTwo .jvm-zoom-btn.jvm-zoomout { .mapTwo .jvm-zoom-btn.jvm-zoomout {
@apply left-10; @apply left-10;
} }
@ -197,9 +230,11 @@ span.flatpickr-weekday,
.taskCheckbox:checked ~ .box span { .taskCheckbox:checked ~ .box span {
@apply opacity-100; @apply opacity-100;
} }
.taskCheckbox:checked ~ p { .taskCheckbox:checked ~ p {
@apply line-through; @apply line-through;
} }
.taskCheckbox:checked ~ .box { .taskCheckbox:checked ~ .box {
@apply bg-primary border-primary dark:border-primary; @apply bg-primary border-primary dark:border-primary;
} }
@ -209,9 +244,11 @@ span.flatpickr-weekday,
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 20px; background-size: 20px;
} }
.custom-input-date-1::-webkit-calendar-picker-indicator { .custom-input-date-1::-webkit-calendar-picker-indicator {
background-image: url(./images/icon/icon-calendar.svg); background-image: url(./images/icon/icon-calendar.svg);
} }
.custom-input-date-2::-webkit-calendar-picker-indicator { .custom-input-date-2::-webkit-calendar-picker-indicator {
background-image: url(./images/icon/icon-arrow-down.svg); background-image: url(./images/icon/icon-arrow-down.svg);
} }

16
packages/frontend/src/hooks/useColorMode.tsx
View File

@ -1,14 +1,16 @@
import { useEffect } from 'react'; import { useEffect } from "react";
import useLocalStorage from './useLocalStorage'; import useLocalStorage from "./useLocalStorage";
const useColorMode = () => { const useColorMode = () =>
const [colorMode, setColorMode] = useLocalStorage('color-theme', 'light'); {
const [ colorMode, setColorMode ] = useLocalStorage("color-theme", "light");
useEffect(() => { useEffect(() =>
const className = 'dark'; {
const className = "dark";
const bodyClass = window.document.body.classList; const bodyClass = window.document.body.classList;
colorMode === 'dark' colorMode === "dark"
? bodyClass.add(className) ? bodyClass.add(className)
: bodyClass.remove(className); : bodyClass.remove(className);
}, [ colorMode ]); }, [ colorMode ]);

27
packages/frontend/src/hooks/useLocalStorage.tsx
View File

@ -1,29 +1,36 @@
import { useEffect, useState } from 'react'; import { useEffect, useState } from "react";
type SetValue<T> = T | ((val: T) => T); type SetValue<T> = T | ((val: T) => T);
function useLocalStorage<T>( function useLocalStorage<T>(
key: string, key: string,
initialValue: T initialValue: T,
): [T, (value: SetValue<T>) => void] { ): [ T, (value: SetValue<T>) => void ]
const [storedValue, setStoredValue] = useState(() => { {
try { const [ storedValue, setStoredValue ] = useState(() =>
{
try
{
const item = window.localStorage.getItem(key); const item = window.localStorage.getItem(key);
return item ? JSON.parse(item) : initialValue; return item ? JSON.parse(item) : initialValue;
} catch (error) { } catch (error)
{
console.log(error); console.log(error);
return initialValue; return initialValue;
} }
}); });
useEffect(() => { useEffect(() =>
try { {
try
{
const valueToStore = const valueToStore =
typeof storedValue === 'function' typeof storedValue === "function"
? storedValue(storedValue) ? storedValue(storedValue)
: storedValue; : storedValue;
window.localStorage.setItem(key, JSON.stringify(valueToStore)); window.localStorage.setItem(key, JSON.stringify(valueToStore));
} catch (error) { } catch (error)
{
console.log(error); console.log(error);
} }
}, [ key, storedValue ]); }, [ key, storedValue ]);

3
packages/frontend/src/i18n/index.ts
View File

@ -27,7 +27,4 @@ i18n
defaultNS: "translation", defaultNS: "translation",
}); });
export { i18n }; export { i18n };

2
packages/frontend/src/i18n/languages/pl.json
View File

@ -1,5 +1,4 @@
{ {
"_": { "_": {
"title": "Simrail Stats" "title": "Simrail Stats"
}, },
@ -22,7 +21,6 @@
"author": "Stworzone przez <anchor>{{author}}</anchor> z ❤️ dla społeczności Simrail" "author": "Stworzone przez <anchor>{{author}}</anchor> z ❤️ dla społeczności Simrail"
} }
}, },
"pages": { "pages": {
"home": "Strona główna", "home": "Strona główna",
"logs": "Logi", "logs": "Logi",

12
packages/frontend/src/images/brand/brand-01.svg
View File

@ -1,10 +1,14 @@
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="24" cy="24" r="24" fill="#EEF0F2"/> <circle cx="24" cy="24" r="24" fill="#EEF0F2"/>
<g clip-path="url(#clip0_38_23844)"> <g clip-path="url(#clip0_38_23844)">
<path d="M36.0002 24.2661C36.0147 23.4411 35.9278 22.6174 35.7414 21.8128H24.2451V26.2661H30.9933C30.8655 27.0469 30.5778 27.7943 30.1476 28.4634C29.7174 29.1324 29.1536 29.7093 28.49 30.1593L28.4665 30.3085L32.1016 33.0681L32.3533 33.0928C34.6661 30.9994 35.9997 27.9193 35.9997 24.2661" fill="#4285F4"/> <path d="M36.0002 24.2661C36.0147 23.4411 35.9278 22.6174 35.7414 21.8128H24.2451V26.2661H30.9933C30.8655 27.0469 30.5778 27.7943 30.1476 28.4634C29.7174 29.1324 29.1536 29.7093 28.49 30.1593L28.4665 30.3085L32.1016 33.0681L32.3533 33.0928C34.6661 30.9994 35.9997 27.9193 35.9997 24.2661"
<path d="M24.2449 36C27.5509 36 30.3264 34.9332 32.3539 33.0932L28.4898 30.1597C27.4559 30.8666 26.0681 31.36 24.2449 31.36C22.6965 31.3511 21.1902 30.8646 19.9398 29.9695C18.6894 29.0744 17.7584 27.8161 17.2789 26.3732L17.1354 26.3852L13.3556 29.2518L13.3062 29.3865C14.3241 31.3747 15.8864 33.0463 17.8183 34.2142C19.7502 35.3822 21.9755 36.0005 24.2454 36" fill="#34A853"/> fill="#4285F4"/>
<path d="M17.2788 26.3733C17.011 25.6094 16.8728 24.8077 16.8697 24C16.8746 23.1936 17.0077 22.393 17.2642 21.6267L17.2574 21.4677L13.4312 18.5549L13.3061 18.6133C12.4473 20.2842 12 22.129 12 23.9999C12 25.8708 12.4473 27.7156 13.3061 29.3865L17.2788 26.3733Z" fill="#FBBC05"/> <path d="M24.2449 36C27.5509 36 30.3264 34.9332 32.3539 33.0932L28.4898 30.1597C27.4559 30.8666 26.0681 31.36 24.2449 31.36C22.6965 31.3511 21.1902 30.8646 19.9398 29.9695C18.6894 29.0744 17.7584 27.8161 17.2789 26.3732L17.1354 26.3852L13.3556 29.2518L13.3062 29.3865C14.3241 31.3747 15.8864 33.0463 17.8183 34.2142C19.7502 35.3822 21.9755 36.0005 24.2454 36"
<path d="M24.2449 16.64C25.9995 16.6133 27.6964 17.2537 28.9796 18.4267L32.4355 15.12C30.219 13.0822 27.2838 11.9642 24.2449 12C21.975 11.9995 19.7497 12.6177 17.8179 13.7856C15.886 14.9535 14.3237 16.625 13.3057 18.6132L17.2652 21.6267C17.7495 20.1841 18.6836 18.9268 19.9358 18.0321C21.1881 17.1374 22.6953 16.6505 24.2449 16.64Z" fill="#EB4335"/> fill="#34A853"/>
<path d="M17.2788 26.3733C17.011 25.6094 16.8728 24.8077 16.8697 24C16.8746 23.1936 17.0077 22.393 17.2642 21.6267L17.2574 21.4677L13.4312 18.5549L13.3061 18.6133C12.4473 20.2842 12 22.129 12 23.9999C12 25.8708 12.4473 27.7156 13.3061 29.3865L17.2788 26.3733Z"
fill="#FBBC05"/>
<path d="M24.2449 16.64C25.9995 16.6133 27.6964 17.2537 28.9796 18.4267L32.4355 15.12C30.219 13.0822 27.2838 11.9642 24.2449 12C21.975 11.9995 19.7497 12.6177 17.8179 13.7856C15.886 14.9535 14.3237 16.625 13.3057 18.6132L17.2652 21.6267C17.7495 20.1841 18.6836 18.9268 19.9358 18.0321C21.1881 17.1374 22.6953 16.6505 24.2449 16.64Z"
fill="#EB4335"/>
</g> </g>
<defs> <defs>
<clipPath id="clip0_38_23844"> <clipPath id="clip0_38_23844">

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

3
packages/frontend/src/images/brand/brand-02.svg
View File

@ -1,4 +1,5 @@
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="24" cy="24.0001" r="24" fill="#2B96F0"/> <circle cx="24" cy="24.0001" r="24" fill="#2B96F0"/>
<path d="M33.0375 17.7376L34.4625 15.9376C34.875 15.4501 34.9875 15.0751 35.025 14.8876C33.9 15.5626 32.85 15.7876 32.175 15.7876H31.9125L31.7625 15.6376C30.8625 14.8501 29.7375 14.4376 28.5375 14.4376C25.9125 14.4376 23.85 16.6126 23.85 19.1251C23.85 19.2751 23.85 19.5001 23.8875 19.6501L24 20.4001L23.2125 20.3626C18.4125 20.2126 14.475 16.0876 13.8375 15.3751C12.7875 17.2501 13.3875 19.0501 14.025 20.1751L15.3 22.2751L13.275 21.1501C13.3125 22.7251 13.9125 23.9626 15.075 24.8626L16.0875 25.6126L15.075 26.0251C15.7125 27.9376 17.1375 28.7251 18.1875 29.0251L19.575 29.4001L18.2625 30.3001C16.1625 31.8001 13.5375 31.6876 12.375 31.5751C14.7375 33.2251 17.55 33.6001 19.5 33.6001C20.9625 33.6001 22.05 33.4501 22.3125 33.3376C32.8125 30.8626 33.3 21.4876 33.3 19.6126V19.3501L33.525 19.2001C34.8 18.0001 35.325 17.3626 35.625 16.9876C35.5125 17.0251 35.3625 17.1001 35.2125 17.1376L33.0375 17.7376Z" fill="white"/> <path d="M33.0375 17.7376L34.4625 15.9376C34.875 15.4501 34.9875 15.0751 35.025 14.8876C33.9 15.5626 32.85 15.7876 32.175 15.7876H31.9125L31.7625 15.6376C30.8625 14.8501 29.7375 14.4376 28.5375 14.4376C25.9125 14.4376 23.85 16.6126 23.85 19.1251C23.85 19.2751 23.85 19.5001 23.8875 19.6501L24 20.4001L23.2125 20.3626C18.4125 20.2126 14.475 16.0876 13.8375 15.3751C12.7875 17.2501 13.3875 19.0501 14.025 20.1751L15.3 22.2751L13.275 21.1501C13.3125 22.7251 13.9125 23.9626 15.075 24.8626L16.0875 25.6126L15.075 26.0251C15.7125 27.9376 17.1375 28.7251 18.1875 29.0251L19.575 29.4001L18.2625 30.3001C16.1625 31.8001 13.5375 31.6876 12.375 31.5751C14.7375 33.2251 17.55 33.6001 19.5 33.6001C20.9625 33.6001 22.05 33.4501 22.3125 33.3376C32.8125 30.8626 33.3 21.4876 33.3 19.6126V19.3501L33.525 19.2001C34.8 18.0001 35.325 17.3626 35.625 16.9876C35.5125 17.0251 35.3625 17.1001 35.2125 17.1376L33.0375 17.7376Z"
fill="white"/>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

3
packages/frontend/src/images/brand/brand-03.svg
View File

@ -1,7 +1,8 @@
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="24" cy="24.0001" r="24" fill="#212529"/> <circle cx="24" cy="24.0001" r="24" fill="#212529"/>
<g clip-path="url(#clip0_38_23867)"> <g clip-path="url(#clip0_38_23867)">
<path d="M24 12.6751C17.625 12.6751 12.375 17.8501 12.375 24.3001C12.375 29.4001 15.7125 33.7501 20.3625 35.3251C20.9625 35.4376 21.15 35.0626 21.15 34.8001C21.15 34.5376 21.15 33.7876 21.1125 32.7751C17.8875 33.5251 17.2125 31.2001 17.2125 31.2001C16.6875 29.8876 15.9 29.5126 15.9 29.5126C14.85 28.7626 15.9375 28.7626 15.9375 28.7626C17.1 28.8001 17.7375 29.9626 17.7375 29.9626C18.75 31.7626 20.475 31.2376 21.1125 30.9001C21.225 30.1501 21.525 29.6251 21.8625 29.3251C19.3125 29.0626 16.575 28.0501 16.575 23.6251C16.575 22.3501 17.0625 21.3376 17.775 20.5501C17.6625 20.2876 17.25 19.0876 17.8875 17.4751C17.8875 17.4751 18.9 17.1751 21.1125 18.6751C22.05 18.4126 23.025 18.2626 24.0375 18.2626C25.05 18.2626 26.0625 18.3751 26.9625 18.6751C29.175 17.2126 30.15 17.4751 30.15 17.4751C30.7875 19.0501 30.4125 20.2876 30.2625 20.5501C31.0125 21.3376 31.4625 22.3876 31.4625 23.6251C31.4625 28.0501 28.725 29.0626 26.175 29.3251C26.5875 29.7001 26.9625 30.4501 26.9625 31.5001C26.9625 33.0751 26.925 34.3126 26.925 34.6876C26.925 34.9876 27.15 35.3251 27.7125 35.2126C32.2875 33.6751 35.625 29.3626 35.625 24.2251C35.5875 17.8501 30.375 12.6751 24 12.6751Z" fill="white"/> <path d="M24 12.6751C17.625 12.6751 12.375 17.8501 12.375 24.3001C12.375 29.4001 15.7125 33.7501 20.3625 35.3251C20.9625 35.4376 21.15 35.0626 21.15 34.8001C21.15 34.5376 21.15 33.7876 21.1125 32.7751C17.8875 33.5251 17.2125 31.2001 17.2125 31.2001C16.6875 29.8876 15.9 29.5126 15.9 29.5126C14.85 28.7626 15.9375 28.7626 15.9375 28.7626C17.1 28.8001 17.7375 29.9626 17.7375 29.9626C18.75 31.7626 20.475 31.2376 21.1125 30.9001C21.225 30.1501 21.525 29.6251 21.8625 29.3251C19.3125 29.0626 16.575 28.0501 16.575 23.6251C16.575 22.3501 17.0625 21.3376 17.775 20.5501C17.6625 20.2876 17.25 19.0876 17.8875 17.4751C17.8875 17.4751 18.9 17.1751 21.1125 18.6751C22.05 18.4126 23.025 18.2626 24.0375 18.2626C25.05 18.2626 26.0625 18.3751 26.9625 18.6751C29.175 17.2126 30.15 17.4751 30.15 17.4751C30.7875 19.0501 30.4125 20.2876 30.2625 20.5501C31.0125 21.3376 31.4625 22.3876 31.4625 23.6251C31.4625 28.0501 28.725 29.0626 26.175 29.3251C26.5875 29.7001 26.9625 30.4501 26.9625 31.5001C26.9625 33.0751 26.925 34.3126 26.925 34.6876C26.925 34.9876 27.15 35.3251 27.7125 35.2126C32.2875 33.6751 35.625 29.3626 35.625 24.2251C35.5875 17.8501 30.375 12.6751 24 12.6751Z"
fill="white"/>
</g> </g>
<defs> <defs>
<clipPath id="clip0_38_23867"> <clipPath id="clip0_38_23867">

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

3
packages/frontend/src/images/brand/brand-04.svg
View File

@ -1,4 +1,5 @@
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="24" cy="24.0002" r="24" fill="#4DC1FF"/> <circle cx="24" cy="24.0002" r="24" fill="#4DC1FF"/>
<path d="M35.625 18.6002C35.5125 20.8877 33.9375 24.0002 30.8625 27.9377C27.7125 32.0627 25.0125 34.1252 22.8375 34.1252C21.525 34.1252 20.3625 32.9252 19.3875 30.3752C18.75 28.1252 18.1875 25.8002 17.5125 23.4752C16.8375 21.0002 16.0875 19.7252 15.225 19.7252C15.075 19.7252 14.4375 20.1002 13.3875 20.8502L12.375 19.3502C13.5375 18.3377 14.6625 17.3252 15.825 16.2752C17.3625 14.9627 18.45 14.2502 19.275 14.2127C21.075 14.0627 22.1625 15.3377 22.6125 17.9252C23.025 20.7752 23.3625 22.5752 23.55 23.2502C24.075 25.6127 24.675 26.7752 25.2375 26.7752C25.725 26.7752 26.4375 26.0252 27.45 24.4877C28.4625 22.9502 28.9125 21.7502 29.025 20.9627C29.175 19.6502 28.6125 18.9377 27.45 18.9377C26.925 18.9377 26.325 19.0502 25.7625 19.3502C26.8875 15.6002 29.025 13.7627 32.25 13.8377C34.6125 13.9502 35.7375 15.5252 35.625 18.6002Z" fill="white"/> <path d="M35.625 18.6002C35.5125 20.8877 33.9375 24.0002 30.8625 27.9377C27.7125 32.0627 25.0125 34.1252 22.8375 34.1252C21.525 34.1252 20.3625 32.9252 19.3875 30.3752C18.75 28.1252 18.1875 25.8002 17.5125 23.4752C16.8375 21.0002 16.0875 19.7252 15.225 19.7252C15.075 19.7252 14.4375 20.1002 13.3875 20.8502L12.375 19.3502C13.5375 18.3377 14.6625 17.3252 15.825 16.2752C17.3625 14.9627 18.45 14.2502 19.275 14.2127C21.075 14.0627 22.1625 15.3377 22.6125 17.9252C23.025 20.7752 23.3625 22.5752 23.55 23.2502C24.075 25.6127 24.675 26.7752 25.2375 26.7752C25.725 26.7752 26.4375 26.0252 27.45 24.4877C28.4625 22.9502 28.9125 21.7502 29.025 20.9627C29.175 19.6502 28.6125 18.9377 27.45 18.9377C26.925 18.9377 26.325 19.0502 25.7625 19.3502C26.8875 15.6002 29.025 13.7627 32.25 13.8377C34.6125 13.9502 35.7375 15.5252 35.625 18.6002Z"
fill="white"/>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1001 B

After

Width:  |  Height:  |  Size: 1019 B

3
packages/frontend/src/images/brand/brand-05.svg
View File

@ -1,7 +1,8 @@
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="24" cy="24.0002" r="24" fill="#3162C9"/> <circle cx="24" cy="24.0002" r="24" fill="#3162C9"/>
<g clip-path="url(#clip0_38_23887)"> <g clip-path="url(#clip0_38_23887)">
<path d="M25.789 35.9983V25.0533H29.3269L29.8566 20.7878H25.789V18.0645C25.789 16.8295 26.1192 15.9879 27.8248 15.9879L30 15.9868V12.1719C29.6236 12.1201 28.3325 12.004 26.8304 12.004C23.6942 12.004 21.5471 13.9917 21.5471 17.6422V20.7879H18V25.0534H21.547V35.9984L25.789 35.9983Z" fill="white"/> <path d="M25.789 35.9983V25.0533H29.3269L29.8566 20.7878H25.789V18.0645C25.789 16.8295 26.1192 15.9879 27.8248 15.9879L30 15.9868V12.1719C29.6236 12.1201 28.3325 12.004 26.8304 12.004C23.6942 12.004 21.5471 13.9917 21.5471 17.6422V20.7879H18V25.0534H21.547V35.9984L25.789 35.9983Z"
fill="white"/>
</g> </g>
<defs> <defs>
<clipPath id="clip0_38_23887"> <clipPath id="clip0_38_23887">

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 631 B

After

Width:  |  Height:  |  Size: 701 B

23
packages/frontend/src/images/country/country-01.svg
View File

@ -1,28 +1,37 @@
<svg width="21" height="14" viewBox="0 0 21 14" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="21" height="14" viewBox="0 0 21 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_22_27)"> <g clip-path="url(#clip0_22_27)">
<path d="M18.4739 0.411499H1.55556C0.696446 0.411499 0 1.10794 0 1.96705V12.1893C0 13.0484 0.696446 13.7449 1.55556 13.7449H18.4739C19.333 13.7449 20.0295 13.0484 20.0295 12.1893V1.96705C20.0295 1.10794 19.333 0.411499 18.4739 0.411499Z" fill="white"/> <path d="M18.4739 0.411499H1.55556C0.696446 0.411499 0 1.10794 0 1.96705V12.1893C0 13.0484 0.696446 13.7449 1.55556 13.7449H18.4739C19.333 13.7449 20.0295 13.0484 20.0295 12.1893V1.96705C20.0295 1.10794 19.333 0.411499 18.4739 0.411499Z"
fill="white"/>
<mask id="mask0_22_27" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="21" height="14"> <mask id="mask0_22_27" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="21" height="14">
<path d="M18.4739 0.411499H1.55556C0.696446 0.411499 0 1.10794 0 1.96705V12.1893C0 13.0484 0.696446 13.7449 1.55556 13.7449H18.4739C19.333 13.7449 20.0295 13.0484 20.0295 12.1893V1.96705C20.0295 1.10794 19.333 0.411499 18.4739 0.411499Z" fill="white"/> <path d="M18.4739 0.411499H1.55556C0.696446 0.411499 0 1.10794 0 1.96705V12.1893C0 13.0484 0.696446 13.7449 1.55556 13.7449H18.4739C19.333 13.7449 20.0295 13.0484 20.0295 12.1893V1.96705C20.0295 1.10794 19.333 0.411499 18.4739 0.411499Z"
fill="white"/>
</mask> </mask>
<g mask="url(#mask0_22_27)"> <g mask="url(#mask0_22_27)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M20.0295 0.411499H0V1.30039H20.0295V0.411499ZM20.0295 2.18928H0V3.07817H20.0295V2.18928ZM0 3.96705H20.0295V4.85594H0V3.96705ZM20.0295 5.74484H0V6.63372H20.0295V5.74484ZM0 7.52262H20.0295V8.41152H0V7.52262ZM20.0295 9.30037H0V10.1893H20.0295V9.30037ZM0 11.0781H20.0295V11.9671H0V11.0781ZM20.0295 12.856H0V13.7448H20.0295V12.856Z" fill="#D02F44"/> <path fill-rule="evenodd" clip-rule="evenodd"
d="M20.0295 0.411499H0V1.30039H20.0295V0.411499ZM20.0295 2.18928H0V3.07817H20.0295V2.18928ZM0 3.96705H20.0295V4.85594H0V3.96705ZM20.0295 5.74484H0V6.63372H20.0295V5.74484ZM0 7.52262H20.0295V8.41152H0V7.52262ZM20.0295 9.30037H0V10.1893H20.0295V9.30037ZM0 11.0781H20.0295V11.9671H0V11.0781ZM20.0295 12.856H0V13.7448H20.0295V12.856Z"
fill="#D02F44"/>
<path d="M8.5841 0.411499H0V6.63372H8.5841V0.411499Z" fill="#46467F"/> <path d="M8.5841 0.411499H0V6.63372H8.5841V0.411499Z" fill="#46467F"/>
<g filter="url(#filter0_d_22_27)"> <g filter="url(#filter0_d_22_27)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.9074 1.74479C1.9074 1.99026 1.69389 2.18924 1.43051 2.18924C1.16713 2.18924 0.953613 1.99026 0.953613 1.74479C0.953613 1.49933 1.16713 1.30035 1.43051 1.30035C1.69389 1.30035 1.9074 1.49933 1.9074 1.74479ZM3.81497 1.74479C3.81497 1.99026 3.60146 2.18924 3.33809 2.18924C3.0747 2.18924 2.86119 1.99026 2.86119 1.74479C2.86119 1.49933 3.0747 1.30035 3.33809 1.30035C3.60146 1.30035 3.81497 1.49933 3.81497 1.74479ZM5.24566 2.18924C5.50903 2.18924 5.72255 1.99026 5.72255 1.74479C5.72255 1.49933 5.50903 1.30035 5.24566 1.30035C4.98228 1.30035 4.76876 1.49933 4.76876 1.74479C4.76876 1.99026 4.98228 2.18924 5.24566 2.18924ZM7.63012 1.74479C7.63012 1.99026 7.41661 2.18924 7.15322 2.18924C6.88985 2.18924 6.67634 1.99026 6.67634 1.74479C6.67634 1.49933 6.88985 1.30035 7.15322 1.30035C7.41661 1.30035 7.63012 1.49933 7.63012 1.74479ZM2.3843 3.07812C2.64768 3.07812 2.86119 2.87914 2.86119 2.63368C2.86119 2.38822 2.64768 2.18924 2.3843 2.18924C2.12092 2.18924 1.9074 2.38822 1.9074 2.63368C1.9074 2.87914 2.12092 3.07812 2.3843 3.07812ZM4.76876 2.63368C4.76876 2.87914 4.55525 3.07812 4.29187 3.07812C4.02849 3.07812 3.81497 2.87914 3.81497 2.63368C3.81497 2.38822 4.02849 2.18924 4.29187 2.18924C4.55525 2.18924 4.76876 2.38822 4.76876 2.63368ZM6.19944 3.07812C6.46282 3.07812 6.67634 2.87914 6.67634 2.63368C6.67634 2.38822 6.46282 2.18924 6.19944 2.18924C5.93606 2.18924 5.72255 2.38822 5.72255 2.63368C5.72255 2.87914 5.93606 3.07812 6.19944 3.07812ZM7.63012 3.52257C7.63012 3.76804 7.41661 3.96702 7.15322 3.96702C6.88985 3.96702 6.67634 3.76804 6.67634 3.52257C6.67634 3.27711 6.88985 3.07814 7.15322 3.07814C7.41661 3.07814 7.63012 3.27711 7.63012 3.52257ZM5.24566 3.96702C5.50903 3.96702 5.72255 3.76804 5.72255 3.52257C5.72255 3.27711 5.50903 3.07814 5.24566 3.07814C4.98228 3.07814 4.76876 3.27711 4.76876 3.52257C4.76876 3.76804 4.98228 3.96702 5.24566 3.96702ZM3.81497 3.52257C3.81497 3.76804 3.60146 3.96702 3.33809 3.96702C3.0747 3.96702 2.86119 3.76804 2.86119 3.52257C2.86119 3.27711 3.0747 3.07814 3.33809 3.07814C3.60146 3.07814 3.81497 3.27711 3.81497 3.52257ZM1.43051 3.96702C1.69389 3.96702 1.9074 3.76804 1.9074 3.52257C1.9074 3.27711 1.69389 3.07814 1.43051 3.07814C1.16713 3.07814 0.953613 3.27711 0.953613 3.52257C0.953613 3.76804 1.16713 3.96702 1.43051 3.96702ZM2.86119 4.41146C2.86119 4.65692 2.64768 4.8559 2.3843 4.8559C2.12092 4.8559 1.9074 4.65692 1.9074 4.41146C1.9074 4.166 2.12092 3.96702 2.3843 3.96702C2.64768 3.96702 2.86119 4.166 2.86119 4.41146ZM4.29187 4.8559C4.55525 4.8559 4.76876 4.65692 4.76876 4.41146C4.76876 4.166 4.55525 3.96702 4.29187 3.96702C4.02849 3.96702 3.81497 4.166 3.81497 4.41146C3.81497 4.65692 4.02849 4.8559 4.29187 4.8559ZM6.67634 4.41146C6.67634 4.65692 6.46282 4.8559 6.19944 4.8559C5.93606 4.8559 5.72255 4.65692 5.72255 4.41146C5.72255 4.166 5.93606 3.96702 6.19944 3.96702C6.46282 3.96702 6.67634 4.166 6.67634 4.41146ZM7.15322 5.74479C7.41661 5.74479 7.63012 5.54581 7.63012 5.30035C7.63012 5.05489 7.41661 4.8559 7.15322 4.8559C6.88985 4.8559 6.67634 5.05489 6.67634 5.30035C6.67634 5.54581 6.88985 5.74479 7.15322 5.74479ZM5.72255 5.30035C5.72255 5.54581 5.50903 5.74479 5.24566 5.74479C4.98228 5.74479 4.76876 5.54581 4.76876 5.30035C4.76876 5.05489 4.98228 4.8559 5.24566 4.8559C5.50903 4.8559 5.72255 5.05489 5.72255 5.30035ZM3.33809 5.74479C3.60146 5.74479 3.81497 5.54581 3.81497 5.30035C3.81497 5.05489 3.60146 4.8559 3.33809 4.8559C3.0747 4.8559 2.86119 5.05489 2.86119 5.30035C2.86119 5.54581 3.0747 5.74479 3.33809 5.74479ZM1.9074 5.30035C1.9074 5.54581 1.69389 5.74479 1.43051 5.74479C1.16713 5.74479 0.953613 5.54581 0.953613 5.30035C0.953613 5.05489 1.16713 4.8559 1.43051 4.8559C1.69389 4.8559 1.9074 5.05489 1.9074 5.30035Z" fill="url(#paint0_linear_22_27)"/> <path fill-rule="evenodd" clip-rule="evenodd"
d="M1.9074 1.74479C1.9074 1.99026 1.69389 2.18924 1.43051 2.18924C1.16713 2.18924 0.953613 1.99026 0.953613 1.74479C0.953613 1.49933 1.16713 1.30035 1.43051 1.30035C1.69389 1.30035 1.9074 1.49933 1.9074 1.74479ZM3.81497 1.74479C3.81497 1.99026 3.60146 2.18924 3.33809 2.18924C3.0747 2.18924 2.86119 1.99026 2.86119 1.74479C2.86119 1.49933 3.0747 1.30035 3.33809 1.30035C3.60146 1.30035 3.81497 1.49933 3.81497 1.74479ZM5.24566 2.18924C5.50903 2.18924 5.72255 1.99026 5.72255 1.74479C5.72255 1.49933 5.50903 1.30035 5.24566 1.30035C4.98228 1.30035 4.76876 1.49933 4.76876 1.74479C4.76876 1.99026 4.98228 2.18924 5.24566 2.18924ZM7.63012 1.74479C7.63012 1.99026 7.41661 2.18924 7.15322 2.18924C6.88985 2.18924 6.67634 1.99026 6.67634 1.74479C6.67634 1.49933 6.88985 1.30035 7.15322 1.30035C7.41661 1.30035 7.63012 1.49933 7.63012 1.74479ZM2.3843 3.07812C2.64768 3.07812 2.86119 2.87914 2.86119 2.63368C2.86119 2.38822 2.64768 2.18924 2.3843 2.18924C2.12092 2.18924 1.9074 2.38822 1.9074 2.63368C1.9074 2.87914 2.12092 3.07812 2.3843 3.07812ZM4.76876 2.63368C4.76876 2.87914 4.55525 3.07812 4.29187 3.07812C4.02849 3.07812 3.81497 2.87914 3.81497 2.63368C3.81497 2.38822 4.02849 2.18924 4.29187 2.18924C4.55525 2.18924 4.76876 2.38822 4.76876 2.63368ZM6.19944 3.07812C6.46282 3.07812 6.67634 2.87914 6.67634 2.63368C6.67634 2.38822 6.46282 2.18924 6.19944 2.18924C5.93606 2.18924 5.72255 2.38822 5.72255 2.63368C5.72255 2.87914 5.93606 3.07812 6.19944 3.07812ZM7.63012 3.52257C7.63012 3.76804 7.41661 3.96702 7.15322 3.96702C6.88985 3.96702 6.67634 3.76804 6.67634 3.52257C6.67634 3.27711 6.88985 3.07814 7.15322 3.07814C7.41661 3.07814 7.63012 3.27711 7.63012 3.52257ZM5.24566 3.96702C5.50903 3.96702 5.72255 3.76804 5.72255 3.52257C5.72255 3.27711 5.50903 3.07814 5.24566 3.07814C4.98228 3.07814 4.76876 3.27711 4.76876 3.52257C4.76876 3.76804 4.98228 3.96702 5.24566 3.96702ZM3.81497 3.52257C3.81497 3.76804 3.60146 3.96702 3.33809 3.96702C3.0747 3.96702 2.86119 3.76804 2.86119 3.52257C2.86119 3.27711 3.0747 3.07814 3.33809 3.07814C3.60146 3.07814 3.81497 3.27711 3.81497 3.52257ZM1.43051 3.96702C1.69389 3.96702 1.9074 3.76804 1.9074 3.52257C1.9074 3.27711 1.69389 3.07814 1.43051 3.07814C1.16713 3.07814 0.953613 3.27711 0.953613 3.52257C0.953613 3.76804 1.16713 3.96702 1.43051 3.96702ZM2.86119 4.41146C2.86119 4.65692 2.64768 4.8559 2.3843 4.8559C2.12092 4.8559 1.9074 4.65692 1.9074 4.41146C1.9074 4.166 2.12092 3.96702 2.3843 3.96702C2.64768 3.96702 2.86119 4.166 2.86119 4.41146ZM4.29187 4.8559C4.55525 4.8559 4.76876 4.65692 4.76876 4.41146C4.76876 4.166 4.55525 3.96702 4.29187 3.96702C4.02849 3.96702 3.81497 4.166 3.81497 4.41146C3.81497 4.65692 4.02849 4.8559 4.29187 4.8559ZM6.67634 4.41146C6.67634 4.65692 6.46282 4.8559 6.19944 4.8559C5.93606 4.8559 5.72255 4.65692 5.72255 4.41146C5.72255 4.166 5.93606 3.96702 6.19944 3.96702C6.46282 3.96702 6.67634 4.166 6.67634 4.41146ZM7.15322 5.74479C7.41661 5.74479 7.63012 5.54581 7.63012 5.30035C7.63012 5.05489 7.41661 4.8559 7.15322 4.8559C6.88985 4.8559 6.67634 5.05489 6.67634 5.30035C6.67634 5.54581 6.88985 5.74479 7.15322 5.74479ZM5.72255 5.30035C5.72255 5.54581 5.50903 5.74479 5.24566 5.74479C4.98228 5.74479 4.76876 5.54581 4.76876 5.30035C4.76876 5.05489 4.98228 4.8559 5.24566 4.8559C5.50903 4.8559 5.72255 5.05489 5.72255 5.30035ZM3.33809 5.74479C3.60146 5.74479 3.81497 5.54581 3.81497 5.30035C3.81497 5.05489 3.60146 4.8559 3.33809 4.8559C3.0747 4.8559 2.86119 5.05489 2.86119 5.30035C2.86119 5.54581 3.0747 5.74479 3.33809 5.74479ZM1.9074 5.30035C1.9074 5.54581 1.69389 5.74479 1.43051 5.74479C1.16713 5.74479 0.953613 5.54581 0.953613 5.30035C0.953613 5.05489 1.16713 4.8559 1.43051 4.8559C1.69389 4.8559 1.9074 5.05489 1.9074 5.30035Z"
fill="url(#paint0_linear_22_27)"/>
</g> </g>
</g> </g>
</g> </g>
<defs> <defs>
<filter id="filter0_d_22_27" x="-3.04639" y="-1.69965" width="14.6765" height="12.4445" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> <filter id="filter0_d_22_27" x="-3.04639" y="-1.69965" width="14.6765" height="12.4445"
filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/> <feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/> <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha"/>
<feOffset dy="1"/> <feOffset dy="1"/>
<feGaussianBlur stdDeviation="2"/> <feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"/> <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_22_27"/> <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_22_27"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_22_27" result="shape"/> <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_22_27" result="shape"/>
</filter> </filter>
<linearGradient id="paint0_linear_22_27" x1="0.953613" y1="1.30035" x2="0.953613" y2="5.74479" gradientUnits="userSpaceOnUse"> <linearGradient id="paint0_linear_22_27" x1="0.953613" y1="1.30035" x2="0.953613" y2="5.74479"
gradientUnits="userSpaceOnUse">
<stop stop-color="white"/> <stop stop-color="white"/>
<stop offset="1" stop-color="#F0F0F0"/> <stop offset="1" stop-color="#F0F0F0"/>
</linearGradient> </linearGradient>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.9 KiB

After

Width:  |  Height:  |  Size: 6.4 KiB

10
packages/frontend/src/images/country/country-02.svg
View File

@ -1,13 +1,17 @@
<svg width="21" height="14" viewBox="0 0 21 14" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="21" height="14" viewBox="0 0 21 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_22_42)"> <g clip-path="url(#clip0_22_42)">
<path d="M18.4773 0.605957H1.55545C0.803726 0.605957 0.194336 1.21535 0.194336 1.96707V12.1893C0.194336 12.941 0.803726 13.5504 1.55545 13.5504H18.4773C19.229 13.5504 19.8384 12.941 19.8384 12.1893V1.96707C19.8384 1.21535 19.229 0.605957 18.4773 0.605957Z" fill="white" stroke="#F3F4F6" stroke-width="0.5"/> <path d="M18.4773 0.605957H1.55545C0.803726 0.605957 0.194336 1.21535 0.194336 1.96707V12.1893C0.194336 12.941 0.803726 13.5504 1.55545 13.5504H18.4773C19.229 13.5504 19.8384 12.941 19.8384 12.1893V1.96707C19.8384 1.21535 19.229 0.605957 18.4773 0.605957Z"
fill="white" stroke="#F3F4F6" stroke-width="0.5"/>
<mask id="mask0_22_42" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-1" y="0" width="22" height="14"> <mask id="mask0_22_42" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-1" y="0" width="22" height="14">
<path d="M18.4773 0.605957H1.55545C0.803726 0.605957 0.194336 1.21535 0.194336 1.96707V12.1893C0.194336 12.941 0.803726 13.5504 1.55545 13.5504H18.4773C19.229 13.5504 19.8384 12.941 19.8384 12.1893V1.96707C19.8384 1.21535 19.229 0.605957 18.4773 0.605957Z" fill="white" stroke="white" stroke-width="0.5"/> <path d="M18.4773 0.605957H1.55545C0.803726 0.605957 0.194336 1.21535 0.194336 1.96707V12.1893C0.194336 12.941 0.803726 13.5504 1.55545 13.5504H18.4773C19.229 13.5504 19.8384 12.941 19.8384 12.1893V1.96707C19.8384 1.21535 19.229 0.605957 18.4773 0.605957Z"
fill="white" stroke="white" stroke-width="0.5"/>
</mask> </mask>
<g mask="url(#mask0_22_42)"> <g mask="url(#mask0_22_42)">
<path d="M20.0328 0.411499H14.3091V13.7449H20.0328V0.411499Z" fill="#FF3131"/> <path d="M20.0328 0.411499H14.3091V13.7449H20.0328V0.411499Z" fill="#FF3131"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 13.7448H5.72372V0.411499H0V13.7448Z" fill="#FF3131"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M0 13.7448H5.72372V0.411499H0V13.7448Z" fill="#FF3131"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.5736 6.51591C11.388 6.68884 11.0901 6.51985 11.1433 6.27182L11.4473 4.85581L10.4933 5.30026L10.0163 3.96692L9.53936 5.30026L8.58542 4.85581L8.8893 6.27182C8.94257 6.51985 8.64468 6.68884 8.45911 6.51591L8.2852 6.35383C8.18556 6.26105 8.03125 6.26105 7.9317 6.35383L7.63144 6.63358L6.67749 6.18915L7.15446 7.07803L6.88105 7.3328C6.77103 7.43532 6.77103 7.60963 6.88105 7.71215L8.10841 8.85584H9.53936L9.77783 10.1891H10.2548L10.4933 8.85584H11.9243L13.1516 7.71215C13.2617 7.60963 13.2617 7.43532 13.1516 7.3328L12.8782 7.07803L13.3551 6.18915L12.4012 6.63358L12.101 6.35383C12.0014 6.26105 11.847 6.26105 11.7475 6.35383L11.5736 6.51591Z" fill="#FF3131"/> <path fill-rule="evenodd" clip-rule="evenodd"
d="M11.5736 6.51591C11.388 6.68884 11.0901 6.51985 11.1433 6.27182L11.4473 4.85581L10.4933 5.30026L10.0163 3.96692L9.53936 5.30026L8.58542 4.85581L8.8893 6.27182C8.94257 6.51985 8.64468 6.68884 8.45911 6.51591L8.2852 6.35383C8.18556 6.26105 8.03125 6.26105 7.9317 6.35383L7.63144 6.63358L6.67749 6.18915L7.15446 7.07803L6.88105 7.3328C6.77103 7.43532 6.77103 7.60963 6.88105 7.71215L8.10841 8.85584H9.53936L9.77783 10.1891H10.2548L10.4933 8.85584H11.9243L13.1516 7.71215C13.2617 7.60963 13.2617 7.43532 13.1516 7.3328L12.8782 7.07803L13.3551 6.18915L12.4012 6.63358L12.101 6.35383C12.0014 6.26105 11.847 6.26105 11.7475 6.35383L11.5736 6.51591Z"
fill="#FF3131"/>
</g> </g>
</g> </g>
<defs> <defs>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 2.1 KiB

6
packages/frontend/src/images/country/country-03.svg
View File

@ -1,8 +1,10 @@
<svg width="21" height="14" viewBox="0 0 21 14" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="21" height="14" viewBox="0 0 21 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_22_57)"> <g clip-path="url(#clip0_22_57)">
<path d="M18.4773 0.605957H1.55545C0.803726 0.605957 0.194336 1.21535 0.194336 1.96707V12.1893C0.194336 12.941 0.803726 13.5504 1.55545 13.5504H18.4773C19.229 13.5504 19.8384 12.941 19.8384 12.1893V1.96707C19.8384 1.21535 19.229 0.605957 18.4773 0.605957Z" fill="white" stroke="#F3F4F6" stroke-width="0.5"/> <path d="M18.4773 0.605957H1.55545C0.803726 0.605957 0.194336 1.21535 0.194336 1.96707V12.1893C0.194336 12.941 0.803726 13.5504 1.55545 13.5504H18.4773C19.229 13.5504 19.8384 12.941 19.8384 12.1893V1.96707C19.8384 1.21535 19.229 0.605957 18.4773 0.605957Z"
fill="white" stroke="#F3F4F6" stroke-width="0.5"/>
<mask id="mask0_22_57" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-1" y="0" width="22" height="14"> <mask id="mask0_22_57" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-1" y="0" width="22" height="14">
<path d="M18.4773 0.605957H1.55545C0.803726 0.605957 0.194336 1.21535 0.194336 1.96707V12.1893C0.194336 12.941 0.803726 13.5504 1.55545 13.5504H18.4773C19.229 13.5504 19.8384 12.941 19.8384 12.1893V1.96707C19.8384 1.21535 19.229 0.605957 18.4773 0.605957Z" fill="white" stroke="white" stroke-width="0.5"/> <path d="M18.4773 0.605957H1.55545C0.803726 0.605957 0.194336 1.21535 0.194336 1.96707V12.1893C0.194336 12.941 0.803726 13.5504 1.55545 13.5504H18.4773C19.229 13.5504 19.8384 12.941 19.8384 12.1893V1.96707C19.8384 1.21535 19.229 0.605957 18.4773 0.605957Z"
fill="white" stroke="white" stroke-width="0.5"/>
</mask> </mask>
<g mask="url(#mask0_22_57)"> <g mask="url(#mask0_22_57)">
<path d="M20.0331 0.411499H13.3555V13.7449H20.0331V0.411499Z" fill="#F44653"/> <path d="M20.0331 0.411499H13.3555V13.7449H20.0331V0.411499Z" fill="#F44653"/>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

6
packages/frontend/src/images/country/country-04.svg
View File

@ -1,8 +1,10 @@
<svg width="21" height="14" viewBox="0 0 21 14" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="21" height="14" viewBox="0 0 21 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_22_71)"> <g clip-path="url(#clip0_22_71)">
<path d="M18.4738 0.60614H1.55545C0.803726 0.60614 0.194336 1.21553 0.194336 1.96725V12.1895C0.194336 12.9412 0.803726 13.5506 1.55545 13.5506H18.4738C19.2255 13.5506 19.8349 12.9412 19.8349 12.1895V1.96725C19.8349 1.21553 19.2255 0.60614 18.4738 0.60614Z" fill="white" stroke="#F3F4F6" stroke-width="0.5"/> <path d="M18.4738 0.60614H1.55545C0.803726 0.60614 0.194336 1.21553 0.194336 1.96725V12.1895C0.194336 12.9412 0.803726 13.5506 1.55545 13.5506H18.4738C19.2255 13.5506 19.8349 12.9412 19.8349 12.1895V1.96725C19.8349 1.21553 19.2255 0.60614 18.4738 0.60614Z"
fill="white" stroke="#F3F4F6" stroke-width="0.5"/>
<mask id="mask0_22_71" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-1" y="0" width="22" height="14"> <mask id="mask0_22_71" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-1" y="0" width="22" height="14">
<path d="M18.4738 0.60614H1.55545C0.803726 0.60614 0.194336 1.21553 0.194336 1.96725V12.1895C0.194336 12.9412 0.803726 13.5506 1.55545 13.5506H18.4738C19.2255 13.5506 19.8349 12.9412 19.8349 12.1895V1.96725C19.8349 1.21553 19.2255 0.60614 18.4738 0.60614Z" fill="white" stroke="white" stroke-width="0.5"/> <path d="M18.4738 0.60614H1.55545C0.803726 0.60614 0.194336 1.21553 0.194336 1.96725V12.1895C0.194336 12.9412 0.803726 13.5506 1.55545 13.5506H18.4738C19.2255 13.5506 19.8349 12.9412 19.8349 12.1895V1.96725C19.8349 1.21553 19.2255 0.60614 18.4738 0.60614Z"
fill="white" stroke="white" stroke-width="0.5"/>
</mask> </mask>
<g mask="url(#mask0_22_71)"> <g mask="url(#mask0_22_71)">
<path d="M20.0293 0.411682H13.3528V13.7451H20.0293V0.411682Z" fill="#E43D4C"/> <path d="M20.0293 0.411682H13.3528V13.7451H20.0293V0.411682Z" fill="#E43D4C"/>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

50
packages/frontend/src/images/country/country-05.svg
View File

@ -1,29 +1,51 @@
<svg width="21" height="14" viewBox="0 0 21 14" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="21" height="14" viewBox="0 0 21 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_22_85)"> <g clip-path="url(#clip0_22_85)">
<path d="M18.4774 0.411499H1.55556C0.696446 0.411499 0 1.10794 0 1.96705V12.1893C0 13.0484 0.696446 13.7449 1.55556 13.7449H18.4774C19.3365 13.7449 20.033 13.0484 20.033 12.1893V1.96705C20.033 1.10794 19.3365 0.411499 18.4774 0.411499Z" fill="white"/> <path d="M18.4774 0.411499H1.55556C0.696446 0.411499 0 1.10794 0 1.96705V12.1893C0 13.0484 0.696446 13.7449 1.55556 13.7449H18.4774C19.3365 13.7449 20.033 13.0484 20.033 12.1893V1.96705C20.033 1.10794 19.3365 0.411499 18.4774 0.411499Z"
fill="white"/>
<mask id="mask0_22_85" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="21" height="14"> <mask id="mask0_22_85" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="21" height="14">
<path d="M18.4774 0.411499H1.55556C0.696446 0.411499 0 1.10794 0 1.96705V12.1893C0 13.0484 0.696446 13.7449 1.55556 13.7449H18.4774C19.3365 13.7449 20.033 13.0484 20.033 12.1893V1.96705C20.033 1.10794 19.3365 0.411499 18.4774 0.411499Z" fill="white"/> <path d="M18.4774 0.411499H1.55556C0.696446 0.411499 0 1.10794 0 1.96705V12.1893C0 13.0484 0.696446 13.7449 1.55556 13.7449H18.4774C19.3365 13.7449 20.033 13.0484 20.033 12.1893V1.96705C20.033 1.10794 19.3365 0.411499 18.4774 0.411499Z"
fill="white"/>
</mask> </mask>
<g mask="url(#mask0_22_85)"> <g mask="url(#mask0_22_85)">
<path d="M20.033 0.411499H0V13.7449H20.033V0.411499Z" fill="#0A17A7"/> <path d="M20.033 0.411499H0V13.7449H20.033V0.411499Z" fill="#0A17A7"/>
<path d="M-0.73999 0.152256H5.37038e-05H0.477031H0.55542L0.620678 0.195689L3.89426 2.37448H4.69983L8.45512 0.187479L8.84486 -0.0394897V0.411516V0.717082C8.84486 0.890593 8.75814 1.0526 8.61363 1.14873L8.47005 0.932904L8.61363 1.14874L5.50605 3.21706V3.84234L8.4104 6.16201C8.71365 6.40418 8.54239 6.893 8.15435 6.893C8.07347 6.893 7.99437 6.86908 7.92701 6.82425M-0.73999 0.152256L7.92701 6.82425L-0.73999 0.152256ZM-0.73999 0.152256L-0.161741 0.614093L3.07963 3.20292V3.82819L-0.143593 5.97346L-0.259205 6.05042V6.1893V6.63374V7.08475L0.130526 6.85777L3.88586 4.67077H4.69143L7.92701 6.82425M-0.73999 0.152256L8.07059 6.60843L7.92701 6.82425" fill="#FF2E3B"/> <path d="M-0.73999 0.152256H5.37038e-05H0.477031H0.55542L0.620678 0.195689L3.89426 2.37448H4.69983L8.45512 0.187479L8.84486 -0.0394897V0.411516V0.717082C8.84486 0.890593 8.75814 1.0526 8.61363 1.14873L8.47005 0.932904L8.61363 1.14874L5.50605 3.21706V3.84234L8.4104 6.16201C8.71365 6.40418 8.54239 6.893 8.15435 6.893C8.07347 6.893 7.99437 6.86908 7.92701 6.82425M-0.73999 0.152256L7.92701 6.82425L-0.73999 0.152256ZM-0.73999 0.152256L-0.161741 0.614093L3.07963 3.20292V3.82819L-0.143593 5.97346L-0.259205 6.05042V6.1893V6.63374V7.08475L0.130526 6.85777L3.88586 4.67077H4.69143L7.92701 6.82425M-0.73999 0.152256L8.07059 6.60843L7.92701 6.82425"
<path d="M-0.73999 0.152256H5.37069e-05H0.477031H0.55542L0.620678 0.195689L3.89426 2.37448H4.69983L8.45512 0.187479L8.84487 -0.0394897V0.411516V0.717082C8.84487 0.890593 8.75814 1.0526 8.61363 1.14873L8.47005 0.932904L8.61363 1.14874L5.50605 3.21706V3.84234L8.4104 6.16201C8.71365 6.40418 8.54239 6.893 8.15435 6.893C8.07347 6.893 7.99437 6.86908 7.92701 6.82425M-0.73999 0.152256L7.92701 6.82425M-0.73999 0.152256L-0.161741 0.614093L3.07963 3.20292V3.82819L-0.143593 5.97346L-0.259205 6.05042V6.1893V6.63374V7.08475L0.130526 6.85777L3.88586 4.67077H4.69143L7.92701 6.82425M-0.73999 0.152256L8.07059 6.60843L7.92701 6.82425" stroke="white" stroke-width="0.666667"/> fill="#FF2E3B"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 2.63372V4.4115H3.33884V6.55965C3.33884 6.84602 3.57099 7.07816 3.85736 7.07816H4.72822C5.01459 7.07816 5.24674 6.84602 5.24674 6.55965V4.4115H8.54404C8.83042 4.4115 9.06259 4.17935 9.06259 3.89298V3.15224C9.06259 2.86587 8.83042 2.63372 8.54404 2.63372H5.24674V0.411499H3.33884V2.63372H0Z" fill="url(#paint0_linear_22_85)"/> <path d="M-0.73999 0.152256H5.37069e-05H0.477031H0.55542L0.620678 0.195689L3.89426 2.37448H4.69983L8.45512 0.187479L8.84487 -0.0394897V0.411516V0.717082C8.84487 0.890593 8.75814 1.0526 8.61363 1.14873L8.47005 0.932904L8.61363 1.14874L5.50605 3.21706V3.84234L8.4104 6.16201C8.71365 6.40418 8.54239 6.893 8.15435 6.893C8.07347 6.893 7.99437 6.86908 7.92701 6.82425M-0.73999 0.152256L7.92701 6.82425M-0.73999 0.152256L-0.161741 0.614093L3.07963 3.20292V3.82819L-0.143593 5.97346L-0.259205 6.05042V6.1893V6.63374V7.08475L0.130526 6.85777L3.88586 4.67077H4.69143L7.92701 6.82425M-0.73999 0.152256L8.07059 6.60843L7.92701 6.82425"
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 3.07816H3.81581V2.63372V0.411499H4.76977V2.63372V3.07816H8.58558V3.96705H4.76977V4.4115V6.63372H3.81581V4.4115V3.96705H0V3.07816Z" fill="url(#paint1_linear_22_85)"/> stroke="white" stroke-width="0.666667"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.29302 11.3003L3.45195 11.7123L3.61258 10.8397L2.93213 10.2216L3.87249 10.0943L4.29302 9.30029L4.71357 10.0943L5.65392 10.2216L4.97348 10.8397L5.1341 11.7123L4.29302 11.3003Z" fill="white"/> <path fill-rule="evenodd" clip-rule="evenodd"
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.3096 11.9671L13.635 12.1512L13.8326 11.5226L13.635 10.894L14.3096 11.0781L14.9841 10.894L14.7866 11.5226L14.9841 12.1512L14.3096 11.9671Z" fill="white"/> d="M0 2.63372V4.4115H3.33884V6.55965C3.33884 6.84602 3.57099 7.07816 3.85736 7.07816H4.72822C5.01459 7.07816 5.24674 6.84602 5.24674 6.55965V4.4115H8.54404C8.83042 4.4115 9.06259 4.17935 9.06259 3.89298V3.15224C9.06259 2.86587 8.83042 2.63372 8.54404 2.63372H5.24674V0.411499H3.33884V2.63372H0Z"
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.3096 3.52257L13.635 3.70667L13.8326 3.07812L13.635 2.44958L14.3096 2.63369L14.9841 2.44958L14.7866 3.07812L14.9841 3.70667L14.3096 3.52257Z" fill="white"/> fill="url(#paint0_linear_22_85)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.1711 6.18932L16.4966 6.37342L16.6941 5.74488L16.4966 5.11633L17.1711 5.30043L17.8457 5.11633L17.6482 5.74488L17.8457 6.37342L17.1711 6.18932Z" fill="white"/> <path fill-rule="evenodd" clip-rule="evenodd"
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.4475 7.07823L10.7729 7.26232L10.9706 6.63379L10.7729 6.00525L11.4475 6.18934L12.1221 6.00525L11.9245 6.63379L12.1221 7.26232L11.4475 7.07823Z" fill="white"/> d="M0 3.07816H3.81581V2.63372V0.411499H4.76977V2.63372V3.07816H8.58558V3.96705H4.76977V4.4115V6.63372H3.81581V4.4115V3.96705H0V3.07816Z"
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.7402 8.18925L15.4028 8.28134L15.5017 7.96704L15.4028 7.65277L15.7402 7.74482L16.0774 7.65277L15.9786 7.96704L16.0774 8.28134L15.7402 8.18925Z" fill="white"/> fill="url(#paint1_linear_22_85)"/>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M4.29302 11.3003L3.45195 11.7123L3.61258 10.8397L2.93213 10.2216L3.87249 10.0943L4.29302 9.30029L4.71357 10.0943L5.65392 10.2216L4.97348 10.8397L5.1341 11.7123L4.29302 11.3003Z"
fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M14.3096 11.9671L13.635 12.1512L13.8326 11.5226L13.635 10.894L14.3096 11.0781L14.9841 10.894L14.7866 11.5226L14.9841 12.1512L14.3096 11.9671Z"
fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M14.3096 3.52257L13.635 3.70667L13.8326 3.07812L13.635 2.44958L14.3096 2.63369L14.9841 2.44958L14.7866 3.07812L14.9841 3.70667L14.3096 3.52257Z"
fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M17.1711 6.18932L16.4966 6.37342L16.6941 5.74488L16.4966 5.11633L17.1711 5.30043L17.8457 5.11633L17.6482 5.74488L17.8457 6.37342L17.1711 6.18932Z"
fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M11.4475 7.07823L10.7729 7.26232L10.9706 6.63379L10.7729 6.00525L11.4475 6.18934L12.1221 6.00525L11.9245 6.63379L12.1221 7.26232L11.4475 7.07823Z"
fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M15.7402 8.18925L15.4028 8.28134L15.5017 7.96704L15.4028 7.65277L15.7402 7.74482L16.0774 7.65277L15.9786 7.96704L16.0774 8.28134L15.7402 8.18925Z"
fill="white"/>
</g> </g>
</g> </g>
<defs> <defs>
<linearGradient id="paint0_linear_22_85" x1="0" y1="0.411499" x2="0" y2="7.07816" gradientUnits="userSpaceOnUse"> <linearGradient id="paint0_linear_22_85" x1="0" y1="0.411499" x2="0" y2="7.07816"
gradientUnits="userSpaceOnUse">
<stop stop-color="white"/> <stop stop-color="white"/>
<stop offset="1" stop-color="#F0F0F0"/> <stop offset="1" stop-color="#F0F0F0"/>
</linearGradient> </linearGradient>
<linearGradient id="paint1_linear_22_85" x1="0" y1="0.411499" x2="0" y2="6.63372" gradientUnits="userSpaceOnUse"> <linearGradient id="paint1_linear_22_85" x1="0" y1="0.411499" x2="0" y2="6.63372"
gradientUnits="userSpaceOnUse">
<stop stop-color="#FF2E3B"/> <stop stop-color="#FF2E3B"/>
<stop offset="1" stop-color="#FC0D1B"/> <stop offset="1" stop-color="#FC0D1B"/>
</linearGradient> </linearGradient>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.5 KiB

After

Width:  |  Height:  |  Size: 5.2 KiB

13
packages/frontend/src/images/country/country-06.svg
View File

@ -1,14 +1,19 @@
<svg width="21" height="14" viewBox="0 0 21 14" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="21" height="14" viewBox="0 0 21 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_22_107)"> <g clip-path="url(#clip0_22_107)">
<path d="M18.4773 0.605957H1.55545C0.803726 0.605957 0.194336 1.21535 0.194336 1.96707V12.1893C0.194336 12.941 0.803726 13.5504 1.55545 13.5504H18.4773C19.229 13.5504 19.8384 12.941 19.8384 12.1893V1.96707C19.8384 1.21535 19.229 0.605957 18.4773 0.605957Z" fill="white" stroke="#F3F4F6" stroke-width="0.5"/> <path d="M18.4773 0.605957H1.55545C0.803726 0.605957 0.194336 1.21535 0.194336 1.96707V12.1893C0.194336 12.941 0.803726 13.5504 1.55545 13.5504H18.4773C19.229 13.5504 19.8384 12.941 19.8384 12.1893V1.96707C19.8384 1.21535 19.229 0.605957 18.4773 0.605957Z"
fill="white" stroke="#F3F4F6" stroke-width="0.5"/>
<mask id="mask0_22_107" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-1" y="0" width="22" height="14"> <mask id="mask0_22_107" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-1" y="0" width="22" height="14">
<path d="M18.4773 0.605957H1.55545C0.803726 0.605957 0.194336 1.21535 0.194336 1.96707V12.1893C0.194336 12.941 0.803726 13.5504 1.55545 13.5504H18.4773C19.229 13.5504 19.8384 12.941 19.8384 12.1893V1.96707C19.8384 1.21535 19.229 0.605957 18.4773 0.605957Z" fill="white" stroke="white" stroke-width="0.5"/> <path d="M18.4773 0.605957H1.55545C0.803726 0.605957 0.194336 1.21535 0.194336 1.96707V12.1893C0.194336 12.941 0.803726 13.5504 1.55545 13.5504H18.4773C19.229 13.5504 19.8384 12.941 19.8384 12.1893V1.96707C19.8384 1.21535 19.229 0.605957 18.4773 0.605957Z"
fill="white" stroke="white" stroke-width="0.5"/>
</mask> </mask>
<g mask="url(#mask0_22_107)"> <g mask="url(#mask0_22_107)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 4.85594H20.033V0.411499H0V4.85594Z" fill="#FFA44A"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M0 4.85594H20.033V0.411499H0V4.85594Z" fill="#FFA44A"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 13.7447H20.033V9.30029H0V13.7447Z" fill="#1A9F0B"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M0 13.7447H20.033V9.30029H0V13.7447Z" fill="#1A9F0B"/>
<path d="M10.0164 8.67075C10.9323 8.67075 11.7065 7.97472 11.7065 7.07819C11.7065 6.18168 10.9323 5.4856 10.0164 5.4856C9.10045 5.4856 8.32617 6.18168 8.32617 7.07819C8.32617 7.97472 9.10045 8.67075 10.0164 8.67075Z" fill="#181A93" fill-opacity="0.15" stroke="#181A93" stroke-width="0.666667"/> <path d="M10.0164 8.67075C10.9323 8.67075 11.7065 7.97472 11.7065 7.07819C11.7065 6.18168 10.9323 5.4856 10.0164 5.4856C9.10045 5.4856 8.32617 6.18168 8.32617 7.07819C8.32617 7.97472 9.10045 8.67075 10.0164 8.67075Z"
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0166 7.52262C10.28 7.52262 10.4935 7.32363 10.4935 7.07817C10.4935 6.83271 10.28 6.63373 10.0166 6.63373C9.75313 6.63373 9.53955 6.83271 9.53955 7.07817C9.53955 7.32363 9.75313 7.52262 10.0166 7.52262Z" fill="#181A93"/> fill="#181A93" fill-opacity="0.15" stroke="#181A93" stroke-width="0.666667"/>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M10.0166 7.52262C10.28 7.52262 10.4935 7.32363 10.4935 7.07817C10.4935 6.83271 10.28 6.63373 10.0166 6.63373C9.75313 6.63373 9.53955 6.83271 9.53955 7.07817C9.53955 7.32363 9.75313 7.52262 10.0166 7.52262Z"
fill="#181A93"/>
</g> </g>
</g> </g>
<defs> <defs>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 2.0 KiB

12
packages/frontend/src/images/icon/icon-copy-alt.svg
View File

@ -1,6 +1,10 @@
<svg class="fill-current" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg class="fill-current" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17.6875 4.125L14.4062 0.875C14.1875 0.65625 13.875 0.53125 13.5625 0.53125H7.875C6.96875 0.53125 6.21875 1.28125 6.21875 2.1875V13.5937C6.21875 14.5 6.96875 15.25 7.875 15.25H16.375C17.2812 15.25 18.0312 14.5 18.0312 13.5937V4.96875C18.0312 4.65625 17.9062 4.34375 17.6875 4.125ZM14.4687 2.9375L15.6562 4.125H14.4687V2.9375ZM16.375 13.8437H7.875C7.75 13.8437 7.625 13.7187 7.625 13.5937V2.1875C7.625 2.0625 7.75 1.9375 7.875 1.9375H13.0625V4.8125C13.0625 5.1875 13.375 5.53125 13.7812 5.53125H16.625V13.625C16.625 13.75 16.5 13.8437 16.375 13.8437Z" fill="#FFFFFF"/> <path d="M17.6875 4.125L14.4062 0.875C14.1875 0.65625 13.875 0.53125 13.5625 0.53125H7.875C6.96875 0.53125 6.21875 1.28125 6.21875 2.1875V13.5937C6.21875 14.5 6.96875 15.25 7.875 15.25H16.375C17.2812 15.25 18.0312 14.5 18.0312 13.5937V4.96875C18.0312 4.65625 17.9062 4.34375 17.6875 4.125ZM14.4687 2.9375L15.6562 4.125H14.4687V2.9375ZM16.375 13.8437H7.875C7.75 13.8437 7.625 13.7187 7.625 13.5937V2.1875C7.625 2.0625 7.75 1.9375 7.875 1.9375H13.0625V4.8125C13.0625 5.1875 13.375 5.53125 13.7812 5.53125H16.625V13.625C16.625 13.75 16.5 13.8437 16.375 13.8437Z"
<path d="M13.7812 7.03125H9.65625C9.28125 7.03125 8.9375 7.34375 8.9375 7.75C8.9375 8.15625 9.25 8.46875 9.65625 8.46875H13.7812C14.1562 8.46875 14.5 8.15625 14.5 7.75C14.5 7.34375 14.1562 7.03125 13.7812 7.03125Z" fill="#FFFFFF"/> fill="#FFFFFF"/>
<path d="M13.7812 9.65625H9.65625C9.28125 9.65625 8.9375 9.96875 8.9375 10.375C8.9375 10.75 9.25 11.0937 9.65625 11.0937H13.7812C14.1562 11.0937 14.5 10.7813 14.5 10.375C14.4687 9.96875 14.1562 9.65625 13.7812 9.65625Z" fill="#FFFFFF"/> <path d="M13.7812 7.03125H9.65625C9.28125 7.03125 8.9375 7.34375 8.9375 7.75C8.9375 8.15625 9.25 8.46875 9.65625 8.46875H13.7812C14.1562 8.46875 14.5 8.15625 14.5 7.75C14.5 7.34375 14.1562 7.03125 13.7812 7.03125Z"
<path d="M13.0625 16.25C12.6875 16.25 12.3438 16.5625 12.3438 16.9687V17.8125C12.3438 17.9375 12.2188 18.0625 12.0938 18.0625H3.625C3.5 18.0625 3.375 17.9375 3.375 17.8125V6.375C3.375 6.25 3.5 6.125 3.625 6.125H4.6875C5.0625 6.125 5.40625 5.8125 5.40625 5.40625C5.40625 5 5.09375 4.6875 4.6875 4.6875H3.625C2.71875 4.6875 1.96875 5.4375 1.96875 6.34375V17.8125C1.96875 18.7188 2.71875 19.4687 3.625 19.4687H12.125C13.0313 19.4687 13.7812 18.7188 13.7812 17.8125V16.9687C13.7812 16.5625 13.4687 16.25 13.0625 16.25Z" fill="#FFFFFF"/> fill="#FFFFFF"/>
<path d="M13.7812 9.65625H9.65625C9.28125 9.65625 8.9375 9.96875 8.9375 10.375C8.9375 10.75 9.25 11.0937 9.65625 11.0937H13.7812C14.1562 11.0937 14.5 10.7813 14.5 10.375C14.4687 9.96875 14.1562 9.65625 13.7812 9.65625Z"
fill="#FFFFFF"/>
<path d="M13.0625 16.25C12.6875 16.25 12.3438 16.5625 12.3438 16.9687V17.8125C12.3438 17.9375 12.2188 18.0625 12.0938 18.0625H3.625C3.5 18.0625 3.375 17.9375 3.375 17.8125V6.375C3.375 6.25 3.5 6.125 3.625 6.125H4.6875C5.0625 6.125 5.40625 5.8125 5.40625 5.40625C5.40625 5 5.09375 4.6875 4.6875 4.6875H3.625C2.71875 4.6875 1.96875 5.4375 1.96875 6.34375V17.8125C1.96875 18.7188 2.71875 19.4687 3.625 19.4687H12.125C13.0313 19.4687 13.7812 18.7188 13.7812 17.8125V16.9687C13.7812 16.5625 13.4687 16.25 13.0625 16.25Z"
fill="#FFFFFF"/>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

3
packages/frontend/src/images/icon/icon-moon.svg
View File

@ -1,6 +1,7 @@
<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_512_11103)"> <g clip-path="url(#clip0_512_11103)">
<path d="M8.83697 5.88205C8.8368 7.05058 9.18468 8.19267 9.83625 9.16268C10.4878 10.1327 11.4135 10.8866 12.4953 11.3284C13.5772 11.7701 14.766 11.8796 15.9103 11.6429C17.0546 11.4062 18.1025 10.8341 18.9203 9.99941V10.0834C18.9203 14.7243 15.1584 18.4862 10.5175 18.4862C5.87667 18.4862 2.11475 14.7243 2.11475 10.0834C2.11475 5.44259 5.87667 1.68066 10.5175 1.68066H10.6016C10.042 2.22779 9.59754 2.88139 9.29448 3.60295C8.99143 4.32451 8.83587 5.09943 8.83697 5.88205ZM3.7953 10.0834C3.79469 11.5833 4.29571 13.0403 5.21864 14.2226C6.14157 15.4049 7.4334 16.2446 8.88857 16.608C10.3437 16.9715 11.8787 16.8379 13.2491 16.2284C14.6196 15.6189 15.7469 14.5686 16.4516 13.2446C15.1974 13.54 13.8885 13.5102 12.6492 13.1578C11.4098 12.8054 10.281 12.1422 9.36988 11.2311C8.45877 10.32 7.79557 9.19119 7.44318 7.95181C7.0908 6.71243 7.06093 5.40357 7.3564 4.1494C6.28049 4.72259 5.38073 5.57759 4.75343 6.62288C4.12614 7.66817 3.79495 8.86438 3.7953 10.0834Z" fill="#757693"/> <path d="M8.83697 5.88205C8.8368 7.05058 9.18468 8.19267 9.83625 9.16268C10.4878 10.1327 11.4135 10.8866 12.4953 11.3284C13.5772 11.7701 14.766 11.8796 15.9103 11.6429C17.0546 11.4062 18.1025 10.8341 18.9203 9.99941V10.0834C18.9203 14.7243 15.1584 18.4862 10.5175 18.4862C5.87667 18.4862 2.11475 14.7243 2.11475 10.0834C2.11475 5.44259 5.87667 1.68066 10.5175 1.68066H10.6016C10.042 2.22779 9.59754 2.88139 9.29448 3.60295C8.99143 4.32451 8.83587 5.09943 8.83697 5.88205ZM3.7953 10.0834C3.79469 11.5833 4.29571 13.0403 5.21864 14.2226C6.14157 15.4049 7.4334 16.2446 8.88857 16.608C10.3437 16.9715 11.8787 16.8379 13.2491 16.2284C14.6196 15.6189 15.7469 14.5686 16.4516 13.2446C15.1974 13.54 13.8885 13.5102 12.6492 13.1578C11.4098 12.8054 10.281 12.1422 9.36988 11.2311C8.45877 10.32 7.79557 9.19119 7.44318 7.95181C7.0908 6.71243 7.06093 5.40357 7.3564 4.1494C6.28049 4.72259 5.38073 5.57759 4.75343 6.62288C4.12614 7.66817 3.79495 8.86438 3.7953 10.0834Z"
fill="#757693"/>
</g> </g>
<defs> <defs>
<clipPath id="clip0_512_11103"> <clipPath id="clip0_512_11103">

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

3
packages/frontend/src/images/icon/icon-sun.svg
View File

@ -1,6 +1,7 @@
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1_1131)"> <g clip-path="url(#clip0_1_1131)">
<path d="M11 16.4998C9.54133 16.4998 8.14238 15.9204 7.11093 14.8889C6.07948 13.8575 5.50002 12.4585 5.50002 10.9998C5.50002 9.54115 6.07948 8.1422 7.11093 7.11075C8.14238 6.0793 9.54133 5.49984 11 5.49984C12.4587 5.49984 13.8577 6.0793 14.8891 7.11075C15.9206 8.1422 16.5 9.54115 16.5 10.9998C16.5 12.4585 15.9206 13.8575 14.8891 14.8889C13.8577 15.9204 12.4587 16.4998 11 16.4998ZM11 14.6665C11.9725 14.6665 12.9051 14.2802 13.5927 13.5926C14.2804 12.9049 14.6667 11.9723 14.6667 10.9998C14.6667 10.0274 14.2804 9.09475 13.5927 8.40711C12.9051 7.71948 11.9725 7.33317 11 7.33317C10.0276 7.33317 9.09493 7.71948 8.4073 8.40711C7.71966 9.09475 7.33335 10.0274 7.33335 10.9998C7.33335 11.9723 7.71966 12.9049 8.4073 13.5926C9.09493 14.2802 10.0276 14.6665 11 14.6665ZM10.0834 0.916504H11.9167V3.6665H10.0834V0.916504ZM10.0834 18.3332H11.9167V21.0832H10.0834V18.3332ZM3.2221 4.51809L4.51827 3.22192L6.46252 5.16617L5.16635 6.46234L3.2221 4.519V4.51809ZM15.5375 16.8335L16.8337 15.5373L18.7779 17.4816L17.4818 18.7778L15.5375 16.8335ZM17.4818 3.221L18.7779 4.51809L16.8337 6.46234L15.5375 5.16617L17.4818 3.22192V3.221ZM5.16635 15.5373L6.46252 16.8335L4.51827 18.7778L3.2221 17.4816L5.16635 15.5373ZM21.0834 10.0832V11.9165H18.3334V10.0832H21.0834ZM3.66669 10.0832V11.9165H0.916687V10.0832H3.66669Z" fill="#757693"/> <path d="M11 16.4998C9.54133 16.4998 8.14238 15.9204 7.11093 14.8889C6.07948 13.8575 5.50002 12.4585 5.50002 10.9998C5.50002 9.54115 6.07948 8.1422 7.11093 7.11075C8.14238 6.0793 9.54133 5.49984 11 5.49984C12.4587 5.49984 13.8577 6.0793 14.8891 7.11075C15.9206 8.1422 16.5 9.54115 16.5 10.9998C16.5 12.4585 15.9206 13.8575 14.8891 14.8889C13.8577 15.9204 12.4587 16.4998 11 16.4998ZM11 14.6665C11.9725 14.6665 12.9051 14.2802 13.5927 13.5926C14.2804 12.9049 14.6667 11.9723 14.6667 10.9998C14.6667 10.0274 14.2804 9.09475 13.5927 8.40711C12.9051 7.71948 11.9725 7.33317 11 7.33317C10.0276 7.33317 9.09493 7.71948 8.4073 8.40711C7.71966 9.09475 7.33335 10.0274 7.33335 10.9998C7.33335 11.9723 7.71966 12.9049 8.4073 13.5926C9.09493 14.2802 10.0276 14.6665 11 14.6665ZM10.0834 0.916504H11.9167V3.6665H10.0834V0.916504ZM10.0834 18.3332H11.9167V21.0832H10.0834V18.3332ZM3.2221 4.51809L4.51827 3.22192L6.46252 5.16617L5.16635 6.46234L3.2221 4.519V4.51809ZM15.5375 16.8335L16.8337 15.5373L18.7779 17.4816L17.4818 18.7778L15.5375 16.8335ZM17.4818 3.221L18.7779 4.51809L16.8337 6.46234L15.5375 5.16617L17.4818 3.22192V3.221ZM5.16635 15.5373L6.46252 16.8335L4.51827 18.7778L3.2221 17.4816L5.16635 15.5373ZM21.0834 10.0832V11.9165H18.3334V10.0832H21.0834ZM3.66669 10.0832V11.9165H0.916687V10.0832H3.66669Z"
fill="#757693"/>
</g> </g>
<defs> <defs>
<clipPath id="clip0_1_1131"> <clipPath id="clip0_1_1131">

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

51
packages/frontend/src/images/logo/logo-dark.svg
View File

@ -1,27 +1,40 @@
<svg width="176" height="32" viewBox="0 0 176 32" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="176" height="32" viewBox="0 0 176 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M44 9.17592H50.2773V27.1572H54.032V9.17592H60.3093V5.71459H44V9.17592Z" fill="#1C2434"/> <path d="M44 9.17592H50.2773V27.1572H54.032V9.17592H60.3093V5.71459H44V9.17592Z" fill="#1C2434"/>
<path d="M64.4999 27.5386C66.7585 27.5386 68.7239 26.5119 69.3399 25.0159L69.6039 27.1572H72.7425V18.3572C72.7425 14.3386 70.3372 12.2266 66.4359 12.2266C62.5052 12.2266 59.9239 14.2799 59.9239 17.4186H62.9745C62.9745 15.8933 64.1479 15.0133 66.2599 15.0133C68.0785 15.0133 69.2519 15.8053 69.2519 17.7706V18.0932L64.9105 18.4159C61.4785 18.6799 59.5425 20.3519 59.5425 23.0213C59.5425 25.7492 61.4199 27.5386 64.4999 27.5386ZM65.6732 24.8399C64.0599 24.8399 63.1799 24.1946 63.1799 22.8746C63.1799 21.7012 64.0305 20.9679 66.2599 20.7626L69.2812 20.5279V21.2906C69.2812 23.5199 67.8732 24.8399 65.6732 24.8399Z" fill="#1C2434"/> <path d="M64.4999 27.5386C66.7585 27.5386 68.7239 26.5119 69.3399 25.0159L69.6039 27.1572H72.7425V18.3572C72.7425 14.3386 70.3372 12.2266 66.4359 12.2266C62.5052 12.2266 59.9239 14.2799 59.9239 17.4186H62.9745C62.9745 15.8933 64.1479 15.0133 66.2599 15.0133C68.0785 15.0133 69.2519 15.8053 69.2519 17.7706V18.0932L64.9105 18.4159C61.4785 18.6799 59.5425 20.3519 59.5425 23.0213C59.5425 25.7492 61.4199 27.5386 64.4999 27.5386ZM65.6732 24.8399C64.0599 24.8399 63.1799 24.1946 63.1799 22.8746C63.1799 21.7012 64.0305 20.9679 66.2599 20.7626L69.2812 20.5279V21.2906C69.2812 23.5199 67.8732 24.8399 65.6732 24.8399Z"
<path d="M78.0475 9.76258C79.2209 9.76258 80.1889 8.79458 80.1889 7.59192C80.1889 6.38925 79.2209 5.45059 78.0475 5.45059C76.8155 5.45059 75.8475 6.38925 75.8475 7.59192C75.8475 8.79458 76.8155 9.76258 78.0475 9.76258ZM76.2582 27.1572H79.8369V12.6666H76.2582V27.1572Z" fill="#1C2434"/> fill="#1C2434"/>
<path d="M78.0475 9.76258C79.2209 9.76258 80.1889 8.79458 80.1889 7.59192C80.1889 6.38925 79.2209 5.45059 78.0475 5.45059C76.8155 5.45059 75.8475 6.38925 75.8475 7.59192C75.8475 8.79458 76.8155 9.76258 78.0475 9.76258ZM76.2582 27.1572H79.8369V12.6666H76.2582V27.1572Z"
fill="#1C2434"/>
<path d="M87.1422 27.1572V5.33325H83.5929V27.1572H87.1422Z" fill="#1C2434"/> <path d="M87.1422 27.1572V5.33325H83.5929V27.1572H87.1422Z" fill="#1C2434"/>
<path d="M93.2722 27.1572L95.0029 22.1999H103.011L104.742 27.1572H108.702L100.958 5.71459H97.1149L89.3709 27.1572H93.2722ZM98.5522 12.1093C98.7576 11.5226 98.9335 10.8773 99.0215 10.4666C99.0802 10.9066 99.2855 11.5519 99.4615 12.1093L101.926 19.0319H96.1175L98.5522 12.1093Z" fill="#1C2434"/> <path d="M93.2722 27.1572L95.0029 22.1999H103.011L104.742 27.1572H108.702L100.958 5.71459H97.1149L89.3709 27.1572H93.2722ZM98.5522 12.1093C98.7576 11.5226 98.9335 10.8773 99.0215 10.4666C99.0802 10.9066 99.2855 11.5519 99.4615 12.1093L101.926 19.0319H96.1175L98.5522 12.1093Z"
<path d="M116.158 27.5386C118.358 27.5386 120.236 26.5706 121.116 24.8986L121.35 27.1572H124.636V5.33325H121.086V14.5146C120.177 13.0773 118.388 12.2266 116.364 12.2266C111.993 12.2266 109.353 15.4533 109.353 19.9706C109.353 24.4586 111.964 27.5386 116.158 27.5386ZM116.95 24.2532C114.457 24.2532 112.932 22.4346 112.932 19.8533C112.932 17.2719 114.457 15.4239 116.95 15.4239C119.444 15.4239 121.057 17.2426 121.057 19.8533C121.057 22.4639 119.444 24.2532 116.95 24.2532Z" fill="#1C2434"/> fill="#1C2434"/>
<path d="M131.944 27.1572V18.9439C131.944 16.5973 133.322 15.4826 135.024 15.4826C136.725 15.4826 137.81 16.5679 137.81 18.5919V27.1572H141.389V18.9439C141.389 16.5679 142.709 15.4533 144.44 15.4533C146.141 15.4533 147.256 16.5386 147.256 18.6213V27.1572H150.805V17.6826C150.805 14.3386 148.869 12.2266 145.349 12.2266C143.149 12.2266 141.448 13.3119 140.714 14.9839C139.952 13.3119 138.426 12.2266 136.226 12.2266C134.144 12.2266 132.677 13.1653 131.944 14.3679L131.65 12.6666H128.365V27.1572H131.944Z" fill="#1C2434"/> <path d="M116.158 27.5386C118.358 27.5386 120.236 26.5706 121.116 24.8986L121.35 27.1572H124.636V5.33325H121.086V14.5146C120.177 13.0773 118.388 12.2266 116.364 12.2266C111.993 12.2266 109.353 15.4533 109.353 19.9706C109.353 24.4586 111.964 27.5386 116.158 27.5386ZM116.95 24.2532C114.457 24.2532 112.932 22.4346 112.932 19.8533C112.932 17.2719 114.457 15.4239 116.95 15.4239C119.444 15.4239 121.057 17.2426 121.057 19.8533C121.057 22.4639 119.444 24.2532 116.95 24.2532Z"
<path d="M156.107 9.76258C157.281 9.76258 158.249 8.79458 158.249 7.59192C158.249 6.38925 157.281 5.45059 156.107 5.45059C154.875 5.45059 153.907 6.38925 153.907 7.59192C153.907 8.79458 154.875 9.76258 156.107 9.76258ZM154.318 27.1572H157.897V12.6666H154.318V27.1572Z" fill="#1C2434"/> fill="#1C2434"/>
<path d="M165.173 27.1572V19.3546C165.173 17.0079 166.522 15.4826 168.722 15.4826C170.57 15.4826 171.773 16.6559 171.773 19.0906V27.1572H175.351V18.2399C175.351 14.4853 173.474 12.2266 169.837 12.2266C167.871 12.2266 166.111 13.0773 165.202 14.5439L164.909 12.6666H161.594V27.1572H165.173Z" fill="#1C2434"/> <path d="M131.944 27.1572V18.9439C131.944 16.5973 133.322 15.4826 135.024 15.4826C136.725 15.4826 137.81 16.5679 137.81 18.5919V27.1572H141.389V18.9439C141.389 16.5679 142.709 15.4533 144.44 15.4533C146.141 15.4533 147.256 16.5386 147.256 18.6213V27.1572H150.805V17.6826C150.805 14.3386 148.869 12.2266 145.349 12.2266C143.149 12.2266 141.448 13.3119 140.714 14.9839C139.952 13.3119 138.426 12.2266 136.226 12.2266C134.144 12.2266 132.677 13.1653 131.944 14.3679L131.65 12.6666H128.365V27.1572H131.944Z"
<path d="M0 8.42105C0 3.77023 3.77023 0 8.42105 0H23.5789C28.2298 0 32 3.77023 32 8.42105V23.5789C32 28.2298 28.2298 32 23.5789 32H8.42105C3.77023 32 0 28.2298 0 23.5789V8.42105Z" fill="#3C50E0"/> fill="#1C2434"/>
<path d="M156.107 9.76258C157.281 9.76258 158.249 8.79458 158.249 7.59192C158.249 6.38925 157.281 5.45059 156.107 5.45059C154.875 5.45059 153.907 6.38925 153.907 7.59192C153.907 8.79458 154.875 9.76258 156.107 9.76258ZM154.318 27.1572H157.897V12.6666H154.318V27.1572Z"
fill="#1C2434"/>
<path d="M165.173 27.1572V19.3546C165.173 17.0079 166.522 15.4826 168.722 15.4826C170.57 15.4826 171.773 16.6559 171.773 19.0906V27.1572H175.351V18.2399C175.351 14.4853 173.474 12.2266 169.837 12.2266C167.871 12.2266 166.111 13.0773 165.202 14.5439L164.909 12.6666H161.594V27.1572H165.173Z"
fill="#1C2434"/>
<path d="M0 8.42105C0 3.77023 3.77023 0 8.42105 0H23.5789C28.2298 0 32 3.77023 32 8.42105V23.5789C32 28.2298 28.2298 32 23.5789 32H8.42105C3.77023 32 0 28.2298 0 23.5789V8.42105Z"
fill="#3C50E0"/>
<g filter="url(#filter0_d_521_14075)"> <g filter="url(#filter0_d_521_14075)">
<path d="M8.42139 8.42127C8.42139 7.49111 9.17543 6.73706 10.1056 6.73706V6.73706C11.0358 6.73706 11.7898 7.49111 11.7898 8.42127V23.5792C11.7898 24.5093 11.0358 25.2634 10.1056 25.2634V25.2634C9.17543 25.2634 8.42139 24.5093 8.42139 23.5792V8.42127Z" fill="white"/> <path d="M8.42139 8.42127C8.42139 7.49111 9.17543 6.73706 10.1056 6.73706V6.73706C11.0358 6.73706 11.7898 7.49111 11.7898 8.42127V23.5792C11.7898 24.5093 11.0358 25.2634 10.1056 25.2634V25.2634C9.17543 25.2634 8.42139 24.5093 8.42139 23.5792V8.42127Z"
fill="white"/>
</g> </g>
<g opacity="0.9" filter="url(#filter1_d_521_14075)"> <g opacity="0.9" filter="url(#filter1_d_521_14075)">
<path d="M14.7368 15.1576C14.7368 14.2274 15.4909 13.4734 16.421 13.4734V13.4734C17.3512 13.4734 18.1052 14.2274 18.1052 15.1576V23.5786C18.1052 24.5088 17.3512 25.2629 16.421 25.2629V25.2629C15.4909 25.2629 14.7368 24.5088 14.7368 23.5786V15.1576Z" fill="white"/> <path d="M14.7368 15.1576C14.7368 14.2274 15.4909 13.4734 16.421 13.4734V13.4734C17.3512 13.4734 18.1052 14.2274 18.1052 15.1576V23.5786C18.1052 24.5088 17.3512 25.2629 16.421 25.2629V25.2629C15.4909 25.2629 14.7368 24.5088 14.7368 23.5786V15.1576Z"
fill="white"/>
</g> </g>
<g opacity="0.7" filter="url(#filter2_d_521_14075)"> <g opacity="0.7" filter="url(#filter2_d_521_14075)">
<path d="M21.0522 10.9469C21.0522 10.0167 21.8063 9.2627 22.7365 9.2627V9.2627C23.6666 9.2627 24.4207 10.0167 24.4207 10.9469V23.5785C24.4207 24.5086 23.6666 25.2627 22.7365 25.2627V25.2627C21.8063 25.2627 21.0522 24.5086 21.0522 23.5785V10.9469Z" fill="white"/> <path d="M21.0522 10.9469C21.0522 10.0167 21.8063 9.2627 22.7365 9.2627V9.2627C23.6666 9.2627 24.4207 10.0167 24.4207 10.9469V23.5785C24.4207 24.5086 23.6666 25.2627 22.7365 25.2627V25.2627C21.8063 25.2627 21.0522 24.5086 21.0522 23.5785V10.9469Z"
fill="white"/>
</g> </g>
<defs> <defs>
<filter id="filter0_d_521_14075" x="7.42139" y="6.23706" width="5.36865" height="20.5264" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> <filter id="filter0_d_521_14075" x="7.42139" y="6.23706" width="5.36865" height="20.5264"
filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/> <feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/> <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha"/>
<feOffset dy="0.5"/> <feOffset dy="0.5"/>
<feGaussianBlur stdDeviation="0.5"/> <feGaussianBlur stdDeviation="0.5"/>
<feComposite in2="hardAlpha" operator="out"/> <feComposite in2="hardAlpha" operator="out"/>
@ -29,9 +42,11 @@
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_521_14075"/> <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_521_14075"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_521_14075" result="shape"/> <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_521_14075" result="shape"/>
</filter> </filter>
<filter id="filter1_d_521_14075" x="13.7368" y="12.9734" width="5.36865" height="13.7896" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> <filter id="filter1_d_521_14075" x="13.7368" y="12.9734" width="5.36865" height="13.7896"
filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/> <feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/> <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha"/>
<feOffset dy="0.5"/> <feOffset dy="0.5"/>
<feGaussianBlur stdDeviation="0.5"/> <feGaussianBlur stdDeviation="0.5"/>
<feComposite in2="hardAlpha" operator="out"/> <feComposite in2="hardAlpha" operator="out"/>
@ -39,9 +54,11 @@
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_521_14075"/> <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_521_14075"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_521_14075" result="shape"/> <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_521_14075" result="shape"/>
</filter> </filter>
<filter id="filter2_d_521_14075" x="20.0522" y="8.7627" width="5.36865" height="18" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> <filter id="filter2_d_521_14075" x="20.0522" y="8.7627" width="5.36865" height="18" filterUnits="userSpaceOnUse"
color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/> <feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/> <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha"/>
<feOffset dy="0.5"/> <feOffset dy="0.5"/>
<feGaussianBlur stdDeviation="0.5"/> <feGaussianBlur stdDeviation="0.5"/>
<feComposite in2="hardAlpha" operator="out"/> <feComposite in2="hardAlpha" operator="out"/>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.2 KiB

After

Width:  |  Height:  |  Size: 6.9 KiB

30
packages/frontend/src/images/logo/logo-icon.svg
View File

@ -1,18 +1,24 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 8.42105C0 3.77023 3.77023 0 8.42105 0H23.5789C28.2298 0 32 3.77023 32 8.42105V23.5789C32 28.2298 28.2298 32 23.5789 32H8.42105C3.77023 32 0 28.2298 0 23.5789V8.42105Z" fill="#3C50E0"/> <path d="M0 8.42105C0 3.77023 3.77023 0 8.42105 0H23.5789C28.2298 0 32 3.77023 32 8.42105V23.5789C32 28.2298 28.2298 32 23.5789 32H8.42105C3.77023 32 0 28.2298 0 23.5789V8.42105Z"
fill="#3C50E0"/>
<g filter="url(#filter0_d_521_14078)"> <g filter="url(#filter0_d_521_14078)">
<path d="M8.42139 8.42127C8.42139 7.49111 9.17543 6.73706 10.1056 6.73706V6.73706C11.0358 6.73706 11.7898 7.49111 11.7898 8.42127V23.5792C11.7898 24.5093 11.0358 25.2634 10.1056 25.2634V25.2634C9.17543 25.2634 8.42139 24.5093 8.42139 23.5792V8.42127Z" fill="white"/> <path d="M8.42139 8.42127C8.42139 7.49111 9.17543 6.73706 10.1056 6.73706V6.73706C11.0358 6.73706 11.7898 7.49111 11.7898 8.42127V23.5792C11.7898 24.5093 11.0358 25.2634 10.1056 25.2634V25.2634C9.17543 25.2634 8.42139 24.5093 8.42139 23.5792V8.42127Z"
fill="white"/>
</g> </g>
<g opacity="0.9" filter="url(#filter1_d_521_14078)"> <g opacity="0.9" filter="url(#filter1_d_521_14078)">
<path d="M14.7368 15.1576C14.7368 14.2274 15.4909 13.4734 16.421 13.4734V13.4734C17.3512 13.4734 18.1052 14.2274 18.1052 15.1576V23.5786C18.1052 24.5088 17.3512 25.2629 16.421 25.2629V25.2629C15.4909 25.2629 14.7368 24.5088 14.7368 23.5786V15.1576Z" fill="white"/> <path d="M14.7368 15.1576C14.7368 14.2274 15.4909 13.4734 16.421 13.4734V13.4734C17.3512 13.4734 18.1052 14.2274 18.1052 15.1576V23.5786C18.1052 24.5088 17.3512 25.2629 16.421 25.2629V25.2629C15.4909 25.2629 14.7368 24.5088 14.7368 23.5786V15.1576Z"
fill="white"/>
</g> </g>
<g opacity="0.7" filter="url(#filter2_d_521_14078)"> <g opacity="0.7" filter="url(#filter2_d_521_14078)">
<path d="M21.0522 10.9469C21.0522 10.0167 21.8063 9.2627 22.7365 9.2627V9.2627C23.6666 9.2627 24.4207 10.0167 24.4207 10.9469V23.5785C24.4207 24.5086 23.6666 25.2627 22.7365 25.2627V25.2627C21.8063 25.2627 21.0522 24.5086 21.0522 23.5785V10.9469Z" fill="white"/> <path d="M21.0522 10.9469C21.0522 10.0167 21.8063 9.2627 22.7365 9.2627V9.2627C23.6666 9.2627 24.4207 10.0167 24.4207 10.9469V23.5785C24.4207 24.5086 23.6666 25.2627 22.7365 25.2627V25.2627C21.8063 25.2627 21.0522 24.5086 21.0522 23.5785V10.9469Z"
fill="white"/>
</g> </g>
<defs> <defs>
<filter id="filter0_d_521_14078" x="7.42139" y="6.23706" width="5.36865" height="20.5264" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> <filter id="filter0_d_521_14078" x="7.42139" y="6.23706" width="5.36865" height="20.5264"
filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/> <feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/> <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha"/>
<feOffset dy="0.5"/> <feOffset dy="0.5"/>
<feGaussianBlur stdDeviation="0.5"/> <feGaussianBlur stdDeviation="0.5"/>
<feComposite in2="hardAlpha" operator="out"/> <feComposite in2="hardAlpha" operator="out"/>
@ -20,9 +26,11 @@
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_521_14078"/> <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_521_14078"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_521_14078" result="shape"/> <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_521_14078" result="shape"/>
</filter> </filter>
<filter id="filter1_d_521_14078" x="13.7368" y="12.9734" width="5.36865" height="13.7896" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> <filter id="filter1_d_521_14078" x="13.7368" y="12.9734" width="5.36865" height="13.7896"
filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/> <feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/> <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha"/>
<feOffset dy="0.5"/> <feOffset dy="0.5"/>
<feGaussianBlur stdDeviation="0.5"/> <feGaussianBlur stdDeviation="0.5"/>
<feComposite in2="hardAlpha" operator="out"/> <feComposite in2="hardAlpha" operator="out"/>
@ -30,9 +38,11 @@
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_521_14078"/> <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_521_14078"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_521_14078" result="shape"/> <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_521_14078" result="shape"/>
</filter> </filter>
<filter id="filter2_d_521_14078" x="20.0522" y="8.7627" width="5.36865" height="18" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> <filter id="filter2_d_521_14078" x="20.0522" y="8.7627" width="5.36865" height="18" filterUnits="userSpaceOnUse"
color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/> <feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/> <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha"/>
<feOffset dy="0.5"/> <feOffset dy="0.5"/>
<feGaussianBlur stdDeviation="0.5"/> <feGaussianBlur stdDeviation="0.5"/>
<feComposite in2="hardAlpha" operator="out"/> <feComposite in2="hardAlpha" operator="out"/>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.3 KiB

After

Width:  |  Height:  |  Size: 3.9 KiB

51
packages/frontend/src/images/logo/logo.svg
View File

@ -1,27 +1,40 @@
<svg width="176" height="32" viewBox="0 0 176 32" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="176" height="32" viewBox="0 0 176 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M44 9.17592H50.2773V27.1572H54.032V9.17592H60.3093V5.71459H44V9.17592Z" fill="white"/> <path d="M44 9.17592H50.2773V27.1572H54.032V9.17592H60.3093V5.71459H44V9.17592Z" fill="white"/>
<path d="M64.4999 27.5386C66.7585 27.5386 68.7239 26.5119 69.3399 25.0159L69.6039 27.1572H72.7425V18.3572C72.7425 14.3386 70.3372 12.2266 66.4359 12.2266C62.5052 12.2266 59.9239 14.2799 59.9239 17.4186H62.9745C62.9745 15.8933 64.1479 15.0133 66.2599 15.0133C68.0785 15.0133 69.2519 15.8053 69.2519 17.7706V18.0932L64.9105 18.4159C61.4785 18.6799 59.5425 20.3519 59.5425 23.0213C59.5425 25.7492 61.4199 27.5386 64.4999 27.5386ZM65.6732 24.8399C64.0599 24.8399 63.1799 24.1946 63.1799 22.8746C63.1799 21.7012 64.0305 20.9679 66.2599 20.7626L69.2812 20.5279V21.2906C69.2812 23.5199 67.8732 24.8399 65.6732 24.8399Z" fill="white"/> <path d="M64.4999 27.5386C66.7585 27.5386 68.7239 26.5119 69.3399 25.0159L69.6039 27.1572H72.7425V18.3572C72.7425 14.3386 70.3372 12.2266 66.4359 12.2266C62.5052 12.2266 59.9239 14.2799 59.9239 17.4186H62.9745C62.9745 15.8933 64.1479 15.0133 66.2599 15.0133C68.0785 15.0133 69.2519 15.8053 69.2519 17.7706V18.0932L64.9105 18.4159C61.4785 18.6799 59.5425 20.3519 59.5425 23.0213C59.5425 25.7492 61.4199 27.5386 64.4999 27.5386ZM65.6732 24.8399C64.0599 24.8399 63.1799 24.1946 63.1799 22.8746C63.1799 21.7012 64.0305 20.9679 66.2599 20.7626L69.2812 20.5279V21.2906C69.2812 23.5199 67.8732 24.8399 65.6732 24.8399Z"
<path d="M78.0475 9.76258C79.2209 9.76258 80.1889 8.79458 80.1889 7.59192C80.1889 6.38925 79.2209 5.45059 78.0475 5.45059C76.8155 5.45059 75.8475 6.38925 75.8475 7.59192C75.8475 8.79458 76.8155 9.76258 78.0475 9.76258ZM76.2582 27.1572H79.8369V12.6666H76.2582V27.1572Z" fill="white"/> fill="white"/>
<path d="M78.0475 9.76258C79.2209 9.76258 80.1889 8.79458 80.1889 7.59192C80.1889 6.38925 79.2209 5.45059 78.0475 5.45059C76.8155 5.45059 75.8475 6.38925 75.8475 7.59192C75.8475 8.79458 76.8155 9.76258 78.0475 9.76258ZM76.2582 27.1572H79.8369V12.6666H76.2582V27.1572Z"
fill="white"/>
<path d="M87.1422 27.1572V5.33325H83.5929V27.1572H87.1422Z" fill="white"/> <path d="M87.1422 27.1572V5.33325H83.5929V27.1572H87.1422Z" fill="white"/>
<path d="M93.2722 27.1572L95.0029 22.1999H103.011L104.742 27.1572H108.702L100.958 5.71459H97.1149L89.3709 27.1572H93.2722ZM98.5522 12.1093C98.7576 11.5226 98.9335 10.8773 99.0215 10.4666C99.0802 10.9066 99.2855 11.5519 99.4615 12.1093L101.926 19.0319H96.1175L98.5522 12.1093Z" fill="white"/> <path d="M93.2722 27.1572L95.0029 22.1999H103.011L104.742 27.1572H108.702L100.958 5.71459H97.1149L89.3709 27.1572H93.2722ZM98.5522 12.1093C98.7576 11.5226 98.9335 10.8773 99.0215 10.4666C99.0802 10.9066 99.2855 11.5519 99.4615 12.1093L101.926 19.0319H96.1175L98.5522 12.1093Z"
<path d="M116.158 27.5386C118.358 27.5386 120.236 26.5706 121.116 24.8986L121.35 27.1572H124.636V5.33325H121.086V14.5146C120.177 13.0773 118.388 12.2266 116.364 12.2266C111.993 12.2266 109.353 15.4533 109.353 19.9706C109.353 24.4586 111.964 27.5386 116.158 27.5386ZM116.95 24.2532C114.457 24.2532 112.932 22.4346 112.932 19.8533C112.932 17.2719 114.457 15.4239 116.95 15.4239C119.444 15.4239 121.057 17.2426 121.057 19.8533C121.057 22.4639 119.444 24.2532 116.95 24.2532Z" fill="white"/> fill="white"/>
<path d="M131.944 27.1572V18.9439C131.944 16.5973 133.322 15.4826 135.024 15.4826C136.725 15.4826 137.81 16.5679 137.81 18.5919V27.1572H141.389V18.9439C141.389 16.5679 142.709 15.4533 144.44 15.4533C146.141 15.4533 147.256 16.5386 147.256 18.6213V27.1572H150.805V17.6826C150.805 14.3386 148.869 12.2266 145.349 12.2266C143.149 12.2266 141.448 13.3119 140.714 14.9839C139.952 13.3119 138.426 12.2266 136.226 12.2266C134.144 12.2266 132.677 13.1653 131.944 14.3679L131.65 12.6666H128.365V27.1572H131.944Z" fill="white"/> <path d="M116.158 27.5386C118.358 27.5386 120.236 26.5706 121.116 24.8986L121.35 27.1572H124.636V5.33325H121.086V14.5146C120.177 13.0773 118.388 12.2266 116.364 12.2266C111.993 12.2266 109.353 15.4533 109.353 19.9706C109.353 24.4586 111.964 27.5386 116.158 27.5386ZM116.95 24.2532C114.457 24.2532 112.932 22.4346 112.932 19.8533C112.932 17.2719 114.457 15.4239 116.95 15.4239C119.444 15.4239 121.057 17.2426 121.057 19.8533C121.057 22.4639 119.444 24.2532 116.95 24.2532Z"
<path d="M156.107 9.76258C157.281 9.76258 158.249 8.79458 158.249 7.59192C158.249 6.38925 157.281 5.45059 156.107 5.45059C154.875 5.45059 153.907 6.38925 153.907 7.59192C153.907 8.79458 154.875 9.76258 156.107 9.76258ZM154.318 27.1572H157.897V12.6666H154.318V27.1572Z" fill="white"/> fill="white"/>
<path d="M165.173 27.1572V19.3546C165.173 17.0079 166.522 15.4826 168.722 15.4826C170.57 15.4826 171.773 16.6559 171.773 19.0906V27.1572H175.351V18.2399C175.351 14.4853 173.474 12.2266 169.837 12.2266C167.871 12.2266 166.111 13.0773 165.202 14.5439L164.909 12.6666H161.594V27.1572H165.173Z" fill="white"/> <path d="M131.944 27.1572V18.9439C131.944 16.5973 133.322 15.4826 135.024 15.4826C136.725 15.4826 137.81 16.5679 137.81 18.5919V27.1572H141.389V18.9439C141.389 16.5679 142.709 15.4533 144.44 15.4533C146.141 15.4533 147.256 16.5386 147.256 18.6213V27.1572H150.805V17.6826C150.805 14.3386 148.869 12.2266 145.349 12.2266C143.149 12.2266 141.448 13.3119 140.714 14.9839C139.952 13.3119 138.426 12.2266 136.226 12.2266C134.144 12.2266 132.677 13.1653 131.944 14.3679L131.65 12.6666H128.365V27.1572H131.944Z"
<path d="M0 8.42105C0 3.77023 3.77023 0 8.42105 0H23.5789C28.2298 0 32 3.77023 32 8.42105V23.5789C32 28.2298 28.2298 32 23.5789 32H8.42105C3.77023 32 0 28.2298 0 23.5789V8.42105Z" fill="#3C50E0"/> fill="white"/>
<path d="M156.107 9.76258C157.281 9.76258 158.249 8.79458 158.249 7.59192C158.249 6.38925 157.281 5.45059 156.107 5.45059C154.875 5.45059 153.907 6.38925 153.907 7.59192C153.907 8.79458 154.875 9.76258 156.107 9.76258ZM154.318 27.1572H157.897V12.6666H154.318V27.1572Z"
fill="white"/>
<path d="M165.173 27.1572V19.3546C165.173 17.0079 166.522 15.4826 168.722 15.4826C170.57 15.4826 171.773 16.6559 171.773 19.0906V27.1572H175.351V18.2399C175.351 14.4853 173.474 12.2266 169.837 12.2266C167.871 12.2266 166.111 13.0773 165.202 14.5439L164.909 12.6666H161.594V27.1572H165.173Z"
fill="white"/>
<path d="M0 8.42105C0 3.77023 3.77023 0 8.42105 0H23.5789C28.2298 0 32 3.77023 32 8.42105V23.5789C32 28.2298 28.2298 32 23.5789 32H8.42105C3.77023 32 0 28.2298 0 23.5789V8.42105Z"
fill="#3C50E0"/>
<g filter="url(#filter0_d_506_10589)"> <g filter="url(#filter0_d_506_10589)">
<path d="M8.42139 8.42127C8.42139 7.49111 9.17543 6.73706 10.1056 6.73706V6.73706C11.0358 6.73706 11.7898 7.49111 11.7898 8.42127V23.5792C11.7898 24.5093 11.0358 25.2634 10.1056 25.2634V25.2634C9.17543 25.2634 8.42139 24.5093 8.42139 23.5792V8.42127Z" fill="white"/> <path d="M8.42139 8.42127C8.42139 7.49111 9.17543 6.73706 10.1056 6.73706V6.73706C11.0358 6.73706 11.7898 7.49111 11.7898 8.42127V23.5792C11.7898 24.5093 11.0358 25.2634 10.1056 25.2634V25.2634C9.17543 25.2634 8.42139 24.5093 8.42139 23.5792V8.42127Z"
fill="white"/>
</g> </g>
<g opacity="0.9" filter="url(#filter1_d_506_10589)"> <g opacity="0.9" filter="url(#filter1_d_506_10589)">
<path d="M14.7368 15.1576C14.7368 14.2274 15.4909 13.4734 16.421 13.4734V13.4734C17.3512 13.4734 18.1052 14.2274 18.1052 15.1576V23.5786C18.1052 24.5088 17.3512 25.2629 16.421 25.2629V25.2629C15.4909 25.2629 14.7368 24.5088 14.7368 23.5786V15.1576Z" fill="white"/> <path d="M14.7368 15.1576C14.7368 14.2274 15.4909 13.4734 16.421 13.4734V13.4734C17.3512 13.4734 18.1052 14.2274 18.1052 15.1576V23.5786C18.1052 24.5088 17.3512 25.2629 16.421 25.2629V25.2629C15.4909 25.2629 14.7368 24.5088 14.7368 23.5786V15.1576Z"
fill="white"/>
</g> </g>
<g opacity="0.7" filter="url(#filter2_d_506_10589)"> <g opacity="0.7" filter="url(#filter2_d_506_10589)">
<path d="M21.0522 10.9469C21.0522 10.0167 21.8063 9.2627 22.7365 9.2627V9.2627C23.6666 9.2627 24.4207 10.0167 24.4207 10.9469V23.5785C24.4207 24.5086 23.6666 25.2627 22.7365 25.2627V25.2627C21.8063 25.2627 21.0522 24.5086 21.0522 23.5785V10.9469Z" fill="white"/> <path d="M21.0522 10.9469C21.0522 10.0167 21.8063 9.2627 22.7365 9.2627V9.2627C23.6666 9.2627 24.4207 10.0167 24.4207 10.9469V23.5785C24.4207 24.5086 23.6666 25.2627 22.7365 25.2627V25.2627C21.8063 25.2627 21.0522 24.5086 21.0522 23.5785V10.9469Z"
fill="white"/>
</g> </g>
<defs> <defs>
<filter id="filter0_d_506_10589" x="7.42139" y="6.23706" width="5.36865" height="20.5264" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> <filter id="filter0_d_506_10589" x="7.42139" y="6.23706" width="5.36865" height="20.5264"
filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/> <feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/> <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha"/>
<feOffset dy="0.5"/> <feOffset dy="0.5"/>
<feGaussianBlur stdDeviation="0.5"/> <feGaussianBlur stdDeviation="0.5"/>
<feComposite in2="hardAlpha" operator="out"/> <feComposite in2="hardAlpha" operator="out"/>
@ -29,9 +42,11 @@
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_506_10589"/> <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_506_10589"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_506_10589" result="shape"/> <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_506_10589" result="shape"/>
</filter> </filter>
<filter id="filter1_d_506_10589" x="13.7368" y="12.9734" width="5.36865" height="13.7896" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> <filter id="filter1_d_506_10589" x="13.7368" y="12.9734" width="5.36865" height="13.7896"
filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/> <feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/> <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha"/>
<feOffset dy="0.5"/> <feOffset dy="0.5"/>
<feGaussianBlur stdDeviation="0.5"/> <feGaussianBlur stdDeviation="0.5"/>
<feComposite in2="hardAlpha" operator="out"/> <feComposite in2="hardAlpha" operator="out"/>
@ -39,9 +54,11 @@
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_506_10589"/> <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_506_10589"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_506_10589" result="shape"/> <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_506_10589" result="shape"/>
</filter> </filter>
<filter id="filter2_d_506_10589" x="20.0522" y="8.7627" width="5.36865" height="18" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> <filter id="filter2_d_506_10589" x="20.0522" y="8.7627" width="5.36865" height="18" filterUnits="userSpaceOnUse"
color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/> <feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/> <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha"/>
<feOffset dy="0.5"/> <feOffset dy="0.5"/>
<feGaussianBlur stdDeviation="0.5"/> <feGaussianBlur stdDeviation="0.5"/>
<feComposite in2="hardAlpha" operator="out"/> <feComposite in2="hardAlpha" operator="out"/>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.2 KiB

After

Width:  |  Height:  |  Size: 6.9 KiB

9
packages/frontend/src/layout/DefaultLayout.tsx
View File

@ -1,8 +1,9 @@
import React, { useState, ReactNode } from 'react'; import React, { useState, ReactNode } from "react";
import Header from '../components/mini/header/index'; import Header from "../components/mini/header/index";
import Sidebar from '../components/mini/sidebar/index'; import Sidebar from "../components/mini/sidebar/index";
const DefaultLayout: React.FC<{ children: ReactNode }> = ({ children }) => { const DefaultLayout: React.FC<{ children: ReactNode }> = ({ children }) =>
{
const [ sidebarOpen, setSidebarOpen ] = useState(false); const [ sidebarOpen, setSidebarOpen ] = useState(false);
return ( return (

3
packages/frontend/src/lib.d.ts vendored
View File

@ -1,4 +1,5 @@
declare module '*.svg' { declare module "*.svg"
{
const content: any; const content: any;
export default content; export default content;
} }

24
packages/frontend/src/main.tsx
View File

@ -1,21 +1,21 @@
import React from 'react'; import React from "react";
import ReactDOM from 'react-dom/client'; import ReactDOM from "react-dom/client";
import { BrowserRouter as Router } from 'react-router-dom'; import { BrowserRouter as Router } from "react-router-dom";
import App from './App'; import App from "./App";
import './css/style.css'; import "./css/style.css";
import './css/satoshi.css'; import "./css/satoshi.css";
import 'flatpickr/dist/flatpickr.min.css'; import "flatpickr/dist/flatpickr.min.css";
import dayjs from 'dayjs'; import dayjs from "dayjs";
import relativeTime from 'dayjs/plugin/relativeTime.js'; import relativeTime from "dayjs/plugin/relativeTime.js";
import duration from 'dayjs/plugin/duration.js'; import duration from "dayjs/plugin/duration.js";
dayjs.extend(duration) dayjs.extend(duration);
dayjs.extend(relativeTime); dayjs.extend(relativeTime);
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
<React.StrictMode> <React.StrictMode>
<Router> <Router>
<App/> <App/>

15
packages/frontend/src/old/CardDataStats.tsx
View File

@ -1,6 +1,7 @@
import React from 'react'; import React from "react";
interface CardDataStatsProps { interface CardDataStatsProps
{
title: string; title: string;
total: string; total: string;
rate?: string; rate?: string;
@ -14,9 +15,11 @@ const CardDataStats: React.FC<CardDataStatsProps> = ({
rate, rate,
levelUp, levelUp,
levelDown, levelDown,
}) => { }) =>
{
return ( return (
<div className="rounded-sm border border-stroke bg-white py-6 px-7.5 shadow-default dark:border-strokedark dark:bg-boxdark"> <div
className="rounded-sm border border-stroke bg-white py-6 px-7.5 shadow-default dark:border-strokedark dark:bg-boxdark">
<div className="mt-4 flex items-end justify-between"> <div className="mt-4 flex items-end justify-between">
<div> <div>
<h4 className="text-title-md font-bold text-black dark:text-white"> <h4 className="text-title-md font-bold text-black dark:text-white">
@ -28,8 +31,8 @@ const CardDataStats: React.FC<CardDataStatsProps> = ({
{ rate && <> { rate && <>
<span <span
className={ `flex items-center gap-1 text-sm font-medium ${ className={ `flex items-center gap-1 text-sm font-medium ${
levelUp && 'text-meta-3' levelUp && "text-meta-3"
} ${levelDown && 'text-meta-5'} `} } ${ levelDown && "text-meta-5" } ` }
> >
{ rate } { rate }

11
packages/frontend/src/old/Chart.tsx
View File

@ -1,10 +1,11 @@
import React from 'react'; import React from "react";
import ChartOne from './Charts/ChartOne'; import ChartOne from "./Charts/ChartOne";
import ChartThree from './Charts/ChartThree'; import ChartThree from "./Charts/ChartThree";
import ChartTwo from './Charts/ChartTwo'; import ChartTwo from "./Charts/ChartTwo";
const Chart: React.FC = () => { const Chart: React.FC = () =>
{
return ( return (
<> <>
<div className="grid grid-cols-12 gap-4 md:gap-6 2xl:gap-7.5"> <div className="grid grid-cols-12 gap-4 md:gap-6 2xl:gap-7.5">

83
packages/frontend/src/old/Charts/ChartOne.tsx
View File

@ -1,21 +1,21 @@
import { ApexOptions } from 'apexcharts'; import { ApexOptions } from "apexcharts";
import React, { useState } from 'react'; import React, { useState } from "react";
import ReactApexChart from 'react-apexcharts'; import ReactApexChart from "react-apexcharts";
const options: ApexOptions = { const options: ApexOptions = {
legend: { legend: {
show: false, show: false,
position: 'top', position: "top",
horizontalAlign: 'left', horizontalAlign: "left",
}, },
colors: ['#3C50E0', '#80CAEE'], colors: [ "#3C50E0", "#80CAEE" ],
chart: { chart: {
fontFamily: 'Satoshi, sans-serif', fontFamily: "Satoshi, sans-serif",
height: 335, height: 335,
type: 'area', type: "area",
dropShadow: { dropShadow: {
enabled: true, enabled: true,
color: '#623CEA14', color: "#623CEA14",
top: 10, top: 10,
blur: 4, blur: 4,
left: 0, left: 0,
@ -46,7 +46,7 @@ const options: ApexOptions = {
], ],
stroke: { stroke: {
width: [ 2, 2 ], width: [ 2, 2 ],
curve: 'straight', curve: "straight",
}, },
// labels: { // labels: {
// show: false, // show: false,
@ -69,8 +69,8 @@ const options: ApexOptions = {
}, },
markers: { markers: {
size: 4, size: 4,
colors: '#fff', colors: "#fff",
strokeColors: ['#3056D3', '#80CAEE'], strokeColors: [ "#3056D3", "#80CAEE" ],
strokeWidth: 3, strokeWidth: 3,
strokeOpacity: 0.9, strokeOpacity: 0.9,
strokeDashArray: 0, strokeDashArray: 0,
@ -82,20 +82,20 @@ const options: ApexOptions = {
}, },
}, },
xaxis: { xaxis: {
type: 'category', type: "category",
categories: [ categories: [
'Sep', "Sep",
'Oct', "Oct",
'Nov', "Nov",
'Dec', "Dec",
'Jan', "Jan",
'Feb', "Feb",
'Mar', "Mar",
'Apr', "Apr",
'May', "May",
'Jun', "Jun",
'Jul', "Jul",
'Aug', "Aug",
], ],
axisBorder: { axisBorder: {
show: false, show: false,
@ -107,7 +107,7 @@ const options: ApexOptions = {
yaxis: { yaxis: {
title: { title: {
style: { style: {
fontSize: '0px', fontSize: "0px",
}, },
}, },
min: 0, min: 0,
@ -115,29 +115,32 @@ const options: ApexOptions = {
}, },
}; };
interface ChartOneState { interface ChartOneState
{
series: { series: {
name: string; name: string;
data: number[]; data: number[];
}[]; }[];
} }
const ChartOne: React.FC = () => { const ChartOne: React.FC = () =>
{
const [ state, setState ] = useState<ChartOneState>({ const [ state, setState ] = useState<ChartOneState>({
series: [ series: [
{ {
name: 'Product One', name: "Product One",
data: [ 23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 30, 45 ], data: [ 23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 30, 45 ],
}, },
{ {
name: 'Product Two', name: "Product Two",
data: [ 30, 25, 36, 30, 45, 35, 64, 52, 59, 36, 39, 51 ], data: [ 30, 25, 36, 30, 45, 35, 64, 52, 59, 36, 39, 51 ],
}, },
], ],
}); });
const handleReset = () => { const handleReset = () =>
{
setState((prevState) => ({ setState((prevState) => ({
...prevState, ...prevState,
})); }));
@ -145,11 +148,13 @@ const ChartOne: React.FC = () => {
handleReset; handleReset;
return ( return (
<div className="col-span-12 rounded-sm border border-stroke bg-white px-5 pt-7.5 pb-5 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:col-span-8"> <div
className="col-span-12 rounded-sm border border-stroke bg-white px-5 pt-7.5 pb-5 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:col-span-8">
<div className="flex flex-wrap items-start justify-between gap-3 sm:flex-nowrap"> <div className="flex flex-wrap items-start justify-between gap-3 sm:flex-nowrap">
<div className="flex w-full flex-wrap gap-3 sm:gap-5"> <div className="flex w-full flex-wrap gap-3 sm:gap-5">
<div className="flex min-w-47.5"> <div className="flex min-w-47.5">
<span className="mt-1 mr-2 flex h-4 w-full max-w-4 items-center justify-center rounded-full border border-primary"> <span
className="mt-1 mr-2 flex h-4 w-full max-w-4 items-center justify-center rounded-full border border-primary">
<span className="block h-2.5 w-full max-w-2.5 rounded-full bg-primary"></span> <span className="block h-2.5 w-full max-w-2.5 rounded-full bg-primary"></span>
</span> </span>
<div className="w-full"> <div className="w-full">
@ -158,7 +163,8 @@ const ChartOne: React.FC = () => {
</div> </div>
</div> </div>
<div className="flex min-w-47.5"> <div className="flex min-w-47.5">
<span className="mt-1 mr-2 flex h-4 w-full max-w-4 items-center justify-center rounded-full border border-secondary"> <span
className="mt-1 mr-2 flex h-4 w-full max-w-4 items-center justify-center rounded-full border border-secondary">
<span className="block h-2.5 w-full max-w-2.5 rounded-full bg-secondary"></span> <span className="block h-2.5 w-full max-w-2.5 rounded-full bg-secondary"></span>
</span> </span>
<div className="w-full"> <div className="w-full">
@ -169,13 +175,16 @@ const ChartOne: React.FC = () => {
</div> </div>
<div className="flex w-full max-w-45 justify-end"> <div className="flex w-full max-w-45 justify-end">
<div className="inline-flex items-center rounded-md bg-whiter p-1.5 dark:bg-meta-4"> <div className="inline-flex items-center rounded-md bg-whiter p-1.5 dark:bg-meta-4">
<button className="rounded bg-white py-1 px-3 text-xs font-medium text-black shadow-card hover:bg-white hover:shadow-card dark:bg-boxdark dark:text-white dark:hover:bg-boxdark"> <button
className="rounded bg-white py-1 px-3 text-xs font-medium text-black shadow-card hover:bg-white hover:shadow-card dark:bg-boxdark dark:text-white dark:hover:bg-boxdark">
Day Day
</button> </button>
<button className="rounded py-1 px-3 text-xs font-medium text-black hover:bg-white hover:shadow-card dark:text-white dark:hover:bg-boxdark"> <button
className="rounded py-1 px-3 text-xs font-medium text-black hover:bg-white hover:shadow-card dark:text-white dark:hover:bg-boxdark">
Week Week
</button> </button>
<button className="rounded py-1 px-3 text-xs font-medium text-black hover:bg-white hover:shadow-card dark:text-white dark:hover:bg-boxdark"> <button
className="rounded py-1 px-3 text-xs font-medium text-black hover:bg-white hover:shadow-card dark:text-white dark:hover:bg-boxdark">
Month Month
</button> </button>
</div> </div>

32
packages/frontend/src/old/Charts/ChartThree.tsx
View File

@ -1,28 +1,29 @@
import { ApexOptions } from 'apexcharts'; import { ApexOptions } from "apexcharts";
import React, { useState } from 'react'; import React, { useState } from "react";
import ReactApexChart from 'react-apexcharts'; import ReactApexChart from "react-apexcharts";
interface ChartThreeState { interface ChartThreeState
{
series: number[]; series: number[];
} }
const options: ApexOptions = { const options: ApexOptions = {
chart: { chart: {
fontFamily: 'Satoshi, sans-serif', fontFamily: "Satoshi, sans-serif",
type: 'donut', type: "donut",
}, },
colors: ['#3C50E0', '#6577F3', '#8FD0EF', '#0FADCF'], colors: [ "#3C50E0", "#6577F3", "#8FD0EF", "#0FADCF" ],
labels: ['Desktop', 'Tablet', 'Mobile', 'Unknown'], labels: [ "Desktop", "Tablet", "Mobile", "Unknown" ],
legend: { legend: {
show: false, show: false,
position: 'bottom', position: "bottom",
}, },
plotOptions: { plotOptions: {
pie: { pie: {
donut: { donut: {
size: '65%', size: "65%",
background: 'transparent', background: "transparent",
}, },
}, },
}, },
@ -49,12 +50,14 @@ const options: ApexOptions = {
], ],
}; };
const ChartThree: React.FC = () => { const ChartThree: React.FC = () =>
{
const [ state, setState ] = useState<ChartThreeState>({ const [ state, setState ] = useState<ChartThreeState>({
series: [ 65, 34, 12, 56 ], series: [ 65, 34, 12, 56 ],
}); });
const handleReset = () => { const handleReset = () =>
{
setState((prevState) => ({ setState((prevState) => ({
...prevState, ...prevState,
series: [ 65, 34, 12, 56 ], series: [ 65, 34, 12, 56 ],
@ -63,7 +66,8 @@ const ChartThree: React.FC = () => {
handleReset; handleReset;
return ( return (
<div className="sm:px-7.5 col-span-12 rounded-sm border border-stroke bg-white px-5 pb-5 pt-7.5 shadow-default dark:border-strokedark dark:bg-boxdark xl:col-span-5"> <div
className="sm:px-7.5 col-span-12 rounded-sm border border-stroke bg-white px-5 pb-5 pt-7.5 shadow-default dark:border-strokedark dark:bg-boxdark xl:col-span-5">
<div className="mb-3 justify-between gap-4 sm:flex"> <div className="mb-3 justify-between gap-4 sm:flex">
<div> <div>
<h5 className="text-xl font-semibold text-black dark:text-white"> <h5 className="text-xl font-semibold text-black dark:text-white">

50
packages/frontend/src/old/Charts/ChartTwo.tsx
View File

@ -1,12 +1,12 @@
import { ApexOptions } from 'apexcharts'; import { ApexOptions } from "apexcharts";
import React, { useState } from 'react'; import React, { useState } from "react";
import ReactApexChart from 'react-apexcharts'; import ReactApexChart from "react-apexcharts";
const options: ApexOptions = { const options: ApexOptions = {
colors: ['#3C50E0', '#80CAEE'], colors: [ "#3C50E0", "#80CAEE" ],
chart: { chart: {
fontFamily: 'Satoshi, sans-serif', fontFamily: "Satoshi, sans-serif",
type: 'bar', type: "bar",
height: 335, height: 335,
stacked: true, stacked: true,
toolbar: { toolbar: {
@ -24,7 +24,7 @@ const options: ApexOptions = {
plotOptions: { plotOptions: {
bar: { bar: {
borderRadius: 0, borderRadius: 0,
columnWidth: '25%', columnWidth: "25%",
}, },
}, },
}, },
@ -34,9 +34,9 @@ const options: ApexOptions = {
bar: { bar: {
horizontal: false, horizontal: false,
borderRadius: 0, borderRadius: 0,
columnWidth: '25%', columnWidth: "25%",
borderRadiusApplication: 'end', borderRadiusApplication: "end",
borderRadiusWhenStacked: 'last', borderRadiusWhenStacked: "last",
}, },
}, },
dataLabels: { dataLabels: {
@ -44,14 +44,14 @@ const options: ApexOptions = {
}, },
xaxis: { xaxis: {
categories: ['M', 'T', 'W', 'T', 'F', 'S', 'S'], categories: [ "M", "T", "W", "T", "F", "S", "S" ],
}, },
legend: { legend: {
position: 'top', position: "top",
horizontalAlign: 'left', horizontalAlign: "left",
fontFamily: 'Satoshi', fontFamily: "Satoshi",
fontWeight: 500, fontWeight: 500,
fontSize: '14px', fontSize: "14px",
markers: { markers: {
radius: 99, radius: 99,
@ -62,28 +62,31 @@ const options: ApexOptions = {
}, },
}; };
interface ChartTwoState { interface ChartTwoState
{
series: { series: {
name: string; name: string;
data: number[]; data: number[];
}[]; }[];
} }
const ChartTwo: React.FC = () => { const ChartTwo: React.FC = () =>
{
const [ state, setState ] = useState<ChartTwoState>({ const [ state, setState ] = useState<ChartTwoState>({
series: [ series: [
{ {
name: 'Sales', name: "Sales",
data: [ 44, 55, 41, 67, 22, 43, 65 ], data: [ 44, 55, 41, 67, 22, 43, 65 ],
}, },
{ {
name: 'Revenue', name: "Revenue",
data: [ 13, 23, 20, 8, 13, 27, 15 ], data: [ 13, 23, 20, 8, 13, 27, 15 ],
}, },
], ],
}); });
const handleReset = () => { const handleReset = () =>
{
setState((prevState) => ({ setState((prevState) => ({
...prevState, ...prevState,
})); }));
@ -91,7 +94,8 @@ const ChartTwo: React.FC = () => {
handleReset; handleReset;
return ( return (
<div className="col-span-12 rounded-sm border border-stroke bg-white p-7.5 shadow-default dark:border-strokedark dark:bg-boxdark xl:col-span-4"> <div
className="col-span-12 rounded-sm border border-stroke bg-white p-7.5 shadow-default dark:border-strokedark dark:bg-boxdark xl:col-span-4">
<div className="mb-4 justify-between gap-4 sm:flex"> <div className="mb-4 justify-between gap-4 sm:flex">
<div> <div>
<h4 className="text-xl font-semibold text-black dark:text-white"> <h4 className="text-xl font-semibold text-black dark:text-white">
@ -105,8 +109,8 @@ const ChartTwo: React.FC = () => {
id="#" id="#"
className="relative z-20 inline-flex appearance-none bg-transparent py-1 pl-3 pr-8 text-sm font-medium outline-none" className="relative z-20 inline-flex appearance-none bg-transparent py-1 pl-3 pr-8 text-sm font-medium outline-none"
> >
<option value="" className='dark:bg-boxdark'>This Week</option> <option value="" className="dark:bg-boxdark">This Week</option>
<option value="" className='dark:bg-boxdark'>Last Week</option> <option value="" className="dark:bg-boxdark">Last Week</option>
</select> </select>
<span className="absolute top-1/2 right-3 z-10 -translate-y-1/2"> <span className="absolute top-1/2 right-3 z-10 -translate-y-1/2">
<svg <svg

56
packages/frontend/src/old/Chat/ChatCard.tsx
View File

@ -1,65 +1,67 @@
import { Link } from 'react-router-dom'; import { Link } from "react-router-dom";
import { Chat } from '../../old/chat'; import { Chat } from "../../old/chat";
import UserOne from '../../images/user/user-01.png'; import UserOne from "../../images/user/user-01.png";
import UserTwo from '../../images/user/user-02.png'; import UserTwo from "../../images/user/user-02.png";
import UserThree from '../../images/user/user-03.png'; import UserThree from "../../images/user/user-03.png";
import UserFour from '../../images/user/user-04.png'; import UserFour from "../../images/user/user-04.png";
import UserFive from '../../images/user/user-05.png'; import UserFive from "../../images/user/user-05.png";
const chatData: Chat[] = [ const chatData: Chat[] = [
{ {
avatar: UserOne, avatar: UserOne,
name: 'Devid Heilo', name: "Devid Heilo",
text: 'How are you?', text: "How are you?",
time: 12, time: 12,
textCount: 3, textCount: 3,
color: '#10B981', color: "#10B981",
}, },
{ {
avatar: UserTwo, avatar: UserTwo,
name: 'Henry Fisher', name: "Henry Fisher",
text: 'Waiting for you!', text: "Waiting for you!",
time: 12, time: 12,
textCount: 0, textCount: 0,
color: '#DC3545', color: "#DC3545",
}, },
{ {
avatar: UserFour, avatar: UserFour,
name: 'Jhon Doe', name: "Jhon Doe",
text: "What's up?", text: "What's up?",
time: 32, time: 32,
textCount: 0, textCount: 0,
color: '#10B981', color: "#10B981",
}, },
{ {
avatar: UserFive, avatar: UserFive,
name: 'Jane Doe', name: "Jane Doe",
text: 'Great', text: "Great",
time: 32, time: 32,
textCount: 2, textCount: 2,
color: '#FFBA00', color: "#FFBA00",
}, },
{ {
avatar: UserOne, avatar: UserOne,
name: 'Jhon Doe', name: "Jhon Doe",
text: 'How are you?', text: "How are you?",
time: 32, time: 32,
textCount: 0, textCount: 0,
color: '#10B981', color: "#10B981",
}, },
{ {
avatar: UserThree, avatar: UserThree,
name: 'Jhon Doe', name: "Jhon Doe",
text: 'How are you?', text: "How are you?",
time: 32, time: 32,
textCount: 3, textCount: 3,
color: '#FFBA00', color: "#FFBA00",
}, },
]; ];
const ChatCard = () => { const ChatCard = () =>
{
return ( return (
<div className="col-span-12 rounded-sm border border-stroke bg-white py-6 shadow-default dark:border-strokedark dark:bg-boxdark xl:col-span-4"> <div
className="col-span-12 rounded-sm border border-stroke bg-white py-6 shadow-default dark:border-strokedark dark:bg-boxdark xl:col-span-4">
<h4 className="mb-6 px-7.5 text-xl font-semibold text-black dark:text-white"> <h4 className="mb-6 px-7.5 text-xl font-semibold text-black dark:text-white">
Chats Chats
</h4> </h4>
@ -94,7 +96,7 @@ const ChatCard = () => {
{ chat.textCount !== 0 && ( { chat.textCount !== 0 && (
<div className="flex h-6 w-6 items-center justify-center rounded-full bg-primary"> <div className="flex h-6 w-6 items-center justify-center rounded-full bg-primary">
<span className="text-sm font-medium text-white"> <span className="text-sm font-medium text-white">
{' '} { " " }
{ chat.textCount } { chat.textCount }
</span> </span>
</div> </div>

10
packages/frontend/src/old/Checkboxes/CheckboxFive.tsx
View File

@ -1,6 +1,7 @@
import { useState } from 'react'; import { useState } from "react";
const CheckboxFive = () => { const CheckboxFive = () =>
{
const [ isChecked, setIsChecked ] = useState<boolean>(false); const [ isChecked, setIsChecked ] = useState<boolean>(false);
return ( return (
@ -14,13 +15,14 @@ const CheckboxFive = () => {
type="checkbox" type="checkbox"
id="checkboxLabelFive" id="checkboxLabelFive"
className="sr-only" className="sr-only"
onChange={() => { onChange={ () =>
{
setIsChecked(!isChecked); setIsChecked(!isChecked);
} } } }
/> />
<div <div
className={ `box mr-4 flex h-5 w-5 items-center justify-center rounded-full border border-primary ${ className={ `box mr-4 flex h-5 w-5 items-center justify-center rounded-full border border-primary ${
isChecked && '!border-4' isChecked && "!border-4"
}` } }` }
> >
<span className="h-2.5 w-2.5 rounded-full bg-white dark:bg-transparent"></span> <span className="h-2.5 w-2.5 rounded-full bg-white dark:bg-transparent"></span>

14
packages/frontend/src/old/Checkboxes/CheckboxFour.tsx
View File

@ -1,6 +1,7 @@
import { useState } from 'react'; import { useState } from "react";
const CheckboxFour = () => { const CheckboxFour = () =>
{
const [ isChecked, setIsChecked ] = useState<boolean>(false); const [ isChecked, setIsChecked ] = useState<boolean>(false);
return ( return (
@ -14,21 +15,22 @@ const CheckboxFour = () => {
type="checkbox" type="checkbox"
id="checkboxLabelFour" id="checkboxLabelFour"
className="sr-only" className="sr-only"
onChange={() => { onChange={ () =>
{
setIsChecked(!isChecked); setIsChecked(!isChecked);
} } } }
/> />
<div <div
className={ `mr-4 flex h-5 w-5 items-center justify-center rounded-full border ${ className={ `mr-4 flex h-5 w-5 items-center justify-center rounded-full border ${
isChecked && 'border-primary' isChecked && "border-primary"
}` } }` }
> >
<span <span
className={ `h-2.5 w-2.5 rounded-full bg-transparent ${ className={ `h-2.5 w-2.5 rounded-full bg-transparent ${
isChecked && '!bg-primary' isChecked && "!bg-primary"
}` } }` }
> >
{' '} { " " }
</span> </span>
</div> </div>
</div> </div>

12
packages/frontend/src/old/Checkboxes/CheckboxOne.tsx
View File

@ -1,6 +1,7 @@
import { useState } from 'react'; import { useState } from "react";
const CheckboxOne = () => { const CheckboxOne = () =>
{
const [ isChecked, setIsChecked ] = useState<boolean>(false); const [ isChecked, setIsChecked ] = useState<boolean>(false);
return ( return (
@ -14,17 +15,18 @@ const CheckboxOne = () => {
type="checkbox" type="checkbox"
id="checkboxLabelOne" id="checkboxLabelOne"
className="sr-only" className="sr-only"
onChange={() => { onChange={ () =>
{
setIsChecked(!isChecked); setIsChecked(!isChecked);
} } } }
/> />
<div <div
className={ `mr-4 flex h-5 w-5 items-center justify-center rounded border ${ className={ `mr-4 flex h-5 w-5 items-center justify-center rounded border ${
isChecked && 'border-primary bg-gray dark:bg-transparent' isChecked && "border-primary bg-gray dark:bg-transparent"
}` } }` }
> >
<span <span
className={`h-2.5 w-2.5 rounded-sm ${isChecked && 'bg-primary'}`} className={ `h-2.5 w-2.5 rounded-sm ${ isChecked && "bg-primary" }` }
></span> ></span>
</div> </div>
</div> </div>

12
packages/frontend/src/old/Checkboxes/CheckboxThree.tsx
View File

@ -1,6 +1,7 @@
import { useState } from 'react'; import { useState } from "react";
const CheckboxThree = () => { const CheckboxThree = () =>
{
const [ isChecked, setIsChecked ] = useState<boolean>(false); const [ isChecked, setIsChecked ] = useState<boolean>(false);
return ( return (
@ -14,18 +15,19 @@ const CheckboxThree = () => {
type="checkbox" type="checkbox"
id="checkboxLabelThree" id="checkboxLabelThree"
className="sr-only" className="sr-only"
onChange={() => { onChange={ () =>
{
setIsChecked(!isChecked); setIsChecked(!isChecked);
} } } }
/> />
<div <div
className={ `box mr-4 flex h-5 w-5 items-center justify-center rounded border ${ className={ `box mr-4 flex h-5 w-5 items-center justify-center rounded border ${
isChecked && 'border-primary bg-gray dark:bg-transparent' isChecked && "border-primary bg-gray dark:bg-transparent"
}` } }` }
> >
<span <span
className={ `text-primary opacity-0 ${ className={ `text-primary opacity-0 ${
isChecked && '!opacity-100' isChecked && "!opacity-100"
}` } }` }
> >
<svg <svg

12
packages/frontend/src/old/Checkboxes/CheckboxTwo.tsx
View File

@ -1,6 +1,7 @@
import { useState } from 'react'; import { useState } from "react";
const CheckboxTwo = () => { const CheckboxTwo = () =>
{
const [ isChecked, setIsChecked ] = useState<boolean>(false); const [ isChecked, setIsChecked ] = useState<boolean>(false);
return ( return (
@ -14,16 +15,17 @@ const CheckboxTwo = () => {
type="checkbox" type="checkbox"
id="checkboxLabelTwo" id="checkboxLabelTwo"
className="sr-only" className="sr-only"
onChange={() => { onChange={ () =>
{
setIsChecked(!isChecked); setIsChecked(!isChecked);
} } } }
/> />
<div <div
className={ `mr-4 flex h-5 w-5 items-center justify-center rounded border ${ className={ `mr-4 flex h-5 w-5 items-center justify-center rounded border ${
isChecked && 'border-primary bg-gray dark:bg-transparent' isChecked && "border-primary bg-gray dark:bg-transparent"
}` } }` }
> >
<span className={`opacity-0 ${isChecked && '!opacity-100'}`}> <span className={ `opacity-0 ${ isChecked && "!opacity-100" }` }>
<svg <svg
width="11" width="11"
height="8" height="8"

35
packages/frontend/src/old/ClickOutside.tsx
View File

@ -1,6 +1,7 @@
import React, { useRef, useEffect } from 'react'; import React, { useRef, useEffect } from "react";
interface Props { interface Props
{
children: React.ReactNode; children: React.ReactNode;
exceptionRef?: React.RefObject<HTMLElement>; exceptionRef?: React.RefObject<HTMLElement>;
onClick: () => void; onClick: () => void;
@ -12,37 +13,47 @@ const ClickOutside: React.FC<Props> = ({
exceptionRef, exceptionRef,
onClick, onClick,
className, className,
}) => { }) =>
{
const wrapperRef = useRef<HTMLDivElement>(null); const wrapperRef = useRef<HTMLDivElement>(null);
useEffect(() => { useEffect(() =>
const handleClickListener = (event: MouseEvent) => { {
const handleClickListener = (event: MouseEvent) =>
{
let clickedInside: null | boolean = false; let clickedInside: null | boolean = false;
if (exceptionRef) { if (exceptionRef)
{
clickedInside = clickedInside =
(wrapperRef.current && (wrapperRef.current &&
wrapperRef.current.contains(event.target as Node)) || wrapperRef.current.contains(event.target as Node)) ||
(exceptionRef.current && exceptionRef.current === event.target) || (exceptionRef.current && exceptionRef.current === event.target) ||
(exceptionRef.current && (exceptionRef.current &&
exceptionRef.current.contains(event.target as Node)); exceptionRef.current.contains(event.target as Node));
} else { }
else
{
clickedInside = clickedInside =
wrapperRef.current && wrapperRef.current &&
wrapperRef.current.contains(event.target as Node); wrapperRef.current.contains(event.target as Node);
} }
if (!clickedInside) onClick(); if (!clickedInside)
{
onClick();
}
}; };
document.addEventListener('mousedown', handleClickListener); document.addEventListener("mousedown", handleClickListener);
return () => { return () =>
document.removeEventListener('mousedown', handleClickListener); {
document.removeEventListener("mousedown", handleClickListener);
}; };
}, [ exceptionRef, onClick ]); }, [ exceptionRef, onClick ]);
return ( return (
<div ref={wrapperRef} className={`${className || ''}`}> <div ref={ wrapperRef } className={ `${ className || "" }` }>
{ children } { children }
</div> </div>
); );

35
packages/frontend/src/old/Dropdowns/DropdownDefault.tsx
View File

@ -1,21 +1,29 @@
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from "react";
const DropdownDefault = () => { const DropdownDefault = () =>
{
const [ dropdownOpen, setDropdownOpen ] = useState(false); const [ dropdownOpen, setDropdownOpen ] = useState(false);
const trigger = useRef<any>(null); const trigger = useRef<any>(null);
const dropdown = useRef<any>(null); const dropdown = useRef<any>(null);
// close on click outside // close on click outside
useEffect(() => { useEffect(() =>
const clickHandler = ({ target }: MouseEvent) => { {
if (!dropdown.current) return; const clickHandler = ({ target }: MouseEvent) =>
{
if (!dropdown.current)
{
return;
}
if ( if (
!dropdownOpen || !dropdownOpen ||
dropdown.current.contains(target) || dropdown.current.contains(target) ||
trigger.current.contains(target) trigger.current.contains(target)
) )
{
return; return;
}
setDropdownOpen(false); setDropdownOpen(false);
}; };
document.addEventListener("click", clickHandler); document.addEventListener("click", clickHandler);
@ -23,9 +31,14 @@ const DropdownDefault = () => {
}); });
// close if the esc key is pressed // close if the esc key is pressed
useEffect(() => { useEffect(() =>
const keyHandler = ({ keyCode }: KeyboardEvent) => { {
if (!dropdownOpen || keyCode !== 27) return; const keyHandler = ({ keyCode }: KeyboardEvent) =>
{
if (!dropdownOpen || keyCode !== 27)
{
return;
}
setDropdownOpen(false); setDropdownOpen(false);
}; };
document.addEventListener("keydown", keyHandler); document.addEventListener("keydown", keyHandler);
@ -66,10 +79,11 @@ const DropdownDefault = () => {
onFocus={ () => setDropdownOpen(true) } onFocus={ () => setDropdownOpen(true) }
onBlur={ () => setDropdownOpen(false) } onBlur={ () => setDropdownOpen(false) }
className={ `absolute right-0 top-full z-40 w-40 space-y-1 rounded-sm border border-stroke bg-white p-1.5 shadow-default dark:border-strokedark dark:bg-boxdark ${ className={ `absolute right-0 top-full z-40 w-40 space-y-1 rounded-sm border border-stroke bg-white p-1.5 shadow-default dark:border-strokedark dark:bg-boxdark ${
dropdownOpen === true ? 'block' : 'hidden' dropdownOpen === true ? "block" : "hidden"
}` } }` }
> >
<button className="flex w-full items-center gap-2 rounded-sm px-4 py-1.5 text-left text-sm hover:bg-gray dark:hover:bg-meta-4"> <button
className="flex w-full items-center gap-2 rounded-sm px-4 py-1.5 text-left text-sm hover:bg-gray dark:hover:bg-meta-4">
<svg <svg
className="fill-current" className="fill-current"
width="16" width="16"
@ -92,7 +106,8 @@ const DropdownDefault = () => {
</svg> </svg>
Edit Edit
</button> </button>
<button className="flex w-full items-center gap-2 rounded-sm px-4 py-1.5 text-left text-sm hover:bg-gray dark:hover:bg-meta-4"> <button
className="flex w-full items-center gap-2 rounded-sm px-4 py-1.5 text-left text-sm hover:bg-gray dark:hover:bg-meta-4">
<svg <svg
className="fill-current" className="fill-current"
width="16" width="16"

22
packages/frontend/src/old/Forms/DatePicker/DatePickerOne.tsx
View File

@ -1,18 +1,20 @@
import flatpickr from 'flatpickr'; import flatpickr from "flatpickr";
import { useEffect } from 'react'; import { useEffect } from "react";
const DatePickerOne = () => { const DatePickerOne = () =>
useEffect(() => { {
useEffect(() =>
{
// Init flatpickr // Init flatpickr
flatpickr('.form-datepicker', { flatpickr(".form-datepicker", {
mode: 'single', mode: "single",
static: true, static: true,
monthSelectorType: 'static', monthSelectorType: "static",
dateFormat: 'M j, Y', dateFormat: "M j, Y",
prevArrow: prevArrow:
'<svg className="fill-current" width="7" height="11" viewBox="0 0 7 11"><path d="M5.4 10.8l1.4-1.4-4-4 4-4L5.4 0 0 5.4z" /></svg>', "<svg className=\"fill-current\" width=\"7\" height=\"11\" viewBox=\"0 0 7 11\"><path d=\"M5.4 10.8l1.4-1.4-4-4 4-4L5.4 0 0 5.4z\" /></svg>",
nextArrow: nextArrow:
'<svg className="fill-current" width="7" height="11" viewBox="0 0 7 11"><path d="M1.4 10.8L0 9.4l4-4-4-4L1.4 0l5.4 5.4z" /></svg>', "<svg className=\"fill-current\" width=\"7\" height=\"11\" viewBox=\"0 0 7 11\"><path d=\"M1.4 10.8L0 9.4l4-4-4-4L1.4 0l5.4 5.4z\" /></svg>",
}); });

22
packages/frontend/src/old/Forms/DatePicker/DatePickerTwo.tsx
View File

@ -1,18 +1,20 @@
import flatpickr from 'flatpickr'; import flatpickr from "flatpickr";
import { useEffect } from 'react'; import { useEffect } from "react";
const DatePickerTwo = () => { const DatePickerTwo = () =>
useEffect(() => { {
useEffect(() =>
{
// Init flatpickr // Init flatpickr
flatpickr('.form-datepicker', { flatpickr(".form-datepicker", {
mode: 'single', mode: "single",
static: true, static: true,
monthSelectorType: 'static', monthSelectorType: "static",
dateFormat: 'M j, Y', dateFormat: "M j, Y",
prevArrow: prevArrow:
'<svg className="fill-current" width="7" height="11" viewBox="0 0 7 11"><path d="M5.4 10.8l1.4-1.4-4-4 4-4L5.4 0 0 5.4z" /></svg>', "<svg className=\"fill-current\" width=\"7\" height=\"11\" viewBox=\"0 0 7 11\"><path d=\"M5.4 10.8l1.4-1.4-4-4 4-4L5.4 0 0 5.4z\" /></svg>",
nextArrow: nextArrow:
'<svg className="fill-current" width="7" height="11" viewBox="0 0 7 11"><path d="M1.4 10.8L0 9.4l4-4-4-4L1.4 0l5.4 5.4z" /></svg>', "<svg className=\"fill-current\" width=\"7\" height=\"11\" viewBox=\"0 0 7 11\"><path d=\"M1.4 10.8L0 9.4l4-4-4-4L1.4 0l5.4 5.4z\" /></svg>",
}); });

77
packages/frontend/src/old/Forms/MultiSelect.tsx
View File

@ -1,33 +1,40 @@
import React, { useState, useEffect, useRef } from 'react'; import React, { useState, useEffect, useRef } from "react";
interface Option { interface Option
{
value: string; value: string;
text: string; text: string;
selected: boolean; selected: boolean;
element?: HTMLElement; element?: HTMLElement;
} }
interface DropdownProps { interface DropdownProps
{
id: string; id: string;
} }
const MultiSelect: React.FC<DropdownProps> = ({ id }) => { const MultiSelect: React.FC<DropdownProps> = ({ id }) =>
{
const [ options, setOptions ] = useState<Option[]>([]); const [ options, setOptions ] = useState<Option[]>([]);
const [ selected, setSelected ] = useState<number[]>([]); const [ selected, setSelected ] = useState<number[]>([]);
const [ show, setShow ] = useState(false); const [ show, setShow ] = useState(false);
const dropdownRef = useRef<any>(null); const dropdownRef = useRef<any>(null);
const trigger = useRef<any>(null); const trigger = useRef<any>(null);
useEffect(() => { useEffect(() =>
const loadOptions = () => { {
const loadOptions = () =>
{
const select = document.getElementById(id) as HTMLSelectElement | null; const select = document.getElementById(id) as HTMLSelectElement | null;
if (select) { if (select)
{
const newOptions: Option[] = []; const newOptions: Option[] = [];
for (let i = 0; i < select.options.length; i++) { for (let i = 0; i < select.options.length; i++)
{
newOptions.push({ newOptions.push({
value: select.options[ i ].value, value: select.options[ i ].value,
text: select.options[ i ].innerText, text: select.options[ i ].innerText,
selected: select.options[i].hasAttribute('selected'), selected: select.options[ i ].hasAttribute("selected"),
}); });
} }
setOptions(newOptions); setOptions(newOptions);
@ -37,24 +44,31 @@ const MultiSelect: React.FC<DropdownProps> = ({ id }) => {
loadOptions(); loadOptions();
}, [ id ]); }, [ id ]);
const open = () => { const open = () =>
{
setShow(true); setShow(true);
}; };
const isOpen = () => { const isOpen = () =>
{
return show === true; return show === true;
}; };
const select = (index: number, event: React.MouseEvent) => { const select = (index: number, event: React.MouseEvent) =>
{
const newOptions = [ ...options ]; const newOptions = [ ...options ];
if (!newOptions[index].selected) { if (!newOptions[ index ].selected)
{
newOptions[ index ].selected = true; newOptions[ index ].selected = true;
newOptions[ index ].element = event.currentTarget as HTMLElement; newOptions[ index ].element = event.currentTarget as HTMLElement;
setSelected([ ...selected, index ]); setSelected([ ...selected, index ]);
} else { }
else
{
const selectedIndex = selected.indexOf(index); const selectedIndex = selected.indexOf(index);
if (selectedIndex !== -1) { if (selectedIndex !== -1)
{
newOptions[ index ].selected = false; newOptions[ index ].selected = false;
setSelected(selected.filter((i) => i !== index)); setSelected(selected.filter((i) => i !== index));
} }
@ -63,34 +77,44 @@ const MultiSelect: React.FC<DropdownProps> = ({ id }) => {
setOptions(newOptions); setOptions(newOptions);
}; };
const remove = (index: number) => { const remove = (index: number) =>
{
const newOptions = [ ...options ]; const newOptions = [ ...options ];
const selectedIndex = selected.indexOf(index); const selectedIndex = selected.indexOf(index);
if (selectedIndex !== -1) { if (selectedIndex !== -1)
{
newOptions[ index ].selected = false; newOptions[ index ].selected = false;
setSelected(selected.filter((i) => i !== index)); setSelected(selected.filter((i) => i !== index));
setOptions(newOptions); setOptions(newOptions);
} }
}; };
const selectedValues = () => { const selectedValues = () =>
{
return selected.map((option) => options[ option ].value); return selected.map((option) => options[ option ].value);
}; };
useEffect(() => { useEffect(() =>
const clickHandler = ({ target }: MouseEvent) => { {
if (!dropdownRef.current) return; const clickHandler = ({ target }: MouseEvent) =>
{
if (!dropdownRef.current)
{
return;
}
if ( if (
!show || !show ||
dropdownRef.current.contains(target) || dropdownRef.current.contains(target) ||
trigger.current.contains(target) trigger.current.contains(target)
) )
{
return; return;
}
setShow(false); setShow(false);
}; };
document.addEventListener('click', clickHandler); document.addEventListener("click", clickHandler);
return () => document.removeEventListener('click', clickHandler); return () => document.removeEventListener("click", clickHandler);
}); });
return ( return (
@ -111,7 +135,8 @@ const MultiSelect: React.FC<DropdownProps> = ({ id }) => {
<div className="relative z-20 inline-block w-full"> <div className="relative z-20 inline-block w-full">
<div className="relative flex flex-col items-center"> <div className="relative flex flex-col items-center">
<div ref={ trigger } onClick={ open } className="w-full"> <div ref={ trigger } onClick={ open } className="w-full">
<div className="mb-2 flex rounded border border-stroke py-2 pl-3 pr-3 outline-none transition focus:border-primary active:border-primary dark:border-form-strokedark dark:bg-form-input"> <div
className="mb-2 flex rounded border border-stroke py-2 pl-3 pr-3 outline-none transition focus:border-primary active:border-primary dark:border-form-strokedark dark:bg-form-input">
<div className="flex flex-auto flex-wrap gap-3"> <div className="flex flex-auto flex-wrap gap-3">
{ selected.map((index) => ( { selected.map((index) => (
<div <div
@ -185,7 +210,7 @@ const MultiSelect: React.FC<DropdownProps> = ({ id }) => {
<div className="w-full px-4"> <div className="w-full px-4">
<div <div
className={ `max-h-select absolute top-full left-0 z-40 w-full overflow-y-auto rounded bg-white shadow dark:bg-form-input ${ className={ `max-h-select absolute top-full left-0 z-40 w-full overflow-y-auto rounded bg-white shadow dark:bg-form-input ${
isOpen() ? '' : 'hidden' isOpen() ? "" : "hidden"
}` } }` }
ref={ dropdownRef } ref={ dropdownRef }
onFocus={ () => setShow(true) } onFocus={ () => setShow(true) }
@ -200,7 +225,7 @@ const MultiSelect: React.FC<DropdownProps> = ({ id }) => {
> >
<div <div
className={ `relative flex w-full items-center border-l-2 border-transparent p-2 pl-2 ${ className={ `relative flex w-full items-center border-l-2 border-transparent p-2 pl-2 ${
option.selected ? 'border-primary' : '' option.selected ? "border-primary" : ""
}` } }` }
> >
<div className="flex w-full items-center"> <div className="flex w-full items-center">

19
packages/frontend/src/old/Forms/SelectGroup/SelectGroupOne.tsx
View File

@ -1,29 +1,32 @@
import React, { useState } from 'react'; import React, { useState } from "react";
const SelectGroupOne: React.FC = () => { const SelectGroupOne: React.FC = () =>
const [selectedOption, setSelectedOption] = useState<string>(''); {
const [ selectedOption, setSelectedOption ] = useState<string>("");
const [ isOptionSelected, setIsOptionSelected ] = useState<boolean>(false); const [ isOptionSelected, setIsOptionSelected ] = useState<boolean>(false);
const changeTextColor = () => { const changeTextColor = () =>
{
setIsOptionSelected(true); setIsOptionSelected(true);
}; };
return ( return (
<div className="mb-4.5"> <div className="mb-4.5">
<label className="mb-2.5 block text-black dark:text-white"> <label className="mb-2.5 block text-black dark:text-white">
{' '} { " " }
Subject{' '} Subject{ " " }
</label> </label>
<div className="relative z-20 bg-transparent dark:bg-form-input"> <div className="relative z-20 bg-transparent dark:bg-form-input">
<select <select
value={ selectedOption } value={ selectedOption }
onChange={(e) => { onChange={ (e) =>
{
setSelectedOption(e.target.value); setSelectedOption(e.target.value);
changeTextColor(); changeTextColor();
} } } }
className={ `relative z-20 w-full appearance-none rounded border border-stroke bg-transparent py-3 px-5 outline-none transition focus:border-primary active:border-primary dark:border-form-strokedark dark:bg-form-input dark:focus:border-primary ${ className={ `relative z-20 w-full appearance-none rounded border border-stroke bg-transparent py-3 px-5 outline-none transition focus:border-primary active:border-primary dark:border-form-strokedark dark:bg-form-input dark:focus:border-primary ${
isOptionSelected ? 'text-black dark:text-white' : '' isOptionSelected ? "text-black dark:text-white" : ""
}` } }` }
> >
<option value="" disabled className="text-body dark:text-bodydark"> <option value="" disabled className="text-body dark:text-bodydark">

15
packages/frontend/src/old/Forms/SelectGroup/SelectGroupTwo.tsx
View File

@ -1,10 +1,12 @@
import React, { useState } from 'react'; import React, { useState } from "react";
const SelectGroupTwo: React.FC = () => { const SelectGroupTwo: React.FC = () =>
const [selectedOption, setSelectedOption] = useState<string>(''); {
const [ selectedOption, setSelectedOption ] = useState<string>("");
const [ isOptionSelected, setIsOptionSelected ] = useState<boolean>(false); const [ isOptionSelected, setIsOptionSelected ] = useState<boolean>(false);
const changeTextColor = () => { const changeTextColor = () =>
{
setIsOptionSelected(true); setIsOptionSelected(true);
}; };
@ -48,12 +50,13 @@ const SelectGroupTwo: React.FC = () => {
<select <select
value={ selectedOption } value={ selectedOption }
onChange={(e) => { onChange={ (e) =>
{
setSelectedOption(e.target.value); setSelectedOption(e.target.value);
changeTextColor(); changeTextColor();
} } } }
className={ `relative z-20 w-full appearance-none rounded border border-stroke bg-transparent py-3 px-12 outline-none transition focus:border-primary active:border-primary dark:border-form-strokedark dark:bg-form-input ${ className={ `relative z-20 w-full appearance-none rounded border border-stroke bg-transparent py-3 px-12 outline-none transition focus:border-primary active:border-primary dark:border-form-strokedark dark:bg-form-input ${
isOptionSelected ? 'text-black dark:text-white' : '' isOptionSelected ? "text-black dark:text-white" : ""
}` } }` }
> >
<option value="" disabled className="text-body dark:text-bodydark"> <option value="" disabled className="text-body dark:text-bodydark">

127
packages/frontend/src/old/ModalSettings.tsx
View File

@ -1,9 +1,9 @@
import React, { useState } from "react"; import React, { useState } from "react";
import dataJSON from '../../public/data.json'; import dataJSON from "../../public/data.json";
export const Modal = ({ closeModal, onSubmit, defaultValue }) =>
export const Modal = ({ closeModal, onSubmit, defaultValue }) => { {
const fields = Object.keys(Object.values(dataJSON)[ 0 ]).filter((item: any) => !(item.startsWith("delta_"))); const fields = Object.keys(Object.values(dataJSON)[ 0 ]).filter((item: any) => !(item.startsWith("delta_")));
const [ formState, setFormState ] = useState( const [ formState, setFormState ] = useState(
@ -14,26 +14,35 @@ export const Modal = ({ closeModal, onSubmit, defaultValue }) => {
value: "", value: "",
type: "0", type: "0",
} },
); );
const [ errors, setErrors ] = useState<string[]>([]); const [ errors, setErrors ] = useState<string[]>([]);
const validateForm = () => { const validateForm = () =>
if (formState.id && formState.value) { {
if (formState.id && formState.value)
{
setErrors([]); setErrors([]);
return true; return true;
} else { }
else
{
let errorFields = []; let errorFields = [];
for (const [key, value] of Object.entries(formState)) { for (const [ key, value ] of Object.entries(formState))
{
console.log(key); console.log(key);
console.log(value); console.log(value);
if (!value) { if (!value)
{
errorFields.push(key == "id" ? "Bond ID" : key); errorFields.push(key == "id" ? "Bond ID" : key);
} }
else{ else
if (key=='id'){ {
if (!(Object.keys(dataJSON).includes(value)||value=="ALL")){ if (key == "id")
errorFields.push("INVALID_ID_"+value) {
if (!(Object.keys(dataJSON).includes(value) || value == "ALL"))
{
errorFields.push("INVALID_ID_" + value);
} }
} }
} }
@ -44,23 +53,31 @@ export const Modal = ({ closeModal, onSubmit, defaultValue }) => {
} }
}; };
const handleChange = (e) => { const handleChange = (e) =>
{
console.log(formState.criterion); console.log(formState.criterion);
console.log(e.target.name); console.log(e.target.name);
console.log(e.target.name=="para"&&e.target.value=='rating'); console.log(e.target.name == "para" && e.target.value == "rating");
console.log(formState.criterion > 1 && formState.criterion < 4); console.log(formState.criterion > 1 && formState.criterion < 4);
console.log(e.target.value); console.log(e.target.value);
console.log(e.target.name=="para"&&e.target.value=='rating'&&formState.criterion>1&&formState.criterion<4); console.log(e.target.name == "para" && e.target.value == "rating" && formState.criterion > 1 && formState.criterion < 4);
if (e.target.name=="para"&&e.target.value=='rating'&&formState.criterion>1&&formState.criterion<4) {setFormState({ ...formState, ["criterion"]: 0 });} if (e.target.name == "para" && e.target.value == "rating" && formState.criterion > 1 && formState.criterion < 4)
{
setFormState({ ...formState, [ "criterion" ]: 0 });
}
console.log(formState.criterion); console.log(formState.criterion);
setFormState({ ...formState, [ e.target.name ]: e.target.value }); setFormState({ ...formState, [ e.target.name ]: e.target.value });
}; };
const handleSubmit = (e) => { const handleSubmit = (e) =>
{
e.preventDefault(); e.preventDefault();
if (!validateForm()) return; if (!validateForm())
{
return;
}
onSubmit(formState); onSubmit(formState);
@ -70,12 +87,17 @@ export const Modal = ({ closeModal, onSubmit, defaultValue }) => {
return ( return (
<div <div
className="modal-container fixed z-50 flex top-25 bottom-5 " className="modal-container fixed z-50 flex top-25 bottom-5 "
onClick={(e) => { onClick={ (e) =>
if (e.target.className === "modal-container") closeModal(); {
if (e.target.className === "modal-container")
{
closeModal();
}
} } } }
> >
<div className="modal rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark overflow-auto"> <div
className="modal rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark overflow-auto">
<div className="border-b border-stroke py-4 px-7 dark:border-strokedark"> <div className="border-b border-stroke py-4 px-7 dark:border-strokedark">
<div className="w-full flex justify-end"> <div className="w-full flex justify-end">
<strong className="text-xl align-center cursor-pointer " <strong className="text-xl align-center cursor-pointer "
@ -86,16 +108,21 @@ export const Modal = ({ closeModal, onSubmit, defaultValue }) => {
<div className="grid grid-cols-3 gap-5 justify-normal"> <div className="grid grid-cols-3 gap-5 justify-normal">
<div className="form-group w-full col-span-3"> <div className="form-group w-full col-span-3">
<label className="mb-3 block text-sm font-medium text-black dark:text-white" <label className="mb-3 block text-sm font-medium text-black dark:text-white"
htmlFor="id">Bond ID (Input "ALL" to track all bonds with paramaters below)</label> htmlFor="id">Bond ID (Input "ALL" to track all bonds with paramaters
<input className="w-full rounded border border-stroke bg-gray py-3 pl-3 pr-4.5 text-black focus:border-primary focus-visible:outline-none dark:border-strokedark dark:bg-meta-4 dark:text-white dark:focus:border-primary" below)</label>
<input
className="w-full rounded border border-stroke bg-gray py-3 pl-3 pr-4.5 text-black focus:border-primary focus-visible:outline-none dark:border-strokedark dark:bg-meta-4 dark:text-white dark:focus:border-primary"
name="id" onChange={ handleChange } value={ formState.id }/> name="id" onChange={ handleChange } value={ formState.id }/>
</div> </div>
<div className="form-group "> <div className="form-group ">
<label className="mb-3 block text-sm font-medium text-black dark:text-white" htmlFor="para">Parameter</label> <label className="mb-3 block text-sm font-medium text-black dark:text-white"
<div className="relative z-20 w-full rounded border border-stroke p-1.5 pr-8 font-medium outline-none transition focus:border-primary active:border-primary dark:border-form-strokedark dark:bg-form-input"> htmlFor="para">Parameter</label>
<div
className="relative z-20 w-full rounded border border-stroke p-1.5 pr-8 font-medium outline-none transition focus:border-primary active:border-primary dark:border-form-strokedark dark:bg-form-input">
<div className="flex flex-wrap items-center"></div> <div className="flex flex-wrap items-center"></div>
<span className="m-1.5 flex items-center justify-center rounded border-[.5px] border-stroke bg-gray py-1.5 px-2.5 text-sm font-medium dark:border-strokedark dark:bg-white/30"> <span
className="m-1.5 flex items-center justify-center rounded border-[.5px] border-stroke bg-gray py-1.5 px-2.5 text-sm font-medium dark:border-strokedark dark:bg-white/30">
{ formState.para } { formState.para }
@ -107,7 +134,8 @@ export const Modal = ({ closeModal, onSubmit, defaultValue }) => {
onChange={ handleChange } onChange={ handleChange }
value={ formState.para } value={ formState.para }
> >
{fields.map((item:any,idx:number)=>(<option key={idx} value={item}>{item}</option>))} { fields.map((item: any, idx: number) => (
<option key={ idx } value={ item }>{ item }</option>)) }
</select> </select>
<span className="absolute top-1/2 right-4 z-10 -translate-y-1/2"> <span className="absolute top-1/2 right-4 z-10 -translate-y-1/2">
@ -133,12 +161,14 @@ export const Modal = ({ closeModal, onSubmit, defaultValue }) => {
</div> </div>
<div className="form-group"> <div className="form-group">
<label className="mb-3 block text-sm font-medium text-black dark:text-white" htmlFor="criterion">Criterion</label> <label className="mb-3 block text-sm font-medium text-black dark:text-white"
<div className="relative z-20 w-full rounded border border-stroke p-1.5 pr-8 font-medium outline-none transition focus:border-primary active:border-primary dark:border-form-strokedark dark:bg-form-input"> htmlFor="criterion">Criterion</label>
<div
className="relative z-20 w-full rounded border border-stroke p-1.5 pr-8 font-medium outline-none transition focus:border-primary active:border-primary dark:border-form-strokedark dark:bg-form-input">
<div className="flex flex-wrap items-center"></div> <div className="flex flex-wrap items-center"></div>
<span className="m-1.5 flex items-center justify-center rounded border-[.5px] border-stroke bg-gray py-1.5 px-2.5 text-sm font-medium dark:border-strokedark dark:bg-white/30"> <span
className="m-1.5 flex items-center justify-center rounded border-[.5px] border-stroke bg-gray py-1.5 px-2.5 text-sm font-medium dark:border-strokedark dark:bg-white/30">
{ formState.criterion == 0 ? "goes down by" : formState.criterion == 1 ? "goes up by" : formState.criterion == 2 ? "is smaller than" : formState.criterion == 3 ? "is greater than" : "is equal to" } { formState.criterion == 0 ? "goes down by" : formState.criterion == 1 ? "goes up by" : formState.criterion == 2 ? "is smaller than" : formState.criterion == 3 ? "is greater than" : "is equal to" }
</span> </span>
<select <select
@ -149,8 +179,8 @@ export const Modal = ({ closeModal, onSubmit, defaultValue }) => {
> >
<option value="0">goes down by</option> <option value="0">goes down by</option>
<option value="1">goes up by</option> <option value="1">goes up by</option>
{!(formState.para=='rating')&&<option value="2">is smaller than</option>} { !(formState.para == "rating") && <option value="2">is smaller than</option> }
{!(formState.para=='rating')&&<option value="3">is greater than</option>} { !(formState.para == "rating") && <option value="3">is greater than</option> }
<option value="4">is equal to</option> <option value="4">is equal to</option>
</select> </select>
@ -175,16 +205,21 @@ export const Modal = ({ closeModal, onSubmit, defaultValue }) => {
</div> </div>
</div> </div>
<div className="form-group w-full"> <div className="form-group w-full">
<label className="mb-3 block text-sm font-medium text-black dark:text-white" htmlFor="value">Value to give Alert</label> <label className="mb-3 block text-sm font-medium text-black dark:text-white"
<input className="w-full rounded border border-stroke bg-gray py-3 pl-3 pr-4.5 text-black focus:border-primary focus-visible:outline-none dark:border-strokedark dark:bg-meta-4 dark:text-white dark:focus:border-primary" htmlFor="value">Value to give Alert</label>
<input
className="w-full rounded border border-stroke bg-gray py-3 pl-3 pr-4.5 text-black focus:border-primary focus-visible:outline-none dark:border-strokedark dark:bg-meta-4 dark:text-white dark:focus:border-primary"
name="value" onChange={ handleChange } value={ formState.value }/> name="value" onChange={ handleChange } value={ formState.value }/>
</div> </div>
<div className="form-group"> <div className="form-group">
<label className="mb-3 block text-sm font-medium text-black dark:text-white" htmlFor="type">Alert Type</label> <label className="mb-3 block text-sm font-medium text-black dark:text-white"
<div className="relative z-20 w-full rounded border border-stroke p-1.5 pr-8 font-medium outline-none transition focus:border-primary active:border-primary dark:border-form-strokedark dark:bg-form-input"> htmlFor="type">Alert Type</label>
<div
className="relative z-20 w-full rounded border border-stroke p-1.5 pr-8 font-medium outline-none transition focus:border-primary active:border-primary dark:border-form-strokedark dark:bg-form-input">
<div className="flex flex-wrap items-center"></div> <div className="flex flex-wrap items-center"></div>
<span className={`${formState.type==0?"bg-[#04b20c]":formState.type==1?"bg-[#eab90f]":"bg-[#e13f32]"} m-1.5 flex items-center justify-center rounded border-[.5px] border-stroke py-1.5 px-2.5 text-white font-medium dark:border-strokedark`}> <span
className={ `${ formState.type == 0 ? "bg-[#04b20c]" : formState.type == 1 ? "bg-[#eab90f]" : "bg-[#e13f32]" } m-1.5 flex items-center justify-center rounded border-[.5px] border-stroke py-1.5 px-2.5 text-white font-medium dark:border-strokedark` }>
{ formState.type == 0 ? "Info" : formState.type == 1 ? "Warning" : "Alert" } { formState.type == 0 ? "Info" : formState.type == 1 ? "Warning" : "Alert" }
@ -220,12 +255,20 @@ export const Modal = ({ closeModal, onSubmit, defaultValue }) => {
</div> </div>
</div> </div>
</div> </div>
{errors.filter((item:string)=>(item.startsWith("INVALID_ID"))).length>0 && <><br/><div className="error">{errors.filter((item:string)=>(item.startsWith("INVALID_ID")))[0].replace("INVALID_ID_","")} is not a valid bond</div></>} { errors.filter((item: string) => (item.startsWith("INVALID_ID"))).length > 0 && <><br/>
{errors.filter((item:string)=>!(item.startsWith("INVALID_ID"))).length>0 && (<div className="error">Please input {errors.filter((item:string)=>!(item.startsWith("INVALID_ID"))).join(", ")}</div>)} <div
className="error">{ errors.filter((item: string) => (item.startsWith("INVALID_ID")))[ 0 ].replace("INVALID_ID_", "") } is
not a valid bond
</div>
</> }
{ errors.filter((item: string) => !(item.startsWith("INVALID_ID"))).length > 0 && (
<div className="error">Please
input { errors.filter((item: string) => !(item.startsWith("INVALID_ID"))).join(", ") }</div>) }
<br></br> <br></br>
<button className="btn flex justify-center rounded bg-primary py-2 px-6 font-medium text-gray hover:shadow-1" <button
className="btn flex justify-center rounded bg-primary py-2 px-6 font-medium text-gray hover:shadow-1"
type="submit" onClick={ handleSubmit }> type="submit" onClick={ handleSubmit }>
Submit Submit
</button> </button>

24
packages/frontend/src/old/Profile.tsx
View File

@ -1,11 +1,13 @@
import CoverOne from '../images/cover/cover-01.png'; import CoverOne from "../images/cover/cover-01.png";
import userSix from '../images/user/user-06.png'; import userSix from "../images/user/user-06.png";
import { Link } from 'react-router-dom'; import { Link } from "react-router-dom";
const Profile = () => { const Profile = () =>
{
return ( return (
<> <>
<div className="overflow-hidden rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark"> <div
className="overflow-hidden rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
<div className="relative z-20 h-35 md:h-65"> <div className="relative z-20 h-35 md:h-65">
<img <img
src={ CoverOne } src={ CoverOne }
@ -46,7 +48,8 @@ const Profile = () => {
</div> </div>
</div> </div>
<div className="px-4 pb-6 text-center lg:pb-8 xl:pb-11.5"> <div className="px-4 pb-6 text-center lg:pb-8 xl:pb-11.5">
<div className="relative z-30 mx-auto -mt-22 h-30 w-full max-w-30 rounded-full bg-white/20 p-1 backdrop-blur sm:h-44 sm:max-w-44 sm:p-3"> <div
className="relative z-30 mx-auto -mt-22 h-30 w-full max-w-30 rounded-full bg-white/20 p-1 backdrop-blur sm:h-44 sm:max-w-44 sm:p-3">
<div className="relative drop-shadow-2"> <div className="relative drop-shadow-2">
<img src={ userSix } alt="profile"/> <img src={ userSix } alt="profile"/>
<label <label
@ -88,14 +91,17 @@ const Profile = () => {
Danish Heilium Danish Heilium
</h3> </h3>
<p className="font-medium">Ui/Ux Designer</p> <p className="font-medium">Ui/Ux Designer</p>
<div className="mx-auto mt-4.5 mb-5.5 grid max-w-94 grid-cols-3 rounded-md border border-stroke py-2.5 shadow-1 dark:border-strokedark dark:bg-[#37404F]"> <div
<div className="flex flex-col items-center justify-center gap-1 border-r border-stroke px-4 dark:border-strokedark xsm:flex-row"> className="mx-auto mt-4.5 mb-5.5 grid max-w-94 grid-cols-3 rounded-md border border-stroke py-2.5 shadow-1 dark:border-strokedark dark:bg-[#37404F]">
<div
className="flex flex-col items-center justify-center gap-1 border-r border-stroke px-4 dark:border-strokedark xsm:flex-row">
<span className="font-semibold text-black dark:text-white"> <span className="font-semibold text-black dark:text-white">
259 259
</span> </span>
<span className="text-sm">Posts</span> <span className="text-sm">Posts</span>
</div> </div>
<div className="flex flex-col items-center justify-center gap-1 border-r border-stroke px-4 dark:border-strokedark xsm:flex-row"> <div
className="flex flex-col items-center justify-center gap-1 border-r border-stroke px-4 dark:border-strokedark xsm:flex-row">
<span className="font-semibold text-black dark:text-white"> <span className="font-semibold text-black dark:text-white">
129K 129K
</span> </span>

14
packages/frontend/src/old/Settings.tsx
View File

@ -1,12 +1,14 @@
import userThree from '../images/user/user-03.png'; import userThree from "../images/user/user-03.png";
const Settings = () => { const Settings = () =>
{
return ( return (
<> <>
<div className="mx-auto max-w-270"> <div className="mx-auto max-w-270">
<div className="grid grid-cols-5 gap-8"> <div className="grid grid-cols-5 gap-8">
<div className="col-span-5 xl:col-span-3"> <div className="col-span-5 xl:col-span-3">
<div className="rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark"> <div
className="rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
<div className="border-b border-stroke py-4 px-7 dark:border-strokedark"> <div className="border-b border-stroke py-4 px-7 dark:border-strokedark">
<h3 className="font-medium text-black dark:text-white"> <h3 className="font-medium text-black dark:text-white">
Personal Information Personal Information
@ -207,7 +209,8 @@ const Settings = () => {
</div> </div>
</div> </div>
<div className="col-span-5 xl:col-span-2"> <div className="col-span-5 xl:col-span-2">
<div className="rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark"> <div
className="rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
<div className="border-b border-stroke py-4 px-7 dark:border-strokedark"> <div className="border-b border-stroke py-4 px-7 dark:border-strokedark">
<h3 className="font-medium text-black dark:text-white"> <h3 className="font-medium text-black dark:text-white">
Your Photo Your Photo
@ -244,7 +247,8 @@ const Settings = () => {
className="absolute inset-0 z-50 m-0 h-full w-full cursor-pointer p-0 opacity-0 outline-none" className="absolute inset-0 z-50 m-0 h-full w-full cursor-pointer p-0 opacity-0 outline-none"
/> />
<div className="flex flex-col items-center justify-center space-y-3"> <div className="flex flex-col items-center justify-center space-y-3">
<span className="flex h-10 w-10 items-center justify-center rounded-full border border-stroke bg-white dark:border-strokedark dark:bg-boxdark"> <span
className="flex h-10 w-10 items-center justify-center rounded-full border border-stroke bg-white dark:border-strokedark dark:bg-boxdark">
<svg <svg
width="16" width="16"
height="16" height="16"

10
packages/frontend/src/old/Switchers/SwitcherFour.tsx
View File

@ -1,6 +1,7 @@
import { useState } from 'react'; import { useState } from "react";
const SwitcherFour = () => { const SwitcherFour = () =>
{
const [ enabled, setEnabled ] = useState<boolean>(false); const [ enabled, setEnabled ] = useState<boolean>(false);
return ( return (
@ -14,14 +15,15 @@ const SwitcherFour = () => {
type="checkbox" type="checkbox"
id="toggle4" id="toggle4"
className="sr-only" className="sr-only"
onChange={() => { onChange={ () =>
{
setEnabled(!enabled); setEnabled(!enabled);
} } } }
/> />
<div className="block h-8 w-14 rounded-full bg-black"></div> <div className="block h-8 w-14 rounded-full bg-black"></div>
<div <div
className={ `absolute left-1 top-1 flex h-6 w-6 items-center justify-center rounded-full bg-white transition ${ className={ `absolute left-1 top-1 flex h-6 w-6 items-center justify-center rounded-full bg-white transition ${
enabled && '!right-1 !translate-x-full' enabled && "!right-1 !translate-x-full"
}` } }` }
></div> ></div>
</div> </div>

10
packages/frontend/src/old/Switchers/SwitcherOne.tsx
View File

@ -1,6 +1,7 @@
import { useState } from 'react'; import { useState } from "react";
const SwitcherOne = () => { const SwitcherOne = () =>
{
const [ enabled, setEnabled ] = useState<boolean>(false); const [ enabled, setEnabled ] = useState<boolean>(false);
return ( return (
@ -14,14 +15,15 @@ const SwitcherOne = () => {
type="checkbox" type="checkbox"
id="toggle1" id="toggle1"
className="sr-only" className="sr-only"
onChange={() => { onChange={ () =>
{
setEnabled(!enabled); setEnabled(!enabled);
} } } }
/> />
<div className="block h-8 w-14 rounded-full bg-meta-9 dark:bg-[#5A616B]"></div> <div className="block h-8 w-14 rounded-full bg-meta-9 dark:bg-[#5A616B]"></div>
<div <div
className={ `absolute left-1 top-1 h-6 w-6 rounded-full bg-white transition ${ className={ `absolute left-1 top-1 h-6 w-6 rounded-full bg-white transition ${
enabled && '!right-1 !translate-x-full !bg-primary dark:!bg-white' enabled && "!right-1 !translate-x-full !bg-primary dark:!bg-white"
}` } }` }
></div> ></div>
</div> </div>

14
packages/frontend/src/old/Switchers/SwitcherThree.tsx
View File

@ -1,6 +1,7 @@
import { useState } from 'react'; import { useState } from "react";
const SwitcherThree = () => { const SwitcherThree = () =>
{
const [ enabled, setEnabled ] = useState(false); const [ enabled, setEnabled ] = useState(false);
return ( return (
@ -14,17 +15,18 @@ const SwitcherThree = () => {
type="checkbox" type="checkbox"
id="toggle3" id="toggle3"
className="sr-only" className="sr-only"
onChange={() => { onChange={ () =>
{
setEnabled(!enabled); setEnabled(!enabled);
} } } }
/> />
<div className="block h-8 w-14 rounded-full bg-meta-9 dark:bg-[#5A616B]"></div> <div className="block h-8 w-14 rounded-full bg-meta-9 dark:bg-[#5A616B]"></div>
<div <div
className={ `dot absolute left-1 top-1 flex h-6 w-6 items-center justify-center rounded-full bg-white transition ${ className={ `dot absolute left-1 top-1 flex h-6 w-6 items-center justify-center rounded-full bg-white transition ${
enabled && '!right-1 !translate-x-full !bg-primary dark:!bg-white' enabled && "!right-1 !translate-x-full !bg-primary dark:!bg-white"
}` } }` }
> >
<span className={`hidden ${enabled && '!block'}`}> <span className={ `hidden ${ enabled && "!block" }` }>
<svg <svg
className="fill-white dark:fill-black" className="fill-white dark:fill-black"
width="11" width="11"
@ -41,7 +43,7 @@ const SwitcherThree = () => {
></path> ></path>
</svg> </svg>
</span> </span>
<span className={`${enabled && 'hidden'}`}> <span className={ `${ enabled && "hidden" }` }>
<svg <svg
className="h-4 w-4 stroke-current" className="h-4 w-4 stroke-current"
fill="none" fill="none"

10
packages/frontend/src/old/Switchers/SwitcherTwo.tsx
View File

@ -1,6 +1,7 @@
import { useState } from 'react'; import { useState } from "react";
const SwitcherTwo = () => { const SwitcherTwo = () =>
{
const [ enabled, setEnabled ] = useState(false); const [ enabled, setEnabled ] = useState(false);
return ( return (
@ -14,14 +15,15 @@ const SwitcherTwo = () => {
id="toggle2" id="toggle2"
type="checkbox" type="checkbox"
className="sr-only" className="sr-only"
onChange={() => { onChange={ () =>
{
setEnabled(!enabled); setEnabled(!enabled);
} } } }
/> />
<div className="h-5 w-14 rounded-full bg-meta-9 shadow-inner dark:bg-[#5A616B]"></div> <div className="h-5 w-14 rounded-full bg-meta-9 shadow-inner dark:bg-[#5A616B]"></div>
<div <div
className={ `dot absolute left-0 -top-1 h-7 w-7 rounded-full bg-white shadow-switch-1 transition ${ className={ `dot absolute left-0 -top-1 h-7 w-7 rounded-full bg-white shadow-switch-1 transition ${
enabled && '!right-0 !translate-x-full !bg-primary dark:!bg-white' enabled && "!right-0 !translate-x-full !bg-primary dark:!bg-white"
}` } }` }
></div> ></div>
</div> </div>

10
packages/frontend/src/old/TableSettings.tsx
View File

@ -1,8 +1,9 @@
import React from "react"; import React from "react";
import { BsFillTrashFill, BsFillPencilFill } from "react-icons/bs"; import { BsFillTrashFill, BsFillPencilFill } from "react-icons/bs";
import dataJSON from '../../public/data.json'; import dataJSON from "../../public/data.json";
export const Table = ({ rows, deleteRow, editRow }) => { export const Table = ({ rows, deleteRow, editRow }) =>
{
const fields = Object.keys(Object.values(dataJSON)[ 0 ]).filter((item: any) => !(item.startsWith("delta_"))); const fields = Object.keys(Object.values(dataJSON)[ 0 ]).filter((item: any) => !(item.startsWith("delta_")));
return ( return (
@ -20,7 +21,8 @@ export const Table = ({ rows, deleteRow, editRow }) => {
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{rows.map((row:any, idx:number) => { { rows.map((row: any, idx: number) =>
{
return ( return (
@ -40,7 +42,7 @@ export const Table = ({ rows, deleteRow, editRow }) => {
<td className="border-b border-[#eee] py-5 px-4 dark:border-strokedark">{ row.value }</td> <td className="border-b border-[#eee] py-5 px-4 dark:border-strokedark">{ row.value }</td>
<td className="border-b border-[#eee] py-5 px-4 dark:border-strokedark"> <td className="border-b border-[#eee] py-5 px-4 dark:border-strokedark">
<span> <span>
{row.type==0?'Info':row.type==1?"Warning":"Alert"} { row.type == 0 ? "Info" : row.type == 1 ? "Warning" : "Alert" }
</span> </span>
</td> </td>

4
packages/frontend/src/old/Tables.tsx
View File

@ -1,9 +1,9 @@
// import TableOne from '../components/Tables/TableOne'; // import TableOne from '../components/Tables/TableOne';
// import TableThree from '../components/Tables/TableThree'; // import TableThree from '../components/Tables/TableThree';
// import TableTwo from '../components/Tables/TableTwo'; // import TableTwo from '../components/Tables/TableTwo';
const Tables = () => { const Tables = () =>
{
return ( return (
<> <>
<div className="flex flex-col gap-10"> <div className="flex flex-col gap-10">

34
packages/frontend/src/old/Tables/TableThree.tsx
View File

@ -1,35 +1,37 @@
import { Package } from '../package'; import { Package } from "../package";
const packageData: Package[] = [ const packageData: Package[] = [
{ {
name: 'Free package', name: "Free package",
price: 0.0, price: 0.0,
invoiceDate: `Jan 13,2023`, invoiceDate: `Jan 13,2023`,
status: 'Paid', status: "Paid",
}, },
{ {
name: 'Standard Package', name: "Standard Package",
price: 59.0, price: 59.0,
invoiceDate: `Jan 13,2023`, invoiceDate: `Jan 13,2023`,
status: 'Paid', status: "Paid",
}, },
{ {
name: 'Business Package', name: "Business Package",
price: 99.0, price: 99.0,
invoiceDate: `Jan 13,2023`, invoiceDate: `Jan 13,2023`,
status: 'Unpaid', status: "Unpaid",
}, },
{ {
name: 'Standard Package', name: "Standard Package",
price: 59.0, price: 59.0,
invoiceDate: `Jan 13,2023`, invoiceDate: `Jan 13,2023`,
status: 'Pending', status: "Pending",
}, },
]; ];
const TableThree = () => { const TableThree = () =>
{
return ( return (
<div className="rounded-sm border border-stroke bg-white px-5 pt-6 pb-2.5 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:pb-1"> <div
className="rounded-sm border border-stroke bg-white px-5 pt-6 pb-2.5 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:pb-1">
<div className="max-w-full overflow-x-auto"> <div className="max-w-full overflow-x-auto">
<table className="w-full table-auto"> <table className="w-full table-auto">
<thead> <thead>
@ -66,11 +68,11 @@ const TableThree = () => {
<td className="border-b border-[#eee] py-5 px-4 dark:border-strokedark"> <td className="border-b border-[#eee] py-5 px-4 dark:border-strokedark">
<p <p
className={ `inline-flex rounded-full bg-opacity-10 py-1 px-3 text-sm font-medium ${ className={ `inline-flex rounded-full bg-opacity-10 py-1 px-3 text-sm font-medium ${
packageItem.status === 'Paid' packageItem.status === "Paid"
? 'bg-success text-success' ? "bg-success text-success"
: packageItem.status === 'Unpaid' : packageItem.status === "Unpaid"
? 'bg-danger text-danger' ? "bg-danger text-danger"
: 'bg-warning text-warning' : "bg-warning text-warning"
}` } }` }
> >
{ packageItem.status } { packageItem.status }

32
packages/frontend/src/old/Tables/TableTwo.tsx
View File

@ -1,45 +1,46 @@
import { Product } from '../product'; import { Product } from "../product";
import ProductOne from '../../images/product/product-01.png'; import ProductOne from "../../images/product/product-01.png";
import ProductTwo from '../../images/product/product-02.png'; import ProductTwo from "../../images/product/product-02.png";
import ProductThree from '../../images/product/product-03.png'; import ProductThree from "../../images/product/product-03.png";
import ProductFour from '../../images/product/product-04.png'; import ProductFour from "../../images/product/product-04.png";
const productData: Product[] = [ const productData: Product[] = [
{ {
image: ProductOne, image: ProductOne,
name: 'Apple Watch Series 7', name: "Apple Watch Series 7",
category: 'Electronics', category: "Electronics",
price: 296, price: 296,
sold: 22, sold: 22,
profit: 45, profit: 45,
}, },
{ {
image: ProductTwo, image: ProductTwo,
name: 'Macbook Pro M1', name: "Macbook Pro M1",
category: 'Electronics', category: "Electronics",
price: 546, price: 546,
sold: 12, sold: 12,
profit: 125, profit: 125,
}, },
{ {
image: ProductThree, image: ProductThree,
name: 'Dell Inspiron 15', name: "Dell Inspiron 15",
category: 'Electronics', category: "Electronics",
price: 443, price: 443,
sold: 64, sold: 64,
profit: 247, profit: 247,
}, },
{ {
image: ProductFour, image: ProductFour,
name: 'HP Probook 450', name: "HP Probook 450",
category: 'Electronics', category: "Electronics",
price: 499, price: 499,
sold: 72, sold: 72,
profit: 103, profit: 103,
}, },
]; ];
const TableTwo = () => { const TableTwo = () =>
{
return ( return (
<div className="rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark"> <div className="rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
<div className="py-6 px-4 md:px-6 xl:px-7.5"> <div className="py-6 px-4 md:px-6 xl:px-7.5">
@ -48,7 +49,8 @@ const TableTwo = () => {
</h4> </h4>
</div> </div>
<div className="grid grid-cols-6 border-t border-stroke py-4.5 px-4 dark:border-strokedark sm:grid-cols-8 md:px-6 2xl:px-7.5"> <div
className="grid grid-cols-6 border-t border-stroke py-4.5 px-4 dark:border-strokedark sm:grid-cols-8 md:px-6 2xl:px-7.5">
<div className="col-span-3 flex items-center"> <div className="col-span-3 flex items-center">
<p className="font-medium">Product Name</p> <p className="font-medium">Product Name</p>
</div> </div>

24
packages/frontend/src/old/UiElements/Alerts.tsx
View File

@ -1,11 +1,15 @@
const Alerts = () => { const Alerts = () =>
{
return ( return (
<> <>
<div className="rounded-sm border border-stroke bg-white p-4 shadow-default dark:border-strokedark dark:bg-boxdark md:p-6 xl:p-9"> <div
className="rounded-sm border border-stroke bg-white p-4 shadow-default dark:border-strokedark dark:bg-boxdark md:p-6 xl:p-9">
<div className="flex flex-col gap-7.5"> <div className="flex flex-col gap-7.5">
{/* <!-- Alerts Item --> */ } {/* <!-- Alerts Item --> */ }
<div className="flex w-full border-l-6 border-warning bg-warning bg-opacity-[15%] px-7 py-8 shadow-md dark:bg-[#1B1B24] dark:bg-opacity-30 md:p-9"> <div
<div className="mr-5 flex h-9 w-9 items-center justify-center rounded-lg bg-warning bg-opacity-30"> className="flex w-full border-l-6 border-warning bg-warning bg-opacity-[15%] px-7 py-8 shadow-md dark:bg-[#1B1B24] dark:bg-opacity-30 md:p-9">
<div
className="mr-5 flex h-9 w-9 items-center justify-center rounded-lg bg-warning bg-opacity-30">
<svg <svg
width="19" width="19"
height="16" height="16"
@ -31,8 +35,10 @@ const Alerts = () => {
</div> </div>
</div> </div>
{/* <!-- Alerts Item --> */ } {/* <!-- Alerts Item --> */ }
<div className="flex w-full border-l-6 border-[#34D399] bg-[#34D399] bg-opacity-[15%] px-7 py-8 shadow-md dark:bg-[#1B1B24] dark:bg-opacity-30 md:p-9"> <div
<div className="mr-5 flex h-9 w-full max-w-[36px] items-center justify-center rounded-lg bg-[#34D399]"> className="flex w-full border-l-6 border-[#34D399] bg-[#34D399] bg-opacity-[15%] px-7 py-8 shadow-md dark:bg-[#1B1B24] dark:bg-opacity-30 md:p-9">
<div
className="mr-5 flex h-9 w-full max-w-[36px] items-center justify-center rounded-lg bg-[#34D399]">
<svg <svg
width="16" width="16"
height="12" height="12"
@ -58,8 +64,10 @@ const Alerts = () => {
</div> </div>
</div> </div>
{/* <!-- Alerts Item --> */ } {/* <!-- Alerts Item --> */ }
<div className="flex w-full border-l-6 border-[#F87171] bg-[#F87171] bg-opacity-[15%] px-7 py-8 shadow-md dark:bg-[#1B1B24] dark:bg-opacity-30 md:p-9"> <div
<div className="mr-5 flex h-9 w-full max-w-[36px] items-center justify-center rounded-lg bg-[#F87171]"> className="flex w-full border-l-6 border-[#F87171] bg-[#F87171] bg-opacity-[15%] px-7 py-8 shadow-md dark:bg-[#1B1B24] dark:bg-opacity-30 md:p-9">
<div
className="mr-5 flex h-9 w-full max-w-[36px] items-center justify-center rounded-lg bg-[#F87171]">
<svg <svg
width="13" width="13"
height="13" height="13"

12
packages/frontend/src/old/UiElements/Buttons.tsx
View File

@ -1,12 +1,13 @@
import { Link } from 'react-router-dom'; import { Link } from "react-router-dom";
const Buttons = () =>
const Buttons = () => { {
return ( return (
<> <>
{/* <!-- Normal Button Items --> */ } {/* <!-- Normal Button Items --> */ }
<div className="mb-10 rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark"> <div
className="mb-10 rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
<div className="border-b border-stroke px-7 py-4 dark:border-strokedark"> <div className="border-b border-stroke px-7 py-4 dark:border-strokedark">
<h3 className="font-medium text-black dark:text-white"> <h3 className="font-medium text-black dark:text-white">
Normal Button Normal Button
@ -107,7 +108,8 @@ const Buttons = () => {
</div> </div>
{/* <!-- Button With Icon Items --> */ } {/* <!-- Button With Icon Items --> */ }
<div className="mb-10 rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark"> <div
className="mb-10 rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
<div className="border-b border-stroke px-7 py-4 dark:border-strokedark"> <div className="border-b border-stroke px-7 py-4 dark:border-strokedark">
<h3 className="font-medium text-black dark:text-white"> <h3 className="font-medium text-black dark:text-white">
Button With Icon Button With Icon

63
packages/frontend/src/old/fireToast.tsx
View File

@ -1,12 +1,13 @@
import toast from 'react-hot-toast'; import toast from "react-hot-toast";
import dataJSON from '../../public/data.json'; import dataJSON from "../../public/data.json";
//TODO: rewrite //TODO: rewrite
const createToast = (title: string, msg: string, type: number) => { const createToast = (title: string, msg: string, type: number) =>
{
toast.custom((t) => ( toast.custom((t) => (
<div <div
className={`${t.visible ? 'animate-enter' : 'animate-leave' className={ `${ t.visible ? "animate-enter" : "animate-leave"
} }
max-w-md w-full ${ type === 0 ? "bg-[#04b20c]" : type === 1 ? "bg-[#eab90f]" : "bg-[#e13f32]" } shadow-lg rounded-lg pointer-events-auto flex ring-1 ring-black ring-opacity-5` } max-w-md w-full ${ type === 0 ? "bg-[#04b20c]" : type === 1 ? "bg-[#eab90f]" : "bg-[#e13f32]" } shadow-lg rounded-lg pointer-events-auto flex ring-1 ring-black ring-opacity-5` }
> >
@ -50,7 +51,7 @@ const createToast = (title: string, msg: string, type: number) => {
</div> </div>
</div> </div>
)) ));
}; };
// let dataJSON: any; // let dataJSON: any;
// let headers = new Headers(); // let headers = new Headers();
@ -65,47 +66,55 @@ const createToast = (title: string, msg: string, type: number) => {
// console.log(data); // console.log(data);
// dataJSON=data; // dataJSON=data;
// }) // })
const fireToast = () => { const fireToast = () =>
{
const alertSettings = localStorage.getItem("alertSettings"); const alertSettings = localStorage.getItem("alertSettings");
if (alertSettings) { if (alertSettings)
for (const alertSetting of JSON.parse(alertSettings)) { {
for (const alertSetting of JSON.parse(alertSettings))
{
console.log(alertSetting); console.log(alertSetting);
const value = isNaN(parseFloat(alertSetting.value)) ? alertSetting.value : parseFloat(alertSetting.value); const value = isNaN(parseFloat(alertSetting.value)) ? alertSetting.value : parseFloat(alertSetting.value);
const para = alertSetting.criterion < 2 ? "delta_" + alertSetting.para : alertSetting.para; const para = alertSetting.criterion < 2 ? "delta_" + alertSetting.para : alertSetting.para;
if (alertSetting.id == "ALL") { if (alertSetting.id == "ALL")
Object.keys(dataJSON).map((id: string) => { {
const condition = alertSetting.criterion == '0' ? value <= -1 * dataJSON[id][para] : Object.keys(dataJSON).map((id: string) =>
alertSetting.criterion == '1' || alertSetting.criterion == '3' ? value >= dataJSON[id][para] : {
alertSetting.criterion == '2' ? value <= dataJSON[id][para] : const condition = alertSetting.criterion == "0" ? value <= -1 * dataJSON[ id ][ para ] :
alertSetting.criterion == "1" || alertSetting.criterion == "3" ? value >= dataJSON[ id ][ para ] :
alertSetting.criterion == "2" ? value <= dataJSON[ id ][ para ] :
value == dataJSON[ id ][ para ]; value == dataJSON[ id ][ para ];
const realValue = alertSetting.criterion == '0' ? dataJSON[id][para] * -1 : dataJSON[id][para]; const realValue = alertSetting.criterion == "0" ? dataJSON[ id ][ para ] * -1 : dataJSON[ id ][ para ];
if (condition) { if (condition)
{
const msg = `${ alertSetting.para } of ${ id } ${ alertSetting.criterion == 0 ? "goes down by" : alertSetting.criterion == 1 ? "goes up by" : alertSetting.criterion == 2 ? "is smaller than" : alertSetting.criterion == 3 ? "is greater than" : "is equal to" } ${ realValue }`; const msg = `${ alertSetting.para } of ${ id } ${ alertSetting.criterion == 0 ? "goes down by" : alertSetting.criterion == 1 ? "goes up by" : alertSetting.criterion == 2 ? "is smaller than" : alertSetting.criterion == 3 ? "is greater than" : "is equal to" } ${ realValue }`;
createToast(id, msg, alertSetting.type) createToast(id, msg, alertSetting.type);
} }
} },
); );
} }
else { else
{
const id = alertSetting.id; const id = alertSetting.id;
const condition = alertSetting.criterion == '0' ? value >= -1 * dataJSON[id][para] : const condition = alertSetting.criterion == "0" ? value >= -1 * dataJSON[ id ][ para ] :
alertSetting.criterion == '1' || alertSetting.criterion == '3' ? value >= dataJSON[id][para] : alertSetting.criterion == "1" || alertSetting.criterion == "3" ? value >= dataJSON[ id ][ para ] :
alertSetting.criterion == '2' ? value <= dataJSON[id][para] : alertSetting.criterion == "2" ? value <= dataJSON[ id ][ para ] :
value == dataJSON[ id ][ para ]; value == dataJSON[ id ][ para ];
const realValue = alertSetting.criterion == '0' ? dataJSON[id][para] * -1 : dataJSON[id][para]; const realValue = alertSetting.criterion == "0" ? dataJSON[ id ][ para ] * -1 : dataJSON[ id ][ para ];
if (condition) { if (condition)
{
const msg = `${ alertSetting.para } of ${ id } ${ alertSetting.criterion == 0 ? "goes down by" : alertSetting.criterion == 1 ? "goes up by" : alertSetting.criterion == 2 ? "is smaller than" : alertSetting.criterion == 3 ? "is greater than" : "is equal to" } ${ realValue }`; const msg = `${ alertSetting.para } of ${ id } ${ alertSetting.criterion == 0 ? "goes down by" : alertSetting.criterion == 1 ? "goes up by" : alertSetting.criterion == 2 ? "is smaller than" : alertSetting.criterion == 3 ? "is greater than" : "is equal to" } ${ realValue }`;
createToast(id, msg, alertSetting.type) createToast(id, msg, alertSetting.type);
} }
} }
}
}
}; };
}
}
export default fireToast; export default fireToast;

73
packages/frontend/src/pages/Home.tsx
View File

@ -1,10 +1,11 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from "react";
import CardDataStats from '../old/CardDataStats'; import CardDataStats from "../old/CardDataStats";
import { useTranslation, Trans } from 'react-i18next'; import { useTranslation, Trans } from "react-i18next";
import { Link } from 'react-router-dom'; import { Link } from "react-router-dom";
import { TStatsResponse } from '../types/stats.ts'; import { TStatsResponse } from "../types/stats.ts";
export const Home: React.FC = () => { export const Home: React.FC = () =>
{
const { t } = useTranslation(); const { t } = useTranslation();
const [ commit, setCommit ] = useState(""); const [ commit, setCommit ] = useState("");
@ -13,76 +14,86 @@ export const Home: React.FC = () => {
const [ dispatchers, setDispatchers ] = useState(0); const [ dispatchers, setDispatchers ] = useState(0);
const [ profiles, setProfiles ] = useState(0); const [ profiles, setProfiles ] = useState(0);
useEffect(() => { useEffect(() =>
fetch(`${import.meta.env.VITE_API_URL}/stats/`).then(x => x.json()).then((data: TStatsResponse) => { {
fetch(`${ import.meta.env.VITE_API_URL }/stats/`).then(x => x.json()).then((data: TStatsResponse) =>
{
data.data.git.commit && setCommit(data.data.git.commit); data.data.git.commit && setCommit(data.data.git.commit);
data.data.git.version && setVersion(data.data.git.version); data.data.git.version && setVersion(data.data.git.version);
// ADD ALERT IF API DOESN'T WORK! toast?
setTrains(data.data.stats.trains); setTrains(data.data.stats.trains);
setDispatchers(data.data.stats.dispatchers); setDispatchers(data.data.stats.dispatchers);
setProfiles(data.data.stats.profiles); setProfiles(data.data.stats.profiles);
}); });
}, []) }, []);
useEffect(() => { }, []);
return ( return (
<> <>
<div className="flex flex-col gap-10"> <div className="flex flex-col gap-10">
<div className="grid grid-cols-1 gap-4 md:grid-cols-3 md:gap-6 xl:grid-cols-3 2xl:gap-7.5"> <div className="grid grid-cols-1 gap-4 md:grid-cols-3 md:gap-6 xl:grid-cols-3 2xl:gap-7.5">
<CardDataStats title={t('home.stats.trains')} total={trains.toString()} /> <CardDataStats title={ t("home.stats.trains") } total={ trains.toString() }/>
<CardDataStats title={t('home.stats.dispatchers')} total={dispatchers.toString()} /> <CardDataStats title={ t("home.stats.dispatchers") } total={ dispatchers.toString() }/>
<CardDataStats title={t('home.stats.profiles')} total={profiles.toString()} /> <CardDataStats title={ t("home.stats.profiles") } total={ profiles.toString() }/>
</div> </div>
<div className="overflow-hidden rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark"> <div
className="overflow-hidden rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
<div className="px-4 pb-6 text-center"> <div className="px-4 pb-6 text-center">
<div className="mt-4"> <div className="mt-4">
<h3 className="mb-1.5 text-2xl font-semibold text-black dark:text-white"> <h3 className="mb-1.5 text-2xl font-semibold text-black dark:text-white">
{t('home.title')} { t("home.title") }
</h3> </h3>
<p className="font-medium">{t('home.description')}</p> <p className="font-medium">{ t("home.description") }</p>
<div className="p-4 md:p-6 xl:p-9 flex gap-2 justify-center"> <div className="p-4 md:p-6 xl:p-9 flex gap-2 justify-center">
<Link <Link
to="https://git.alekswilc.dev/simrail/simrail.alekswilc.dev" to="https://git.alekswilc.dev/simrail/simrail.alekswilc.dev"
className="inline-flex items-center justify-center rounded-md bg-primary py-2 px-8 text-center font-medium text-white hover:bg-opacity-90 lg:px-8 xl:px-10" className="inline-flex items-center justify-center rounded-md bg-primary py-2 px-8 text-center font-medium text-white hover:bg-opacity-90 lg:px-8 xl:px-10"
> >
{t('home.buttons.project')} { t("home.buttons.project") }
</Link> </Link>
<Link <Link
to="https://forum.simrail.eu/topic/9142-logowanie-wyj%C5%9B%C4%87-z-posterunk%C3%B3w/" to="https://forum.simrail.eu/topic/9142-logowanie-wyj%C5%9B%C4%87-z-posterunk%C3%B3w/"
className="inline-flex items-center justify-center rounded-md bg-primary py-2 px-8 text-center font-medium text-white hover:bg-opacity-90 lg:px-8 xl:px-10" className="inline-flex items-center justify-center rounded-md bg-primary py-2 px-8 text-center font-medium text-white hover:bg-opacity-90 lg:px-8 xl:px-10"
> >
{t('home.buttons.forum')} { t("home.buttons.forum") }
</Link> </Link>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div className="overflow-hidden rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark"> <div
className="overflow-hidden rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
<div className="px-4 pb-6 text-center"> <div className="px-4 pb-6 text-center">
<div className="mt-6.5"> <div className="mt-6.5">
<p><Trans <p><Trans
i18nKey={ t("home.footer.author") } i18nKey={ t("home.footer.author") }
values={{ author: 'alekswilc' }} values={ { author: "alekswilc" } }
components={{ anchor: <Link className='color-orchid' to={"https://www.alekswilc.dev"} /> }} components={ {
anchor: <Link className="color-orchid" to={ "https://www.alekswilc.dev" }/>,
} }
/></p> /></p>
<p><Trans <p><Trans
i18nKey={ t("home.footer.thanks") } i18nKey={ t("home.footer.thanks") }
components={{ bahu: <Link className='color-orchid' to={"https://bahu.pro/"} />, simrailelite: <Link className='color-orchid' to={"https://bahu.pro/"} /> }} components={ {
bahu: <Link className="color-orchid" to={ "https://bahu.pro/" }/>,
simrailelite: <Link className="color-orchid" to={ "https://bahu.pro/" }/>,
} }
/></p> /></p>
<p>{t("home.footer.license")} <Link className='color-orchid' to={'https://git.alekswilc.dev/simrail/simrail.alekswilc.dev/src/branch/main/LICENSE'}>GNU AGPL V3</Link></p> <p>{ t("home.footer.license") } <Link className="color-orchid"
<p>{t("home.footer.powered")} <Link className='color-orchid' to={"https://tailadmin.com/"}>TailAdmin</Link></p> to={ "https://git.alekswilc.dev/simrail/simrail.alekswilc.dev/src/branch/main/LICENSE" }>GNU
AGPL V3</Link></p>
<p>{ t("home.footer.powered") } <Link className="color-orchid"
to={ "https://tailadmin.com/" }>TailAdmin</Link></p>
<p>{version && <Link className='color-orchid' to={`https://git.alekswilc.dev/simrail/simrail.alekswilc.dev/releases/tag/${version}`}>{version}</Link>}{version && commit && " | "}{commit && <Link className='color-orchid' to={`https://git.alekswilc.dev/simrail/simrail.alekswilc.dev/commit/${commit}`}>{commit}</Link>}</p> <p>{ version && <Link className="color-orchid"
to={ `https://git.alekswilc.dev/simrail/simrail.alekswilc.dev/releases/tag/${ version }` }>{ version }</Link> }{ version && commit && " | " }{ commit &&
<Link className="color-orchid"
to={ `https://git.alekswilc.dev/simrail/simrail.alekswilc.dev/commit/${ commit }` }>{ commit }</Link> }</p>
</div> </div>
@ -91,8 +102,6 @@ export const Home: React.FC = () => {
</div> </div>
</> </>
); );
}; };

32
packages/frontend/src/pages/leaderboard/StationsLeaderboard.tsx
View File

@ -1,31 +1,37 @@
import { TLeaderboardRecord } from '../../types/leaderboard.ts'; import { TLeaderboardRecord } from "../../types/leaderboard.ts";
import { ChangeEvent, useEffect, useState } from 'react'; import { ChangeEvent, useEffect, useState } from "react";
import { StationTable } from '../../components/pages/leaderboard/StationTable.tsx'; import { StationTable } from "../../components/pages/leaderboard/StationTable.tsx";
import { useDebounce } from 'use-debounce'; import { useDebounce } from "use-debounce";
import { Search } from '../../components/mini/util/Search.tsx'; import { Search } from "../../components/mini/util/Search.tsx";
export const StationLeaderboard = () => { export const StationLeaderboard = () =>
{
const [ data, setData ] = useState<TLeaderboardRecord[]>([]); const [ data, setData ] = useState<TLeaderboardRecord[]>([]);
useEffect(() => { useEffect(() =>
fetch(`${import.meta.env.VITE_API_URL}leaderboard/station/`).then(x => x.json()).then(x => { {
fetch(`${ import.meta.env.VITE_API_URL }leaderboard/station/`).then(x => x.json()).then(x =>
{
setData(x.data.records); setData(x.data.records);
}); });
}, []); }, []);
const [searchItem, setSearchItem] = useState(''); const [ searchItem, setSearchItem ] = useState("");
const [ searchValue ] = useDebounce(searchItem, 500); const [ searchValue ] = useDebounce(searchItem, 500);
const [ error, setError ] = useState<0 | 1 | 2>(0); const [ error, setError ] = useState<0 | 1 | 2>(0);
useEffect(() => { useEffect(() =>
{
setData([]); setData([]);
setError(0); setError(0);
fetch(`${import.meta.env.VITE_API_URL}/leaderboard/station/?q=${searchValue}`).then(x => x.json()).then(x => { fetch(`${ import.meta.env.VITE_API_URL }/leaderboard/station/?q=${ searchValue }`).then(x => x.json()).then(x =>
{
setData(x.data.records); setData(x.data.records);
setError(x.data.records.length > 0 ? 1 : 2); setError(x.data.records.length > 0 ? 1 : 2);
}); });
}, [searchValue]) }, [ searchValue ]);
const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => { const handleInputChange = (e: ChangeEvent<HTMLInputElement>) =>
{
setSearchItem(e.target.value); setSearchItem(e.target.value);
}; };

32
packages/frontend/src/pages/leaderboard/TrainLeaderboard.tsx
View File

@ -1,31 +1,37 @@
import { TLeaderboardRecord } from '../../types/leaderboard.ts'; import { TLeaderboardRecord } from "../../types/leaderboard.ts";
import { ChangeEvent, useEffect, useState } from 'react'; import { ChangeEvent, useEffect, useState } from "react";
import { TrainTable } from '../../components/pages/leaderboard/TrainTable.tsx'; import { TrainTable } from "../../components/pages/leaderboard/TrainTable.tsx";
import { useDebounce } from 'use-debounce'; import { useDebounce } from "use-debounce";
import { Search } from '../../components/mini/util/Search.tsx'; import { Search } from "../../components/mini/util/Search.tsx";
export const TrainLeaderboard = () => { export const TrainLeaderboard = () =>
{
const [ data, setData ] = useState<TLeaderboardRecord[]>([]); const [ data, setData ] = useState<TLeaderboardRecord[]>([]);
useEffect(() => { useEffect(() =>
fetch(`${import.meta.env.VITE_API_URL}/leaderboard/train/`).then(x => x.json()).then(x => { {
fetch(`${ import.meta.env.VITE_API_URL }/leaderboard/train/`).then(x => x.json()).then(x =>
{
setData(x.data.records); setData(x.data.records);
}); });
}, []); }, []);
const [searchItem, setSearchItem] = useState(''); const [ searchItem, setSearchItem ] = useState("");
const [ searchValue ] = useDebounce(searchItem, 500); const [ searchValue ] = useDebounce(searchItem, 500);
const [ error, setError ] = useState<0 | 1 | 2>(0); const [ error, setError ] = useState<0 | 1 | 2>(0);
useEffect(() => { useEffect(() =>
{
setData([]); setData([]);
setError(0); setError(0);
fetch(`${import.meta.env.VITE_API_URL}/leaderboard/train/?q=${searchValue}`).then(x => x.json()).then(x => { fetch(`${ import.meta.env.VITE_API_URL }/leaderboard/train/?q=${ searchValue }`).then(x => x.json()).then(x =>
{
setData(x.data.records); setData(x.data.records);
setError(x.data.records.length > 0 ? 1 : 2); setError(x.data.records.length > 0 ? 1 : 2);
}); });
}, [searchValue]) }, [ searchValue ]);
const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => { const handleInputChange = (e: ChangeEvent<HTMLInputElement>) =>
{
setSearchItem(e.target.value); setSearchItem(e.target.value);
}; };

33
packages/frontend/src/pages/logs/StationLogs.tsx
View File

@ -1,29 +1,36 @@
import { ChangeEvent, useEffect, useState } from 'react'; import { ChangeEvent, useEffect, useState } from "react";
import { StationTable } from '../../components/pages/logs/StationTable.tsx'; import { StationTable } from "../../components/pages/logs/StationTable.tsx";
import { useDebounce } from 'use-debounce'; import { useDebounce } from "use-debounce";
import { TStationRecord } from '../../types/station.ts'; import { TStationRecord } from "../../types/station.ts";
import { Search } from '../../components/mini/util/Search.tsx'; import { Search } from "../../components/mini/util/Search.tsx";
export const StationLogs = () => {
export const StationLogs = () =>
{
const [ data, setData ] = useState<TStationRecord[]>([]); const [ data, setData ] = useState<TStationRecord[]>([]);
useEffect(() => { useEffect(() =>
fetch(`${import.meta.env.VITE_API_URL}/stations/`).then(x => x.json()).then(x => { {
fetch(`${ import.meta.env.VITE_API_URL }/stations/`).then(x => x.json()).then(x =>
{
setData(x.data.records); setData(x.data.records);
}); });
}, []); }, []);
const [ error, setError ] = useState<0 | 1 | 2>(0); const [ error, setError ] = useState<0 | 1 | 2>(0);
const [searchItem, setSearchItem] = useState(''); const [ searchItem, setSearchItem ] = useState("");
const [ searchValue ] = useDebounce(searchItem, 500); const [ searchValue ] = useDebounce(searchItem, 500);
useEffect(() => { useEffect(() =>
{
setData([]); setData([]);
setError(0); setError(0);
fetch(`${import.meta.env.VITE_API_URL}/stations/?q=${searchValue}`).then(x => x.json()).then(x => { fetch(`${ import.meta.env.VITE_API_URL }/stations/?q=${ searchValue }`).then(x => x.json()).then(x =>
{
setData(x.data.records); setData(x.data.records);
setError(x.data.records.length > 0 ? 1 : 2); setError(x.data.records.length > 0 ? 1 : 2);
}); });
}, [searchValue]) }, [ searchValue ]);
const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => { const handleInputChange = (e: ChangeEvent<HTMLInputElement>) =>
{
setSearchItem(e.target.value); setSearchItem(e.target.value);
}; };

32
packages/frontend/src/pages/logs/TrainLogs.tsx
View File

@ -1,30 +1,36 @@
import { ChangeEvent, useEffect, useState } from 'react'; import { ChangeEvent, useEffect, useState } from "react";
import { TTrainRecord } from '../../types/train.ts'; import { TTrainRecord } from "../../types/train.ts";
import { TrainTable } from '../../components/pages/logs/TrainTable.tsx'; import { TrainTable } from "../../components/pages/logs/TrainTable.tsx";
import { useDebounce } from 'use-debounce'; import { useDebounce } from "use-debounce";
import { Search } from '../../components/mini/util/Search.tsx'; import { Search } from "../../components/mini/util/Search.tsx";
export const TrainLogs = () => { export const TrainLogs = () =>
{
const [ data, setData ] = useState<TTrainRecord[]>([]); const [ data, setData ] = useState<TTrainRecord[]>([]);
useEffect(() => { useEffect(() =>
fetch(`${import.meta.env.VITE_API_URL}/trains/`).then(x => x.json()).then(x => { {
fetch(`${ import.meta.env.VITE_API_URL }/trains/`).then(x => x.json()).then(x =>
{
setData(x.data.records); setData(x.data.records);
}); });
}, []); }, []);
const [ error, setError ] = useState<0 | 1 | 2>(0); const [ error, setError ] = useState<0 | 1 | 2>(0);
const [searchItem, setSearchItem] = useState(''); const [ searchItem, setSearchItem ] = useState("");
const [ searchValue ] = useDebounce(searchItem, 500); const [ searchValue ] = useDebounce(searchItem, 500);
useEffect(() => { useEffect(() =>
{
setData([]); setData([]);
setError(0); setError(0);
fetch(`${import.meta.env.VITE_API_URL}/trains/?q=${searchValue}`).then(x => x.json()).then(x => { fetch(`${ import.meta.env.VITE_API_URL }/trains/?q=${ searchValue }`).then(x => x.json()).then(x =>
{
setData(x.data.records); setData(x.data.records);
setError(x.data.records.length > 0 ? 1 : 2); setError(x.data.records.length > 0 ? 1 : 2);
}); });
}, [searchValue]) }, [ searchValue ]);
const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => { const handleInputChange = (e: ChangeEvent<HTMLInputElement>) =>
{
setSearchItem(e.target.value); setSearchItem(e.target.value);
}; };

36
packages/frontend/src/pages/profile/Profile.tsx
View File

@ -1,21 +1,25 @@
import { useEffect, useState } from 'react'; import { useEffect, useState } from "react";
import { useParams } from 'react-router-dom'; import { useParams } from "react-router-dom";
import { TProfileData, TProfileResponse } from '../../types/profile.ts'; import { TProfileData, TProfileResponse } from "../../types/profile.ts";
import { ContentLoader } from '../../components/mini/loaders/ContentLoader.tsx'; import { ContentLoader } from "../../components/mini/loaders/ContentLoader.tsx";
import { WarningAlert } from '../../components/mini/alerts/Warning.tsx'; import { WarningAlert } from "../../components/mini/alerts/Warning.tsx";
import { ProfileCard } from '../../components/pages/profile/Profile.tsx'; import { ProfileCard } from "../../components/pages/profile/Profile.tsx";
import { useTranslation } from 'react-i18next'; import { useTranslation } from "react-i18next";
export const Profile = () => { export const Profile = () =>
{
const { id } = useParams(); const { id } = useParams();
const [ error, setError ] = useState<0 | 1 | 2 | 3>(0); const [ error, setError ] = useState<0 | 1 | 2 | 3>(0);
const [ data, setData ] = useState<TProfileData>(undefined!); const [ data, setData ] = useState<TProfileData>(undefined!);
useEffect(() => { useEffect(() =>
fetch(`${import.meta.env.VITE_API_URL}/profiles/${id}`).then(x => x.json()).then((data: TProfileResponse) => { {
switch (data.code) { fetch(`${ import.meta.env.VITE_API_URL }/profiles/${ id }`).then(x => x.json()).then((data: TProfileResponse) =>
{
switch (data.code)
{
case 404: case 404:
setError(2); setError(2);
break; break;
@ -28,8 +32,8 @@ export const Profile = () => {
console.log(data.data.steam); console.log(data.data.steam);
break; break;
} }
}) });
}, []) }, []);
const { t } = useTranslation(); const { t } = useTranslation();
@ -38,9 +42,11 @@ export const Profile = () => {
{/* LOADING */ } {/* LOADING */ }
{ error === 0 && <ContentLoader/> } { error === 0 && <ContentLoader/> }
{/* NOT FOUND */ } {/* NOT FOUND */ }
{error === 2 && <WarningAlert title={t("profile.errors.notfound.title")} description={t("profile.errors.notfound.description")} />} { error === 2 && <WarningAlert title={ t("profile.errors.notfound.title") }
description={ t("profile.errors.notfound.description") }/> }
{/* BLACKLISTED PROFILE */ } {/* BLACKLISTED PROFILE */ }
{error === 3 && <WarningAlert title={t("profile.errors.blacklist.title")} description={t("profile.errors.blacklist.description")} />} { error === 3 && <WarningAlert title={ t("profile.errors.blacklist.title") }
description={ t("profile.errors.blacklist.description") }/> }
{/* SUCCESS */ } {/* SUCCESS */ }
{ error === 1 && <ProfileCard data={ data }/> } { error === 1 && <ProfileCard data={ data }/> }
</> </>

18
packages/frontend/src/react-app-env.d.ts vendored
View File

@ -1,15 +1,17 @@
/// <reference types="vite/client" /> /// <reference types="vite/client" />
declare module '*.png'; declare module "*.png";
declare module '*.svg'; declare module "*.svg";
declare module '*.jpeg'; declare module "*.jpeg";
declare module '*.jpg'; declare module "*.jpg";
interface ImportMetaEnv { interface ImportMetaEnv
readonly VITE_API_URL: string {
readonly VITE_API_URL: string;
} }
interface ImportMeta { interface ImportMeta
readonly env: ImportMetaEnv {
readonly env: ImportMetaEnv;
} }

15
packages/frontend/src/types/leaderboard.ts
View File

@ -1,14 +1,17 @@
export interface TLeaderboardResponse { export interface TLeaderboardResponse
{
success: boolean; success: boolean;
data: TLeaderboardData; data: TLeaderboardData;
code: number; code: number;
} }
export interface TLeaderboardData { export interface TLeaderboardData
{
records: TLeaderboardRecord[]; records: TLeaderboardRecord[];
} }
export interface TLeaderboardRecord { export interface TLeaderboardRecord
{
id: string; id: string;
steam: string; steam: string;
steamName: string; steamName: string;
@ -20,11 +23,13 @@ export interface TLeaderboardRecord {
trainStats?: { [ key: string ]: TLeaderboardTrainStat }; trainStats?: { [ key: string ]: TLeaderboardTrainStat };
} }
export interface TLeaderboardDispatcherStat { export interface TLeaderboardDispatcherStat
{
time: number; time: number;
} }
export interface TLeaderboardTrainStat { export interface TLeaderboardTrainStat
{
distance: number; distance: number;
score: number; score: number;
time: number; time: number;

30
packages/frontend/src/types/profile.ts
View File

@ -1,24 +1,28 @@
export type TProfileResponse = TProfileErrorResponse | TProfileSuccessResponse; export type TProfileResponse = TProfileErrorResponse | TProfileSuccessResponse;
export interface TProfileErrorResponse { export interface TProfileErrorResponse
{
success: false; success: false;
data: string; data: string;
code: 404 | 403; code: 404 | 403;
} }
export interface TProfileSuccessResponse { export interface TProfileSuccessResponse
{
success: true; success: true;
data: TProfileData; data: TProfileData;
code: 200; code: 200;
} }
export interface TProfileData { export interface TProfileData
{
player: TProfilePlayer; player: TProfilePlayer;
steam: TProfileSteam; steam: TProfileSteam;
steamStats: TProfileSteamStats; steamStats: TProfileSteamStats;
} }
export interface TProfilePlayer { export interface TProfilePlayer
{
id: string; id: string;
steam: string; steam: string;
steamName: string; steamName: string;
@ -30,34 +34,40 @@ export interface TProfilePlayer {
trainPoints: number; trainPoints: number;
} }
export interface TProfileDispatcherStatsRecord { export interface TProfileDispatcherStatsRecord
{
time: number; time: number;
} }
export interface TProfileTrainStatsRecord { export interface TProfileTrainStatsRecord
{
distance: number; distance: number;
score: number; score: number;
time: number; time: number;
} }
export interface TProfileSteam { export interface TProfileSteam
{
personname: string; personname: string;
avatarfull: string; avatarfull: string;
} }
export interface TProfileSteamStats { export interface TProfileSteamStats
{
steamID: string; steamID: string;
gameName: string; gameName: string;
stats: TProfileSteamStatsAchievementStat[]; stats: TProfileSteamStatsAchievementStat[];
achievements: TProfileSteamStatsAchievement[]; achievements: TProfileSteamStatsAchievement[];
} }
export interface TProfileSteamStatsAchievement { export interface TProfileSteamStatsAchievement
{
name: string; name: string;
achieved: number; achieved: number;
} }
export interface TProfileSteamStatsAchievementStat { export interface TProfileSteamStatsAchievementStat
{
name: string; name: string;
value: number; value: number;
} }

9
packages/frontend/src/types/station.ts
View File

@ -1,14 +1,17 @@
export interface TStationResponse { export interface TStationResponse
{
success: boolean; success: boolean;
data: TStationData; data: TStationData;
code: number; code: number;
} }
export interface TStationData { export interface TStationData
{
records: TStationRecord[]; records: TStationRecord[];
} }
export interface TStationRecord { export interface TStationRecord
{
id: string; id: string;
userSteamId: string; userSteamId: string;
userUsername: string; userUsername: string;

12
packages/frontend/src/types/stats.ts
View File

@ -1,20 +1,24 @@
export interface TStatsResponse { export interface TStatsResponse
{
success: boolean; success: boolean;
data: TStatsData; data: TStatsData;
code: number; code: number;
} }
export interface TStatsData { export interface TStatsData
{
git: TStatsGit; git: TStatsGit;
stats: TStatsStats; stats: TStatsStats;
} }
export interface TStatsGit { export interface TStatsGit
{
commit?: string; commit?: string;
version?: string; version?: string;
} }
export interface TStatsStats { export interface TStatsStats
{
trains: number; trains: number;
dispatchers: number; dispatchers: number;
profiles: number; profiles: number;

9
packages/frontend/src/types/train.ts
View File

@ -1,14 +1,17 @@
export interface TTrainResponse { export interface TTrainResponse
{
success: boolean; success: boolean;
data: TTrainData; data: TTrainData;
code: number; code: number;
} }
export interface TTrainData { export interface TTrainData
{
records: TTrainRecord[]; records: TTrainRecord[];
} }
export interface TTrainRecord { export interface TTrainRecord
{
id: string; id: string;
trainNumber: string; trainNumber: string;
userSteamId: string; userSteamId: string;

416
packages/frontend/tailwind.config.cjs
View File

@ -1,254 +1,254 @@
const defaultTheme = require('tailwindcss/defaultTheme') const defaultTheme = require("tailwindcss/defaultTheme");
/** @type {import('tailwindcss').Config} */ /** @type {import("tailwindcss").Config} */
module.exports = { module.exports = {
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'], content: [ "./index.html", "./src/**/*.{js,ts,jsx,tsx}" ],
darkMode: 'class', darkMode: "class",
theme: { theme: {
fontFamily: { fontFamily: {
satoshi: ['Satoshi', 'sans-serif'], satoshi: [ "Satoshi", "sans-serif" ],
}, },
screens: { screens: {
'2xsm': '375px', "2xsm": "375px",
xsm: '425px', xsm: "425px",
'3xl': '2000px', "3xl": "2000px",
...defaultTheme.screens, ...defaultTheme.screens,
}, },
extend: { extend: {
colors: { colors: {
current: 'currentColor', current: "currentColor",
transparent: 'transparent', transparent: "transparent",
white: '#FFFFFF', white: "#FFFFFF",
black: '#1C2434', black: "#1C2434",
'black-2': '#010101', "black-2": "#010101",
body: '#64748B', body: "#64748B",
bodydark: '#AEB7C0', bodydark: "#AEB7C0",
bodydark1: '#DEE4EE', bodydark1: "#DEE4EE",
bodydark2: '#8A99AF', bodydark2: "#8A99AF",
primary: '#3C50E0', primary: "#3C50E0",
secondary: '#80CAEE', secondary: "#80CAEE",
stroke: '#E2E8F0', stroke: "#E2E8F0",
gray: '#EFF4FB', gray: "#EFF4FB",
graydark: '#333A48', graydark: "#333A48",
'gray-2': '#F7F9FC', "gray-2": "#F7F9FC",
'gray-3': '#FAFAFA', "gray-3": "#FAFAFA",
whiten: '#F1F5F9', whiten: "#F1F5F9",
whiter: '#F5F7FD', whiter: "#F5F7FD",
boxdark: '#24303F', boxdark: "#24303F",
'boxdark-2': '#1A222C', "boxdark-2": "#1A222C",
strokedark: '#2E3A47', strokedark: "#2E3A47",
'form-strokedark': '#3d4d60', "form-strokedark": "#3d4d60",
'form-input': '#1d2a39', "form-input": "#1d2a39",
'meta-1': '#DC3545', "meta-1": "#DC3545",
'meta-2': '#EFF2F7', "meta-2": "#EFF2F7",
'meta-3': '#10B981', "meta-3": "#10B981",
'meta-4': '#313D4A', "meta-4": "#313D4A",
'meta-5': '#259AE6', "meta-5": "#259AE6",
'meta-6': '#FFBA00', "meta-6": "#FFBA00",
'meta-7': '#FF6766', "meta-7": "#FF6766",
'meta-8': '#F0950C', "meta-8": "#F0950C",
'meta-9': '#E5E7EB', "meta-9": "#E5E7EB",
success: '#219653', success: "#219653",
danger: '#D34053', danger: "#D34053",
warning: '#FFA70B', warning: "#FFA70B",
}, },
fontSize: { fontSize: {
'title-xxl': ['44px', '55px'], "title-xxl": [ "44px", "55px" ],
'title-xl': ['36px', '45px'], "title-xl": [ "36px", "45px" ],
'title-xl2': ['33px', '45px'], "title-xl2": [ "33px", "45px" ],
'title-lg': ['28px', '35px'], "title-lg": [ "28px", "35px" ],
'title-md': ['24px', '30px'], "title-md": [ "24px", "30px" ],
'title-md2': ['26px', '30px'], "title-md2": [ "26px", "30px" ],
'title-sm': ['20px', '26px'], "title-sm": [ "20px", "26px" ],
'title-xsm': ['18px', '24px'], "title-xsm": [ "18px", "24px" ],
}, },
spacing: { spacing: {
4.5: '1.125rem', 4.5: "1.125rem",
5.5: '1.375rem', 5.5: "1.375rem",
6.5: '1.625rem', 6.5: "1.625rem",
7.5: '1.875rem', 7.5: "1.875rem",
8.5: '2.125rem', 8.5: "2.125rem",
9.5: '2.375rem', 9.5: "2.375rem",
10.5: '2.625rem', 10.5: "2.625rem",
11: '2.75rem', 11: "2.75rem",
11.5: '2.875rem', 11.5: "2.875rem",
12.5: '3.125rem', 12.5: "3.125rem",
13: '3.25rem', 13: "3.25rem",
13.5: '3.375rem', 13.5: "3.375rem",
14: '3.5rem', 14: "3.5rem",
14.5: '3.625rem', 14.5: "3.625rem",
15: '3.75rem', 15: "3.75rem",
15.5: '3.875rem', 15.5: "3.875rem",
16: '4rem', 16: "4rem",
16.5: '4.125rem', 16.5: "4.125rem",
17: '4.25rem', 17: "4.25rem",
17.5: '4.375rem', 17.5: "4.375rem",
18: '4.5rem', 18: "4.5rem",
18.5: '4.625rem', 18.5: "4.625rem",
19: '4.75rem', 19: "4.75rem",
19.5: '4.875rem', 19.5: "4.875rem",
21: '5.25rem', 21: "5.25rem",
21.5: '5.375rem', 21.5: "5.375rem",
22: '5.5rem', 22: "5.5rem",
22.5: '5.625rem', 22.5: "5.625rem",
24.5: '6.125rem', 24.5: "6.125rem",
25: '6.25rem', 25: "6.25rem",
25.5: '6.375rem', 25.5: "6.375rem",
26: '6.5rem', 26: "6.5rem",
27: '6.75rem', 27: "6.75rem",
27.5: '6.875rem', 27.5: "6.875rem",
29: '7.25rem', 29: "7.25rem",
29.5: '7.375rem', 29.5: "7.375rem",
30: '7.5rem', 30: "7.5rem",
31: '7.75rem', 31: "7.75rem",
32.5: '8.125rem', 32.5: "8.125rem",
34: '8.5rem', 34: "8.5rem",
34.5: '8.625rem', 34.5: "8.625rem",
35: '8.75rem', 35: "8.75rem",
36.5: '9.125rem', 36.5: "9.125rem",
37.5: '9.375rem', 37.5: "9.375rem",
39: '9.75rem', 39: "9.75rem",
39.5: '9.875rem', 39.5: "9.875rem",
40: '10rem', 40: "10rem",
42.5: '10.625rem', 42.5: "10.625rem",
44: '11rem', 44: "11rem",
45: '11.25rem', 45: "11.25rem",
46: '11.5rem', 46: "11.5rem",
47.5: '11.875rem', 47.5: "11.875rem",
49: '12.25rem', 49: "12.25rem",
50: '12.5rem', 50: "12.5rem",
52: '13rem', 52: "13rem",
52.5: '13.125rem', 52.5: "13.125rem",
54: '13.5rem', 54: "13.5rem",
54.5: '13.625rem', 54.5: "13.625rem",
55: '13.75rem', 55: "13.75rem",
55.5: '13.875rem', 55.5: "13.875rem",
59: '14.75rem', 59: "14.75rem",
60: '15rem', 60: "15rem",
62.5: '15.625rem', 62.5: "15.625rem",
65: '16.25rem', 65: "16.25rem",
67: '16.75rem', 67: "16.75rem",
67.5: '16.875rem', 67.5: "16.875rem",
70: '17.5rem', 70: "17.5rem",
72.5: '18.125rem', 72.5: "18.125rem",
73: '18.25rem', 73: "18.25rem",
75: '18.75rem', 75: "18.75rem",
90: '22.5rem', 90: "22.5rem",
94: '23.5rem', 94: "23.5rem",
95: '23.75rem', 95: "23.75rem",
100: '25rem', 100: "25rem",
115: '28.75rem', 115: "28.75rem",
125: '31.25rem', 125: "31.25rem",
132.5: '33.125rem', 132.5: "33.125rem",
150: '37.5rem', 150: "37.5rem",
171.5: '42.875rem', 171.5: "42.875rem",
180: '45rem', 180: "45rem",
187.5: '46.875rem', 187.5: "46.875rem",
203: '50.75rem', 203: "50.75rem",
230: '57.5rem', 230: "57.5rem",
242.5: '60.625rem', 242.5: "60.625rem",
}, },
maxWidth: { maxWidth: {
2.5: '0.625rem', 2.5: "0.625rem",
3: '0.75rem', 3: "0.75rem",
4: '1rem', 4: "1rem",
11: '2.75rem', 11: "2.75rem",
13: '3.25rem', 13: "3.25rem",
14: '3.5rem', 14: "3.5rem",
15: '3.75rem', 15: "3.75rem",
22.5: '5.625rem', 22.5: "5.625rem",
25: '6.25rem', 25: "6.25rem",
30: '7.5rem', 30: "7.5rem",
34: '8.5rem', 34: "8.5rem",
35: '8.75rem', 35: "8.75rem",
40: '10rem', 40: "10rem",
42.5: '10.625rem', 42.5: "10.625rem",
44: '11rem', 44: "11rem",
45: '11.25rem', 45: "11.25rem",
70: '17.5rem', 70: "17.5rem",
90: '22.5rem', 90: "22.5rem",
94: '23.5rem', 94: "23.5rem",
125: '31.25rem', 125: "31.25rem",
132.5: '33.125rem', 132.5: "33.125rem",
142.5: '35.625rem', 142.5: "35.625rem",
150: '37.5rem', 150: "37.5rem",
180: '45rem', 180: "45rem",
203: '50.75rem', 203: "50.75rem",
230: '57.5rem', 230: "57.5rem",
242.5: '60.625rem', 242.5: "60.625rem",
270: '67.5rem', 270: "67.5rem",
280: '70rem', 280: "70rem",
292.5: '73.125rem', 292.5: "73.125rem",
}, },
maxHeight: { maxHeight: {
35: '8.75rem', 35: "8.75rem",
70: '17.5rem', 70: "17.5rem",
90: '22.5rem', 90: "22.5rem",
550: '34.375rem', 550: "34.375rem",
300: '18.75rem', 300: "18.75rem",
}, },
minWidth: { minWidth: {
22.5: '5.625rem', 22.5: "5.625rem",
42.5: '10.625rem', 42.5: "10.625rem",
47.5: '11.875rem', 47.5: "11.875rem",
75: '18.75rem', 75: "18.75rem",
}, },
zIndex: { zIndex: {
999999: '999999', 999999: "999999",
99999: '99999', 99999: "99999",
9999: '9999', 9999: "9999",
999: '999', 999: "999",
99: '99', 99: "99",
9: '9', 9: "9",
1: '1', 1: "1",
}, },
opacity: { opacity: {
65: '.65', 65: ".65",
}, },
backgroundImage: { backgroundImage: {
video: "url('../images/video/video.png')", video: "url('../images/video/video.png')",
}, },
content: { content: {
'icon-copy': 'url("../images/icon/icon-copy-alt.svg")', "icon-copy": "url(\"../images/icon/icon-copy-alt.svg\")",
}, },
transitionProperty: { width: 'width', stroke: 'stroke' }, transitionProperty: { width: "width", stroke: "stroke" },
borderWidth: { borderWidth: {
6: '6px', 6: "6px",
}, },
boxShadow: { boxShadow: {
default: '0px 8px 13px -3px rgba(0, 0, 0, 0.07)', default: "0px 8px 13px -3px rgba(0, 0, 0, 0.07)",
card: '0px 1px 3px rgba(0, 0, 0, 0.12)', card: "0px 1px 3px rgba(0, 0, 0, 0.12)",
'card-2': '0px 1px 2px rgba(0, 0, 0, 0.05)', "card-2": "0px 1px 2px rgba(0, 0, 0, 0.05)",
switcher: switcher:
'0px 2px 4px rgba(0, 0, 0, 0.2), inset 0px 2px 2px #FFFFFF, inset 0px -1px 1px rgba(0, 0, 0, 0.1)', "0px 2px 4px rgba(0, 0, 0, 0.2), inset 0px 2px 2px #FFFFFF, inset 0px -1px 1px rgba(0, 0, 0, 0.1)",
'switch-1': '0px 0px 5px rgba(0, 0, 0, 0.15)', "switch-1": "0px 0px 5px rgba(0, 0, 0, 0.15)",
1: '0px 1px 3px rgba(0, 0, 0, 0.08)', 1: "0px 1px 3px rgba(0, 0, 0, 0.08)",
2: '0px 1px 4px rgba(0, 0, 0, 0.12)', 2: "0px 1px 4px rgba(0, 0, 0, 0.12)",
3: '0px 1px 5px rgba(0, 0, 0, 0.14)', 3: "0px 1px 5px rgba(0, 0, 0, 0.14)",
4: '0px 4px 10px rgba(0, 0, 0, 0.12)', 4: "0px 4px 10px rgba(0, 0, 0, 0.12)",
5: '0px 1px 1px rgba(0, 0, 0, 0.15)', 5: "0px 1px 1px rgba(0, 0, 0, 0.15)",
6: '0px 3px 15px rgba(0, 0, 0, 0.1)', 6: "0px 3px 15px rgba(0, 0, 0, 0.1)",
7: '-5px 0 0 #313D4A, 5px 0 0 #313D4A', 7: "-5px 0 0 #313D4A, 5px 0 0 #313D4A",
8: '1px 0 0 #313D4A, -1px 0 0 #313D4A, 0 1px 0 #313D4A, 0 -1px 0 #313D4A, 0 3px 13px rgb(0 0 0 / 8%)', 8: "1px 0 0 #313D4A, -1px 0 0 #313D4A, 0 1px 0 #313D4A, 0 -1px 0 #313D4A, 0 3px 13px rgb(0 0 0 / 8%)",
}, },
dropShadow: { dropShadow: {
1: '0px 1px 0px #E2E8F0', 1: "0px 1px 0px #E2E8F0",
2: '0px 1px 4px rgba(0, 0, 0, 0.12)', 2: "0px 1px 4px rgba(0, 0, 0, 0.12)",
}, },
keyframes: { keyframes: {
rotating: { rotating: {
'0%, 100%': { transform: 'rotate(360deg)' }, "0%, 100%": { transform: "rotate(360deg)" },
'50%': { transform: 'rotate(0deg)' }, "50%": { transform: "rotate(0deg)" },
}, },
}, },
animation: { animation: {
'ping-once': 'ping 5s cubic-bezier(0, 0, 0.2, 1)', "ping-once": "ping 5s cubic-bezier(0, 0, 0.2, 1)",
rotating: 'rotating 30s linear infinite', rotating: "rotating 30s linear infinite",
'spin-1.5': 'spin 1.5s linear infinite', "spin-1.5": "spin 1.5s linear infinite",
'spin-2': 'spin 2s linear infinite', "spin-2": "spin 2s linear infinite",
'spin-3': 'spin 3s linear infinite', "spin-3": "spin 3s linear infinite",
}, },
}, },
}, },
plugins: [], plugins: [],
} };

13
packages/frontend/tsconfig.json
View File

@ -1,10 +1,13 @@
{ {
"compilerOptions": { "compilerOptions": {
"target": "ESNext", "target": "ESNext",
"lib": ["DOM", "DOM.Iterable", "ESNext"], "lib": [
"DOM",
"DOM.Iterable",
"ESNext"
],
"module": "ESNext", "module": "ESNext",
"skipLibCheck": true, "skipLibCheck": true,
/* Bundler mode */ /* Bundler mode */
"moduleResolution": "bundler", "moduleResolution": "bundler",
"allowImportingTsExtensions": true, "allowImportingTsExtensions": true,
@ -12,12 +15,14 @@
"isolatedModules": true, "isolatedModules": true,
"noEmit": true, "noEmit": true,
"jsx": "react-jsx", "jsx": "react-jsx",
/* Linting */ /* Linting */
"strict": true, "strict": true,
"noUnusedLocals": true, "noUnusedLocals": true,
"noUnusedParameters": true, "noUnusedParameters": true,
"noFallthroughCasesInSwitch": true "noFallthroughCasesInSwitch": true
}, },
"include": ["src", "src/lib.d.ts"], "include": [
"src",
"src/lib.d.ts"
]
} }

6
packages/frontend/vite.config.js
View File

@ -1,7 +1,7 @@
import { defineConfig } from 'vite' import { defineConfig } from "vite";
import react from '@vitejs/plugin-react' import react from "@vitejs/plugin-react";
// https://vitejs.dev/config/ // https://vitejs.dev/config/
export default defineConfig({ export default defineConfig({
plugins: [ react() ], plugins: [ react() ],
}) });