Add icon and fix login text contrast

rphovley · rphovley · commit 5c2c21015978 · 2025-02-27T19:36:06.000-07:00
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
+.DS_Store
 # Logs
 logs
 *.log
diff --git a/.gitignore copy b/.gitignore copy
diff --git a/index.html b/index.html
@@ -2,9 +2,11 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/images/favicon.ico" />
+    <link rel="apple-touch-icon" href="/images/ebb-logo.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <meta name="theme-color" content="#111827" />
+    <title>Ebb Product Board</title>
   </head>
   <body>
     <div id="root"></div>
diff --git a/public/images/downloaded/README.md b/public/images/downloaded/README.md
@@ -0,0 +1,10 @@
+# Downloaded Images
+
+This directory contains the original Ebb logo images that were provided by the user.
+
+The logo might not be properly represented in our SVG versions, so these files are kept for reference.
+
+For production, use the versions that match the brand guidelines:
+- `/public/favicon.svg` - For browser tab favicon
+- `/public/images/ebb-logo.svg` - For square logo usage
+- `/public/images/ebb-logo-text.svg` - For logo with text usage 
diff --git a/public/images/ebb-logo-text.svg b/public/images/ebb-logo-text.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 200">
+  <!-- Background rectangle -->
+  <rect width="200" height="200" rx="40" ry="40" fill="#111827" />
+  
+  <!-- Ebb logo (two overlapping oval shapes) -->
+  <path d="M75,115 C45,115 45,85 75,85 C105,85 105,115 75,115 Z" stroke="#EDEBFD" stroke-width="12" fill="none" />
+  <path d="M125,115 C95,115 95,85 125,85 C155,85 155,115 125,115 Z" stroke="#EDEBFD" stroke-width="12" fill="none" />
+  
+  <!-- Text "ebb" -->
+  <text x="230" y="130" font-family="Arial, sans-serif" font-size="120" font-weight="bold" fill="#EDEBFD" style="font-style: italic;">ebb</text>
+</svg> 
diff --git a/public/images/ebb-logo.png b/public/images/ebb-logo.png
diff --git a/public/images/ebb-logo.svg b/public/images/ebb-logo.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
+  <rect width="400" height="400" rx="80" ry="80" fill="#111827" />
+  <!-- Two overlapping circle/oval shapes to create the Ebb logo -->
+  <path d="M150,230 C90,230 90,170 150,170 C210,170 210,230 150,230 Z" stroke="#EDEBFD" stroke-width="24" fill="none" />
+  <path d="M250,230 C190,230 190,170 250,170 C310,170 310,230 250,230 Z" stroke="#EDEBFD" stroke-width="24" fill="none" />
+</svg> 
diff --git a/public/images/favicon.ico b/public/images/favicon.ico
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/components/comments/CommentForm.tsx b/src/components/comments/CommentForm.tsx
@@ -35,7 +35,7 @@ export default function CommentForm({
         onChange={(e) => setContent(e.target.value)}
         placeholder={placeholder}
         rows={2}
-        className="w-full p-2 rounded-md border-2 border-border bg-card text-foreground text-sm"
+        className="w-full p-2 rounded-md border-2 border-border bg-card text-gray-900 dark:text-gray-100 text-sm placeholder:text-gray-500 dark:placeholder:text-gray-400"
         disabled={isSubmitting}
       />
       <div className="flex justify-end mt-2">
diff --git a/src/components/comments/CommentItem.tsx b/src/components/comments/CommentItem.tsx
@@ -75,11 +75,11 @@ export default function CommentItem({
     <div className={`mb-3 p-3 rounded-md ${comment.isPinned ? 'bg-primary/5 border border-primary/20' : 'bg-card hover:bg-muted'}`}>
       <div className="flex justify-between items-start">
         <div className="flex items-center">
-          <div className="font-medium text-sm">
+          <div className="font-medium text-sm text-gray-900 dark:text-gray-100">
             {comment.createdBy.displayName || 'Anonymous'}
           </div>
-          <span className="mx-1 text-xs text-muted-foreground">•</span>
-          <div className="text-xs text-muted-foreground">
+          <span className="mx-1 text-xs text-gray-600 dark:text-gray-400">•</span>
+          <div className="text-xs text-gray-700 dark:text-gray-300">
             {formatTimeAgo(comment.createdAt)}
           </div>
         </div>
@@ -88,7 +88,7 @@ export default function CommentItem({
           {isPinnable && (
             <button
               onClick={handlePin}
-              className={`p-1 rounded-full ${comment.isPinned ? 'text-primary bg-primary/10' : 'text-muted-foreground hover:text-foreground hover:bg-muted'}`}
+              className={`p-1 rounded-full ${comment.isPinned ? 'text-primary bg-primary/10' : 'text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-muted'}`}
               title={comment.isPinned ? 'Unpin comment' : 'Pin comment'}
             >
               <PinIcon className="h-3.5 w-3.5" />
@@ -99,7 +99,7 @@ export default function CommentItem({
             <>
               <button
                 onClick={() => setIsEditing(true)}
-                className="p-1 rounded-full text-muted-foreground hover:text-foreground hover:bg-muted"
+                className="p-1 rounded-full text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-muted"
                 title="Edit comment"
                 disabled={isEditing}
               >
@@ -108,7 +108,7 @@ export default function CommentItem({
 
               <button
                 onClick={handleDelete}
-                className="p-1 rounded-full text-muted-foreground hover:text-destructive hover:bg-muted"
+                className="p-1 rounded-full text-gray-700 dark:text-gray-300 hover:text-destructive hover:bg-muted"
                 title="Delete comment"
               >
                 <TrashIcon className="h-3.5 w-3.5" />
@@ -124,7 +124,7 @@ export default function CommentItem({
             <textarea
               value={editedContent}
               onChange={(e) => setEditedContent(e.target.value)}
-              className="w-full p-2 text-sm border rounded-md bg-card"
+              className="w-full p-2 text-sm border rounded-md bg-card text-gray-900 dark:text-gray-100"
               rows={2}
             />
             <div className="flex justify-end space-x-2 mt-2">
@@ -144,7 +144,7 @@ export default function CommentItem({
             </div>
           </div>
         ) : (
-          <p className="text-sm whitespace-pre-wrap">{comment.content}</p>
+          <p className="text-sm whitespace-pre-wrap text-gray-900 dark:text-gray-100">{comment.content}</p>
         )}
       </div>
     </div>
diff --git a/src/components/notes/NoteCard.tsx b/src/components/notes/NoteCard.tsx
@@ -79,7 +79,7 @@ export default function NoteCard({ note, onEdit, onDelete }: NoteCardProps) {
     <div className="bg-card border-2 border-border rounded-lg shadow-xl hover:shadow-2xl transition-shadow duration-200 overflow-hidden flex flex-col">
       <div className="p-4 flex-grow">
         <div className="flex justify-between items-start">
-          <h3 className="font-medium text-lg text-card-foreground truncate mr-2">{note.title}</h3>
+          <h3 className="font-medium text-lg text-gray-900 dark:text-gray-100 truncate mr-2">{note.title}</h3>
           {canEdit ? (
             <EditableStatusBadge
               status={note.status}
@@ -91,7 +91,7 @@ export default function NoteCard({ note, onEdit, onDelete }: NoteCardProps) {
         </div>
 
         <div
-          className="mt-4 flex items-center text-xs text-muted-foreground cursor-pointer hover:text-foreground"
+          className="mt-4 flex items-center text-xs text-gray-700 dark:text-gray-300 cursor-pointer hover:text-gray-900 dark:hover:text-white"
           onClick={() => setIsCommentsCollapsed(!isCommentsCollapsed)}
         >
           <MessageCircleIcon className="h-3.5 w-3.5 mr-1" />
@@ -142,7 +142,7 @@ export default function NoteCard({ note, onEdit, onDelete }: NoteCardProps) {
                 ))}
               </div>
             ) : (
-              <div className="text-sm text-muted-foreground">
+              <div className="text-sm text-gray-700 dark:text-gray-300">
                 No additional comments
               </div>
             )}
diff --git a/src/components/ui/CategoryTag.tsx b/src/components/ui/CategoryTag.tsx
@@ -5,13 +5,13 @@ interface CategoryTagProps {
 
 export default function CategoryTag({ category, onRemove }: CategoryTagProps) {
   return (
-    <span className="text-xs bg-muted text-muted-foreground px-2 py-1 rounded whitespace-nowrap inline-flex items-center">
+    <span className="text-xs bg-muted text-gray-700 dark:text-gray-300 px-2 py-1 rounded whitespace-nowrap inline-flex items-center">
       {category}
       {onRemove && (
         <button
           type="button"
           onClick={onRemove}
-          className="ml-1.5 inline-flex text-muted-foreground hover:text-foreground"
+          className="ml-1.5 inline-flex text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white"
         >
           <span className="sr-only">Remove</span>
           ×
diff --git a/src/components/ui/EditableStatusBadge.tsx b/src/components/ui/EditableStatusBadge.tsx
@@ -68,7 +68,7 @@ export default function EditableStatusBadge({
               <button
                 key={statusOption}
                 className={`${statusOption === status ? 'bg-muted' : ''
-                  } flex items-center px-4 py-2 text-sm text-foreground hover:bg-muted w-full text-left`}
+                  } flex items-center px-4 py-2 text-sm text-gray-900 dark:text-gray-100 hover:bg-muted w-full text-left`}
                 onClick={() => handleStatusChange(statusOption)}
               >
                 <span
diff --git a/src/index.css b/src/index.css
@@ -8,7 +8,7 @@
     --foreground: 222.2 47.4% 11.2%;
 
     --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
+    --muted-foreground: 215.4 16.3% 40%;
 
     --popover: 0 0% 100%;
     --popover-foreground: 222.2 47.4% 11.2%;
@@ -28,7 +28,7 @@
     --accent: 210 40% 96.1%;
     --accent-foreground: 222.2 47.4% 11.2%;
 
-    --destructive: 0 100% 50%;
+    --destructive: 0 100% 45%;
     --destructive-foreground: 210 40% 98%;
 
     --ring: 215 20.2% 65.1%;
@@ -38,30 +38,30 @@
 
   .dark {
     --background: 224 71% 4%;
-    --foreground: 213 31% 91%;
+    --foreground: 213 31% 95%;
 
     --muted: 223 47% 11%;
-    --muted-foreground: 215.4 16.3% 56.9%;
+    --muted-foreground: 215.4 16.3% 75%;
 
     --accent: 216 34% 17%;
     --accent-foreground: 210 40% 98%;
 
     --popover: 224 71% 4%;
-    --popover-foreground: 215 20.2% 65.1%;
+    --popover-foreground: 215 20.2% 90%;
 
     --border: 216 34% 17%;
     --input: 216 34% 17%;
 
     --card: 224 71% 4%;
-    --card-foreground: 213 31% 91%;
+    --card-foreground: 213 31% 95%;
 
     --primary: 210 40% 98%;
     --primary-foreground: 222.2 47.4% 1.2%;
 
     --secondary: 222.2 47.4% 11.2%;
     --secondary-foreground: 210 40% 98%;
 
-    --destructive: 0 63% 31%;
+    --destructive: 0 63% 45%;
     --destructive-foreground: 210 40% 98%;
 
     --ring: 216 34% 17%;
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
@@ -101,13 +101,16 @@ export default function HomePage() {
       {/* Header with fixed user icon */}
       <header className="bg-card shadow">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex justify-between items-center">
-          <h1 className="text-xl font-semibold text-card-foreground">Ebb Product Board</h1>
+          <div className="flex items-center">
+            <img src="/images/ebb-logo.png" alt="Ebb Logo" className="h-10" />
+            <span className="ml-2 text-xl font-semibold text-gray-900 dark:text-gray-100">Product Board</span>
+          </div>
 
           <div className="flex items-center space-x-4">
             {/* Theme toggle button */}
             <button
               onClick={toggleTheme}
-              className="rounded-full p-2 text-muted-foreground hover:bg-muted"
+              className="rounded-full p-2 text-gray-700 dark:text-gray-300 hover:bg-muted"
               aria-label={`Switch to ${theme === 'dark' ? 'light' : 'dark'} mode`}
             >
               {theme === 'dark' ? (
@@ -123,15 +126,15 @@ export default function HomePage() {
                   user={currentUser}
                   size="md"
                 />
-                <span className="text-sm font-medium text-card-foreground">
+                <span className="text-sm font-medium text-gray-900 dark:text-gray-100">
                   {currentUser.displayName || 'User'}
                   {currentUser.role && (
-                    <span className="ml-1 text-xs text-muted-foreground">({currentUser.role})</span>
+                    <span className="ml-1 text-xs text-gray-700 dark:text-gray-300">({currentUser.role})</span>
                   )}
                 </span>
                 <button
                   onClick={() => signOut()}
-                  className="text-sm text-muted-foreground hover:text-card-foreground"
+                  className="text-sm text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white"
                 >
                   Sign out
                 </button>
@@ -170,14 +173,14 @@ export default function HomePage() {
         {/* Filter section */}
         <div className="flex flex-col md:flex-row gap-4 mb-6">
           <div>
-            <label htmlFor="status-filter" className="block text-sm font-medium text-foreground mb-1">
+            <label htmlFor="status-filter" className="block text-sm font-medium text-gray-900 dark:text-gray-100 mb-1">
               Status
             </label>
             <select
               id="status-filter"
               value={filter || ''}
               onChange={(e) => setFilter(e.target.value as NoteStatus | '')}
-              className="w-full md:w-auto px-3 py-2 bg-background border border-border rounded-md shadow-sm text-foreground focus:outline-none focus:ring-primary focus:border-primary"
+              className="w-full md:w-auto px-3 py-2 bg-background border border-border rounded-md shadow-sm text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-primary focus:border-primary"
             >
               <option value="">All Statuses</option>
               <option value="backlog">Backlog</option>
@@ -188,14 +191,14 @@ export default function HomePage() {
           </div>
 
           <div>
-            <label htmlFor="category-filter" className="block text-sm font-medium text-foreground mb-1">
+            <label htmlFor="category-filter" className="block text-sm font-medium text-gray-900 dark:text-gray-100 mb-1">
               Category
             </label>
             <select
               id="category-filter"
               value={categoryFilter || ''}
               onChange={(e) => setCategoryFilter(e.target.value)}
-              className="w-full md:w-auto px-3 py-2 bg-background border border-border rounded-md shadow-sm text-foreground focus:outline-none focus:ring-primary focus:border-primary"
+              className="w-full md:w-auto px-3 py-2 bg-background border border-border rounded-md shadow-sm text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-primary focus:border-primary"
             >
               <option value="">All Categories</option>
               {allCategories.map((category, index) => (
@@ -239,11 +242,11 @@ export default function HomePage() {
         {/* Notes grid */}
         {loading ? (
           <div className="flex justify-center py-12">
-            <p>Loading notes...</p>
+            <p className="text-gray-900 dark:text-gray-100">Loading notes...</p>
           </div>
         ) : filteredNotes.length === 0 ? (
           <div className="bg-card rounded-lg shadow-sm p-6 text-center">
-            <p className="text-muted-foreground">No notes found. {canEdit && 'Create your first note!'}</p>
+            <p className="text-gray-700 dark:text-gray-300">No notes found. {canEdit && 'Create your first note!'}</p>
           </div>
         ) : (
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
diff --git a/src/pages/LoginPage.tsx b/src/pages/LoginPage.tsx
@@ -14,8 +14,9 @@ export default function LoginPage() {
       setLoading(true);
       await signInWithGoogle();
       navigate('/');
-    } catch (error: any) {
-      setError('Failed to sign in with Google: ' + (error.message || 'Unknown error'));
+    } catch (error: unknown) {
+      const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+      setError('Failed to sign in with Google: ' + errorMessage);
     } finally {
       setLoading(false);
     }
@@ -25,8 +26,9 @@ export default function LoginPage() {
     <div className="flex items-center justify-center min-h-screen bg-gray-100">
       <div className="w-full max-w-md p-8 space-y-8 bg-white rounded-lg shadow">
         <div className="text-center">
-          <h1 className="text-3xl font-bold">Ebb Product Board</h1>
-          <h2 className="mt-6 text-xl">Sign in to edit the board</h2>
+          <img src="/images/ebb-logo.png" alt="Ebb Logo" className="h-16 w-16 mx-auto mb-2" />
+          <h1 className="text-3xl font-bold text-gray-900">Ebb Roadmap</h1>
+          <h2 className="mt-6 text-xl text-gray-800">Sign in to edit the board</h2>
         </div>
 
         {error && (
@@ -54,7 +56,7 @@ export default function LoginPage() {
         </div>
 
         <div className="text-center mt-4">
-          <p className="text-sm text-gray-600">
+          <p className="text-sm text-gray-800">
             Don't have edit access? Sign in first, then contact an administrator to upgrade your permissions.
           </p>
         </div>

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+.DS_Store`
`1`	`2`	`# Logs`
`2`	`3`	`logs`
`3`	`4`	`*.log`