Skip to content

Style Brand Identity: Sync Approved Logo Assets inside Page Footer Layout #60

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
imuniqueshiv merged 1 commit into from
Jul 5, 2026
+18 −9
Merged

Style Brand Identity: Sync Approved Logo Assets inside Page Footer Layout #60

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
27 changes: 18 additions & 9 deletions client/src/components/Footer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,17 +21,26 @@ const Footer = () => {
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-10">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10 mb-14">

{/* Column 1: Project Info */}
{/* Column 1: Project Info */}
<div className="flex flex-col gap-4 lg:col-span-1">
<div className="flex items-center gap-2.5">
<img
src="/favicon.svg"
alt=""
aria-hidden="true"
className="w-8 h-8"
/>
<span className="font-bold text-xl text-gray-800 tracking-tight">
MeetOnMemory
<div className="flex items-center justify-center">
{/* Clean Native Option A Infinity Symbol tuned for Footer Sizing */}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" className="w-10 h-10 transition-transform duration-300">
<defs>
<linearGradient id="footerInfinityGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#2563eb" />
<stop offset="100%" stop-color="#7c3aed" />
</linearGradient>
</defs>
<path d="M25,50 C25,35 38,30 50,50 C62,70 75,65 75,50 C75,35 62,30 50,50 C38,70 25,65 25,50 Z"
fill="none" stroke="url(#footerInfinityGrad)" stroke-width="11" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="25" cy="50" r="6.5" fill="#2563eb" />
<circle cx="75" cy="50" r="6.5" fill="#7c3aed" />
</svg>
Comment on lines +29 to +40

@coderabbitai coderabbitai Bot Jul 5, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -euo pipefail

printf '\n## Footer.jsx outline\n'
ast-grep outline client/src/components/Footer.jsx --view expanded || true

printf '\n## Footer.jsx lines 1-80\n'
cat -n client/src/components/Footer.jsx | sed -n '1,80p'

printf '\n## package.json snippets\n'
cat -n package.json | sed -n '1,220p' 2>/dev/null || true

Repository: imuniqueshiv/MeetOnMemory

Length of output: 5036

🏁 Script executed:

#!/bin/bash
set -euo pipefail

printf '\n## client/package.json\n'
cat -n client/package.json | sed -n '1,220p'

printf '\n## repo lint/config files\n'
fd -a 'eslint*' . -t f || true
fd -a '.eslintrc*' . -t f || true
fd -a 'vite.config.*' client -t f || true
fd -a 'tsconfig*.json' client -t f || true

printf '\n## search for react lint rules / jsx-svg rules\n'
rg -n --hidden --glob '!**/node_modules/**' 'react/jsx-(?:camelcase|no-duplicate-props)|svg|stop-color|stroke-width' client . || true

Repository: imuniqueshiv/MeetOnMemory

Length of output: 20365

🌐 Web query:

React SVG attributes stop-color stroke-width invalid DOM property warning behavior pass through

💡 Result:

In React, SVG attributes must be written in camelCase (e.g., strokeWidth, stopColor, fillRule) rather than the standard hyphenated (kebab-case) SVG syntax used in raw files [1][2][3]. Using hyphenated attributes like stroke-width or stop-color in JSX will trigger an "Invalid DOM property" warning [1][4][5]. React enforces this convention to maintain consistency across its property system, as JSX transforms hyphenated attributes into JavaScript property identifiers, which do not support hyphens [1][2]. To resolve these warnings, you must convert the attributes to their canonical React camelCase equivalents [1][6][7]. Common conversions include: - stroke-width -> strokeWidth [2][5] - stop-color -> stopColor [2][5] - fill-rule -> fillRule [1][5] - clip-path -> clipPath [1][2] While React historically experimented with passing through all SVG attributes [8][9], current best practices and the React engine require adherence to camelCase for native SVG elements to avoid console warnings and ensure proper attribute handling [10][6][5]. If you are dealing with large numbers of SVG files, it is recommended to use automated conversion tools such as: - VS Code extensions (e.g., React SVG Fixer) [11] - Online SVG-to-JSX converters [2][3] - Codemods [12] These tools automate the process of sanitizing attributes, stripping XML declarations, and converting style strings into objects, which are also requirements for rendering SVGs successfully in React [2][3].

Citations:

Use camelCase SVG props in this JSX.
stop-color, stroke-width, stroke-linecap, and stroke-linejoin should be stopColor, strokeWidth, strokeLinecap, and strokeLinejoin to avoid React DOM warnings.

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@client/src/components/Footer.jsx` around lines 29 - 40, The inline SVG in
Footer.jsx is using kebab-case attributes that trigger React DOM warnings in
JSX. Update the SVG elements inside the footer logo so the <defs> gradient and
<path> use camelCase props: change stop-color in the <stop> elements to
stopColor, and change stroke-width, stroke-linecap, and stroke-linejoin on the
<path> to strokeWidth, strokeLinecap, and strokeLinejoin while keeping the
Footer component’s SVG structure unchanged.

</div>
<span className="font-bold text-xl text-gray-900 tracking-tight">
MeetOn<span className="text-blue-600">Memory</span>
</span>
</div>
<p className="text-gray-600 text-sm font-medium leading-snug">
Expand Down
Loading