Skip to content

feat: fixes CSS for homepage, browse page and sign up page #65

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Oct 23, 2025
Merged

feat: fixes CSS for homepage, browse page and sign up page #65

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
1765995
feat: updates CSS for home, removes dark mode
RiceViz Oct 20, 2025
d475a39
fix: updates sign-up page CSS
RiceViz Oct 20, 2025
4cac93c
feat: fixes CSS for homepage, browse page and sign up page
RiceViz Oct 20, 2025
e5672f2
feat: adds CSS for login and updates homepage
RiceViz Oct 22, 2025
64982ca
Merge branch 'main' into feat/website_css
RiceViz Oct 23, 2025
c8066f0
chore: fixing merge conflicts
RiceViz Oct 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion capstoneproject/.react-router/types/+routes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// Generated by React Router

import "react-router"
import "react-router";

declare module "react-router" {
interface Register {
Expand All @@ -18,6 +18,8 @@ type Pages = {
params: {};
};
"/userdashboard": {
params: {};
};
"/create-forum": {
params: {};
};
Expand Down
79 changes: 49 additions & 30 deletions capstoneproject/app/account/login.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React, { useState } from "react";
import React, { useState } from 'react';
import { signInWithEmailAndPassword } from "firebase/auth";
import { Footer } from "../components/footer/footer";
import { firebaseAuth } from "../firebase";

export const LoginPage: React.FC = () => {
Expand Down Expand Up @@ -36,36 +37,54 @@ export const LoginPage: React.FC = () => {
console.error("Login error:", err);
}
};

return (
<div className="login-container">
<h1><em>Log In</em></h1>
<form onSubmit={handleSignIn}>
<div className="form-group">
<label htmlFor="email">Email:</label>
<input
type="email"
id="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
required
/>
</div>

<div className="form-group">
<label htmlFor="password">Password:</label>
<input
type="password"
id="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
required
/>
</div>

{error && <p className="error-message">{error}</p>}
<button type="submit">Log in</button>
</form>
<div className="min-h-screen bg-white flex-col">
<div className="grid grid-cols-2 bg-[#f4f4f4]">
<div>
<img src="./DevTalkLogoSmallTanBG.png" alt="DevTalk Logo" className="h-full w-full object-cover p-16" />
</div>
<div className="h-full m-16">
<h2 className="text-8xl text-gray-800 font-bold mb-12 underline decoration-[#F47D26]"><em>Login</em></h2>
<form onSubmit={handleSignIn}>
<div className="w-2/3">
</div>
<div className="w-2/3">
<label className="text-2xl text-gray-800 mt-2" htmlFor="email">Email:</label>
<input
type="email"
id="email"
className="w-full border-gray-800 rounded px-3 py-2 border border-gray-300 my-4"
value={email}
onChange={(e) => setEmail(e.target.value)}
required
/>
</div>
<div className="w-2/3">
<label className="text-2xl text-gray-800 mt-2" htmlFor="password">Password:</label>
<input
type="password"
id="password"
className="w-full border-gray-800 rounded px-3 py-2 border border-gray-300 my-4"
value={password}
onChange={(e) => setPassword(e.target.value)}
required
/>
</div>
{error && <p className="error-message">{error}</p>}
<button className="mt-8 w-2/3 px-8 py-3 rounded-lg border-gray-800 border-2 text-gray-800 font-semibold
hover:bg-[#F47D26] hover:border-transparent hover:-translate-y-2 hover:text-white hover:shadow-[0_0_16px_4px_rgba(244,125,38,0.5)]
transition-all shadow will-change-transform" type="submit">Log In</button>
</form>
<div className="mt-4 text-gray-600">
Don't have an account?{' '}
<a className="text-blue-600 hover:underline" href="/signup">
Sign Up
</a>
</div>
</div>
</div>
<Footer />
</div>
);
};
82 changes: 0 additions & 82 deletions capstoneproject/app/account/signup.css
View file
Open in desktop

This file was deleted.

87 changes: 57 additions & 30 deletions capstoneproject/app/account/signup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
// import { Footer } from "../components/footer/footer";
// import { NavBar } from "../components/navbar/navbar

import { createUserWithEmailAndPassword } from 'firebase/auth';
import React, { useState } from 'react';
import { Footer } from '~/components/footer/footer';
import { firebaseAuth } from "../firebase";

export const SignUpPage: React.FC = () => {
const [displayName, setDisplayName] = useState<string>('');
const [email, setEmail] = useState<string>('');
const [password, setPassword] = useState<string>('');
const [error, setError] = useState<string | null>(null);
Expand All @@ -26,33 +25,61 @@ export const SignUpPage: React.FC = () => {
};

return (
<div className="signup-container">
<h2><em>Sign Up</em></h2>
<form onSubmit={handleSignUp}>
<div className="form-group">
<label htmlFor="email">Email:</label>
<input
type="email"
id="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
required
/>
</div>
<div className="form-group">
<label htmlFor="password">Password:</label>
<input
type="password"
id="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
required
/>
</div>
{error && <p className="error-message">{error}</p>}
<button type="submit">Sign Up</button>
</form>

<div className="min-h-screen bg-white flex-col">
<div className="grid grid-cols-2 bg-[#f4f4f4]">
<div>
<img src="./DevTalkLogoSmallTanBG.png" alt="DevTalk Logo" className="h-full w-full object-cover p-16" />
</div>
<div className="h-full m-16">
<h2 className="text-8xl text-gray-800 font-bold mb-12 underline decoration-[#F47D26]"><em>Sign Up</em></h2>
<form onSubmit={handleSignUp}>
<div className="w-2/3">
<label className="text-2xl text-gray-800 mt-2" htmlFor="displayName">Username:</label>
<input
type="text"
className="w-full border-gray-800 rounded px-3 py-2 border border-gray-300 my-4"
id="displayName"
value={displayName}
onChange={(e) => setDisplayName(e.target.value)}
required
/>
</div>
<div className="w-2/3">
<label className="text-2xl text-gray-800 mt-2" htmlFor="email">Email:</label>
<input
type="email"
id="email"
className="w-full border-gray-800 rounded px-3 py-2 border border-gray-300 my-4"
value={email}
onChange={(e) => setEmail(e.target.value)}
required
/>
</div>
<div className="w-2/3">
<label className="text-2xl text-gray-800 mt-2" htmlFor="password">Password:</label>
<input
type="password"
id="password"
className="w-full border-gray-800 rounded px-3 py-2 border border-gray-300 my-4"
value={password}
onChange={(e) => setPassword(e.target.value)}
required
/>
</div>
{error && <p className="error-message">{error}</p>}
<button className="mt-8 w-2/3 px-8 py-3 rounded-lg border-gray-800 border-2 text-gray-800 font-semibold
hover:bg-[#F47D26] hover:border-transparent hover:-translate-y-2 hover:text-white hover:shadow-[0_0_16px_4px_rgba(244,125,38,0.5)]
transition-all shadow will-change-transform" type="submit">Sign Up</button>
</form>
<div className="mt-4 text-gray-600">
Already have an account?{' '}
<a className="text-blue-600 hover:underline" href="/login">
Log In
</a>
</div>
</div>
</div>
<Footer />
</div>
);
};
5 changes: 1 addition & 4 deletions capstoneproject/app/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,6 @@

html,
body {
@apply bg-white dark:bg-gray-950;
@apply bg-white;

@media (prefers-color-scheme: dark) {
color-scheme: dark;
}
}
2 changes: 1 addition & 1 deletion capstoneproject/app/browseforums/forumspage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ export function ForumsPage() {
}

return (
<div className="min-h-screen bg-white dark:bg-gray-900 flex flex-col">
<div className="min-h-screen bg-white flex flex-col">

<NavBar />

Expand Down
4 changes: 2 additions & 2 deletions capstoneproject/app/components/footer/footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
export function Footer() {
return (
<footer className="text-center text-gray-400 py-6 border-t border-gray-200 dark:border-gray-800 text-sm">
&copy; {new Date().getFullYear()} TITLE_GOES_HERE. All rights reserved.
<footer className="text-center text-gray-400 py-6 border-t border-gray-200 text-sm h-16">
&copy; {new Date().getFullYear()} DevTalk. All rights reserved.
</footer>
);
}
34 changes: 13 additions & 21 deletions capstoneproject/app/components/navbar/navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,24 +16,14 @@ export function NavBar() {
}, [isAnonymous]);

return (
<nav className="flex items-center justify-between px-8 py-4 border-b border-gray-200 dark:border-gray-800">
<div className="flex items-center gap-8">
<Link to="/" className="text-2xl font-bold text-gray-800 dark:text-gray-100 hover:text-blue-600 transition-colors">
Forum Hub
</Link>
<div className="flex items-center gap-6">
<Link to="/create-forum" className="text-gray-600 dark:text-gray-300 hover:text-blue-600 transition-colors">
Create Forum
</Link>
<Link to="/forums" className="text-gray-600 dark:text-gray-300 hover:text-blue-600 transition-colors">
Forums
</Link>
</div>
</div>
<div className="flex items-center gap-4">
<Link to="/signup" className="px-5 py-2 rounded-full bg-blue-600 text-white font-semibold hover:bg-blue-700 transition-colors shadow">
Sign Up
</Link>
<nav className="flex items-center justify-between px-8 border-b border-gray-200 h-32">
<div className="flex items-center gap-3">
<button className="ml-2 text-2xl font-bold text-gray-800"
onClick={() => {
window.location.href = "/";
}}>
<img src="./DevTalkLogoSmall.png" alt="DevTalk Logo" className="w-48 inline-block mr-2"/>
</button>
</div>
{isAnonymous === "false" ? ( <div>
NAME
Expand All @@ -43,10 +33,12 @@ export function NavBar() {
</div>
)}
<button
className="px-5 py-2 rounded-full bg-blue-600 text-white font-semibold hover:bg-blue-700 transition-colors shadow"
// onClick={handleSignIn} // TODO: @Nicole
className="px-10 py-3 rounded-lg bg-[#F47D26] text-white font-semibold hover:bg-[#f7a163] transition-colors shadow"
onClick={() => {
window.location.href = "/login";
}}
>
Sign In
Log In
</button>
</nav>
);
Expand Down
Loading