mirror of
https://github.com/idanoo/autobrr
synced 2025-07-23 08:49:13 +00:00
feat(web): use svg logo instead of png (#970)
* add fonts files to workbox * remove logo.png and touches manifest assets * install vite-plugin-svgr to import svg as react components * move logo.svg from public to src * replace logo.png to logo.svg --------- Co-authored-by: ze0s <43699394+zze0s@users.noreply.github.com>
This commit is contained in:
Fabricio Silva
GitHub
parent
c361f23139
commit
32ffc875b0
12 changed files with 215 additions and 45 deletions
|
|
@ -4,20 +4,22 @@
|
|||
*/
|
||||
|
||||
import { Link } from "react-router-dom";
|
||||
import logo from "@app/logo.png";
|
||||
import { ReactComponent as Logo } from "@app/logo.svg";
|
||||
|
||||
export const NotFound = () => {
|
||||
return (
|
||||
<div className="min-h-screen flex flex-col justify-center ">
|
||||
<div className="flex justify-center"><img className="h-24 sm:h-48" src={logo} alt="Logo" /></div>
|
||||
<div className="flex justify-center">
|
||||
<Logo className="h-24 sm:h-48" />
|
||||
</div>
|
||||
<h1 className="text-3xl text-center font-bold text-gray-900 dark:text-gray-200 my-8 px-2">
|
||||
Oops, looks like there was a little too much brr!
|
||||
Oops, looks like there was a little too much brr!
|
||||
</h1>
|
||||
<h3 className="text-xl text-center text-gray-700 dark:text-gray-400 mb-1 px-2">
|
||||
In case you think this a bug rather than too much brr,
|
||||
</h3>
|
||||
<h3 className="text-xl text-center text-gray-700 dark:text-gray-400 mb-1 px-2">
|
||||
feel free to report this to our
|
||||
feel free to report this to our
|
||||
{" "}
|
||||
<a
|
||||
rel="noopener noreferrer"
|
||||
|
|
@ -25,7 +27,7 @@ export const NotFound = () => {
|
|||
href="https://github.com/autobrr/autobrr"
|
||||
className="text-gray-700 dark:text-gray-200 underline font-semibold underline-offset-2 decoration-sky-500 hover:decoration-2 hover:text-black hover:dark:text-gray-100"
|
||||
>
|
||||
GitHub page
|
||||
GitHub page
|
||||
</a>
|
||||
{" or to "}
|
||||
<a
|
||||
|
|
@ -34,19 +36,19 @@ export const NotFound = () => {
|
|||
href="https://discord.gg/WQ2eUycxyT"
|
||||
className="text-gray-700 dark:text-gray-200 underline font-semibold underline-offset-2 decoration-purple-500 hover:decoration-2 hover:text-black hover:dark:text-gray-100"
|
||||
>
|
||||
our official Discord channel
|
||||
our official Discord channel
|
||||
</a>
|
||||
.
|
||||
.
|
||||
</h3>
|
||||
<h3 className="text-xl text-center leading-6 text-gray-700 dark:text-gray-400 mb-8 px-2">
|
||||
Otherwise, let us help you to get you back on track for more brr!
|
||||
Otherwise, let us help you to get you back on track for more brr!
|
||||
</h3>
|
||||
<div className="flex justify-center">
|
||||
<Link to="/">
|
||||
<button
|
||||
className="w-48 flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-500"
|
||||
>
|
||||
Back to Dashboard
|
||||
Back to Dashboard
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
|
|
|
|||
BIN
web/src/logo.png
BIN
web/src/logo.png
Binary file not shown.
|
Before Width: | Height: | Size: 7.2 KiB |
25
web/src/logo.svg
Normal file
25
web/src/logo.svg
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 1024 1024"
|
||||
>
|
||||
<path
|
||||
fill="#DFF0FE"
|
||||
stroke="#4788C7"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="30"
|
||||
d="M231.392 297.578c62.988-50.202 302.511-28.81 414.4-11.84 6.925-24.705 14.328-38.685 36.111-63.936-46.273-13.75-99.605-16.02-243.904-10.064-68.671-10.656-68.671-139.712 0-151.552 317.312 0 538.72 148 558.256 237.392 19.536 89.392 9.59 62.873 0 100.048-23.006 57.307-85.84 104.192-104.784 110.704-18.944 6.512-101.824 0-101.824 0-32.092 143.875-71.574 205.418-177.008 279.424-59.447 23.136-97.68 20.128-107.744-53.872l21.904-37.888 31.968-14.8c15.87-28.604 14.722-43.365 0-68.08-22.999-5.874-34.752-5.74-53.872 0-34.784 68.765-62.87 93.492-129.647 110.704v24.272l92.943 50.912 75.776 75.776c2.368 76.723-60.976 91.168-92.944 88.8C361.22 876.89 301.6 838.44 168.64 799.002c-26.486-5.732-30.057-15.395-23.088-40.256 58.775-115.1 40.65-183.322 23.088-213.712-29.558 30.414-99.602 83.694-140.896 0-46.2-93.636 61.568-113.862 117.808-110.704 2.368-24.666 22.85-86.55 85.84-136.752z"
|
||||
/>
|
||||
<path
|
||||
stroke="#4788C7"
|
||||
stroke-linecap="round"
|
||||
stroke-width="84"
|
||||
d="M59.736 258.506h81.696M134.328 137.738h131.424"
|
||||
/>
|
||||
<circle
|
||||
cx="875.512"
|
||||
cy="305.866"
|
||||
r="45.584"
|
||||
fill="#4788C7"
|
||||
/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
|
|
@ -12,7 +12,7 @@ import { useMutation, useQuery } from "@tanstack/react-query";
|
|||
import toast from "react-hot-toast";
|
||||
|
||||
import { AuthContext } from "@utils/Context";
|
||||
import logo from "@app/logo.png";
|
||||
import { ReactComponent as Logo } from "@app/logo.svg";
|
||||
import { APIClient } from "@api/APIClient";
|
||||
import Toast from "@components/notifications/Toast";
|
||||
import { classNames } from "@utils";
|
||||
|
|
@ -70,16 +70,7 @@ export default function Base() {
|
|||
<div className="flex items-center">
|
||||
<div className="flex-shrink-0 flex items-center">
|
||||
<Link to="/">
|
||||
<img
|
||||
className="block lg:hidden h-10 w-auto"
|
||||
src={logo}
|
||||
alt="Logo"
|
||||
/>
|
||||
<img
|
||||
className="hidden lg:block h-10 w-auto"
|
||||
src={logo}
|
||||
alt="Logo"
|
||||
/>
|
||||
<Logo className="h-10" />
|
||||
</Link>
|
||||
</div>
|
||||
<div className="sm:ml-3 hidden sm:block">
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ import { useMutation } from "@tanstack/react-query";
|
|||
import toast from "react-hot-toast";
|
||||
import { Tooltip } from "react-tooltip";
|
||||
|
||||
import logo from "@app/logo.png";
|
||||
import { ReactComponent as Logo } from "@app/logo.svg";
|
||||
import { APIClient } from "@api/APIClient";
|
||||
import { AuthContext } from "@utils/Context";
|
||||
import { PasswordInput, TextInput } from "@components/inputs/text";
|
||||
|
|
@ -64,7 +64,7 @@ export const Login = () => {
|
|||
return (
|
||||
<div className="min-h-screen flex flex-col justify-center py-12 sm:px-6 lg:px-8">
|
||||
<div className="sm:mx-auto sm:w-full sm:max-w-md mb-6">
|
||||
<img className="mx-auto h-12 w-auto" src={logo} alt="logo"/>
|
||||
<Logo className="mx-auto h-12" />
|
||||
<h1 className="text-center text-gray-900 dark:text-gray-200 font-bold pt-2 text-2xl">
|
||||
autobrr
|
||||
</h1>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ import { useNavigate } from "react-router-dom";
|
|||
|
||||
import { APIClient } from "@api/APIClient";
|
||||
import { TextField, PasswordField } from "@components/inputs";
|
||||
import logo from "@app/logo.png";
|
||||
import { ReactComponent as Logo } from "@app/logo.svg";
|
||||
|
||||
interface InputValues {
|
||||
username: string;
|
||||
|
|
@ -46,7 +46,7 @@ export const Onboarding = () => {
|
|||
return (
|
||||
<div className="min-h-screen flex flex-col justify-center py-12 sm:px-6 lg:px-8">
|
||||
<div className="sm:mx-auto sm:w-full sm:max-w-md mb-6">
|
||||
<img className="mx-auto h-12 w-auto" src={logo} alt="logo"/>
|
||||
<Logo className="mx-auto h-12" />
|
||||
<h1 className="text-center text-gray-900 dark:text-gray-200 font-bold pt-2 text-2xl">
|
||||
autobrr
|
||||
</h1>
|
||||
|
|
|
|||
3
web/src/vite-env.d.ts
vendored
3
web/src/vite-env.d.ts
vendored
|
|
@ -1 +1,2 @@
|
|||
/// <reference types="vite/client" />
|
||||
/// <reference types="vite/client" />
|
||||
/// <reference types="vite-plugin-svgr/client" />
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue