diff --git a/app/components/layout/index.tsx b/app/components/layout/index.tsx index 6365f2f49..b00ca0b56 100644 --- a/app/components/layout/index.tsx +++ b/app/components/layout/index.tsx @@ -1,7 +1,8 @@ -import { useLocation } from "@remix-run/react"; +import { Link, useLocation } from "@remix-run/react"; import * as React from "react"; import { useTranslation } from "react-i18next"; import type { RootLoaderData } from "~/root"; +import { LOGO_PATH } from "~/utils/urls"; import { Image } from "../Image"; import { ColorModeToggle } from "./ColorModeToggle"; import { Footer } from "./Footer"; @@ -31,6 +32,14 @@ export const Layout = React.memo(function Layout({ return (
+ + sendou.ink logo +
{!isCatchBoundary ? : null} diff --git a/app/styles/layout.css b/app/styles/layout.css index 078694087..871612f73 100644 --- a/app/styles/layout.css +++ b/app/styles/layout.css @@ -10,11 +10,22 @@ position: relative; z-index: 501; display: flex; - justify-content: flex-end; + justify-content: space-between; padding: var(--s-4); background-color: var(--bg); } +.layout__logo { + display: flex; + width: var(--item-size); + height: var(--item-size); + align-items: center; + justify-content: center; + background-color: var(--bg-lighter); + background-image: url("/svg/background-pattern.svg"); + border-radius: var(--rounded); +} + .layout__avatar { width: var(--item-size); height: var(--item-size); diff --git a/app/utils/urls.ts b/app/utils/urls.ts index 3fb9ddc53..dd697e2e0 100644 --- a/app/utils/urls.ts +++ b/app/utils/urls.ts @@ -33,6 +33,7 @@ export const SEED_URL = "/seed"; export const COMMON_PREVIEW_IMAGE = "/img/layout/common-preview.png"; export const ERROR_GIRL_IMAGE_PATH = `/img/layout/error-girl`; +export const LOGO_PATH = `/img/layout/logo`; export const userPage = (discordId: string) => `/u/${discordId}`; export const userBuildsPage = (discordId: string) => diff --git a/public/img/layout/logo.avif b/public/img/layout/logo.avif new file mode 100644 index 000000000..761be81d3 Binary files /dev/null and b/public/img/layout/logo.avif differ diff --git a/public/img/layout/logo.png b/public/img/layout/logo.png new file mode 100644 index 000000000..01097dadb Binary files /dev/null and b/public/img/layout/logo.png differ