selfhostyourtech/reflector
2
0
Fork 0
mirror of https://github.com/Monadical-SAS/reflector.git synced 2025-12-20 20:29:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

header, font and color changes

Browse Source
This commit is contained in:
Sara
2023-09-15 12:39:30 +02:00
parent dc3d06038d
commit b6c65805f8
3 changed files with 45 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
www/app/(auth)/userInfo.tsx
View File

@@ -10,34 +10,17 @@ export default function UserInfo() {
const isAuthenticated = useFiefIsAuthenticated();
const userinfo = useFiefUserinfo();
return (
<header className="bg-black w-full border-b border-gray-700 flex justify-between items-center py-2 mb-3">
{/* Logo on the left */}
<Link href="/">
<Image
src="/reach.png"
width={16}
height={16}
className="h-6 w-auto ml-2"
alt="Reflector"
/>
</Link>
{/* Text link on the right */}
{!isAuthenticated && (
<span className="text-white hover:underline font-thin px-2">
<Link href="/login">Log in or create account</Link>
</span>
)}
{isAuthenticated && (
<span className="text-white font-thin px-2">
{userinfo?.email} (
<span className="hover:underline">
<Link href="/logout">Log out</Link>
</span>
)
</span>
)}
</header>
return !isAuthenticated ? (
<span className="hover:underline font-thin px-2">
<Link href="/login">Log in or create account</Link>
</span>
) : (
<span className="font-thin px-2">
{userinfo?.email} (
<span className="hover:underline">
<Link href="/logout">Log out</Link>
</span>
)
</span>
);
}

46
www/app/layout.tsx
View File

@@ -1,12 +1,13 @@
import "./styles/globals.scss";
import { Roboto } from "next/font/google";
import { Poppins } from "next/font/google";
import { Metadata } from "next";
import FiefWrapper from "./(auth)/fiefWrapper";
import UserInfo from "./(auth)/userInfo";
import { ErrorProvider } from "./(errors)/errorContext";
import ErrorMessage from "./(errors)/errorMessage";
import Image from "next/image";
const roboto = Roboto({ subsets: ["latin"], weight: "400" });
const poppins = Poppins({ subsets: ["latin"], weight: ["200", "400", "600"] });
export const metadata: Metadata = {
title: {
@@ -55,24 +56,37 @@ export const metadata: Metadata = {
export default function RootLayout({ children }) {
return (
<html lang="en">
<body className={roboto.className + " flex flex-col min-h-screen"}>
<body className={poppins.className + " flex flex-col min-h-screen"}>
<FiefWrapper>
<ErrorProvider>
<ErrorMessage />
<div id="container">
<div className="flex flex-col items-center h-[100svh] bg-gradient-to-r from-[#8ec5fc30] to-[#e0c3fc42]">
<UserInfo />
<div className="h-[13svh] flex flex-col justify-center items-center">
<h1 className="text-5xl font-bold text-blue-500">
Reflector
</h1>
<p className="text-gray-500">
Capture The Signal, Not The Noise
</p>
{/*TODO lvh or svh ? */}
<div
id="container"
className="flex flex-col items-center min-h-[100svh]"
>
<header className="flex justify-between items-center p-2 md:p-4 w-full">
{/* Logo on the left */}
<div className="flex">
<Image
src="/reach.png"
width={16}
height={16}
className="h-10 w-auto mr-2"
alt="Reflector"
/>
<div className="hidden flex-col md:flex">
<h1 className="text-4xl font-bold">Reflector</h1>
<p className="text-gray-500">
Capture The Signal, Not The Noise
</p>
</div>
</div>
{children}
</div>
{/* Text link on the right */}
<UserInfo />
</header>
{children}
</div>
</ErrorProvider>
</FiefWrapper>

8
www/app/transcripts/new/page.tsx
View File

@@ -65,10 +65,8 @@ const TranscriptCreate = () => {
</>
) : (
<>
<div className="flex flex-col items-center justify-center w-fit bg-white px-6 py-8 mt-8 rounded-xl">
<h1 className="text-2xl font-bold text-blue-500">
Audio Permissions
</h1>
<div className="flex flex-col items-center justify-center w-fit px-6 py-8 mt-8 rounded-xl">
<h1 className="text-2xl font-bold">Audio Permissions</h1>
{loading ? (
<p className="text-gray-500 text-center mt-5">
Checking permission...
@@ -83,7 +81,7 @@ const TranscriptCreate = () => {
: "Please grant permission to continue."}
</p>
<button
className="mt-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded m-auto"
className="mt-4 bg-black/40 hover:bg-black/60 text-white font-bold py-2 px-4 rounded m-auto"
onClick={requestPermission}
disabled={permissionDenied}
>