Increase constrast throughout
This commit is contained in:
parent
b30579391a
commit
90a16fe19d
4 changed files with 69 additions and 47 deletions
|
|
@ -12,14 +12,26 @@ const EventCard: React.FC<EventCardProps> = ({ event }) => {
|
|||
return (
|
||||
<motion.div
|
||||
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>
|
||||
<p className="text-sm text-gray-600 mb-2 whitespace-pre-line">{event.formattedDateRange}</p>
|
||||
<p className="text-sm mb-2">{event.description}</p>
|
||||
<p className="text-sm mb-2">Address: {event.address}</p>
|
||||
<p className="text-sm">Contact: <a href={`mailto:${event.email}`} className="text-blue-500 hover:underline">{event.pointOfContact}</a></p>
|
||||
<h3 className="font-bold text-lg text-[#6B1631] mb-2">{event.title}</h3>
|
||||
<p className="text-sm text-gray-900 mb-2 font-medium whitespace-pre-line">{event.formattedDateRange}</p>
|
||||
<p className="text-sm text-gray-900 mb-2">{event.description}</p>
|
||||
<div className="text-sm text-gray-900 mb-2">
|
||||
<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>
|
||||
);
|
||||
};
|
||||
|
||||
export default EventCard;
|
||||
|
|
@ -3,6 +3,12 @@ import { Link } from 'react-router-dom';
|
|||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import Modal from 'react-modal';
|
||||
|
||||
interface NavItemProps {
|
||||
href: string;
|
||||
children: React.ReactNode;
|
||||
onClick?: () => void;
|
||||
}
|
||||
|
||||
const Header: React.FC = () => {
|
||||
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
||||
const [isDonateModalOpen, setIsDonateModalOpen] = useState(false);
|
||||
|
|
@ -20,12 +26,12 @@ const Header: React.FC = () => {
|
|||
};
|
||||
|
||||
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="flex justify-between 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" />
|
||||
<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>
|
||||
<nav className="hidden md:block" role="navigation" aria-label="Main navigation">
|
||||
<ul className="flex space-x-6 items-center">
|
||||
|
|
@ -37,7 +43,7 @@ const Header: React.FC = () => {
|
|||
</ul>
|
||||
</nav>
|
||||
<button
|
||||
className="md:hidden text-white"
|
||||
className="md:hidden text-white hover:text-yellow-100"
|
||||
onClick={toggleMenu}
|
||||
aria-label="Toggle navigation menu"
|
||||
aria-expanded={isMenuOpen}
|
||||
|
|
@ -58,7 +64,7 @@ const Header: React.FC = () => {
|
|||
initial={{ opacity: 0, height: 0 }}
|
||||
animate={{ opacity: 1, height: 'auto' }}
|
||||
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">
|
||||
<li><NavItem href="/" onClick={() => setIsMenuOpen(false)}>Home</NavItem></li>
|
||||
|
|
@ -81,8 +87,8 @@ const Header: React.FC = () => {
|
|||
describedby: "donate-modal-description"
|
||||
}}
|
||||
>
|
||||
<div className="h-full flex flex-col">
|
||||
<h2 id="donate-modal-title" className="text-2xl font-bold text-[#8C1D40] mb-4">Donate to MCDi</h2>
|
||||
<div className="h-full flex flex-col bg-white">
|
||||
<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">
|
||||
<iframe
|
||||
title="Donation form"
|
||||
|
|
@ -94,7 +100,7 @@ const Header: React.FC = () => {
|
|||
</div>
|
||||
<button
|
||||
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"
|
||||
>
|
||||
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 }) => (
|
||||
<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">
|
||||
{children}
|
||||
</motion.span>
|
||||
|
|
@ -132,7 +132,7 @@ const AboutDropdown: React.FC = () => {
|
|||
>
|
||||
<Link
|
||||
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-controls="about-dropdown"
|
||||
>
|
||||
|
|
@ -147,7 +147,7 @@ const AboutDropdown: React.FC = () => {
|
|||
initial={{ opacity: 0, y: -10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
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">
|
||||
<DropdownItem href="/meet-board">Meet MCDi Board</DropdownItem>
|
||||
|
|
@ -165,7 +165,7 @@ const AboutDropdown: React.FC = () => {
|
|||
const DropdownItem: React.FC<NavItemProps> = ({ href, children }) => (
|
||||
<Link
|
||||
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"
|
||||
>
|
||||
<motion.span whileHover={{ x: 5 }} className="inline-block">
|
||||
|
|
@ -181,7 +181,7 @@ const DonateButton: React.FC<{ onClick: (e: React.MouseEvent) => void }> = ({ on
|
|||
>
|
||||
<button
|
||||
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"
|
||||
>
|
||||
Donate
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ const Home: React.FC = () => {
|
|||
transition={{ duration: 0.5 }}
|
||||
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 />
|
||||
<div className="flex flex-col lg:flex-row gap-8">
|
||||
|
|
@ -46,7 +46,7 @@ const Home: React.FC = () => {
|
|||
/>
|
||||
</div>
|
||||
<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">
|
||||
{upcomingEvents.map((event, index) => (
|
||||
<EventCard
|
||||
|
|
@ -85,8 +85,8 @@ const InfoCard: React.FC<{ title: string; content: string }> = ({ title, content
|
|||
whileHover={{ scale: 1.03 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
>
|
||||
<h2 className="text-xl md:text-2xl font-semibold text-[#8C1D40] mb-4">{title}</h2>
|
||||
<p className="text-gray-700 flex-grow text-sm md:text-base">{content}</p>
|
||||
<h2 className="text-xl md:text-2xl font-semibold text-[#6B1631] mb-4">{title}</h2>
|
||||
<p className="text-gray-900 flex-grow text-sm md:text-base leading-relaxed">{content}</p>
|
||||
</motion.div>
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -122,7 +122,7 @@ const MeetBoard: React.FC = () => {
|
|||
animate={{ opacity: 1, y: 0 }}
|
||||
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">
|
||||
{shuffledMembers.map((member, index) => (
|
||||
|
|
@ -137,7 +137,7 @@ const MeetBoard: React.FC = () => {
|
|||
|
||||
<div className="mt-12">
|
||||
<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}
|
||||
onMouseLeave={() => isPlaying && setShowControls(false)}
|
||||
>
|
||||
|
|
@ -157,24 +157,24 @@ const MeetBoard: React.FC = () => {
|
|||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
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"
|
||||
aria-label="Video controls"
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<button
|
||||
onClick={handleStop}
|
||||
className="text-white mr-2"
|
||||
className="text-white hover:text-yellow-300 transition-colors mr-2 p-2"
|
||||
aria-label="Stop video"
|
||||
>
|
||||
<FaStop />
|
||||
<FaStop size={20} />
|
||||
</button>
|
||||
<button
|
||||
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"}
|
||||
>
|
||||
{isPlaying ? <FaPause /> : <FaPlay />}
|
||||
{isPlaying ? <FaPause size={20} /> : <FaPlay size={20} />}
|
||||
</button>
|
||||
<input
|
||||
type="range"
|
||||
|
|
@ -182,7 +182,7 @@ const MeetBoard: React.FC = () => {
|
|||
max={100}
|
||||
value={progress}
|
||||
onChange={handleSeek}
|
||||
className="w-full mx-2"
|
||||
className="w-full mx-2 accent-yellow-300"
|
||||
aria-label="Video progress"
|
||||
aria-valuemin={0}
|
||||
aria-valuemax={100}
|
||||
|
|
@ -202,7 +202,7 @@ const MeetBoard: React.FC = () => {
|
|||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
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)}
|
||||
role="dialog"
|
||||
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"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<h2 id="member-modal-title" className="text-xl md:text-2xl font-semibold text-[#8C1D40] mb-4">{selectedMember.name}</h2>
|
||||
<p className="text-base md:text-lg text-gray-700 mb-2">{selectedMember.position}</p>
|
||||
<p className="text-sm md:text-base text-gray-600 mb-4">{selectedMember.bio}</p>
|
||||
<h2 id="member-modal-title" className="text-2xl md:text-3xl font-bold text-[#6B1631] mb-4">
|
||||
{selectedMember.name}
|
||||
</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
|
||||
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}`}
|
||||
>
|
||||
{selectedMember.email}
|
||||
|
|
@ -239,20 +245,24 @@ const BoardMemberCard: React.FC<{
|
|||
'aria-label'?: string;
|
||||
}> = ({ member, onClick, 'aria-label': ariaLabel }) => (
|
||||
<motion.div
|
||||
className="bg-white rounded-lg shadow-md p-4 md:p-6 flex flex-col items-center cursor-pointer"
|
||||
whileHover={{ scale: 1.05 }}
|
||||
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.03 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
onClick={onClick}
|
||||
role="listitem"
|
||||
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
|
||||
src={member.image}
|
||||
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>
|
||||
);
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue