chaulmark/deafmissoula-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Increase constrast throughout

Browse source
This commit is contained in:
TheMaddax 2024-11-07 14:48:07 -06:00
parent b30579391a
commit 90a16fe19d
4 changed files with 69 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
client/src/components/EventCard.tsx
View file

@ -12,14 +12,26 @@ const EventCard: React.FC<EventCardProps> = ({ event }) => {
return ( return (
<motion.div <motion.div
whileHover={{ scale: 1.05 }} whileHover={{ scale: 1.05 }}
className="bg-white rounded-lg shadow-md p-4 w-full max-w-xs" className="bg-white rounded-lg shadow-md p-4 w-full max-w-xs border border-gray-200"
> >
<h3 className="font-bold text-lg text-[#8C1D40] mb-2">{event.title}</h3> <h3 className="font-bold text-lg text-[#6B1631] mb-2">{event.title}</h3>
<p className="text-sm text-gray-600 mb-2 whitespace-pre-line">{event.formattedDateRange}</p> <p className="text-sm text-gray-900 mb-2 font-medium whitespace-pre-line">{event.formattedDateRange}</p>
<p className="text-sm mb-2">{event.description}</p> <p className="text-sm text-gray-900 mb-2">{event.description}</p>
<p className="text-sm mb-2">Address: {event.address}</p> <div className="text-sm text-gray-900 mb-2">
<p className="text-sm">Contact: <a href={`mailto:${event.email}`} className="text-blue-500 hover:underline">{event.pointOfContact}</a></p> <strong className="font-semibold">Address:</strong> {event.address}
</div>
<div className="text-sm text-gray-900">
<strong className="font-semibold">Contact:</strong>{' '}
<a
href={`mailto:${event.email}`}
className="text-[#8C1D40] hover:text-[#6B1631] underline font-medium hover:no-underline"
aria-label={`Email ${event.pointOfContact}`}
>
{event.pointOfContact}
</a>
</div>
</motion.div> </motion.div>
); );
}; };
export default EventCard;
export default EventCard;

36
client/src/components/Header.tsx
View file

