feat: app icon/logo

This commit is contained in:
2024-10-22 02:52:47 +03:00
parent d2fefaca97
commit a1e9dbb01e
6 changed files with 38 additions and 4 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 130 KiB

After

Width:  |  Height:  |  Size: 1.9 MiB

View File

@@ -1,5 +1,5 @@
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { Sidebar } from './components/Sidebar/Sidebar'
import { MainSidebar } from './components/MainSidebar/MainSidebar'
import React, { useEffect, useState } from 'react'
import { HashRouter, Route, Routes } from 'react-router-dom'
import { GetLibraryInfo, OnWindowResize } from '$app'
@@ -20,11 +20,11 @@ function App() {
<QueryClientProvider client={queryClient}>
<AppContextProvider>
<div id="App" className="min-h-screen flex">
<Sidebar className="min-w-64 w-64" />
<MainSidebar className="min-w-64 w-64" />
<div className="max-h-screen overflow-y-auto w-full">
<Routes>
<Route path="/" element={<GamesPage />} />
<Route path="/games" element={<GamesPage />} />
<Route path="/games/*" element={<GamesPage />} />
<Route path="/screenshots/*" element={<ScreenshotsHomePage />} />
</Routes>
</div>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 136 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 79 KiB

View File

@@ -0,0 +1,29 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 2049 2048" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g transform="matrix(1,0,0,1,-2296,0)">
<g id="logo" transform="matrix(1,0,0,1,2296.1,0)">
<rect x="0" y="0" width="2048" height="2048" style="fill:none;"/>
<g transform="matrix(1.59259,0,0,1.59259,-568.593,-357.844)">
<path d="M1048.31,860.864C1090.51,842.262 1120,800.048 1120,751C1120,704.11 1093.05,663.466 1053.8,643.727C1061.66,639.576 1071.4,637.955 1080,636.567C1128.52,628.74 1300,660.899 1300,660.899C1037.21,767.469 1140.85,948.948 1120,940C1099.15,931.052 1060,880 1060,880C1055.73,873.503 1051.84,867.124 1048.31,860.864Z" style="fill:white;"/>
<g transform="matrix(-1,0,0,1,1998.31,0)">
<path d="M1048.31,860.864C1090.51,842.262 1120,800.048 1120,751C1120,704.11 1093.05,663.466 1053.8,643.727C1061.66,639.576 1071.4,637.955 1080,636.567C1128.52,628.74 1300,660.899 1300,660.899C1037.21,767.469 1140.85,948.948 1120,940C1099.15,931.052 1060,880 1060,880C1055.73,873.503 1051.84,867.124 1048.31,860.864Z" style="fill:white;"/>
</g>
<g transform="matrix(1,0,0,1,20,0)">
<path d="M660,660C781.421,660 880,758.579 880,880C880,1001.42 781.421,1100 660,1100C538.579,1100 440,1001.42 440,880C440,758.579 538.579,660 660,660ZM660,730C577.213,730 510,797.213 510,880C510,962.787 577.213,1030 660,1030C742.787,1030 810,962.787 810,880C810,797.213 742.787,730 660,730ZM660,767C722.366,767 773,817.634 773,880C773,942.366 722.366,993 660,993C597.634,993 547,942.366 547,880C547,817.634 597.634,767 660,767Z" style="fill:white;"/>
</g>
<g transform="matrix(1,0,0,1,660,0)">
<path d="M660,660C781.421,660 880,758.579 880,880C880,1001.42 781.421,1100 660,1100C538.579,1100 440,1001.42 440,880C440,758.579 538.579,660 660,660ZM660,730C577.213,730 510,797.213 510,880C510,962.787 577.213,1030 660,1030C742.787,1030 810,962.787 810,880C810,797.213 742.787,730 660,730ZM660,767C722.366,767 773,817.634 773,880C773,942.366 722.366,993 660,993C597.634,993 547,942.366 547,880C547,817.634 597.634,767 660,767Z" style="fill:white;"/>
</g>
<g>
<g transform="matrix(1.03093,0,0,1.04124,-30.9278,-26.8041)">
<path d="M1000,650C1053.54,650 1097,693.464 1097,747C1097,800.536 1053.54,844 1000,844C946.464,844 903,800.536 903,747C903,693.464 946.464,650 1000,650ZM1000,694.178C970.555,694.178 946.65,717.847 946.65,747C946.65,776.153 970.555,799.822 1000,799.822C1029.44,799.822 1053.35,776.153 1053.35,747C1053.35,717.847 1029.44,694.178 1000,694.178Z" style="fill:white;"/>
</g>
<g transform="matrix(0.316423,0,0,0.319588,683.577,512.268)">
<circle cx="1000" cy="747" r="97" style="fill:white;"/>
</g>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.3 KiB

View File

@@ -3,10 +3,15 @@ import React, { useCallback, useMemo } from 'react'
import { cn } from '@/common/utils'
import { Link, useLocation } from 'react-router-dom'
import { cva } from 'class-variance-authority'
import LogoSvg from '@/assets/images/logo.svg'
export function Sidebar({ className, ...rest }: HtmlProps<'div'>) {
export function MainSidebar({ className, ...rest }: HtmlProps<'div'>) {
return (
<div className={cn('py-3 bg-black/30 h-screen overflow-y-auto', className)} {...rest}>
<Link className="text-2xl px-5 py-2 flex items-center gap-4" to="/">
<img className="h-10 w-auto" src={LogoSvg} alt="SV" />
StimVisor
</Link>
<ul>
<ListItem label="Games" to="/games" match={(p) => p === '/' || p.startsWith('/games')} />
<ListItem