selfhostyourtech/reflector
2
0
Fork 0
mirror of https://github.com/Monadical-SAS/reflector.git synced 2025-12-21 04:39: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 isAuthenticated = useFiefIsAuthenticated();
const userinfo = useFiefUserinfo(); const userinfo = useFiefUserinfo();
return ( return !isAuthenticated ? (
<header className="bg-black w-full border-b border-gray-700 flex justify-between items-center py-2 mb-3"> <span className="hover:underline font-thin px-2">
{/* Logo on the left */} <Link href="/login">Log in or create account</Link>
<Link href="/"> </span>
<Image ) : (
src="/reach.png" <span className="font-thin px-2">
width={16} {userinfo?.email} (
height={16} <span className="hover:underline">
className="h-6 w-auto ml-2" <Link href="/logout">Log out</Link>
alt="Reflector" </span>
/> )
</Link> </span>
{/* 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>
); );
} }

46
www/app/layout.tsx
View File

@@ -1,12 +1,13 @@
import "./styles/globals.scss"; import "./styles/globals.scss";
import { Roboto } from "next/font/google"; import { Poppins } from "next/font/google";
import { Metadata } from "next"; import { Metadata } from "next";
import FiefWrapper from "./(auth)/fiefWrapper"; import FiefWrapper from "./(auth)/fiefWrapper";
import UserInfo from "./(auth)/userInfo"; import UserInfo from "./(auth)/userInfo";
import { ErrorProvider } from "./(errors)/errorContext"; import { ErrorProvider } from "./(errors)/errorContext";
import ErrorMessage from "./(errors)/errorMessage"; 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 = { export const metadata: Metadata = {
title: { title: {
@@ -55,24 +56,37 @@ export const metadata: Metadata = {
export default function RootLayout({ children }) { export default function RootLayout({ children }) {
return ( return (
<html lang="en"> <html lang="en">
<body className={roboto.className + " flex flex-col min-h-screen"}> <body className={poppins.className + " flex flex-col min-h-screen"}>
<FiefWrapper> <FiefWrapper>
<ErrorProvider> <ErrorProvider>
<ErrorMessage /> <ErrorMessage />
<div id="container"> {/*TODO lvh or svh ? */}
<div className="flex flex-col items-center h-[100svh] bg-gradient-to-r from-[#8ec5fc30] to-[#e0c3fc42]"> <div
<UserInfo /> id="container"
className="flex flex-col items-center min-h-[100svh]"
<div className="h-[13svh] flex flex-col justify-center items-center"> >
<h1 className="text-5xl font-bold text-blue-500"> <header className="flex justify-between items-center p-2 md:p-4 w-full">
Reflector {/* Logo on the left */}
</h1> <div className="flex">
<p className="text-gray-500"> <Image
Capture The Signal, Not The Noise src="/reach.png"
</p> 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> </div>
{children} {/* Text link on the right */}
</div> <UserInfo />
</header>
{children}
</div> </div>
</ErrorProvider> </ErrorProvider>
</FiefWrapper> </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"> <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 text-blue-500"> <h1 className="text-2xl font-bold">Audio Permissions</h1>
Audio Permissions
</h1>
{loading ? ( {loading ? (
<p className="text-gray-500 text-center mt-5"> <p className="text-gray-500 text-center mt-5">
Checking permission... Checking permission...
@@ -83,7 +81,7 @@ const TranscriptCreate = () => {
: "Please grant permission to continue."} : "Please grant permission to continue."}
</p> </p>
<button <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} onClick={requestPermission}
disabled={permissionDenied} disabled={permissionDenied}
> >