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"
}

18
packages/frontend/index.html
View File

@ -1,13 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<head>
<meta charset="UTF-8"/>
<link rel="icon" type="image/svg+xml" href="/favicon.ico"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>TailAdmin - Tailwind CSS Admin Dashboard Template</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>

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

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

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

@ -1,35 +1,38 @@
import { useEffect, useState } from 'react';
import { Route, Routes, useLocation } from 'react-router-dom';
import { useEffect, useState } from "react";
import { Route, Routes, useLocation } from "react-router-dom";
import { Loader } from './components/mini/loaders/PageLoader.tsx';
import { PageTitle } from './components/mini/util/PageTitle.tsx';
import Chart from './old/Chart.tsx';
import { Home } from './pages/Home';
import Settings from './old/Settings.tsx';
import Alerts from './old/UiElements/Alerts.tsx';
import Buttons from './old/UiElements/Buttons.tsx';
import DefaultLayout from './layout/DefaultLayout';
import { Loader } from "./components/mini/loaders/PageLoader.tsx";
import { PageTitle } from "./components/mini/util/PageTitle.tsx";
import Chart from "./old/Chart.tsx";
import { Home } from "./pages/Home";
import Settings from "./old/Settings.tsx";
import Alerts from "./old/UiElements/Alerts.tsx";
import Buttons from "./old/UiElements/Buttons.tsx";
import DefaultLayout from "./layout/DefaultLayout";
import "./i18n";
import { TrainLeaderboard } from './pages/leaderboard/TrainLeaderboard.tsx';
import { StationLeaderboard } from './pages/leaderboard/StationsLeaderboard.tsx';
import { TrainLogs } from './pages/logs/TrainLogs.tsx';
import { StationLogs } from './pages/logs/StationLogs.tsx';
import { Profile } from './pages/profile/Profile.tsx';
import { TrainLeaderboard } from "./pages/leaderboard/TrainLeaderboard.tsx";
import { StationLeaderboard } from "./pages/leaderboard/StationsLeaderboard.tsx";
import { TrainLogs } from "./pages/logs/TrainLogs.tsx";
import { StationLogs } from "./pages/logs/StationLogs.tsx";
import { Profile } from "./pages/profile/Profile.tsx";
function App() {
const [loading, setLoading] = useState<boolean>(true);
function App()
{
const [ loading, setLoading ] = useState<boolean>(true);
const { pathname } = useLocation();
useEffect(() => {
useEffect(() =>
{
window.scrollTo(0, 0);
}, [pathname]);
}, [ pathname ]);
useEffect(() => {
useEffect(() =>
{
setTimeout(() => setLoading(false), 400);
}, []);
return loading ? (
<Loader />
<Loader/>
) : (
<DefaultLayout>
<Routes>
@ -37,8 +40,8 @@ function App() {
index
element={
<>
<PageTitle title="simrail.alekswilc.dev | Home" />
<Home />
<PageTitle title="simrail.alekswilc.dev | Home"/>
<Home/>
</>
}
/>
@ -46,8 +49,8 @@ function App() {
path="/leaderboard/trains"
element={
<>
<PageTitle title="simrail.alekswilc.dev | Train Leaderboard" />
<TrainLeaderboard />
<PageTitle title="simrail.alekswilc.dev | Train Leaderboard"/>
<TrainLeaderboard/>
</>
}
/>
@ -56,8 +59,8 @@ function App() {
path="/logs/trains"
element={
<>
<PageTitle title="simrail.alekswilc.dev | Train logs" />
<TrainLogs />
<PageTitle title="simrail.alekswilc.dev | Train logs"/>
<TrainLogs/>
</>
}
/>
@ -66,8 +69,8 @@ function App() {
path="/logs/stations"
element={
<>
<PageTitle title="simrail.alekswilc.dev | Station logs" />
<StationLogs />
<PageTitle title="simrail.alekswilc.dev | Station logs"/>
<StationLogs/>
</>
}
/>
@ -76,8 +79,8 @@ function App() {
path="/leaderboard/stations"
element={
<>
<PageTitle title="simrail.alekswilc.dev | Stations Leaderboard" />
<StationLeaderboard />
<PageTitle title="simrail.alekswilc.dev | Stations Leaderboard"/>
<StationLeaderboard/>
</>
}
/>
@ -86,8 +89,8 @@ function App() {
path="/profile/:id"
element={
<>
<PageTitle title="simrail.alekswilc.dev | Stations Leaderboard" />
<Profile />
<PageTitle title="simrail.alekswilc.dev | Stations Leaderboard"/>
<Profile/>
</>
}
/>
@ -96,8 +99,8 @@ function App() {
path="/settings"
element={
<>
<PageTitle title="Settings | TailAdmin - Tailwind CSS Admin Dashboard Template" />
<Settings />
<PageTitle title="Settings | TailAdmin - Tailwind CSS Admin Dashboard Template"/>
<Settings/>
</>
}
/>
@ -105,8 +108,8 @@ function App() {
path="/chart"
element={
<>
<PageTitle title="Basic Chart | TailAdmin - Tailwind CSS Admin Dashboard Template" />
<Chart />
<PageTitle title="Basic Chart | TailAdmin - Tailwind CSS Admin Dashboard Template"/>
<Chart/>
</>
}
/>
@ -114,8 +117,8 @@ function App() {
path="/ui/alerts"
element={
<>
<PageTitle title="Alerts | TailAdmin - Tailwind CSS Admin Dashboard Template" />
<Alerts />
<PageTitle title="Alerts | TailAdmin - Tailwind CSS Admin Dashboard Template"/>
<Alerts/>
</>
}
/>
@ -123,8 +126,8 @@ function App() {
path="/ui/buttons"
element={
<>
<PageTitle title="Buttons | TailAdmin - Tailwind CSS Admin Dashboard Template" />
<Buttons />
<PageTitle title="Buttons | TailAdmin - Tailwind CSS Admin Dashboard Template"/>
<Buttons/>
</>
}
/>

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

@ -1,21 +1,21 @@
export const ErrorAlert = ({ title, description }: { title: string, description: string }) =>
<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'>
<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>'>
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]">
<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="<http://www.w3.org/2000/svg>">
<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'
fill='#ffffff' stroke='#ffffff'></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"
fill="#ffffff" stroke="#ffffff"></path>
</svg>
</div>
<div className='w-full'>
<h5 className='mb-3 font-semibold text-[#B45454]'>
{title}
<div className="w-full">
<h5 className="mb-3 font-semibold text-[#B45454]">
{ title }
</h5>
<ul>
<li className='leading-relaxed text-[#CD5D5D]'>
{description}
<li className="leading-relaxed text-[#CD5D5D]">
{ description }
</li>
</ul>
</div>
</div>
</div>;

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

@ -1,19 +1,19 @@
export const SuccessAlert = ({ title, description }: { title: string, description: string }) =>
<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'>
<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>'>
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]">
<svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="<http://www.w3.org/2000/svg>">
<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'
fill='white' stroke='white'></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"
fill="white" stroke="white"></path>
</svg>
</div>
<div className='w-full'>
<h5 className='mb-3 text-lg font-semibold text-black dark:text-[#34D399] '>
{title}
<div className="w-full">
<h5 className="mb-3 text-lg font-semibold text-black dark:text-[#34D399] ">
{ title }
</h5>
<p className='text-base leading-relaxed text-body'>
{description}
<p className="text-base leading-relaxed text-body">
{ description }
</p>
</div>
</div>
</div>;

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

@ -1,19 +1,19 @@
export const WarningAlert = ({ title, description }: { title: string, description: string }) =>
<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'>
<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>'>
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">
<svg width="19" height="16" viewBox="0 0 19 16" fill="none" xmlns="<http://www.w3.org/2000/svg>">
<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'
fill='#FBBF24'></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"
fill="#FBBF24"></path>
</svg>
</div>
<div className='w-full'>
<h5 className='mb-3 text-lg font-semibold text-[#9D5425]'>
{title}
<div className="w-full">
<h5 className="mb-3 text-lg font-semibold text-[#9D5425]">
{ title }
</h5>
<p className='leading-relaxed text-[#D0915C]'>
{description}
<p className="leading-relaxed text-[#D0915C]">
{ description }
</p>
</div>
</div>
</div>;

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

@ -1,28 +1,31 @@
import useColorMode from '../../../hooks/useColorMode';
import useColorMode from "../../../hooks/useColorMode";
const DarkModeSwitcher = () => {
const [colorMode, setColorMode] = useColorMode();
const DarkModeSwitcher = () =>
{
const [ colorMode, setColorMode ] = useColorMode();
return (
<li>
<label
className={`relative m-0 block h-7.5 w-14 rounded-full ${
colorMode === 'dark' ? 'bg-primary' : 'bg-stroke'
}`}
className={ `relative m-0 block h-7.5 w-14 rounded-full ${
colorMode === "dark" ? "bg-primary" : "bg-stroke"
}` }
>
<input
type="checkbox"
onChange={() => {
if (typeof setColorMode === 'function') {
setColorMode(colorMode === 'light' ? 'dark' : 'light');
onChange={ () =>
{
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"
/>
<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 ${
colorMode === 'dark' && '!right-[3px] !translate-x-full'
}`}
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"
}` }
>
<span className="dark:hidden">
<svg

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

@ -1,55 +1,57 @@
import DarkModeSwitcher from './DarkModeSwitcher.tsx';
import DarkModeSwitcher from "./DarkModeSwitcher.tsx";
const Header = (props: {
sidebarOpen: string | boolean | undefined;
setSidebarOpen: (arg0: boolean) => void;
}) => {
}) =>
{
return (
<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 items-center gap-2 sm:gap-4 lg:hidden">
{/* <!-- Hamburger Toggle BTN --> */}
{/* <!-- Hamburger Toggle BTN --> */ }
<button
aria-controls="sidebar"
onClick={(e) => {
onClick={ (e) =>
{
e.stopPropagation();
props.setSidebarOpen(!props.sidebarOpen);
}}
} }
className="z-99999 block rounded-sm border border-stroke bg-white p-1.5 shadow-sm dark:border-strokedark dark:bg-boxdark lg:hidden"
>
<span className="relative block h-5.5 w-5.5 cursor-pointer">
<span className="du-block absolute right-0 h-full w-full">
<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 ${
!props.sidebarOpen && '!w-full delay-300'
}`}
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"
}` }
></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 ${
!props.sidebarOpen && 'delay-400 !w-full'
}`}
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"
}` }
></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 ${
!props.sidebarOpen && '!w-full delay-500'
}`}
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"
}` }
></span>
</span>
<span className="absolute right-0 h-full w-full rotate-45">
<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 ${
!props.sidebarOpen && '!h-0 !delay-[0]'
}`}
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]"
}` }
></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 ${
!props.sidebarOpen && '!h-0 !delay-200'
}`}
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"
}` }
></span>
</span>
</span>
</button>
{/* <!-- Hamburger Toggle BTN --> */}
{/* <!-- Hamburger Toggle BTN --> */ }
</div>
@ -57,10 +59,10 @@ const Header = (props: {
<div className="flex items-center gap-3 2xsm:gap-7">
<ul className="flex items-center gap-2 2xsm:gap-4">
{/* <!-- Dark Mode Toggler --> */}
<DarkModeSwitcher />
{/* <!-- Dark Mode Toggler --> */}
{/* LanguageSwitcher */}
{/* <!-- Dark Mode Toggler --> */ }
<DarkModeSwitcher/>
{/* <!-- Dark Mode Toggler --> */ }
{/* LanguageSwitcher */ }
</ul>
</div>

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

@ -1,35 +1,41 @@
import { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
export const LoadError = () => {
export const LoadError = () =>
{
const { t } = useTranslation();
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'>
<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>'>
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]">
<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="<http://www.w3.org/2000/svg>">
<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'
fill='#ffffff' stroke='#ffffff'></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"
fill="#ffffff" stroke="#ffffff"></path>
</svg>
</div>
<div className='w-full'>
<h5 className='mb-3 font-semibold text-[#B45454]'>
{t("contentloader.error.header")}
<div className="w-full">
<h5 className="mb-3 font-semibold text-[#B45454]">
{ t("contentloader.error.header") }
</h5>
<ul>
<li className='leading-relaxed text-[#CD5D5D]'>
{t("contentloader.error.description")}
<li className="leading-relaxed text-[#CD5D5D]">
{ t("contentloader.error.description") }
</li>
<li className='leading-relaxed text-[#CD5D5D]'>
<li className="leading-relaxed text-[#CD5D5D]">
<div className="pt-4">
{/* TODO: add git issue params */}
{/* TODO: add git issue params */ }
<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>
@ -38,12 +44,15 @@ export const LoadError = () => {
</ul>
</div>
</div>;
}
};
export const ContentLoader = () => {
const [error, setError] = useState(false);
useEffect(() => {
new Promise(res => setTimeout(res, 5000)).then(() => {
export const ContentLoader = () =>
{
const [ error, setError ] = useState(false);
useEffect(() =>
{
new Promise(res => setTimeout(res, 5000)).then(() =>
{
setError(true);
});
@ -52,9 +61,11 @@ export const ContentLoader = () => {
return (
<>
{error ? <LoadError /> : <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>}
{ error ? <LoadError/> : <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> }
</>
);
};

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

@ -1,7 +1,9 @@
export const Loader = () => {
export const Loader = () =>
{
return (
<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>
);
};

15
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;
activeCondition: boolean;
}
@ -8,14 +9,16 @@ interface SidebarLinkGroupProps {
const SidebarLinkGroup = ({
children,
activeCondition,
}: SidebarLinkGroupProps) => {
const [open, setOpen] = useState<boolean>(activeCondition);
}: SidebarLinkGroupProps) =>
{
const [ open, setOpen ] = useState<boolean>(activeCondition);
const handleClick = () => {
const handleClick = () =>
{
setOpen(!open);
};
return <li>{children(handleClick, open)}</li>;
return <li>{ children(handleClick, open) }</li>;
};
export default SidebarLinkGroup;

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

@ -1,76 +1,94 @@
import React, { useEffect, useRef, useState } from 'react';
import { NavLink, useLocation } from 'react-router-dom';
import SidebarLinkGroup from './SidebarLinkGroup.tsx';
import { useTranslation } from 'react-i18next';
import React, { useEffect, useRef, useState } from "react";
import { NavLink, useLocation } from "react-router-dom";
import SidebarLinkGroup from "./SidebarLinkGroup.tsx";
import { useTranslation } from "react-i18next";
interface SidebarProps {
interface SidebarProps
{
sidebarOpen: boolean;
setSidebarOpen: (arg: boolean) => void;
}
const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) =>
{
const location = useLocation();
const { pathname } = location;
const trigger = useRef<any>(null);
const sidebar = useRef<any>(null);
const storedSidebarExpanded = localStorage.getItem('sidebar-expanded');
const [sidebarExpanded, setSidebarExpanded] = useState(
storedSidebarExpanded === null ? false : storedSidebarExpanded === 'true'
const storedSidebarExpanded = localStorage.getItem("sidebar-expanded");
const [ sidebarExpanded, setSidebarExpanded ] = useState(
storedSidebarExpanded === null ? false : storedSidebarExpanded === "true",
);
const { t } = useTranslation();
// close on click outside
useEffect(() => {
const clickHandler = ({ target }: MouseEvent) => {
if (!sidebar.current || !trigger.current) return;
useEffect(() =>
{
const clickHandler = ({ target }: MouseEvent) =>
{
if (!sidebar.current || !trigger.current)
{
return;
}
if (
!sidebarOpen ||
sidebar.current.contains(target) ||
trigger.current.contains(target)
)
{
return;
}
setSidebarOpen(false);
};
document.addEventListener('click', clickHandler);
return () => document.removeEventListener('click', clickHandler);
document.addEventListener("click", clickHandler);
return () => document.removeEventListener("click", clickHandler);
});
// close if the esc key is pressed
useEffect(() => {
const keyHandler = ({ keyCode }: KeyboardEvent) => {
if (!sidebarOpen || keyCode !== 27) return;
useEffect(() =>
{
const keyHandler = ({ keyCode }: KeyboardEvent) =>
{
if (!sidebarOpen || keyCode !== 27)
{
return;
}
setSidebarOpen(false);
};
document.addEventListener('keydown', keyHandler);
return () => document.removeEventListener('keydown', keyHandler);
document.addEventListener("keydown", keyHandler);
return () => document.removeEventListener("keydown", keyHandler);
});
useEffect(() => {
localStorage.setItem('sidebar-expanded', sidebarExpanded.toString());
if (sidebarExpanded) {
document.querySelector('body')?.classList.add('sidebar-expanded');
} else {
document.querySelector('body')?.classList.remove('sidebar-expanded');
useEffect(() =>
{
localStorage.setItem("sidebar-expanded", sidebarExpanded.toString());
if (sidebarExpanded)
{
document.querySelector("body")?.classList.add("sidebar-expanded");
}
}, [sidebarExpanded]);
else
{
document.querySelector("body")?.classList.remove("sidebar-expanded");
}
}, [ sidebarExpanded ]);
return (
<aside
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 ${
sidebarOpen ? 'translate-x-0' : '-translate-x-full'
}`}
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 ${
sidebarOpen ? "translate-x-0" : "-translate-x-full"
}` }
>
{/* <!-- SIDEBAR HEADER --> */}
{/* <!-- SIDEBAR HEADER --> */ }
<div className="flex items-center justify-between gap-2 px-6 py-5.5 lg:py-6.5">
<button
ref={trigger}
onClick={() => setSidebarOpen(!sidebarOpen)}
ref={ trigger }
onClick={ () => setSidebarOpen(!sidebarOpen) }
aria-controls="sidebar"
aria-expanded={sidebarOpen}
aria-expanded={ sidebarOpen }
className="block lg:hidden"
>
<svg
@ -88,12 +106,12 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
</svg>
</button>
</div>
{/* <!-- SIDEBAR HEADER --> */}
{/* <!-- SIDEBAR HEADER --> */ }
<div className="no-scrollbar flex flex-col overflow-y-auto duration-300 ease-linear">
{/* <!-- Sidebar Menu --> */}
{/* <!-- Sidebar Menu --> */ }
<nav className="mt-5 py-4 px-4 lg:mt-9 lg:px-6">
{/* <!-- Menu Group --> */}
{/* <!-- Menu Group --> */ }
<div>
@ -101,44 +119,46 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
<li>
<NavLink
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 ${
pathname === '/' &&
'bg-graydark dark: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 === "/" &&
"bg-graydark dark:bg-meta-4"
}` }
>
{t('pages.home')}
{ t("pages.home") }
</NavLink>
</li>
<SidebarLinkGroup
activeCondition={
pathname === '/logs' || pathname.includes('logs')
pathname === "/logs" || pathname.includes("logs")
}
>
{(handleClick, open) => {
{ (handleClick, open) =>
{
return (
<React.Fragment>
<NavLink
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 ${
(pathname === '/logs' ||
pathname.includes('logs')) &&
'bg-graydark dark:bg-meta-4'
}`}
onClick={(e) => {
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.includes("logs")) &&
"bg-graydark dark:bg-meta-4"
}` }
onClick={ (e) =>
{
e.preventDefault();
sidebarExpanded
? handleClick()
: setSidebarExpanded(true);
}}
} }
>
{t('pages.logs')}
{ t("pages.logs") }
<svg
className={`absolute right-4 top-1/2 -translate-y-1/2 fill-current ${
open && 'rotate-180'
}`}
className={ `absolute right-4 top-1/2 -translate-y-1/2 fill-current ${
open && "rotate-180"
}` }
width="20"
height="20"
viewBox="0 0 20 20"
@ -153,71 +173,73 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
/>
</svg>
</NavLink>
{/* <!-- Dropdown Menu Start --> */}
{/* <!-- Dropdown Menu Start --> */ }
<div
className={`translate transform overflow-hidden ${
!open && 'hidden'
}`}
className={ `translate transform overflow-hidden ${
!open && "hidden"
}` }
>
<ul className="mt-4 mb-5.5 flex flex-col gap-2.5 pl-6">
<li>
<NavLink
to="/logs/stations"
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 ' +
(isActive && '!text-white')
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 " +
(isActive && "!text-white")
}
>
{t('pages.stations')}
{ t("pages.stations") }
</NavLink>
</li>
<li>
<NavLink
to="/logs/trains"
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 ' +
(isActive && '!text-white')
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 " +
(isActive && "!text-white")
}
>
{t('pages.trains')}
{ t("pages.trains") }
</NavLink>
</li>
</ul>
</div>
{/* <!-- Dropdown Menu End --> */}
{/* <!-- Dropdown Menu End --> */ }
</React.Fragment>
);
}}
} }
</SidebarLinkGroup>
<SidebarLinkGroup
activeCondition={
pathname === '/leaderboard' || pathname.includes('leaderboard')
pathname === "/leaderboard" || pathname.includes("leaderboard")
}
>
{(handleClick, open) => {
{ (handleClick, open) =>
{
return (
<React.Fragment>
<NavLink
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 ${
(pathname === '/leaderboard' ||
pathname.includes('leaderboard')) &&
'bg-graydark dark:bg-meta-4'
}`}
onClick={(e) => {
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.includes("leaderboard")) &&
"bg-graydark dark:bg-meta-4"
}` }
onClick={ (e) =>
{
e.preventDefault();
sidebarExpanded
? handleClick()
: setSidebarExpanded(true);
}}
} }
>
{t('pages.leaderboard')}
{ t("pages.leaderboard") }
<svg
className={`absolute right-4 top-1/2 -translate-y-1/2 fill-current ${
open && 'rotate-180'
}`}
className={ `absolute right-4 top-1/2 -translate-y-1/2 fill-current ${
open && "rotate-180"
}` }
width="20"
height="20"
viewBox="0 0 20 20"
@ -232,51 +254,51 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
/>
</svg>
</NavLink>
{/* <!-- Dropdown Menu Start --> */}
{/* <!-- Dropdown Menu Start --> */ }
<div
className={`translate transform overflow-hidden ${
!open && 'hidden'
}`}
className={ `translate transform overflow-hidden ${
!open && "hidden"
}` }
>
<ul className="mt-4 mb-5.5 flex flex-col gap-2.5 pl-6">
<li>
<NavLink
to="/leaderboard/stations"
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 ' +
(isActive && '!text-white')
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 " +
(isActive && "!text-white")
}
>
{t('pages.stations')}
{ t("pages.stations") }
</NavLink>
</li>
<li>
<NavLink
to="/leaderboard/trains"
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 ' +
(isActive && '!text-white')
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 " +
(isActive && "!text-white")
}
>
{t('pages.trains')}
{ t("pages.trains") }
</NavLink>
</li>
</ul>
</div>
{/* <!-- Dropdown Menu End --> */}
{/* <!-- Dropdown Menu End --> */ }
</React.Fragment>
);
}}
} }
</SidebarLinkGroup>
{/* <!-- Menu Item Settings --> */}
{/* <!-- Menu Item Settings --> */ }
<li>
<NavLink
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 ${
pathname.includes('settings') &&
'bg-graydark dark: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") &&
"bg-graydark dark:bg-meta-4"
}` }
>
<svg
className="fill-current"
@ -310,24 +332,24 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
Settings
</NavLink>
</li>
{/* <!-- Menu Item Settings --> */}
{/* <!-- Menu Item Settings --> */ }
</ul>
</div>
{/* <!-- Others Group --> */}
{/* <!-- Others Group --> */ }
<div>
<h3 className="mb-4 ml-4 text-sm font-semibold text-bodydark2">
OTHERS
</h3>
<ul className="mb-6 flex flex-col gap-1.5">
{/* <!-- Menu Item Chart --> */}
{/* <!-- Menu Item Chart --> */ }
<li>
<NavLink
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 ${
pathname.includes('chart') && 'bg-graydark dark: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"
}` }
>
<svg
className="fill-current"
@ -361,27 +383,29 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
Chart
</NavLink>
</li>
{/* <!-- Menu Item Chart --> */}
{/* <!-- Menu Item Chart --> */ }
{/* <!-- Menu Item Ui Elements --> */}
{/* <!-- Menu Item Ui Elements --> */ }
<SidebarLinkGroup
activeCondition={pathname === '/ui' || pathname.includes('ui')}
activeCondition={ pathname === "/ui" || pathname.includes("ui") }
>
{(handleClick, open) => {
{ (handleClick, open) =>
{
return (
<React.Fragment>
<NavLink
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 ${
(pathname === '/ui' || pathname.includes('ui')) &&
'bg-graydark dark:bg-meta-4'
}`}
onClick={(e) => {
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")) &&
"bg-graydark dark:bg-meta-4"
}` }
onClick={ (e) =>
{
e.preventDefault();
sidebarExpanded
? handleClick()
: setSidebarExpanded(true);
}}
} }
>
<svg
className="fill-current"
@ -418,9 +442,9 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
</svg>
UI Elements
<svg
className={`absolute right-4 top-1/2 -translate-y-1/2 fill-current ${
open && 'rotate-180'
}`}
className={ `absolute right-4 top-1/2 -translate-y-1/2 fill-current ${
open && "rotate-180"
}` }
width="20"
height="20"
viewBox="0 0 20 20"
@ -435,19 +459,19 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
/>
</svg>
</NavLink>
{/* <!-- Dropdown Menu Start --> */}
{/* <!-- Dropdown Menu Start --> */ }
<div
className={`translate transform overflow-hidden ${
!open && 'hidden'
}`}
className={ `translate transform overflow-hidden ${
!open && "hidden"
}` }
>
<ul className="mb-5.5 mt-4 flex flex-col gap-2.5 pl-6">
<li>
<NavLink
to="/ui/alerts"
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 ' +
(isActive && '!text-white')
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 " +
(isActive && "!text-white")
}
>
Alerts
@ -456,9 +480,9 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
<li>
<NavLink
to="/ui/buttons"
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 ' +
(isActive && '!text-white')
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 " +
(isActive && "!text-white")
}
>
Buttons
@ -466,34 +490,36 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
</li>
</ul>
</div>
{/* <!-- Dropdown Menu End --> */}
{/* <!-- Dropdown Menu End --> */ }
</React.Fragment>
);
}}
} }
</SidebarLinkGroup>
{/* <!-- Menu Item Ui Elements --> */}
{/* <!-- Menu Item Ui Elements --> */ }
{/* <!-- Menu Item Auth Pages --> */}
{/* <!-- Menu Item Auth Pages --> */ }
<SidebarLinkGroup
activeCondition={
pathname === '/auth' || pathname.includes('auth')
pathname === "/auth" || pathname.includes("auth")
}
>
{(handleClick, open) => {
{ (handleClick, open) =>
{
return (
<React.Fragment>
<NavLink
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 ${
(pathname === '/auth' || pathname.includes('auth')) &&
'bg-graydark dark:bg-meta-4'
}`}
onClick={(e) => {
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")) &&
"bg-graydark dark:bg-meta-4"
}` }
onClick={ (e) =>
{
e.preventDefault();
sidebarExpanded
? handleClick()
: setSidebarExpanded(true);
}}
} }
>
<svg
className="fill-current"
@ -526,9 +552,9 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
</svg>
Authentication
<svg
className={`absolute right-4 top-1/2 -translate-y-1/2 fill-current ${
open && 'rotate-180'
}`}
className={ `absolute right-4 top-1/2 -translate-y-1/2 fill-current ${
open && "rotate-180"
}` }
width="20"
height="20"
viewBox="0 0 20 20"
@ -543,19 +569,19 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
/>
</svg>
</NavLink>
{/* <!-- Dropdown Menu Start --> */}
{/* <!-- Dropdown Menu Start --> */ }
<div
className={`translate transform overflow-hidden ${
!open && 'hidden'
}`}
className={ `translate transform overflow-hidden ${
!open && "hidden"
}` }
>
<ul className="mt-4 mb-5.5 flex flex-col gap-2.5 pl-6">
<li>
<NavLink
to="/auth/signin"
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 ' +
(isActive && '!text-white')
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 " +
(isActive && "!text-white")
}
>
Sign In
@ -564,9 +590,9 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
<li>
<NavLink
to="/auth/signup"
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 ' +
(isActive && '!text-white')
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 " +
(isActive && "!text-white")
}
>
Sign Up
@ -574,16 +600,16 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
</li>
</ul>
</div>
{/* <!-- Dropdown Menu End --> */}
{/* <!-- Dropdown Menu End --> */ }
</React.Fragment>
);
}}
} }
</SidebarLinkGroup>
{/* <!-- Menu Item Auth Pages --> */}
{/* <!-- Menu Item Auth Pages --> */ }
</ul>
</div>
</nav>
{/* <!-- Sidebar Menu --> */}
{/* <!-- Sidebar Menu --> */ }
</div>
</aside>
);

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

@ -1,16 +1,19 @@
import { useEffect } from 'react'
import { useLocation } from 'react-router-dom'
import { useEffect } from "react";
import { useLocation } from "react-router-dom";
interface PageTitleProps {
interface PageTitleProps
{
title: string;
}
export const PageTitle: React.FC<PageTitleProps> = ({ title }) => {
export const PageTitle: React.FC<PageTitleProps> = ({ title }) =>
{
const location = useLocation();
useEffect(() => {
useEffect(() =>
{
document.title = title;
}, [location, title]);
}, [ location, title ]);
return null; // This component doesn't render anything
};

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

@ -1,17 +1,22 @@
import { ChangeEventHandler } from 'react';
import { useTranslation } from 'react-i18next';
import { ChangeEventHandler } from "react";
import { useTranslation } from "react-i18next";
export const Search = ({ searchItem, handleInputChange }: { searchItem: string; handleInputChange: ChangeEventHandler }) => {
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">
export const Search = ({ searchItem, handleInputChange }: {
searchItem: string;
handleInputChange: ChangeEventHandler
}) =>
{
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">
<div className="flex justify-center items-center">
<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"
type="text"
onChange={handleInputChange}
value={searchItem}
placeholder={t("logs.search")}
onChange={ handleInputChange }
value={ searchItem }
placeholder={ t("logs.search") }
/>
</div>
</div>
}
</div>;
};

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

@ -1,72 +1,75 @@
import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';
import { TLeaderboardRecord } from '../../../types/leaderboard.ts';
import { ContentLoader } from '../../mini/loaders/ContentLoader.tsx';
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
import { TLeaderboardRecord } from "../../../types/leaderboard.ts";
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();
return (
<>
{error === 2 && <WarningAlert title={t("contentloader.notfound.header")} description={t("contentloader.notfound.description")} />}
{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 === 2 && <WarningAlert title={ t("contentloader.notfound.header") }
description={ t("contentloader.notfound.description") }/> }
{ 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">
<div className="grid grid-cols-2 rounded-sm bg-gray-2 dark:bg-meta-4 sm:grid-cols-3">
<div className="p-2.5 text-center xl:p-5">
<h5 className="text-sm font-medium uppercase xsm:text-base">
{t("leaderboard.user")}
{ t("leaderboard.user") }
</h5>
</div>
<div className="p-2.5 text-center xl:p-5">
<h5 className="text-sm font-medium uppercase xsm:text-base">
{t("leaderboard.time")}
{ t("leaderboard.time") }
</h5>
</div>
<div className="hidden p-2.5 text-center sm:block xl:p-5">
<h5 className="text-sm font-medium uppercase xsm:text-base">
{t("leaderboard.actions")}
{ t("leaderboard.actions") }
</h5>
</div>
</div>
{stations.map((station, key) => (
{ stations.map((station, key) => (
<div
className={`grid grid-cols-2 sm:grid-cols-3 ${stations.length === (key + 1) // todo: ...
? ''
: 'border-b border-stroke dark:border-strokedark'
}`}
key={station.id}
className={ `grid grid-cols-2 sm:grid-cols-3 ${ stations.length === (key + 1) // todo: ...
? ""
: "border-b border-stroke dark:border-strokedark"
}` }
key={ station.id }
>
<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">
<Link to={"/profile/" + station.steam}
className='color-orchid'>{station.steamName}</Link>
<Link to={ "/profile/" + station.steam }
className="color-orchid">{ station.steamName }</Link>
</p>
</div>
<div className="flex items-center justify-center p-2.5 lg:p-5">
<p className="text-meta-3">{Math.floor(station.dispatcherTime / 3600000)}h</p>
<p className="text-meta-3">{ Math.floor(station.dispatcherTime / 3600000) }h</p>
</div>
<div className="hidden items-center justify-center p-2.5 sm:flex xl:p-5">
<Link
to={"/profile/" + station.steam}
to={ "/profile/" + station.steam }
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"
>
{t("leaderboard.profile")}
{ t("leaderboard.profile") }
</Link>
</div>
</div>
))}
)) }
</div>
</div>}
</div> }
</>
);
}
};

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

@ -1,85 +1,90 @@
import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';
import { TLeaderboardRecord } from '../../../types/leaderboard.ts';
import { ContentLoader } from '../../mini/loaders/ContentLoader.tsx';
import { WarningAlert } from '../../mini/alerts/Warning.tsx';
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
import { TLeaderboardRecord } from "../../../types/leaderboard.ts";
import { ContentLoader } from "../../mini/loaders/ContentLoader.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();
return (
<>
{error === 2 && <WarningAlert title={t("contentloader.notfound.header")} description={t("contentloader.notfound.description")} />}
{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 === 2 && <WarningAlert title={ t("contentloader.notfound.header") }
description={ t("contentloader.notfound.description") }/> }
{ 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">
<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">
<h5 className="text-sm font-medium uppercase xsm:text-base">
{t("leaderboard.user")}
{ t("leaderboard.user") }
</h5>
</div>
<div className="p-2.5 text-center xl:p-5">
<h5 className="text-sm font-medium uppercase xsm:text-base">
{t("leaderboard.points")}
{ t("leaderboard.points") }
</h5>
</div>
<div className="p-2.5 text-center xl:p-5">
<h5 className="text-sm font-medium uppercase xsm:text-base">
{t("leaderboard.distance")}
{ t("leaderboard.distance") }
</h5>
</div>
<div className="p-2.5 text-center sm:block xl:p-5">
<h5 className="text-sm font-medium uppercase xsm:text-base">
{t("leaderboard.time")}
{ t("leaderboard.time") }
</h5>
</div>
<div className="hidden p-2.5 text-center sm:block xl:p-5">
<h5 className="text-sm font-medium uppercase xsm:text-base">
{t("leaderboard.actions")}
{ t("leaderboard.actions") }
</h5>
</div>
</div>
{trains.map((train, key) => (
{ trains.map((train, key) => (
<div
className={`grid grid-cols-4 sm:grid-cols-5 ${trains.length === (key + 1)
? ''
: 'border-b border-stroke dark:border-strokedark'
}`}
key={train.id}
className={ `grid grid-cols-4 sm:grid-cols-5 ${ trains.length === (key + 1)
? ""
: "border-b border-stroke dark:border-strokedark"
}` }
key={ train.id }
>
<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">
<Link to={"/profile/" + train.steam}
className='color-orchid'>{train.steamName}</Link>
<Link to={ "/profile/" + train.steam }
className="color-orchid">{ train.steamName }</Link>
</p>
</div>
<div className="flex items-center justify-center p-2.5 lg:p-5">
<p className="text-meta-6">{train.trainPoints}</p>
<p className="text-meta-6">{ train.trainPoints }</p>
</div>
<div className="flex items-center justify-center p-2.5 lg:p-5">
<p className="text-meta-5">{(train.trainDistance / 1000).toFixed(2)}km</p>
<p className="text-meta-5">{ (train.trainDistance / 1000).toFixed(2) }km</p>
</div>
<div className="flex items-center justify-center p-2.5 lg:p-5">
<p className="text-meta-3">{Math.floor(train.trainTime / 3600000)}h</p>
<p className="text-meta-3">{ Math.floor(train.trainTime / 3600000) }h</p>
</div>
<div className="hidden items-center justify-center p-2.5 sm:flex xl:p-5">
<Link
to={"/profile/" + train.steam}
to={ "/profile/" + train.steam }
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"
>
{t("leaderboard.profile")}
{ t("leaderboard.profile") }
</Link>
</div>
</div>
))}
</div> </div>}
)) }
</div>
</div> }
</>
);
}
};

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

@ -1,88 +1,92 @@
import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';
import dayjs from 'dayjs';
import { ContentLoader } from '../../mini/loaders/ContentLoader.tsx';
import { TStationRecord } from '../../../types/station.ts';
import { WarningAlert } from '../../mini/alerts/Warning.tsx';
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
import dayjs from "dayjs";
import { ContentLoader } from "../../mini/loaders/ContentLoader.tsx";
import { TStationRecord } from "../../../types/station.ts";
import { WarningAlert } from "../../mini/alerts/Warning.tsx";
// setSearchItem: Dispatch<SetStateAction<string>>
export const StationTable = ({ stations, error }: {
stations: TStationRecord[], error: number
}) => {
}) =>
{
const { t } = useTranslation();
return (
<>
{error === 2 && <WarningAlert title={t("contentloader.notfound.header")} description={t("contentloader.notfound.description")} />}
{error === 0 && <ContentLoader />}
{ error === 2 && <WarningAlert title={ t("contentloader.notfound.header") }
description={ t("contentloader.notfound.description") }/> }
{ 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="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">
<h5 className="text-sm font-medium uppercase xsm:text-base">
{t("logs.user")}
{ t("logs.user") }
</h5>
</div>
<div className="p-2.5 text-center xl:p-5">
<h5 className="text-sm font-medium uppercase xsm:text-base">
{t("logs.station")}
{ t("logs.station") }
</h5>
</div>
<div className="hidden sm:block p-2.5 text-center xl:p-5">
<h5 className="text-sm font-medium uppercase xsm:text-base">
{t("logs.time")}
{ t("logs.time") }
</h5>
</div>
<div className="p-2.5 text-center xl:p-5">
<h5 className="text-sm font-medium uppercase xsm:text-base">
{t("logs.actions")}
{ t("logs.actions") }
</h5>
</div>
</div>
{stations.map((station, key) => (
{ stations.map((station, key) => (
<div
className={`grid grid-cols-3 sm:grid-cols-4 ${stations.length === (key + 1)
? ''
: 'border-b border-stroke dark:border-strokedark'
}`}
key={station.id}
className={ `grid grid-cols-3 sm:grid-cols-4 ${ stations.length === (key + 1)
? ""
: "border-b border-stroke dark:border-strokedark"
}` }
key={ station.id }
>
<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">
<Link to={"/profile/" + station.userSteamId}
className='color-orchid'>{station.userUsername}</Link>
<Link to={ "/profile/" + station.userSteamId }
className="color-orchid">{ station.userUsername }</Link>
</p>
</div>
<div className="flex items-center justify-center p-2.5 lg:p-5">
<p className="text-meta-6 sm:block break-all">{station.server.toUpperCase()} - {station.stationName ?? "--"}</p>
<p className="text-meta-6 sm:block break-all">{ station.server.toUpperCase() } - { station.stationName ?? "--" }</p>
</div>
<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 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
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"
>
{t("logs.profile")}
{ t("logs.profile") }
</Link>
<Link
to={"/log/" + station.id}
to={ "/log/" + station.id }
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"
>
{t("logs.record")}
{ t("logs.record") }
</Link>
</div>
</div>
))}
)) }
</div>
</div>}
</div> }
</>
);
}
};

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

@ -1,105 +1,109 @@
import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';
import { TTrainRecord } from '../../../types/train.ts';
import dayjs from 'dayjs';
import { ContentLoader } from '../../mini/loaders/ContentLoader.tsx';
import { WarningAlert } from '../../mini/alerts/Warning.tsx';
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
import { TTrainRecord } from "../../../types/train.ts";
import dayjs from "dayjs";
import { ContentLoader } from "../../mini/loaders/ContentLoader.tsx";
import { WarningAlert } from "../../mini/alerts/Warning.tsx";
// setSearchItem: Dispatch<SetStateAction<string>>
export const TrainTable = ({ trains, error }: {
trains: TTrainRecord[], error: number
}) => {
}) =>
{
const { t } = useTranslation();
return (
<>
{error === 2 && <WarningAlert title={t("contentloader.notfound.header")} description={t("contentloader.notfound.description")} />}
{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 === 2 && <WarningAlert title={ t("contentloader.notfound.header") }
description={ t("contentloader.notfound.description") }/> }
{ 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">
<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">
<h5 className="text-sm font-medium uppercase xsm:text-base">
{t("logs.user")}
{ t("logs.user") }
</h5>
</div>
<div className="p-2.5 text-center xl:p-5">
<h5 className="text-sm font-medium uppercase xsm:text-base">
{t("logs.train")}
{ t("logs.train") }
</h5>
</div>
<div className="hidden sm:block p-2.5 text-center xl:p-5">
<h5 className="text-sm font-medium uppercase xsm:text-base">
{t("logs.points")}
{ t("logs.points") }
</h5>
</div>
<div className="hidden sm:block p-2.5 text-center xl:p-5">
<h5 className="text-sm font-medium uppercase xsm:text-base">
{t("logs.distance")}
{ t("logs.distance") }
</h5>
</div>
<div className="hidden sm:block p-2.5 text-center xl:p-5">
<h5 className="text-sm font-medium uppercase xsm:text-base">
{t("logs.time")}
{ t("logs.time") }
</h5>
</div>
<div className="p-2.5 text-center xl:p-5">
<h5 className="text-sm font-medium uppercase xsm:text-base">
{t("logs.actions")}
{ t("logs.actions") }
</h5>
</div>
</div>
{trains.map((train, key) => (
{ trains.map((train, key) => (
<div
className={`grid grid-cols-3 sm:grid-cols-6 ${trains.length === (key + 1)
? ''
: 'border-b border-stroke dark:border-strokedark'
}`}
key={train.id}
className={ `grid grid-cols-3 sm:grid-cols-6 ${ trains.length === (key + 1)
? ""
: "border-b border-stroke dark:border-strokedark"
}` }
key={ train.id }
>
<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">
<Link to={"/profile/" + train.userSteamId}
className='color-orchid'>{train.userUsername}</Link>
<Link to={ "/profile/" + train.userSteamId }
className="color-orchid">{ train.userUsername }</Link>
</p>
</div>
<div className="flex items-center justify-center p-2.5 lg:p-5">
<p className="text-meta-6 sm:block break-all">{train.server.toUpperCase()} - {train.trainNumber ?? "--"}</p>
<p className="text-meta-6 sm:block break-all">{ train.server.toUpperCase() } - { train.trainNumber ?? "--" }</p>
</div>
<div className="hidden sm:flex items-center justify-center p-2.5 lg:p-5">
<p className="text-meta-6">{train.distance ? train.points : "--"}</p>
<p className="text-meta-6">{ train.distance ? train.points : "--" }</p>
</div>
<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 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 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
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"
>
{t("logs.profile")}
{ t("logs.profile") }
</Link>
<Link
to={"/log/" + train.id}
to={ "/log/" + train.id }
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"
>
{t("logs.record")}
{ t("logs.record") }
</Link>
</div>
</div>
))}
)) }
</div>
</div>}
</div> }
</>
);
}
};

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

@ -1,47 +1,54 @@
import { useState } from 'react';
import { TProfileData } from '../../../types/profile.ts';
import { useTranslation } from 'react-i18next';
import { useState } from "react";
import { TProfileData } from "../../../types/profile.ts";
import { useTranslation } from "react-i18next";
export const ProfileCard = ({ data }: { data: TProfileData }) => {
export const ProfileCard = ({ data }: { data: TProfileData }) =>
{
const [showTrains, setShowTrains] = useState(false);
const [showStations, setShowStations] = useState(false);
const [ showTrains, setShowTrains ] = useState(false);
const [ showStations, setShowStations ] = useState(false);
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="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">
<img className='rounded-full' src={data.steam.avatarfull} alt="profile" />
<img className="rounded-full" src={ data.steam.avatarfull } alt="profile"/>
</div>
</div>
<div className="mt-4">
<h3 className="mb-1.5 text-2xl font-semibold text-black dark:text-white">
{data.steam.personname}
{ data.steam.personname }
</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 className="flex flex-col items-center justify-center gap-1 border-r border-stroke px-4 dark:border-strokedark xsm:flex-row">
<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
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">
{Math.floor(data.player.trainDistance / 1000)}km
{ Math.floor(data.player.trainDistance / 1000) }km
</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 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">
{Math.floor(data.player.dispatcherTime / 3600000)}h
{ Math.floor(data.player.dispatcherTime / 3600000) }h
</span>
<span className="text-sm text-wrap">{t("profile.stats.time")}</span>
<span className="text-sm text-wrap">{ t("profile.stats.time") }</span>
</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">
<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>
{ 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) }>
<h1 className="text-xl text-black dark:text-white pb-5">{ t("profile.trains.header") }</h1>
<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"
height="20"
viewBox="0 0 20 20"
@ -57,70 +64,69 @@ export const ProfileCard = ({ data }: { data: TProfileData }) => {
</svg>
</div>
{showTrains && <div className="flex flex-col rounded-sm border border-stroke dark:border-strokedark">
{ showTrains && <div className="flex flex-col rounded-sm border border-stroke dark:border-strokedark">
<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">
<h5 className="text-sm font-medium uppercase xsm:text-base">
{t("profile.trains.train")}
{ t("profile.trains.train") }
</h5>
</div>
<div className="p-2.5 text-center xl:p-5">
<h5 className="text-sm font-medium uppercase xsm:text-base">
{t("profile.trains.distance")}
{ t("profile.trains.distance") }
</h5>
</div>
<div className="hidden sm:block p-2.5 text-center xl:p-5">
<h5 className="text-sm font-medium uppercase xsm:text-base">
{t("profile.trains.points")}
{ t("profile.trains.points") }
</h5>
</div>
<div className="p-2.5 text-center xl:p-5">
<h5 className="text-sm font-medium uppercase xsm:text-base">
{t("profile.trains.time")}
{ t("profile.trains.time") }
</h5>
</div>
</div>
{Object.keys(data.player.trainStats).map(trainName => {
const train = data.player.trainStats[trainName];
{ Object.keys(data.player.trainStats).map(trainName =>
{
const train = data.player.trainStats[ trainName ];
return <div
className={`grid grid-cols-3 sm:grid-cols-4 ${false
? ''
: 'border-t border-t-stroke dark:border-t-strokedark'
}`}
key={1}
className={ `grid grid-cols-3 sm:grid-cols-4 border-t border-t-stroke dark:border-t-strokedark` }
key={ 1 }
>
<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">
{trainName}
{ trainName }
</p>
</div>
<div className="flex items-center justify-center p-2.5 lg:p-5">
<p className="text-meta-6 sm:block break-all">{Math.floor(train.distance / 1000)}km</p>
<p className="text-meta-6 sm:block break-all">{ Math.floor(train.distance / 1000) }km</p>
</div>
<div className="hidden sm:flex items-center justify-center p-2.5 lg:p-5">
<p className="text-meta-3">{train.score}</p>
<p className="text-meta-3">{ train.score }</p>
</div>
<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>}
{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)}>
<h1 className='text-xl text-black dark:text-white pb-5'>{t("profile.stations.header")}</h1>
</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">
<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>
<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"
height="20"
viewBox="0 0 20 20"
@ -135,43 +141,41 @@ export const ProfileCard = ({ data }: { data: TProfileData }) => {
/>
</svg>
</div>
{showStations && <div className="flex flex-col rounded-sm border border-stroke dark:border-strokedark">
{ showStations && <div className="flex flex-col rounded-sm border border-stroke dark:border-strokedark">
<div className="grid grid-cols-2 rounded-sm bg-gray-2 dark:bg-meta-4">
<div className="p-2.5 text-center xl:p-5">
<h5 className="text-sm font-medium uppercase xsm:text-base">
{t("profile.stations.station")}
{ t("profile.stations.station") }
</h5>
</div>
<div className="p-2.5 text-center xl:p-5">
<h5 className="text-sm font-medium uppercase xsm:text-base">
{t("profile.stations.time")}
{ t("profile.stations.time") }
</h5>
</div>
</div>
{Object.keys(data.player.dispatcherStats).map(stationName => {
const station = data.player.dispatcherStats[stationName];
{ Object.keys(data.player.dispatcherStats).map(stationName =>
{
const station = data.player.dispatcherStats[ stationName ];
return <div
className={`grid grid-cols-2 ${false
? ''
: 'border-t border-t-stroke dark:border-t-strokedark'
}`}
key={1}
className={ `grid grid-cols-2 border-t border-t-stroke dark:border-t-strokedark` }
key={ 1 }
>
<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">
{stationName}
{ stationName }
</p>
</div>
<div className="flex items-center justify-center p-2.5 lg:p-5">
<p className="text-meta-3">{Math.floor(station.time / 3600000)}h</p>
<p className="text-meta-3">{ Math.floor(station.time / 3600000) }h</p>
</div>
</div>;
})}
}) }
</div>}
</div> }
</div>}
</div>
}
</div> }
</div>;
};

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

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

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

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

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

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

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

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

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

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

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

@ -1,14 +1,18 @@
<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"/>
<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="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"/>
<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>
<defs>
<clipPath id="clip0_38_23844">
<rect width="24" height="24" fill="white" transform="translate(12 12)"/>
</clipPath>
</defs>
<circle cx="24" cy="24" r="24" fill="#EEF0F2"/>
<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="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"/>
<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>
<defs>
<clipPath id="clip0_38_23844">
<rect width="24" height="24" fill="white" transform="translate(12 12)"/>
</clipPath>
</defs>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

5
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">
<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"/>
<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"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

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

@ -1,11 +1,12 @@
<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"/>
<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"/>
</g>
<defs>
<clipPath id="clip0_38_23867">
<rect width="24" height="24" fill="white" transform="translate(12 12.0001)"/>
</clipPath>
</defs>
<circle cx="24" cy="24.0001" r="24" fill="#212529"/>
<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"/>
</g>
<defs>
<clipPath id="clip0_38_23867">
<rect width="24" height="24" fill="white" transform="translate(12 12.0001)"/>
</clipPath>
</defs>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

5
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">
<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"/>
<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"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1001 B

After

Width:  |  Height:  |  Size: 1019 B

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

@ -1,11 +1,12 @@
<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"/>
<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"/>
</g>
<defs>
<clipPath id="clip0_38_23887">
<rect width="12" height="24" fill="white" transform="translate(18 12.0002)"/>
</clipPath>
</defs>
<circle cx="24" cy="24.0002" r="24" fill="#3162C9"/>
<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"/>
</g>
<defs>
<clipPath id="clip0_38_23887">
<rect width="12" height="24" fill="white" transform="translate(18 12.0002)"/>
</clipPath>
</defs>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 631 B

After

Width:  |  Height:  |  Size: 701 B

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

@ -1,33 +1,42 @@
<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)">
<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">
<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>
<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 d="M8.5841 0.411499H0V6.63372H8.5841V0.411499Z" fill="#46467F"/>
<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)"/>
</g>
</g>
</g>
<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">
<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"/>
<feOffset dy="1"/>
<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"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_22_27"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_22_27" result="shape"/>
</filter>
<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 offset="1" stop-color="#F0F0F0"/>
</linearGradient>
<clipPath id="clip0_22_27">
<rect width="20.2222" height="14" fill="white"/>
</clipPath>
</defs>
<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"/>
<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"/>
</mask>
<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 d="M8.5841 0.411499H0V6.63372H8.5841V0.411499Z" fill="#46467F"/>
<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)"/>
</g>
</g>
</g>
<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">
<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"/>
<feOffset dy="1"/>
<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"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_22_27"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_22_27" result="shape"/>
</filter>
<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 offset="1" stop-color="#F0F0F0"/>
</linearGradient>
<clipPath id="clip0_22_27">
<rect width="20.2222" height="14" fill="white"/>
</clipPath>
</defs>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.9 KiB

After

Width:  |  Height:  |  Size: 6.4 KiB

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

@ -1,18 +1,22 @@
<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)">
<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">
<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>
<g mask="url(#mask0_22_42)">
<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="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>
<defs>
<clipPath id="clip0_22_42">
<rect width="20.2222" height="14" fill="white"/>
</clipPath>
</defs>
<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"/>
<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"/>
</mask>
<g mask="url(#mask0_22_42)">
<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="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>
<defs>
<clipPath id="clip0_22_42">
<rect width="20.2222" height="14" fill="white"/>
</clipPath>
</defs>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 2.1 KiB

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

@ -1,17 +1,19 @@
<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)">
<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">
<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>
<g mask="url(#mask0_22_57)">
<path d="M20.0331 0.411499H13.3555V13.7449H20.0331V0.411499Z" fill="#F44653"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 13.7448H6.67767V0.411499H0V13.7448Z" fill="#1035BB"/>
</g>
</g>
<defs>
<clipPath id="clip0_22_57">
<rect width="20.2222" height="14" fill="white"/>
</clipPath>
</defs>
<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"/>
<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"/>
</mask>
<g mask="url(#mask0_22_57)">
<path d="M20.0331 0.411499H13.3555V13.7449H20.0331V0.411499Z" fill="#F44653"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 13.7448H6.67767V0.411499H0V13.7448Z" fill="#1035BB"/>
</g>
</g>
<defs>
<clipPath id="clip0_22_57">
<rect width="20.2222" height="14" fill="white"/>
</clipPath>
</defs>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

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

@ -1,17 +1,19 @@
<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)">
<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">
<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>
<g mask="url(#mask0_22_71)">
<path d="M20.0293 0.411682H13.3528V13.7451H20.0293V0.411682Z" fill="#E43D4C"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 13.7451H6.67651V0.411682H0V13.7451Z" fill="#1BB65D"/>
</g>
</g>
<defs>
<clipPath id="clip0_22_71">
<rect width="20.2222" height="14" fill="white"/>
</clipPath>
</defs>
<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"/>
<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"/>
</mask>
<g mask="url(#mask0_22_71)">
<path d="M20.0293 0.411682H13.3528V13.7451H20.0293V0.411682Z" fill="#E43D4C"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 13.7451H6.67651V0.411682H0V13.7451Z" fill="#1BB65D"/>
</g>
</g>
<defs>
<clipPath id="clip0_22_71">
<rect width="20.2222" height="14" fill="white"/>
</clipPath>
</defs>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

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

@ -1,34 +1,56 @@
<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)">
<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">
<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>
<g mask="url(#mask0_22_85)">
<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.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"/>
<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 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)"/>
<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>
<defs>
<linearGradient id="paint0_linear_22_85" x1="0" y1="0.411499" x2="0" y2="7.07816" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="#F0F0F0"/>
</linearGradient>
<linearGradient id="paint1_linear_22_85" x1="0" y1="0.411499" x2="0" y2="6.63372" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF2E3B"/>
<stop offset="1" stop-color="#FC0D1B"/>
</linearGradient>
<clipPath id="clip0_22_85">
<rect width="20.2222" height="14" fill="white"/>
</clipPath>
</defs>
<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"/>
<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"/>
</mask>
<g mask="url(#mask0_22_85)">
<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.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"/>
<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 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)"/>
<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>
<defs>
<linearGradient id="paint0_linear_22_85" x1="0" y1="0.411499" x2="0" y2="7.07816"
gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="#F0F0F0"/>
</linearGradient>
<linearGradient id="paint1_linear_22_85" x1="0" y1="0.411499" x2="0" y2="6.63372"
gradientUnits="userSpaceOnUse">
<stop stop-color="#FF2E3B"/>
<stop offset="1" stop-color="#FC0D1B"/>
</linearGradient>
<clipPath id="clip0_22_85">
<rect width="20.2222" height="14" fill="white"/>
</clipPath>
</defs>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.5 KiB

After

Width:  |  Height:  |  Size: 5.2 KiB

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

@ -1,19 +1,24 @@
<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)">
<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">
<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>
<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 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 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>
<defs>
<clipPath id="clip0_22_107">
<rect width="20.2222" height="14" fill="white"/>
</clipPath>
</defs>
<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"/>
<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"/>
</mask>
<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 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 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>
<defs>
<clipPath id="clip0_22_107">
<rect width="20.2222" height="14" fill="white"/>
</clipPath>
</defs>
</svg>

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">
<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="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"/>
<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"/>
<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="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"/>
<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>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

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

@ -1,10 +1,11 @@
<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)">
<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>
<defs>
<clipPath id="clip0_512_11103">
<rect width="20.1667" height="20.1667" fill="#757693" transform="translate(0.434204)"/>
</clipPath>
</defs>
<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"/>
</g>
<defs>
<clipPath id="clip0_512_11103">
<rect width="20.1667" height="20.1667" fill="#757693" transform="translate(0.434204)"/>
</clipPath>
</defs>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

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

@ -1,10 +1,11 @@
<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)">
<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>
<defs>
<clipPath id="clip0_1_1131">
<rect width="22" height="22" fill="white"/>
</clipPath>
</defs>
<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"/>
</g>
<defs>
<clipPath id="clip0_1_1131">
<rect width="22" height="22" fill="white"/>
</clipPath>
</defs>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

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

@ -1,53 +1,70 @@
<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="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="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="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="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"/>
<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="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)">
<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 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"/>
</g>
<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"/>
</g>
<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">
<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"/>
<feOffset dy="0.5"/>
<feGaussianBlur stdDeviation="0.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_521_14075"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_521_14075" result="shape"/>
</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">
<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"/>
<feOffset dy="0.5"/>
<feGaussianBlur stdDeviation="0.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_521_14075"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_521_14075" result="shape"/>
</filter>
<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"/>
<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"/>
<feGaussianBlur stdDeviation="0.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_521_14075"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_521_14075" result="shape"/>
</filter>
</defs>
<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="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="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="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"/>
<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="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)">
<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 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"/>
</g>
<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"/>
</g>
<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">
<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"/>
<feOffset dy="0.5"/>
<feGaussianBlur stdDeviation="0.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_521_14075"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_521_14075" result="shape"/>
</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">
<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"/>
<feOffset dy="0.5"/>
<feGaussianBlur stdDeviation="0.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_521_14075"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_521_14075" result="shape"/>
</filter>
<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"/>
<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"/>
<feGaussianBlur stdDeviation="0.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_521_14075"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_521_14075" result="shape"/>
</filter>
</defs>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.2 KiB

After

Width:  |  Height:  |  Size: 6.9 KiB

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

@ -1,44 +1,54 @@
<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"/>
<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"/>
</g>
<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"/>
</g>
<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"/>
</g>
<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">
<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"/>
<feOffset dy="0.5"/>
<feGaussianBlur stdDeviation="0.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_521_14078"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_521_14078" result="shape"/>
</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">
<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"/>
<feOffset dy="0.5"/>
<feGaussianBlur stdDeviation="0.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_521_14078"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_521_14078" result="shape"/>
</filter>
<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"/>
<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"/>
<feGaussianBlur stdDeviation="0.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_521_14078"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_521_14078" result="shape"/>
</filter>
</defs>
<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)">
<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 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"/>
</g>
<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"/>
</g>
<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">
<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"/>
<feOffset dy="0.5"/>
<feGaussianBlur stdDeviation="0.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_521_14078"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_521_14078" result="shape"/>
</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">
<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"/>
<feOffset dy="0.5"/>
<feGaussianBlur stdDeviation="0.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_521_14078"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_521_14078" result="shape"/>
</filter>
<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"/>
<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"/>
<feGaussianBlur stdDeviation="0.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_521_14078"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_521_14078" result="shape"/>
</filter>
</defs>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.3 KiB

After

Width:  |  Height:  |  Size: 3.9 KiB

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

@ -1,53 +1,70 @@
<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="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="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="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="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"/>
<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="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)">
<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 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"/>
</g>
<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"/>
</g>
<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">
<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"/>
<feOffset dy="0.5"/>
<feGaussianBlur stdDeviation="0.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_506_10589"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_506_10589" result="shape"/>
</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">
<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"/>
<feOffset dy="0.5"/>
<feGaussianBlur stdDeviation="0.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_506_10589"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_506_10589" result="shape"/>
</filter>
<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"/>
<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"/>
<feGaussianBlur stdDeviation="0.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_506_10589"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_506_10589" result="shape"/>
</filter>
</defs>
<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="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="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="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"/>
<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="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)">
<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 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"/>
</g>
<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"/>
</g>
<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">
<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"/>
<feOffset dy="0.5"/>
<feGaussianBlur stdDeviation="0.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_506_10589"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_506_10589" result="shape"/>
</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">
<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"/>
<feOffset dy="0.5"/>
<feGaussianBlur stdDeviation="0.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_506_10589"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_506_10589" result="shape"/>
</filter>
<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"/>
<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"/>
<feGaussianBlur stdDeviation="0.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_506_10589"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_506_10589" result="shape"/>
</filter>
</defs>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.2 KiB

After

Width:  |  Height:  |  Size: 6.9 KiB

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

@ -1,19 +1,20 @@
import React, { useState, ReactNode } from 'react';
import Header from '../components/mini/header/index';
import Sidebar from '../components/mini/sidebar/index';
import React, { useState, ReactNode } from "react";
import Header from "../components/mini/header/index";
import Sidebar from "../components/mini/sidebar/index";
const DefaultLayout: React.FC<{ children: ReactNode }> = ({ children }) => {
const [sidebarOpen, setSidebarOpen] = useState(false);
const DefaultLayout: React.FC<{ children: ReactNode }> = ({ children }) =>
{
const [ sidebarOpen, setSidebarOpen ] = useState(false);
return (
<div className="dark:bg-boxdark-2 dark:text-bodydark">
<div className="flex h-screen overflow-hidden">
<Sidebar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
<Sidebar sidebarOpen={ sidebarOpen } setSidebarOpen={ setSidebarOpen }/>
<div className="relative flex flex-1 flex-col overflow-y-auto overflow-x-hidden">
<Header sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
<Header sidebarOpen={ sidebarOpen } setSidebarOpen={ setSidebarOpen }/>
<main>
<div className="mx-auto max-w-screen-2xl p-4 md:p-6 2xl:p-10">
{children}
{ children }
</div>
</main>
</div>

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

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

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

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

31
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;
total: string;
rate?: string;
@ -14,26 +15,28 @@ const CardDataStats: React.FC<CardDataStatsProps> = ({
rate,
levelUp,
levelDown,
}) => {
}) =>
{
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>
<h4 className="text-title-md font-bold text-black dark:text-white">
{total}
{ total }
</h4>
<span className="text-sm font-medium">{title}</span>
<span className="text-sm font-medium">{ title }</span>
</div>
{ rate && <>
<span
className={`flex items-center gap-1 text-sm font-medium ${
levelUp && 'text-meta-3'
} ${levelDown && 'text-meta-5'} `}
className={ `flex items-center gap-1 text-sm font-medium ${
levelUp && "text-meta-3"
} ${ levelDown && "text-meta-5" } ` }
>
{rate}
{ rate }
{levelUp && (
{ levelUp && (
<svg
className="fill-meta-3"
width="10"
@ -47,8 +50,8 @@ const CardDataStats: React.FC<CardDataStatsProps> = ({
fill=""
/>
</svg>
)}
{levelDown && (
) }
{ levelDown && (
<svg
className="fill-meta-5"
width="10"
@ -62,7 +65,7 @@ const CardDataStats: React.FC<CardDataStatsProps> = ({
fill=""
/>
</svg>
)}
) }
</span>
</> }
</div>

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

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

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

@ -1,21 +1,21 @@
import { ApexOptions } from 'apexcharts';
import React, { useState } from 'react';
import ReactApexChart from 'react-apexcharts';
import { ApexOptions } from "apexcharts";
import React, { useState } from "react";
import ReactApexChart from "react-apexcharts";
const options: ApexOptions = {
legend: {
show: false,
position: 'top',
horizontalAlign: 'left',
position: "top",
horizontalAlign: "left",
},
colors: ['#3C50E0', '#80CAEE'],
colors: [ "#3C50E0", "#80CAEE" ],
chart: {
fontFamily: 'Satoshi, sans-serif',
fontFamily: "Satoshi, sans-serif",
height: 335,
type: 'area',
type: "area",
dropShadow: {
enabled: true,
color: '#623CEA14',
color: "#623CEA14",
top: 10,
blur: 4,
left: 0,
@ -45,8 +45,8 @@ const options: ApexOptions = {
},
],
stroke: {
width: [2, 2],
curve: 'straight',
width: [ 2, 2 ],
curve: "straight",
},
// labels: {
// show: false,
@ -69,8 +69,8 @@ const options: ApexOptions = {
},
markers: {
size: 4,
colors: '#fff',
strokeColors: ['#3056D3', '#80CAEE'],
colors: "#fff",
strokeColors: [ "#3056D3", "#80CAEE" ],
strokeWidth: 3,
strokeOpacity: 0.9,
strokeDashArray: 0,
@ -82,20 +82,20 @@ const options: ApexOptions = {
},
},
xaxis: {
type: 'category',
type: "category",
categories: [
'Sep',
'Oct',
'Nov',
'Dec',
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
"Sep",
"Oct",
"Nov",
"Dec",
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
],
axisBorder: {
show: false,
@ -107,7 +107,7 @@ const options: ApexOptions = {
yaxis: {
title: {
style: {
fontSize: '0px',
fontSize: "0px",
},
},
min: 0,
@ -115,29 +115,32 @@ const options: ApexOptions = {
},
};
interface ChartOneState {
interface ChartOneState
{
series: {
name: string;
data: number[];
}[];
}
const ChartOne: React.FC = () => {
const [state, setState] = useState<ChartOneState>({
const ChartOne: React.FC = () =>
{
const [ state, setState ] = useState<ChartOneState>({
series: [
{
name: 'Product One',
data: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 30, 45],
name: "Product One",
data: [ 23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 30, 45 ],
},
{
name: 'Product Two',
data: [30, 25, 36, 30, 45, 35, 64, 52, 59, 36, 39, 51],
name: "Product Two",
data: [ 30, 25, 36, 30, 45, 35, 64, 52, 59, 36, 39, 51 ],
},
],
});
const handleReset = () => {
const handleReset = () =>
{
setState((prevState) => ({
...prevState,
}));
@ -145,11 +148,13 @@ const ChartOne: React.FC = () => {
handleReset;
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 w-full flex-wrap gap-3 sm:gap-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>
<div className="w-full">
@ -158,7 +163,8 @@ const ChartOne: React.FC = () => {
</div>
</div>
<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>
<div className="w-full">
@ -169,13 +175,16 @@ const ChartOne: React.FC = () => {
</div>
<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">
<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
</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
</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
</button>
</div>
@ -185,10 +194,10 @@ const ChartOne: React.FC = () => {
<div>
<div id="chartOne" className="-ml-5">
<ReactApexChart
options={options}
series={state.series}
options={ options }
series={ state.series }
type="area"
height={350}
height={ 350 }
/>
</div>
</div>

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

@ -1,28 +1,29 @@
import { ApexOptions } from 'apexcharts';
import React, { useState } from 'react';
import ReactApexChart from 'react-apexcharts';
import { ApexOptions } from "apexcharts";
import React, { useState } from "react";
import ReactApexChart from "react-apexcharts";
interface ChartThreeState {
interface ChartThreeState
{
series: number[];
}
const options: ApexOptions = {
chart: {
fontFamily: 'Satoshi, sans-serif',
type: 'donut',
fontFamily: "Satoshi, sans-serif",
type: "donut",
},
colors: ['#3C50E0', '#6577F3', '#8FD0EF', '#0FADCF'],
labels: ['Desktop', 'Tablet', 'Mobile', 'Unknown'],
colors: [ "#3C50E0", "#6577F3", "#8FD0EF", "#0FADCF" ],
labels: [ "Desktop", "Tablet", "Mobile", "Unknown" ],
legend: {
show: false,
position: 'bottom',
position: "bottom",
},
plotOptions: {
pie: {
donut: {
size: '65%',
background: 'transparent',
size: "65%",
background: "transparent",
},
},
},
@ -49,21 +50,24 @@ const options: ApexOptions = {
],
};
const ChartThree: React.FC = () => {
const [state, setState] = useState<ChartThreeState>({
series: [65, 34, 12, 56],
const ChartThree: React.FC = () =>
{
const [ state, setState ] = useState<ChartThreeState>({
series: [ 65, 34, 12, 56 ],
});
const handleReset = () => {
const handleReset = () =>
{
setState((prevState) => ({
...prevState,
series: [65, 34, 12, 56],
series: [ 65, 34, 12, 56 ],
}));
};
handleReset;
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>
<h5 className="text-xl font-semibold text-black dark:text-white">
@ -111,8 +115,8 @@ const ChartThree: React.FC = () => {
<div className="mb-2">
<div id="chartThree" className="mx-auto flex justify-center">
<ReactApexChart
options={options}
series={state.series}
options={ options }
series={ state.series }
type="donut"
/>
</div>

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

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

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

@ -1,107 +1,109 @@
import { Link } from 'react-router-dom';
import { Chat } from '../../old/chat';
import UserOne from '../../images/user/user-01.png';
import UserTwo from '../../images/user/user-02.png';
import UserThree from '../../images/user/user-03.png';
import UserFour from '../../images/user/user-04.png';
import UserFive from '../../images/user/user-05.png';
import { Link } from "react-router-dom";
import { Chat } from "../../old/chat";
import UserOne from "../../images/user/user-01.png";
import UserTwo from "../../images/user/user-02.png";
import UserThree from "../../images/user/user-03.png";
import UserFour from "../../images/user/user-04.png";
import UserFive from "../../images/user/user-05.png";
const chatData: Chat[] = [
{
avatar: UserOne,
name: 'Devid Heilo',
text: 'How are you?',
name: "Devid Heilo",
text: "How are you?",
time: 12,
textCount: 3,
color: '#10B981',
color: "#10B981",
},
{
avatar: UserTwo,
name: 'Henry Fisher',
text: 'Waiting for you!',
name: "Henry Fisher",
text: "Waiting for you!",
time: 12,
textCount: 0,
color: '#DC3545',
color: "#DC3545",
},
{
avatar: UserFour,
name: 'Jhon Doe',
name: "Jhon Doe",
text: "What's up?",
time: 32,
textCount: 0,
color: '#10B981',
color: "#10B981",
},
{
avatar: UserFive,
name: 'Jane Doe',
text: 'Great',
name: "Jane Doe",
text: "Great",
time: 32,
textCount: 2,
color: '#FFBA00',
color: "#FFBA00",
},
{
avatar: UserOne,
name: 'Jhon Doe',
text: 'How are you?',
name: "Jhon Doe",
text: "How are you?",
time: 32,
textCount: 0,
color: '#10B981',
color: "#10B981",
},
{
avatar: UserThree,
name: 'Jhon Doe',
text: 'How are you?',
name: "Jhon Doe",
text: "How are you?",
time: 32,
textCount: 3,
color: '#FFBA00',
color: "#FFBA00",
},
];
const ChatCard = () => {
const ChatCard = () =>
{
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">
Chats
</h4>
<div>
{chatData.map((chat, key) => (
{ chatData.map((chat, key) => (
<Link
to="/"
className="flex items-center gap-5 py-3 px-7.5 hover:bg-gray-3 dark:hover:bg-meta-4"
key={key}
key={ key }
>
<div className="relative h-14 w-14 rounded-full">
<img src={chat.avatar} alt="User" />
<img src={ chat.avatar } alt="User"/>
<span
className="absolute right-0 bottom-0 h-3.5 w-3.5 rounded-full border-2 border-white"
style={{backgroundColor: chat.color}}
style={ { backgroundColor: chat.color } }
></span>
</div>
<div className="flex flex-1 items-center justify-between">
<div>
<h5 className="font-medium text-black dark:text-white">
{chat.name}
{ chat.name }
</h5>
<p>
<span className="text-sm text-black dark:text-white">
{chat.text}
{ chat.text }
</span>
<span className="text-xs"> . {chat.time} min</span>
<span className="text-xs"> . { chat.time } min</span>
</p>
</div>
{chat.textCount !== 0 && (
{ chat.textCount !== 0 && (
<div className="flex h-6 w-6 items-center justify-center rounded-full bg-primary">
<span className="text-sm font-medium text-white">
{' '}
{chat.textCount}
{ " " }
{ chat.textCount }
</span>
</div>
)}
) }
</div>
</Link>
))}
)) }
</div>
</div>
);

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

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

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

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

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

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

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

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

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

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

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

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

@ -1,21 +1,29 @@
import { useEffect, useRef, useState } from "react";
const DropdownDefault = () => {
const [dropdownOpen, setDropdownOpen] = useState(false);
const DropdownDefault = () =>
{
const [ dropdownOpen, setDropdownOpen ] = useState(false);
const trigger = useRef<any>(null);
const dropdown = useRef<any>(null);
// close on click outside
useEffect(() => {
const clickHandler = ({ target }: MouseEvent) => {
if (!dropdown.current) return;
useEffect(() =>
{
const clickHandler = ({ target }: MouseEvent) =>
{
if (!dropdown.current)
{
return;
}
if (
!dropdownOpen ||
dropdown.current.contains(target) ||
trigger.current.contains(target)
)
{
return;
}
setDropdownOpen(false);
};
document.addEventListener("click", clickHandler);
@ -23,9 +31,14 @@ const DropdownDefault = () => {
});
// close if the esc key is pressed
useEffect(() => {
const keyHandler = ({ keyCode }: KeyboardEvent) => {
if (!dropdownOpen || keyCode !== 27) return;
useEffect(() =>
{
const keyHandler = ({ keyCode }: KeyboardEvent) =>
{
if (!dropdownOpen || keyCode !== 27)
{
return;
}
setDropdownOpen(false);
};
document.addEventListener("keydown", keyHandler);
@ -36,8 +49,8 @@ const DropdownDefault = () => {
<div className="relative flex">
<button
className="text-[#98A6AD] hover:text-body"
ref={trigger}
onClick={() => setDropdownOpen(!dropdownOpen)}
ref={ trigger }
onClick={ () => setDropdownOpen(!dropdownOpen) }
>
<svg
className="fill-current"
@ -62,14 +75,15 @@ const DropdownDefault = () => {
</svg>
</button>
<div
ref={dropdown}
onFocus={() => setDropdownOpen(true)}
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 ${
dropdownOpen === true ? 'block' : 'hidden'
}`}
ref={ dropdown }
onFocus={ () => setDropdownOpen(true) }
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 ${
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
className="fill-current"
width="16"
@ -86,13 +100,14 @@ const DropdownDefault = () => {
</g>
<defs>
<clipPath id="clip0_62_9787">
<rect width="16" height="16" fill="white" />
<rect width="16" height="16" fill="white"/>
</clipPath>
</defs>
</svg>
Edit
</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
className="fill-current"
width="16"

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

@ -1,18 +1,20 @@
import flatpickr from 'flatpickr';
import { useEffect } from 'react';
import flatpickr from "flatpickr";
import { useEffect } from "react";
const DatePickerOne = () => {
useEffect(() => {
const DatePickerOne = () =>
{
useEffect(() =>
{
// Init flatpickr
flatpickr('.form-datepicker', {
mode: 'single',
flatpickr(".form-datepicker", {
mode: "single",
static: true,
monthSelectorType: 'static',
dateFormat: 'M j, Y',
monthSelectorType: "static",
dateFormat: "M j, Y",
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:
'<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 { useEffect } from 'react';
import flatpickr from "flatpickr";
import { useEffect } from "react";
const DatePickerTwo = () => {
useEffect(() => {
const DatePickerTwo = () =>
{
useEffect(() =>
{
// Init flatpickr
flatpickr('.form-datepicker', {
mode: 'single',
flatpickr(".form-datepicker", {
mode: "single",
static: true,
monthSelectorType: 'static',
dateFormat: 'M j, Y',
monthSelectorType: "static",
dateFormat: "M j, Y",
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:
'<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>",
});

155
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;
text: string;
selected: boolean;
element?: HTMLElement;
}
interface DropdownProps {
interface DropdownProps
{
id: string;
}
const MultiSelect: React.FC<DropdownProps> = ({ id }) => {
const [options, setOptions] = useState<Option[]>([]);
const [selected, setSelected] = useState<number[]>([]);
const [show, setShow] = useState(false);
const MultiSelect: React.FC<DropdownProps> = ({ id }) =>
{
const [ options, setOptions ] = useState<Option[]>([]);
const [ selected, setSelected ] = useState<number[]>([]);
const [ show, setShow ] = useState(false);
const dropdownRef = useRef<any>(null);
const trigger = useRef<any>(null);
useEffect(() => {
const loadOptions = () => {
useEffect(() =>
{
const loadOptions = () =>
{
const select = document.getElementById(id) as HTMLSelectElement | null;
if (select) {
if (select)
{
const newOptions: Option[] = [];
for (let i = 0; i < select.options.length; i++) {
for (let i = 0; i < select.options.length; i++)
{
newOptions.push({
value: select.options[i].value,
text: select.options[i].innerText,
selected: select.options[i].hasAttribute('selected'),
value: select.options[ i ].value,
text: select.options[ i ].innerText,
selected: select.options[ i ].hasAttribute("selected"),
});
}
setOptions(newOptions);
@ -35,27 +42,34 @@ const MultiSelect: React.FC<DropdownProps> = ({ id }) => {
};
loadOptions();
}, [id]);
}, [ id ]);
const open = () => {
const open = () =>
{
setShow(true);
};
const isOpen = () => {
const isOpen = () =>
{
return show === true;
};
const select = (index: number, event: React.MouseEvent) => {
const newOptions = [...options];
const select = (index: number, event: React.MouseEvent) =>
{
const newOptions = [ ...options ];
if (!newOptions[index].selected) {
newOptions[index].selected = true;
newOptions[index].element = event.currentTarget as HTMLElement;
setSelected([...selected, index]);
} else {
if (!newOptions[ index ].selected)
{
newOptions[ index ].selected = true;
newOptions[ index ].element = event.currentTarget as HTMLElement;
setSelected([ ...selected, index ]);
}
else
{
const selectedIndex = selected.indexOf(index);
if (selectedIndex !== -1) {
newOptions[index].selected = false;
if (selectedIndex !== -1)
{
newOptions[ index ].selected = false;
setSelected(selected.filter((i) => i !== index));
}
}
@ -63,34 +77,44 @@ const MultiSelect: React.FC<DropdownProps> = ({ id }) => {
setOptions(newOptions);
};
const remove = (index: number) => {
const newOptions = [...options];
const remove = (index: number) =>
{
const newOptions = [ ...options ];
const selectedIndex = selected.indexOf(index);
if (selectedIndex !== -1) {
newOptions[index].selected = false;
if (selectedIndex !== -1)
{
newOptions[ index ].selected = false;
setSelected(selected.filter((i) => i !== index));
setOptions(newOptions);
}
};
const selectedValues = () => {
return selected.map((option) => options[option].value);
const selectedValues = () =>
{
return selected.map((option) => options[ option ].value);
};
useEffect(() => {
const clickHandler = ({ target }: MouseEvent) => {
if (!dropdownRef.current) return;
useEffect(() =>
{
const clickHandler = ({ target }: MouseEvent) =>
{
if (!dropdownRef.current)
{
return;
}
if (
!show ||
dropdownRef.current.contains(target) ||
trigger.current.contains(target)
)
{
return;
}
setShow(false);
};
document.addEventListener('click', clickHandler);
return () => document.removeEventListener('click', clickHandler);
document.addEventListener("click", clickHandler);
return () => document.removeEventListener("click", clickHandler);
});
return (
@ -99,7 +123,7 @@ const MultiSelect: React.FC<DropdownProps> = ({ id }) => {
Multiselect Dropdown
</label>
<div>
<select className="hidden" id={id}>
<select className="hidden" id={ id }>
<option value="1">Option 2</option>
<option value="2">Option 3</option>
<option value="3">Option 4</option>
@ -107,23 +131,24 @@ const MultiSelect: React.FC<DropdownProps> = ({ id }) => {
</select>
<div className="flex flex-col items-center">
<input name="values" type="hidden" defaultValue={selectedValues()} />
<input name="values" type="hidden" defaultValue={ selectedValues() }/>
<div className="relative z-20 inline-block w-full">
<div className="relative flex flex-col items-center">
<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="flex flex-auto flex-wrap gap-3">
{selected.map((index) => (
<div ref={ trigger } onClick={ open } className="w-full">
<div
key={index}
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">
{ selected.map((index) => (
<div
key={ index }
className="my-1.5 flex items-center justify-center rounded border-[.5px] border-stroke bg-gray px-2.5 py-1.5 text-sm font-medium dark:border-strokedark dark:bg-white/30"
>
<div className="max-w-full flex-initial">
{options[index].text}
{ options[ index ].text }
</div>
<div className="flex flex-auto flex-row-reverse">
<div
onClick={() => remove(index)}
onClick={ () => remove(index) }
className="cursor-pointer pl-2 hover:text-danger"
>
<svg
@ -145,21 +170,21 @@ const MultiSelect: React.FC<DropdownProps> = ({ id }) => {
</div>
</div>
</div>
))}
{selected.length === 0 && (
)) }
{ selected.length === 0 && (
<div className="flex-1">
<input
placeholder="Select an option"
className="h-full w-full appearance-none bg-transparent p-1 px-2 outline-none"
defaultValue={selectedValues()}
defaultValue={ selectedValues() }
/>
</div>
)}
) }
</div>
<div className="flex w-8 items-center py-1 pl-1 pr-1">
<button
type="button"
onClick={open}
onClick={ open }
className="h-6 w-6 cursor-pointer outline-none focus:outline-none"
>
<svg
@ -184,34 +209,34 @@ const MultiSelect: React.FC<DropdownProps> = ({ id }) => {
</div>
<div className="w-full px-4">
<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 ${
isOpen() ? '' : 'hidden'
}`}
ref={dropdownRef}
onFocus={() => setShow(true)}
onBlur={() => setShow(false)}
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"
}` }
ref={ dropdownRef }
onFocus={ () => setShow(true) }
onBlur={ () => setShow(false) }
>
<div className="flex w-full flex-col">
{options.map((option, index) => (
<div key={index}>
{ options.map((option, index) => (
<div key={ index }>
<div
className="w-full cursor-pointer rounded-t border-b border-stroke hover:bg-primary/5 dark:border-form-strokedark"
onClick={(event) => select(index, event)}
onClick={ (event) => select(index, event) }
>
<div
className={`relative flex w-full items-center border-l-2 border-transparent p-2 pl-2 ${
option.selected ? 'border-primary' : ''
}`}
className={ `relative flex w-full items-center border-l-2 border-transparent p-2 pl-2 ${
option.selected ? "border-primary" : ""
}` }
>
<div className="flex w-full items-center">
<div className="mx-2 leading-6">
{option.text}
{ option.text }
</div>
</div>
</div>
</div>
</div>
))}
)) }
</div>
</div>
</div>

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

@ -1,30 +1,33 @@
import React, { useState } from 'react';
import React, { useState } from "react";
const SelectGroupOne: React.FC = () => {
const [selectedOption, setSelectedOption] = useState<string>('');
const [isOptionSelected, setIsOptionSelected] = useState<boolean>(false);
const SelectGroupOne: React.FC = () =>
{
const [ selectedOption, setSelectedOption ] = useState<string>("");
const [ isOptionSelected, setIsOptionSelected ] = useState<boolean>(false);
const changeTextColor = () => {
const changeTextColor = () =>
{
setIsOptionSelected(true);
};
return (
<div className="mb-4.5">
<label className="mb-2.5 block text-black dark:text-white">
{' '}
Subject{' '}
{ " " }
Subject{ " " }
</label>
<div className="relative z-20 bg-transparent dark:bg-form-input">
<select
value={selectedOption}
onChange={(e) => {
value={ selectedOption }
onChange={ (e) =>
{
setSelectedOption(e.target.value);
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 ${
isOptionSelected ? 'text-black dark:text-white' : ''
}`}
} }
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" : ""
}` }
>
<option value="" disabled className="text-body dark:text-bodydark">
Select your subject

25
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 [selectedOption, setSelectedOption] = useState<string>('');
const [isOptionSelected, setIsOptionSelected] = useState<boolean>(false);
const SelectGroupTwo: React.FC = () =>
{
const [ selectedOption, setSelectedOption ] = useState<string>("");
const [ isOptionSelected, setIsOptionSelected ] = useState<boolean>(false);
const changeTextColor = () => {
const changeTextColor = () =>
{
setIsOptionSelected(true);
};
@ -47,14 +49,15 @@ const SelectGroupTwo: React.FC = () => {
</span>
<select
value={selectedOption}
onChange={(e) => {
value={ selectedOption }
onChange={ (e) =>
{
setSelectedOption(e.target.value);
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 ${
isOptionSelected ? 'text-black dark:text-white' : ''
}`}
} }
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" : ""
}` }
>
<option value="" disabled className="text-body dark:text-bodydark">
Select Country

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

@ -1,12 +1,12 @@
import React, { useState } from "react";
import dataJSON from '../../public/data.json';
import dataJSON from "../../public/data.json";
export const Modal = ({ closeModal, onSubmit, defaultValue }) =>
{
const fields = Object.keys(Object.values(dataJSON)[ 0 ]).filter((item: any) => !(item.startsWith("delta_")));
export const Modal = ({ closeModal, onSubmit, defaultValue }) => {
const fields=Object.keys(Object.values(dataJSON)[0]).filter((item:any)=>!(item.startsWith("delta_")));
const [formState, setFormState] = useState(
const [ formState, setFormState ] = useState(
defaultValue || {
id: "",
para: "price",
@ -14,26 +14,35 @@ export const Modal = ({ closeModal, onSubmit, defaultValue }) => {
value: "",
type: "0",
}
},
);
const [errors, setErrors] = useState<string[]>([]);
const [ errors, setErrors ] = useState<string[]>([]);
const validateForm = () => {
if (formState.id && formState.value) {
const validateForm = () =>
{
if (formState.id && formState.value)
{
setErrors([]);
return true;
} else {
}
else
{
let errorFields = [];
for (const [key, value] of Object.entries(formState)) {
for (const [ key, value ] of Object.entries(formState))
{
console.log(key);
console.log(value);
if (!value) {
errorFields.push(key=="id"?"Bond ID":key);
if (!value)
{
errorFields.push(key == "id" ? "Bond ID" : key);
}
else{
if (key=='id'){
if (!(Object.keys(dataJSON).includes(value)||value=="ALL")){
errorFields.push("INVALID_ID_"+value)
else
{
if (key == "id")
{
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(e.target.name);
console.log(e.target.name=="para"&&e.target.value=='rating');
console.log(formState.criterion>1&&formState.criterion<4);
console.log(e.target.name == "para" && e.target.value == "rating");
console.log(formState.criterion > 1 && formState.criterion < 4);
console.log(e.target.value);
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 });}
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 });
}
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();
if (!validateForm()) return;
if (!validateForm())
{
return;
}
onSubmit(formState);
@ -70,33 +87,43 @@ export const Modal = ({ closeModal, onSubmit, defaultValue }) => {
return (
<div
className="modal-container fixed z-50 flex top-25 bottom-5 "
onClick={(e) => {
if (e.target.className === "modal-container") closeModal();
}}
onClick={ (e) =>
{
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="w-full flex justify-end">
<strong className="text-xl align-center cursor-pointer "
onClick={closeModal}
onClick={ closeModal }
>&times;</strong>
</div>
<form>
<div className="grid grid-cols-3 gap-5 justify-normal">
<div className="form-group w-full col-span-3">
<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>
<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} />
htmlFor="id">Bond ID (Input "ALL" to track all bonds with paramaters
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 }/>
</div>
<div className="form-group ">
<label className="mb-3 block text-sm font-medium text-black dark:text-white" 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">
<label className="mb-3 block text-sm font-medium text-black dark:text-white"
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>
<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}
<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 }
</span>
@ -104,10 +131,11 @@ export const Modal = ({ closeModal, onSubmit, defaultValue }) => {
className="absolute top-0 left-0 z-20 h-full w-full bg-transparent opacity-0"
name="para"
onChange={handleChange}
value={formState.para}
onChange={ handleChange }
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>
<span className="absolute top-1/2 right-4 z-10 -translate-y-1/2">
@ -133,24 +161,26 @@ export const Modal = ({ closeModal, onSubmit, defaultValue }) => {
</div>
<div className="form-group">
<label className="mb-3 block text-sm font-medium text-black dark:text-white" 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">
<label className="mb-3 block text-sm font-medium text-black dark:text-white"
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>
<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"}
<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" }
</span>
<select
className="absolute top-0 left-0 z-20 h-full w-full bg-transparent opacity-0"
name="criterion"
onChange={handleChange}
value={formState.criterion}
onChange={ handleChange }
value={ formState.criterion }
>
<option value="0">goes down by</option>
<option value="1">goes up by</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="2">is smaller than</option> }
{ !(formState.para == "rating") && <option value="3">is greater than</option> }
<option value="4">is equal to</option>
</select>
@ -175,25 +205,30 @@ export const Modal = ({ closeModal, onSubmit, defaultValue }) => {
</div>
</div>
<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>
<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} />
<label className="mb-3 block text-sm font-medium text-black dark:text-white"
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 }/>
</div>
<div className="form-group">
<label className="mb-3 block text-sm font-medium text-black dark:text-white" 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">
<label className="mb-3 block text-sm font-medium text-black dark:text-white"
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>
<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"}
<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" }
</span>
<select
className="absolute top-0 left-0 z-20 h-full w-full bg-transparent opacity-0"
name="type"
onChange={handleChange}
value={formState.type}
onChange={ handleChange }
value={ formState.type }
>
<option value="0">Info</option>
<option value="1">Warning</option>
@ -220,13 +255,21 @@ export const Modal = ({ closeModal, onSubmit, defaultValue }) => {
</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 && (<div className="error">Please input {errors.filter((item:string)=>!(item.startsWith("INVALID_ID"))).join(", ")}</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 && (
<div className="error">Please
input { errors.filter((item: string) => !(item.startsWith("INVALID_ID"))).join(", ") }</div>) }
<br></br>
<button className="btn flex justify-center rounded bg-primary py-2 px-6 font-medium text-gray hover:shadow-1"
type="submit" onClick={handleSubmit}>
<button
className="btn flex justify-center rounded bg-primary py-2 px-6 font-medium text-gray hover:shadow-1"
type="submit" onClick={ handleSubmit }>
Submit
</button>
</form>

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

@ -1,14 +1,16 @@
import CoverOne from '../images/cover/cover-01.png';
import userSix from '../images/user/user-06.png';
import { Link } from 'react-router-dom';
import CoverOne from "../images/cover/cover-01.png";
import userSix from "../images/user/user-06.png";
import { Link } from "react-router-dom";
const Profile = () => {
const Profile = () =>
{
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">
<img
src={CoverOne}
src={ CoverOne }
alt="profile cover"
className="h-full w-full rounded-tl-sm rounded-tr-sm object-cover object-center"
/>
@ -17,7 +19,7 @@ const Profile = () => {
htmlFor="cover"
className="flex cursor-pointer items-center justify-center gap-2 rounded bg-primary py-1 px-2 text-sm font-medium text-white hover:bg-opacity-90 xsm:px-4"
>
<input type="file" name="cover" id="cover" className="sr-only" />
<input type="file" name="cover" id="cover" className="sr-only"/>
<span>
<svg
className="fill-current"
@ -46,9 +48,10 @@ const Profile = () => {
</div>
</div>
<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">
<img src={userSix} alt="profile" />
<img src={ userSix } alt="profile"/>
<label
htmlFor="profile"
className="absolute bottom-0 right-0 flex h-8.5 w-8.5 cursor-pointer items-center justify-center rounded-full bg-primary text-white hover:bg-opacity-90 sm:bottom-2 sm:right-2"
@ -88,14 +91,17 @@ const Profile = () => {
Danish Heilium
</h3>
<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 className="flex flex-col items-center justify-center gap-1 border-r border-stroke px-4 dark:border-strokedark xsm:flex-row">
<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
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">
259
</span>
<span className="text-sm">Posts</span>
</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">
129K
</span>
@ -148,7 +154,7 @@ const Profile = () => {
</g>
<defs>
<clipPath id="clip0_30_966">
<rect width="22" height="22" fill="white" />
<rect width="22" height="22" fill="white"/>
</clipPath>
</defs>
</svg>
@ -236,7 +242,7 @@ const Profile = () => {
</g>
<defs>
<clipPath id="clip0_30_978">
<rect width="22" height="22" fill="white" />
<rect width="22" height="22" fill="white"/>
</clipPath>
</defs>
</svg>

20
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 (
<>
<div className="mx-auto max-w-270">
<div className="grid grid-cols-5 gap-8">
<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">
<h3 className="font-medium text-black dark:text-white">
Personal Information
@ -171,7 +173,7 @@ const Settings = () => {
</g>
<defs>
<clipPath id="clip0_88_10224">
<rect width="20" height="20" fill="white" />
<rect width="20" height="20" fill="white"/>
</clipPath>
</defs>
</svg>
@ -181,7 +183,7 @@ const Settings = () => {
className="w-full rounded border border-stroke bg-gray py-3 pl-11.5 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="bio"
id="bio"
rows={6}
rows={ 6 }
placeholder="Write your bio here"
defaultValue="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque posuere fermentum urna, eu condimentum mauris tempus ut. Donec fermentum blandit aliquet."
></textarea>
@ -207,7 +209,8 @@ const Settings = () => {
</div>
</div>
<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">
<h3 className="font-medium text-black dark:text-white">
Your Photo
@ -217,7 +220,7 @@ const Settings = () => {
<form action="#">
<div className="mb-4 flex items-center gap-3">
<div className="h-14 w-14 rounded-full">
<img src={userThree} alt="User" />
<img src={ userThree } alt="User"/>
</div>
<div>
<span className="mb-1.5 text-black dark:text-white">
@ -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"
/>
<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
width="16"
height="16"

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

@ -1,7 +1,8 @@
import { useState } from 'react';
import { useState } from "react";
const SwitcherFour = () => {
const [enabled, setEnabled] = useState<boolean>(false);
const SwitcherFour = () =>
{
const [ enabled, setEnabled ] = useState<boolean>(false);
return (
<div>
@ -14,15 +15,16 @@ const SwitcherFour = () => {
type="checkbox"
id="toggle4"
className="sr-only"
onChange={() => {
onChange={ () =>
{
setEnabled(!enabled);
}}
} }
/>
<div className="block h-8 w-14 rounded-full bg-black"></div>
<div
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'
}`}
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"
}` }
></div>
</div>
</label>

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

@ -1,7 +1,8 @@
import { useState } from 'react';
import { useState } from "react";
const SwitcherOne = () => {
const [enabled, setEnabled] = useState<boolean>(false);
const SwitcherOne = () =>
{
const [ enabled, setEnabled ] = useState<boolean>(false);
return (
<div>
@ -14,15 +15,16 @@ const SwitcherOne = () => {
type="checkbox"
id="toggle1"
className="sr-only"
onChange={() => {
onChange={ () =>
{
setEnabled(!enabled);
}}
} }
/>
<div className="block h-8 w-14 rounded-full bg-meta-9 dark:bg-[#5A616B]"></div>
<div
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'
}`}
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"
}` }
></div>
</div>
</label>

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

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

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

@ -1,7 +1,8 @@
import { useState } from 'react';
import { useState } from "react";
const SwitcherTwo = () => {
const [enabled, setEnabled] = useState(false);
const SwitcherTwo = () =>
{
const [ enabled, setEnabled ] = useState(false);
return (
<div x-data="{ switcherToggle: false }">
@ -14,15 +15,16 @@ const SwitcherTwo = () => {
id="toggle2"
type="checkbox"
className="sr-only"
onChange={() => {
onChange={ () =>
{
setEnabled(!enabled);
}}
} }
/>
<div className="h-5 w-14 rounded-full bg-meta-9 shadow-inner dark:bg-[#5A616B]"></div>
<div
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'
}`}
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"
}` }
></div>
</div>
</label>

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

@ -1,9 +1,10 @@
import React from "react";
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 }) => {
const fields=Object.keys(Object.values(dataJSON)[0]).filter((item:any)=>!(item.startsWith("delta_")));
export const Table = ({ rows, deleteRow, editRow }) =>
{
const fields = Object.keys(Object.values(dataJSON)[ 0 ]).filter((item: any) => !(item.startsWith("delta_")));
return (
@ -20,27 +21,28 @@ export const Table = ({ rows, deleteRow, editRow }) => {
</tr>
</thead>
<tbody>
{rows.map((row:any, idx:number) => {
{ rows.map((row: any, idx: number) =>
{
return (
<tr key={idx} className="content-center">
<td className="border-b border-[#eee] py-5 px-4 dark:border-strokedark">{row.id}</td>
<tr key={ idx } className="content-center">
<td className="border-b border-[#eee] py-5 px-4 dark:border-strokedark">{ row.id }</td>
<td className="border-b border-[#eee] py-5 px-4 dark:border-strokedark">
<span className={`label label-${row.para}`}>
{row.para}
<span className={ `label label-${ row.para }` }>
{ row.para }
</span>
</td>
<td className="border-b border-[#eee] py-5 px-4 dark:border-strokedark">
<span>
{row.criterion==0?"goes down by":row.criterion==1?"goes up by":row.criterion==2?"is smaller than":row.criterion==3?"is greater than":"is equal to"}
{ row.criterion == 0 ? "goes down by" : row.criterion == 1 ? "goes up by" : row.criterion == 2 ? "is smaller than" : row.criterion == 3 ? "is greater than" : "is equal to" }
</span>
</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">{ row.value }</td>
<td className="border-b border-[#eee] py-5 px-4 dark:border-strokedark">
<span>
{row.type==0?'Info':row.type==1?"Warning":"Alert"}
{ row.type == 0 ? "Info" : row.type == 1 ? "Warning" : "Alert" }
</span>
</td>
@ -48,17 +50,17 @@ export const Table = ({ rows, deleteRow, editRow }) => {
<span className="actions flex grid-cols-2 gap-4">
<BsFillTrashFill
className="delete-btn cursor-pointer"
onClick={() => deleteRow(idx)} />
onClick={ () => deleteRow(idx) }/>
<BsFillPencilFill
className="edit-btn cursor-pointer"
onClick={() => editRow(idx)} />
onClick={ () => editRow(idx) }/>
</span>
</td>
</tr>
);
})}
}) }
</tbody>
</table>
</div>

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

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

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

@ -1,35 +1,37 @@
import { Package } from '../package';
import { Package } from "../package";
const packageData: Package[] = [
{
name: 'Free package',
name: "Free package",
price: 0.0,
invoiceDate: `Jan 13,2023`,
status: 'Paid',
status: "Paid",
},
{
name: 'Standard Package',
name: "Standard Package",
price: 59.0,
invoiceDate: `Jan 13,2023`,
status: 'Paid',
status: "Paid",
},
{
name: 'Business Package',
name: "Business Package",
price: 99.0,
invoiceDate: `Jan 13,2023`,
status: 'Unpaid',
status: "Unpaid",
},
{
name: 'Standard Package',
name: "Standard Package",
price: 59.0,
invoiceDate: `Jan 13,2023`,
status: 'Pending',
status: "Pending",
},
];
const TableThree = () => {
const TableThree = () =>
{
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">
<table className="w-full table-auto">
<thead>
@ -50,30 +52,30 @@ const TableThree = () => {
</thead>
<tbody>
{packageData.map((packageItem, key) => (
<tr key={key}>
{ packageData.map((packageItem, key) => (
<tr key={ key }>
<td className="border-b border-[#eee] py-5 px-4 pl-9 dark:border-strokedark xl:pl-11">
<h5 className="font-medium text-black dark:text-white">
{packageItem.name}
{ packageItem.name }
</h5>
<p className="text-sm">${packageItem.price}</p>
<p className="text-sm">${ packageItem.price }</p>
</td>
<td className="border-b border-[#eee] py-5 px-4 dark:border-strokedark">
<p className="text-black dark:text-white">
{packageItem.invoiceDate}
{ packageItem.invoiceDate }
</p>
</td>
<td className="border-b border-[#eee] py-5 px-4 dark:border-strokedark">
<p
className={`inline-flex rounded-full bg-opacity-10 py-1 px-3 text-sm font-medium ${
packageItem.status === 'Paid'
? 'bg-success text-success'
: packageItem.status === 'Unpaid'
? 'bg-danger text-danger'
: 'bg-warning text-warning'
}`}
className={ `inline-flex rounded-full bg-opacity-10 py-1 px-3 text-sm font-medium ${
packageItem.status === "Paid"
? "bg-success text-success"
: packageItem.status === "Unpaid"
? "bg-danger text-danger"
: "bg-warning text-warning"
}` }
>
{packageItem.status}
{ packageItem.status }
</p>
</td>
<td className="border-b border-[#eee] py-5 px-4 dark:border-strokedark">
@ -146,7 +148,7 @@ const TableThree = () => {
</div>
</td>
</tr>
))}
)) }
</tbody>
</table>
</div>

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

@ -1,45 +1,46 @@
import { Product } from '../product';
import ProductOne from '../../images/product/product-01.png';
import ProductTwo from '../../images/product/product-02.png';
import ProductThree from '../../images/product/product-03.png';
import ProductFour from '../../images/product/product-04.png';
import { Product } from "../product";
import ProductOne from "../../images/product/product-01.png";
import ProductTwo from "../../images/product/product-02.png";
import ProductThree from "../../images/product/product-03.png";
import ProductFour from "../../images/product/product-04.png";
const productData: Product[] = [
{
image: ProductOne,
name: 'Apple Watch Series 7',
category: 'Electronics',
name: "Apple Watch Series 7",
category: "Electronics",
price: 296,
sold: 22,
profit: 45,
},
{
image: ProductTwo,
name: 'Macbook Pro M1',
category: 'Electronics',
name: "Macbook Pro M1",
category: "Electronics",
price: 546,
sold: 12,
profit: 125,
},
{
image: ProductThree,
name: 'Dell Inspiron 15',
category: 'Electronics',
name: "Dell Inspiron 15",
category: "Electronics",
price: 443,
sold: 64,
profit: 247,
},
{
image: ProductFour,
name: 'HP Probook 450',
category: 'Electronics',
name: "HP Probook 450",
category: "Electronics",
price: 499,
sold: 72,
profit: 103,
},
];
const TableTwo = () => {
const TableTwo = () =>
{
return (
<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">
@ -48,7 +49,8 @@ const TableTwo = () => {
</h4>
</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">
<p className="font-medium">Product Name</p>
</div>
@ -66,39 +68,39 @@ const TableTwo = () => {
</div>
</div>
{productData.map((product, key) => (
{ productData.map((product, key) => (
<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"
key={key}
key={ key }
>
<div className="col-span-3 flex items-center">
<div className="flex flex-col gap-4 sm:flex-row sm:items-center">
<div className="h-12.5 w-15 rounded-md">
<img src={product.image} alt="Product" />
<img src={ product.image } alt="Product"/>
</div>
<p className="text-sm text-black dark:text-white">
{product.name}
{ product.name }
</p>
</div>
</div>
<div className="col-span-2 hidden items-center sm:flex">
<p className="text-sm text-black dark:text-white">
{product.category}
{ product.category }
</p>
</div>
<div className="col-span-1 flex items-center">
<p className="text-sm text-black dark:text-white">
${product.price}
${ product.price }
</p>
</div>
<div className="col-span-1 flex items-center">
<p className="text-sm text-black dark:text-white">{product.sold}</p>
<p className="text-sm text-black dark:text-white">{ product.sold }</p>
</div>
<div className="col-span-1 flex items-center">
<p className="text-sm text-meta-3">${product.profit}</p>
<p className="text-sm text-meta-3">${ product.profit }</p>
</div>
</div>
))}
)) }
</div>
);
};

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

@ -1,11 +1,15 @@
const Alerts = () => {
const Alerts = () =>
{
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">
{/* <!-- 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 className="mr-5 flex h-9 w-9 items-center justify-center rounded-lg bg-warning bg-opacity-30">
{/* <!-- 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
className="mr-5 flex h-9 w-9 items-center justify-center rounded-lg bg-warning bg-opacity-30">
<svg
width="19"
height="16"
@ -30,9 +34,11 @@ const Alerts = () => {
</p>
</div>
</div>
{/* <!-- 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 className="mr-5 flex h-9 w-full max-w-[36px] items-center justify-center rounded-lg bg-[#34D399]">
{/* <!-- 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
className="mr-5 flex h-9 w-full max-w-[36px] items-center justify-center rounded-lg bg-[#34D399]">
<svg
width="16"
height="12"
@ -57,9 +63,11 @@ const Alerts = () => {
</p>
</div>
</div>
{/* <!-- 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 className="mr-5 flex h-9 w-full max-w-[36px] items-center justify-center rounded-lg bg-[#F87171]">
{/* <!-- 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
className="mr-5 flex h-9 w-full max-w-[36px] items-center justify-center rounded-lg bg-[#F87171]">
<svg
width="13"
height="13"

24
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 (
<>
{/* <!-- Normal Button Items --> */}
<div className="mb-10 rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
{/* <!-- Normal Button Items --> */ }
<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">
<h3 className="font-medium text-black dark:text-white">
Normal Button
@ -106,8 +107,9 @@ const Buttons = () => {
</div>
</div>
{/* <!-- Button With Icon Items --> */}
<div className="mb-10 rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
{/* <!-- 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="border-b border-stroke px-7 py-4 dark:border-strokedark">
<h3 className="font-medium text-black dark:text-white">
Button With Icon
@ -365,7 +367,7 @@ const Buttons = () => {
</g>
<defs>
<clipPath id="clip0_182_46495">
<rect width="20" height="20" fill="white" />
<rect width="20" height="20" fill="white"/>
</clipPath>
</defs>
</svg>
@ -394,7 +396,7 @@ const Buttons = () => {
</g>
<defs>
<clipPath id="clip0_182_46495">
<rect width="20" height="20" fill="white" />
<rect width="20" height="20" fill="white"/>
</clipPath>
</defs>
</svg>
@ -423,7 +425,7 @@ const Buttons = () => {
</g>
<defs>
<clipPath id="clip0_182_46495">
<rect width="20" height="20" fill="white" />
<rect width="20" height="20" fill="white"/>
</clipPath>
</defs>
</svg>
@ -452,7 +454,7 @@ const Buttons = () => {
</g>
<defs>
<clipPath id="clip0_182_46495">
<rect width="20" height="20" fill="white" />
<rect width="20" height="20" fill="white"/>
</clipPath>
</defs>
</svg>

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

@ -1,24 +1,25 @@
import toast from 'react-hot-toast';
import dataJSON from '../../public/data.json';
import toast from "react-hot-toast";
import dataJSON from "../../public/data.json";
//TODO: rewrite
const createToast = (title: string, msg: string, type: number) => {
const createToast = (title: string, msg: string, type: number) =>
{
toast.custom((t) => (
<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` }
>
<div className="flex-1 w-0 p-4 ">
<div className="flex items-start">
<div className="ml-3 flex-1">
<p className="text-sm font-medium text-white">
{title}
{ title }
</p>
<p className="mt-1 text-sm text-white">
{msg}
{ msg }
</p>
</div>
</div>
@ -26,7 +27,7 @@ const createToast = (title: string, msg: string, type: number) => {
<div className="flex">
<button
onClick={() => toast.dismiss(t.id)}
onClick={ () => toast.dismiss(t.id) }
type="button"
className="mr-2 box-content rounded-none border-none opacity-100 hover:no-underline hover:opacity-50 focus:opacity-50 focus:shadow-none focus:outline-none text-white"
data-te-toast-dismiss
@ -43,14 +44,14 @@ const createToast = (title: string, msg: string, type: number) => {
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M6 18L18 6M6 6l12 12" />
d="M6 18L18 6M6 6l12 12"/>
</svg>
</span>
</button>
</div>
</div>
))
));
};
// let dataJSON: any;
// let headers = new Headers();
@ -65,47 +66,55 @@ const createToast = (title: string, msg: string, type: number) => {
// console.log(data);
// dataJSON=data;
// })
const fireToast = () => {
const fireToast = () =>
{
const alertSettings = localStorage.getItem("alertSettings");
if (alertSettings) {
for (const alertSetting of JSON.parse(alertSettings)) {
if (alertSettings)
{
for (const alertSetting of JSON.parse(alertSettings))
{
console.log(alertSetting);
const value = isNaN(parseFloat(alertSetting.value)) ? alertSetting.value : parseFloat(alertSetting.value);
const para = alertSetting.criterion < 2 ? "delta_" + alertSetting.para : alertSetting.para;
if (alertSetting.id == "ALL") {
Object.keys(dataJSON).map((id: string) => {
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];
const realValue = alertSetting.criterion == '0' ? dataJSON[id][para] * -1 : dataJSON[id][para];
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}`;
createToast(id, msg, alertSetting.type)
if (alertSetting.id == "ALL")
{
Object.keys(dataJSON).map((id: string) =>
{
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 ];
const realValue = alertSetting.criterion == "0" ? dataJSON[ id ][ para ] * -1 : dataJSON[ id ][ para ];
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 }`;
createToast(id, msg, alertSetting.type);
}
}
},
);
}
else {
else
{
const id = alertSetting.id;
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];
const realValue = alertSetting.criterion == '0' ? dataJSON[id][para] * -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 == "2" ? value <= dataJSON[ id ][ para ] :
value == dataJSON[ id ][ para ];
const realValue = alertSetting.criterion == "0" ? dataJSON[ id ][ para ] * -1 : dataJSON[ id ][ para ];
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}`;
createToast(id, msg, alertSetting.type)
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 }`;
createToast(id, msg, alertSetting.type);
}
}
};
}
}
}
};
export default fireToast;

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

@ -1,88 +1,99 @@
import React, { useEffect, useState } from 'react';
import CardDataStats from '../old/CardDataStats';
import { useTranslation, Trans } from 'react-i18next';
import { Link } from 'react-router-dom';
import { TStatsResponse } from '../types/stats.ts';
import React, { useEffect, useState } from "react";
import CardDataStats from "../old/CardDataStats";
import { useTranslation, Trans } from "react-i18next";
import { Link } from "react-router-dom";
import { TStatsResponse } from "../types/stats.ts";
export const Home: React.FC = () => {
export const Home: React.FC = () =>
{
const { t } = useTranslation();
const [commit, setCommit] = useState("");
const [version, setVersion] = useState("");
const [trains, setTrains] = useState(0);
const [dispatchers, setDispatchers] = useState(0);
const [profiles, setProfiles] = useState(0);
const [ commit, setCommit ] = useState("");
const [ version, setVersion ] = useState("");
const [ trains, setTrains ] = useState(0);
const [ dispatchers, setDispatchers ] = useState(0);
const [ profiles, setProfiles ] = useState(0);
useEffect(() => {
fetch(`${import.meta.env.VITE_API_URL}/stats/`).then(x => x.json()).then((data: TStatsResponse) => {
useEffect(() =>
{
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.version && setVersion(data.data.git.version);
// ADD ALERT IF API DOESN'T WORK! toast?
setTrains(data.data.stats.trains);
setDispatchers(data.data.stats.dispatchers);
setProfiles(data.data.stats.profiles);
});
}, [])
useEffect(() => { }, []);
}, []);
return (
<>
<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">
<CardDataStats title={t('home.stats.trains')} total={trains.toString()} />
<CardDataStats title={t('home.stats.dispatchers')} total={dispatchers.toString()} />
<CardDataStats title={t('home.stats.profiles')} total={profiles.toString()} />
<CardDataStats title={ t("home.stats.trains") } total={ trains.toString() }/>
<CardDataStats title={ t("home.stats.dispatchers") } total={ dispatchers.toString() }/>
<CardDataStats title={ t("home.stats.profiles") } total={ profiles.toString() }/>
</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="mt-4">
<h3 className="mb-1.5 text-2xl font-semibold text-black dark:text-white">
{t('home.title')}
{ t("home.title") }
</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">
<Link
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"
>
{t('home.buttons.project')}
{ t("home.buttons.project") }
</Link>
<Link
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"
>
{t('home.buttons.forum')}
{ t("home.buttons.forum") }
</Link>
</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="mt-6.5">
<p><Trans
i18nKey={t("home.footer.author")}
values={{ author: 'alekswilc' }}
components={{ anchor: <Link className='color-orchid' to={"https://www.alekswilc.dev"} /> }}
i18nKey={ t("home.footer.author") }
values={ { author: "alekswilc" } }
components={ {
anchor: <Link className="color-orchid" to={ "https://www.alekswilc.dev" }/>,
} }
/></p>
<p><Trans
i18nKey={t("home.footer.thanks")}
components={{ bahu: <Link className='color-orchid' to={"https://bahu.pro/"} />, simrailelite: <Link className='color-orchid' to={"https://bahu.pro/"} /> }}
i18nKey={ t("home.footer.thanks") }
components={ {
bahu: <Link className="color-orchid" to={ "https://bahu.pro/" }/>,
simrailelite: <Link className="color-orchid" to={ "https://bahu.pro/" }/>,
} }
/></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.powered")} <Link className='color-orchid' to={"https://tailadmin.com/"}>TailAdmin</Link></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.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>
@ -91,8 +102,6 @@ export const Home: React.FC = () => {
</div>
</>
);
};

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

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

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

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

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

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

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

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

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

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

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

@ -1,14 +1,17 @@
export interface TLeaderboardResponse {
export interface TLeaderboardResponse
{
success: boolean;
data: TLeaderboardData;
code: number;
}
export interface TLeaderboardData {
export interface TLeaderboardData
{
records: TLeaderboardRecord[];
}
export interface TLeaderboardRecord {
export interface TLeaderboardRecord
{
id: string;
steam: string;
steamName: string;
@ -16,15 +19,17 @@ export interface TLeaderboardRecord {
trainPoints: number;
trainDistance: number;
dispatcherTime: number;
dispatcherStats?: { [key: string]: TLeaderboardDispatcherStat };
trainStats?: { [key: string]: TLeaderboardTrainStat };
dispatcherStats?: { [ key: string ]: TLeaderboardDispatcherStat };
trainStats?: { [ key: string ]: TLeaderboardTrainStat };
}
export interface TLeaderboardDispatcherStat {
export interface TLeaderboardDispatcherStat
{
time: number;
}
export interface TLeaderboardTrainStat {
export interface TLeaderboardTrainStat
{
distance: number;
score: number;
time: number;

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

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

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

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

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

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

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

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

13
packages/frontend/tsconfig.json
View File

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

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

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