@ -3,6 +3,12 @@ import { Link } from 'react-router-dom';
import { motion, AnimatePresence } from 'framer-motion'; import { motion, AnimatePresence } from 'framer-motion';
import Modal from 'react-modal'; import Modal from 'react-modal';
interface NavItemProps {
href: string;
children: React.ReactNode;
onClick?: () => void;
}
const Header: React.FC = () => { const Header: React.FC = () => {
const [isMenuOpen, setIsMenuOpen] = useState(false); const [isMenuOpen, setIsMenuOpen] = useState(false);
const [isDonateModalOpen, setIsDonateModalOpen] = useState(false); const [isDonateModalOpen, setIsDonateModalOpen] = useState(false);
@ -20,12 +26,12 @@ const Header: React.FC = () => {
}; };
return ( return (
<header className="bg-[#8C1D40] text-white shadow-md" role="banner"> <header className="bg-[#6B1631] text-white shadow-lg" role="banner">
<div className="container mx-auto px-4 py-4"> <div className="container mx-auto px-4 py-4">
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
<div className="flex items-center"> <div className="flex items-center">
<img src="/mcdi-logo-small.png" alt="MCDi Logo" className="w-12 h-12 md:w-20 md:h-20 mr-2 md:mr-4" /> <img src="/mcdi-logo-small.png" alt="MCDi Logo" className="w-12 h-12 md:w-20 md:h-20 mr-2 md:mr-4" />
<h1 className="text-lg md:text-2xl font-bold">Missoula Council of the Deaf, Inc</h1> <h1 className="text-lg md:text-2xl font-bold text-white">Missoula Council of the Deaf, Inc</h1>
</div> </div>
<nav className="hidden md:block" role="navigation" aria-label="Main navigation"> <nav className="hidden md:block" role="navigation" aria-label="Main navigation">
<ul className="flex space-x-6 items-center"> <ul className="flex space-x-6 items-center">
@ -37,7 +43,7 @@ const Header: React.FC = () => {
</ul> </ul>
</nav> </nav>
<button <button
className="md:hidden text-white" className="md:hidden text-white hover:text-yellow-100"
onClick={toggleMenu} onClick={toggleMenu}
aria-label="Toggle navigation menu" aria-label="Toggle navigation menu"
aria-expanded={isMenuOpen} aria-expanded={isMenuOpen}
@ -58,7 +64,7 @@ const Header: React.FC = () => {
initial={{ opacity: 0, height: 0 }} initial={{ opacity: 0, height: 0 }}
animate={{ opacity: 1, height: 'auto' }} animate={{ opacity: 1, height: 'auto' }}
exit={{ opacity: 0, height: 0 }} exit={{ opacity: 0, height: 0 }}
className="md:hidden bg-[#8C1D40] px-4 py-2" className="md:hidden bg-[#6B1631] px-4 py-2"
> >
<ul className="space-y-2"> <ul className="space-y-2">
<li><NavItem href="/" onClick={() => setIsMenuOpen(false)}>Home</NavItem></li> <li><NavItem href="/" onClick={() => setIsMenuOpen(false)}>Home</NavItem></li>
@ -81,8 +87,8 @@ const Header: React.FC = () => {
describedby: "donate-modal-description" describedby: "donate-modal-description"
}} }}
> >
<div className="h-full flex flex-col"> <div className="h-full flex flex-col bg-white">
<h2 id="donate-modal-title" className="text-2xl font-bold text-[#8C1D40] mb-4">Donate to MCDi</h2> <h2 id="donate-modal-title" className="text-2xl font-bold text-[#4A0D22] mb-4">Donate to MCDi</h2>
<div id="donate-modal-description" className="flex-grow overflow-y-auto"> <div id="donate-modal-description" className="flex-grow overflow-y-auto">
<iframe <iframe
title="Donation form" title="Donation form"
@ -94,7 +100,7 @@ const Header: React.FC = () => {
</div> </div>
<button <button
onClick={closeDonateModal} onClick={closeDonateModal}
className="mt-4 bg-[#8C1D40] text-white font-bold py-2 px-4 rounded" className="mt-4 bg-[#4A0D22] text-white font-bold py-2 px-4 rounded hover:bg-[#6B1631] transition-colors duration-200"
aria-label="Close donation modal" aria-label="Close donation modal"
> >
Close Close
@ -105,14 +111,8 @@ const Header: React.FC = () => {
); );
}; };
interface NavItemProps {
href: string;
children: React.ReactNode;
onClick?: () => void;
}
const NavItem: React.FC<NavItemProps> = ({ href, children, onClick }) => ( const NavItem: React.FC<NavItemProps> = ({ href, children, onClick }) => (
<Link to={href} className="block hover:text-yellow-200 transition-colors duration-200" onClick={onClick}> <Link to={href} className="block text-white hover:text-yellow-100 transition-colors duration-200" onClick={onClick}>
<motion.span whileHover={{ scale: 1.05 }} className="inline-block"> <motion.span whileHover={{ scale: 1.05 }} className="inline-block">
{children} {children}
</motion.span> </motion.span>
@ -132,7 +132,7 @@ const AboutDropdown: React.FC = () => {
> >
<Link <Link
to="/about" to="/about"
className="hover:text-yellow-200 transition-colors duration-200" className="text-white hover:text-yellow-100 transition-colors duration-200"
aria-expanded={isOpen} aria-expanded={isOpen}
aria-controls="about-dropdown" aria-controls="about-dropdown"
> >
@ -147,7 +147,7 @@ const AboutDropdown: React.FC = () => {
initial={{ opacity: 0, y: -10 }} initial={{ opacity: 0, y: -10 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -10 }} exit={{ opacity: 0, y: -10 }}
className="absolute left-0 mt-2 w-48 bg-[#8C1D40] rounded-md shadow-lg z-10" className="absolute left-0 mt-2 w-48 bg-[#4A0D22] rounded-md shadow-lg z-10"
> >
<div className="py-1" role="menu"> <div className="py-1" role="menu">
<DropdownItem href="/meet-board">Meet MCDi Board</DropdownItem> <DropdownItem href="/meet-board">Meet MCDi Board</DropdownItem>
@ -165,7 +165,7 @@ const AboutDropdown: React.FC = () => {
const DropdownItem: React.FC<NavItemProps> = ({ href, children }) => ( const DropdownItem: React.FC<NavItemProps> = ({ href, children }) => (
<Link <Link
to={href} to={href}
className="block px-4 py-2 hover:bg-[#6B1631] transition-colors duration-200" className="block px-4 py-2 text-white hover:bg-[#6B1631] hover:text-yellow-100 transition-colors duration-200"
role="menuitem" role="menuitem"
> >
<motion.span whileHover={{ x: 5 }} className="inline-block"> <motion.span whileHover={{ x: 5 }} className="inline-block">
@ -181,7 +181,7 @@ const DonateButton: React.FC<{ onClick: (e: React.MouseEvent) => void }> = ({ on
> >
<button <button
onClick={onClick} onClick={onClick}
className="inline-block bg-yellow-400 text-[#8C1D40] font-bold py-2 px-4 rounded-full hover:bg-yellow-300 transition-colors duration-200 shadow-md" className="inline-block bg-yellow-500 text-[#4A0D22] font-bold py-2 px-4 rounded-full hover:bg-yellow-400 transition-colors duration-200 shadow-md"
aria-label="Open donation form" aria-label="Open donation form"
> >
Donate Donate

8
client/src/components/Home.tsx
View file

@ -31,7 +31,7 @@ const Home: React.FC = () => {
transition={{ duration: 0.5 }} transition={{ duration: 0.5 }}
className="space-y-8" className="space-y-8"
> >
<h1 className="text-3xl md:text-4xl font-bold text-[#8C1D40] mb-8 text-center">Welcome to MCDi</h1> <h1 className="text-3xl md:text-4xl font-bold text-[#6B1631] mb-8 text-center">Welcome to MCDi</h1>
<ImageCarousel /> <ImageCarousel />
<div className="flex flex-col lg:flex-row gap-8"> <div className="flex flex-col lg:flex-row gap-8">
@ -46,7 +46,7 @@ const Home: React.FC = () => {
/> />
</div> </div>
<div className="lg:w-1/2"> <div className="lg:w-1/2">
<h2 className="text-2xl font-semibold text-[#8C1D40] mb-4">Upcoming Events</h2> <h2 className="text-2xl font-semibold text-[#6B1631] mb-4">Upcoming Events</h2>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4"> <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
{upcomingEvents.map((event, index) => ( {upcomingEvents.map((event, index) => (
<EventCard <EventCard
@ -85,8 +85,8 @@ const InfoCard: React.FC<{ title: string; content: string }> = ({ title, content
whileHover={{ scale: 1.03 }} whileHover={{ scale: 1.03 }}
transition={{ duration: 0.2 }} transition={{ duration: 0.2 }}
> >
<h2 className="text-xl md:text-2xl font-semibold text-[#8C1D40] mb-4">{title}</h2> <h2 className="text-xl md:text-2xl font-semibold text-[#6B1631] mb-4">{title}</h2>
<p className="text-gray-700 flex-grow text-sm md:text-base">{content}</p> <p className="text-gray-900 flex-grow text-sm md:text-base leading-relaxed">{content}</p>
</motion.div> </motion.div>
); );

46
client/src/components/Meet-Board.tsx
View file

@ -122,7 +122,7 @@ const MeetBoard: React.FC = () => {
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5 }} transition={{ duration: 0.5 }}
> >
<h1 className="text-3xl md:text-4xl font-bold text-[#8C1D40] mb-8">Meet MCDi Board</h1> <h1 className="text-4xl md:text-5xl font-bold text-[#6B1631] mb-8">Meet MCDi Board</h1>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-8" role="list"> <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-8" role="list">
{shuffledMembers.map((member, index) => ( {shuffledMembers.map((member, index) => (
@ -137,7 +137,7 @@ const MeetBoard: React.FC = () => {
<div className="mt-12"> <div className="mt-12">
<div <div
className="relative rounded-lg overflow-hidden shadow-lg border-4 border-[#8C1D40]" className="relative rounded-lg overflow-hidden shadow-lg border-4 border-[#6B1631]"
onMouseMove={handleMouseMove} onMouseMove={handleMouseMove}
onMouseLeave={() => isPlaying && setShowControls(false)} onMouseLeave={() => isPlaying && setShowControls(false)}
> >
@ -157,24 +157,24 @@ const MeetBoard: React.FC = () => {
initial={{ opacity: 0 }} initial={{ opacity: 0 }}
animate={{ opacity: 1 }} animate={{ opacity: 1 }}
exit={{ opacity: 0 }} exit={{ opacity: 0 }}
className="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 p-2 md:p-4" className="absolute bottom-0 left-0 right-0 bg-black bg-opacity-75 p-2 md:p-4"
role="group" role="group"
aria-label="Video controls" aria-label="Video controls"
> >
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<button <button
onClick={handleStop} onClick={handleStop}
className="text-white mr-2" className="text-white hover:text-yellow-300 transition-colors mr-2 p-2"
aria-label="Stop video" aria-label="Stop video"
> >
<FaStop /> <FaStop size={20} />
</button> </button>
<button <button
onClick={togglePlay} onClick={togglePlay}
className="text-white mr-2" className="text-white hover:text-yellow-300 transition-colors mr-2 p-2"
aria-label={isPlaying ? "Pause video" : "Play video"} aria-label={isPlaying ? "Pause video" : "Play video"}
> >
{isPlaying ? <FaPause /> : <FaPlay />} {isPlaying ? <FaPause size={20} /> : <FaPlay size={20} />}
</button> </button>
<input <input
type="range" type="range"
@ -182,7 +182,7 @@ const MeetBoard: React.FC = () => {
max={100} max={100}
value={progress} value={progress}
onChange={handleSeek} onChange={handleSeek}
className="w-full mx-2" className="w-full mx-2 accent-yellow-300"
aria-label="Video progress" aria-label="Video progress"
aria-valuemin={0} aria-valuemin={0}
aria-valuemax={100} aria-valuemax={100}
@ -202,7 +202,7 @@ const MeetBoard: React.FC = () => {
initial={{ opacity: 0 }} initial={{ opacity: 0 }}
animate={{ opacity: 1 }} animate={{ opacity: 1 }}
exit={{ opacity: 0 }} exit={{ opacity: 0 }}
className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50" className="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center p-4 z-50"
onClick={() => setSelectedMember(null)} onClick={() => setSelectedMember(null)}
role="dialog" role="dialog"
aria-modal="true" aria-modal="true"
@ -215,12 +215,18 @@ const MeetBoard: React.FC = () => {
className="bg-white rounded-lg p-4 md:p-8 max-w-md w-full max-h-[90vh] overflow-y-auto" className="bg-white rounded-lg p-4 md:p-8 max-w-md w-full max-h-[90vh] overflow-y-auto"
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
> >
<h2 id="member-modal-title" className="text-xl md:text-2xl font-semibold text-[#8C1D40] mb-4">{selectedMember.name}</h2> <h2 id="member-modal-title" className="text-2xl md:text-3xl font-bold text-[#6B1631] mb-4">
<p className="text-base md:text-lg text-gray-700 mb-2">{selectedMember.position}</p> {selectedMember.name}
<p className="text-sm md:text-base text-gray-600 mb-4">{selectedMember.bio}</p> </h2>
<p className="text-xl md:text-2xl font-semibold text-[#8C1D40] mb-2">
{selectedMember.position}
</p>
<p className="text-base md:text-lg text-gray-900 mb-4 leading-relaxed">
{selectedMember.bio}
</p>
<a <a
href={`mailto:${selectedMember.email}`} href={`mailto:${selectedMember.email}`}
className="text-blue-500 hover:underline text-sm md:text-base" className="inline-block text-[#6B1631] hover:text-[#8C1D40] font-semibold hover:underline text-base md:text-lg transition-colors"
aria-label={`Send email to ${selectedMember.name}`} aria-label={`Send email to ${selectedMember.name}`}
> >
{selectedMember.email} {selectedMember.email}
@ -239,20 +245,24 @@ const BoardMemberCard: React.FC<{
'aria-label'?: string; 'aria-label'?: string;
}> = ({ member, onClick, 'aria-label': ariaLabel }) => ( }> = ({ member, onClick, 'aria-label': ariaLabel }) => (
<motion.div <motion.div
className="bg-white rounded-lg shadow-md p-4 md:p-6 flex flex-col items-center cursor-pointer" className="bg-white rounded-lg shadow-lg p-4 md:p-6 flex flex-col items-center cursor-pointer border-2 border-transparent hover:border-[#6B1631] transition-colors"
whileHover={{ scale: 1.05 }} whileHover={{ scale: 1.03 }}
transition={{ duration: 0.2 }} transition={{ duration: 0.2 }}
onClick={onClick} onClick={onClick}
role="listitem" role="listitem"
aria-label={ariaLabel} aria-label={ariaLabel}
> >
<h2 className="text-xl md:text-2xl font-semibold text-[#8C1D40] mb-2 md:mb-4">{member.name}</h2> <h2 className="text-2xl md:text-3xl font-bold text-[#6B1631] mb-2 md:mb-4">
{member.name}
</h2>
<img <img
src={member.image} src={member.image}
alt={`${member.name}, ${member.position}`} alt={`${member.name}, ${member.position}`}
className="w-32 h-32 md:w-48 md:h-48 object-cover rounded-full mb-2 md:mb-4" className="w-32 h-32 md:w-48 md:h-48 object-cover rounded-full mb-2 md:mb-4 border-4 border-[#8C1D40]"
/> />
<p className="text-base md:text-lg text-gray-700">{member.position}</p> <p className="text-lg md:text-xl font-semibold text-gray-900">
{member.position}
</p>
</motion.div> </motion.div>
); );