diff --git a/frontend/index.html b/frontend/index.html
index c5debad..117b082 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -3,6 +3,9 @@
+
+
+
BBS
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index d619bb3..a4d9d02 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -6,6 +6,7 @@ import styles from "./App.module.css";
import { Routes } from "./Routes";
import client from "./client";
import { Header } from "./components/Header";
+import { Splash as Splash } from "./components/Splash";
import { Toast } from "./components/Toast";
import { ToastProvider } from "./components/ToastProvider";
diff --git a/frontend/src/Routes.tsx b/frontend/src/Routes.tsx
index 31161f3..816f27d 100644
--- a/frontend/src/Routes.tsx
+++ b/frontend/src/Routes.tsx
@@ -1,6 +1,7 @@
import React from "react";
import { Route, Routes as ReactRouterRoutes } from "react-router-dom";
+import { Splash } from "./components/Splash";
import { UserCreate } from "./features/auth/UserCreate";
import { Deposit } from "./features/deposit/Deposit";
import { Log } from "./features/log/Log";
@@ -22,5 +23,6 @@ export const Routes: React.FC = () => (
} />
} />
} />
+ } />
);
diff --git a/frontend/src/assets/rocket-clouds.ttf b/frontend/src/assets/rocket-clouds.ttf
new file mode 100644
index 0000000..40041bb
Binary files /dev/null and b/frontend/src/assets/rocket-clouds.ttf differ
diff --git a/frontend/src/assets/rocket-rinder.ttf b/frontend/src/assets/rocket-rinder.ttf
new file mode 100644
index 0000000..d2cd2f4
Binary files /dev/null and b/frontend/src/assets/rocket-rinder.ttf differ
diff --git a/frontend/src/components/Header.module.css b/frontend/src/components/Header.module.css
index 487c57b..12f980c 100644
--- a/frontend/src/components/Header.module.css
+++ b/frontend/src/components/Header.module.css
@@ -1,13 +1,42 @@
+.nav {
+ display: flex;
+ height: 3rem;
+ align-items: center;
+ text-transform: uppercase;
+}
+
.logo {
position: relative;
- top: -1px;
+ top: 5px;
display: inline-block;
width: 24px;
height: 24px;
- margin: 0 8px;
+ margin-right: 0.5rem;
+ margin-left: 1rem;
+}
+.logoNav {
+ position: relative;
+ top: -4px;
+}
+.logoNav:hover.logoNav:hover {
+ border-color: transparent;
}
-.navIcon {
- position: relative;
- top: -2px;
+.navItems {
+ display: flex;
+ align-items: center;
+ padding: 0;
+ margin: 0;
+ list-style: none;
+}
+.navLink {
+ padding: 0.4rem 0.8rem;
+ border: 1px solid transparent;
+}
+.navLink:hover {
+ border-color: var(--border);
+ border-radius: 4px;
+}
+.active.active {
+ color: white;
}
diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
index c00c600..bcb3a54 100644
--- a/frontend/src/components/Header.tsx
+++ b/frontend/src/components/Header.tsx
@@ -1,3 +1,4 @@
+import clsx from "clsx";
import React from "react";
import { NavLink } from "react-router-dom";
@@ -6,52 +7,45 @@ import styles from "./Header.module.css";
const ADMIN_URL = `${import.meta.env.VITE_API_URL}/admin/`;
-const navLinkStyles = ({ isActive }: { isActive: boolean }) => (isActive ? "nav-link active" : "nav-link");
+const navLinkStyles = ({ isActive }: { isActive: boolean }) => clsx(styles.navLink, { [styles.active]: isActive });
export const Header: React.FC = () => {
return (
-