Skip to content

Improve card typography consistency and reduce unnecessary spacing #724

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

Closed
AmyKrrrr wants to merge 2 commits into from
Closed

Improve card typography consistency and reduce unnecessary spacing #724

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9bd6d2b
fix: improve idea card typography and spacing
AmyKrrrr May 22, 2026
65934c9
fix: resolve conflicting typography styles
AmyKrrrr May 22, 2026
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
16 changes: 8 additions & 8 deletions src/components/ideas/IdeaCard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export function IdeaCard({ article, year }) {
className="dark:bg-[#2A2A2A] dark:border-white"
whileHover={{ y: -5, boxShadow: '0 10px 20px rgba(0,0,0,0.2)' }}
sx={{
height: 350,
height: 270,
borderRadius: 2,
border: '1px solid',
borderColor: '#3c982c', // Hardcoded color from original
Expand All @@ -37,8 +37,8 @@ export function IdeaCard({ article, year }) {
<CardContent sx={{ flexGrow: 1, textAlign: 'center' }}>
<Typography
variant="h5"
className="mt-6 text-2xl font-mono text-green-600 dark:text-yellow-400"
sx={{ fontFamily: 'Nunito-Bold', color: '#3c982c', textAlign: 'center' }}
className="font-bold mt-6 text-2xl font-mono text-green-600 dark:text-yellow-400 text-center"
// sx={{color: '#3c982c', textAlign: 'center' }}
>
{article.title}
</Typography>
Expand Down Expand Up @@ -67,11 +67,11 @@ export function IdeaCard({ article, year }) {
component={motion.a}
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
sx={{
color: '#3c982c',
textTransform: 'none',
}}
className="font-Nunito-Bold text-green-600 dark:text-yellow-400 text-lg leading-7 text-center"
// sx={{
// color: '#3c982c',
// textTransform: 'none',
// }}
className="font-bold font-mono text-green-600 dark:text-yellow-400 text-lg leading-7 text-center normal-case"
>
Comment on lines +70 to 75
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot May 22, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟠 Major | ⚡ Quick win

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Verify whether project-level MUI overrides already disable uppercase globally.
# If no override exists, keep `sx={{ textTransform: 'none' }}` (or use `!normal-case`).
rg -n -C3 "MuiButton|styleOverrides|textTransform" --type js --type jsx --type ts --type tsx

Repository: AOSSIE-Org/Website

Length of output: 90

🏁 Script executed:

#!/bin/bash
set -euo pipefail

# 1) Inspect the exact surrounding code in IdeaCard.jsx
if [ -f "src/components/ideas/IdeaCard.jsx" ]; then
  echo "=== IdeaCard.jsx context around lines 55-90 ==="
  nl -ba src/components/ideas/IdeaCard.jsx | sed -n '55,95p'
else
  echo "Missing file: src/components/ideas/IdeaCard.jsx" >&2
fi

# 2) Find any MUI Button / textTransform overrides in the repo (no reliance on rg --type 'jsx')
echo "=== Searching for MUI Button / textTransform overrides ==="
rg -n -C3 "MuiButton|styleOverrides|textTransform" src . \
  --glob='*.js' --glob='*.jsx' --glob='*.ts' --glob='*.tsx' --glob='*.css' --glob='*.scss' || true

# 3) Specifically look for theme customization / typography / button defaults
echo "=== Searching for createTheme / ThemeProvider ==="
rg -n -C3 "createTheme|ThemeProvider|components:\s*\{|typography" src . \
  --glob='*.js' --glob='*.jsx' --glob='*.ts' --glob='*.tsx' || true

Repository: AOSSIE-Org/Website

Length of output: 171

🏁 Script executed:

#!/bin/bash
# 4) Also list any MUI theme file candidates by common names
echo "=== Candidate theme files ==="
fd -t f "theme" src . | head -n 50 || true
fd -t f "Mui" src . | head -n 50 || true

Repository: AOSSIE-Org/Website

Length of output: 92

🏁 Script executed:

#!/bin/bash
set -euo pipefail

FILE="src/components/ideas/IdeaCard.jsx"
echo "=== IdeaCard.jsx context around lines 60-85 ==="
if [ -f "$FILE" ]; then
  awk 'NR>=60 && NR<=85 {printf "%d\t%s\n", NR, $0}' "$FILE"
else
  echo "Missing file: $FILE" >&2
fi

echo "=== Searching for MuiButton / textTransform overrides (any file types) ==="
rg -n -S -C3 "MuiButton|textTransform" . --glob='*.js' --glob='*.jsx' --glob='*.ts' --glob='*.tsx' --glob='*.css' --glob='*.scss' || true

echo "=== Searching for MUI theme customizations (theme/ThemeProvider/components) ==="
rg -n -S -C3 "createTheme|ThemeProvider|components:\s*\{|typography" . --glob='*.js' --glob='*.jsx' --glob='*.ts' --glob='*.tsx' || true

echo "=== Candidate theme/theme-related files by name ==="
# fall back to repo-wide filename search
fd -t f -i "*theme*" . | head -n 50 || true
fd -t f -i "*material*" . | head -n 50 || true
fd -t f -i "*mui*" . | head -n 50 || true

Repository: AOSSIE-Org/Website

Length of output: 3372

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "=== Searching specifically for 'MuiButton' occurrences ==="
rg -n -S "MuiButton" . || true

echo "=== Searching for 'typography' button textTransform overrides ==="
rg -n -S "typography.*button|button.*textTransform|textTransform:.*uppercase|textTransform:.*none" . || true

Repository: AOSSIE-Org/Website

Length of output: 272

normal-case is unlikely to override MUI Button’s default uppercase

In src/components/ideas/IdeaCard.jsx, the <Button> relies on the Tailwind normal-case class, but the repo has no MuiButton/theme textTransform overrides disabling MUI’s uppercase styling. That means casing can revert to uppercase depending on CSS precedence—keep sx={{ textTransform: 'none' }} (or use Tailwind !normal-case) to guarantee consistent typography.

🤖 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 `@src/components/ideas/IdeaCard.jsx` around lines 70 - 75, The Button in
IdeaCard.jsx currently relies on the Tailwind class "normal-case" which may be
overridden by MUI Button's default uppercase; restore the explicit sx override
or use Tailwind important to guarantee casing: add back sx={{ textTransform:
'none' }} on the Button component (or change the className to use
"!normal-case") so the MUI Button's textTransform cannot force uppercase; locate
the Button in IdeaCard.jsx (look for className="... normal-case") and update its
props accordingly.

Know more <ArrowForwardIcon sx={{ width: 20, height: 20 }} />
</Button>
Expand Down