pure_sagacity/Portfolio-Project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor theme-related class names for consistency in App component

Browse Source
This commit is contained in:
Maaz Khokhar
2026-01-03 12:52:11 -06:00
parent 611d9424e1
commit 0053b49702
1 changed files with 18 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/App.tsx
View File

@@ -97,16 +97,16 @@ const App = () => {
return ( return (
<div <div
className={`min-h-screen transition-all duration-300 ${theme === "dark" className={`min-h-screen transition-all duration-300 ${theme === "dark"
? "bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900" ? "bg-linear-to-br from-slate-900 via-slate-800 to-slate-900"
: "bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100" : "bg-linear-to-br from-slate-50 via-blue-50 to-indigo-100"
}`} }`}
> >
{/* Theme Toggle Button */} {/* Theme Toggle Button */}
<button <button
onClick={toggleTheme} onClick={toggleTheme}
className={`fixed top-4 right-4 z-50 p-3 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 border ${theme === "dark" className={`fixed top-4 right-4 z-50 p-3 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 border ${theme === "dark"
? "bg-slate-800 text-white border-slate-700 hover:bg-slate-700" ? "bg-slate-800 text-white border-slate-700 hover:bg-slate-700"
: "bg-white text-slate-800 border-slate-200 hover:bg-slate-50" : "bg-white text-slate-800 border-slate-200 hover:bg-slate-50"
}`} }`}
aria-label="Toggle theme" aria-label="Toggle theme"
> >
@@ -167,8 +167,8 @@ const App = () => {
<button <button
onClick={() => setShowModal(false)} onClick={() => setShowModal(false)}
className={`transition-colors ${theme === "dark" className={`transition-colors ${theme === "dark"
? "text-slate-500 hover:text-slate-300" ? "text-slate-500 hover:text-slate-300"
: "text-slate-400 hover:text-slate-600" : "text-slate-400 hover:text-slate-600"
}`} }`}
> >
<X className="w-6 h-6" /> <X className="w-6 h-6" />
@@ -189,8 +189,8 @@ const App = () => {
setNewReview({ ...newReview, name: e.target.value }) setNewReview({ ...newReview, name: e.target.value })
} }
className={`w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 ${theme === "dark" className={`w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 ${theme === "dark"
? "border-slate-600 bg-slate-700 text-white" ? "border-slate-600 bg-slate-700 text-white"
: "border-slate-300 bg-white text-slate-900" : "border-slate-300 bg-white text-slate-900"
}`} }`}
placeholder="Your full name" placeholder="Your full name"
/> />
@@ -209,8 +209,8 @@ const App = () => {
setNewReview({ ...newReview, position: e.target.value }) setNewReview({ ...newReview, position: e.target.value })
} }
className={`w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 ${theme === "dark" className={`w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 ${theme === "dark"
? "border-slate-600 bg-slate-700 text-white" ? "border-slate-600 bg-slate-700 text-white"
: "border-slate-300 bg-white text-slate-900" : "border-slate-300 bg-white text-slate-900"
}`} }`}
placeholder="Your job title and company" placeholder="Your job title and company"
/> />
@@ -233,10 +233,10 @@ const App = () => {
> >
<Star <Star
className={`w-6 h-6 ${star <= newReview.rating className={`w-6 h-6 ${star <= newReview.rating
? "fill-yellow-400 text-yellow-400" ? "fill-yellow-400 text-yellow-400"
: theme === "dark" : theme === "dark"
? "text-gray-600" ? "text-gray-600"
: "text-gray-300" : "text-gray-300"
}`} }`}
/> />
</button> </button>
@@ -256,8 +256,8 @@ const App = () => {
setNewReview({ ...newReview, text: e.target.value }) setNewReview({ ...newReview, text: e.target.value })
} }
className={`w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 ${theme === "dark" className={`w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 ${theme === "dark"
? "border-slate-600 bg-slate-700 text-white" ? "border-slate-600 bg-slate-700 text-white"
: "border-slate-300 bg-white text-slate-900" : "border-slate-300 bg-white text-slate-900"
}`} }`}
rows={4} rows={4}
placeholder="Share your experience working with Maaz..." placeholder="Share your experience working with Maaz..."
@@ -268,8 +268,8 @@ const App = () => {
<button <button
onClick={() => setShowModal(false)} onClick={() => setShowModal(false)}
className={`flex-1 px-4 py-2 border rounded-lg transition-colors ${theme === "dark" className={`flex-1 px-4 py-2 border rounded-lg transition-colors ${theme === "dark"
? "border-slate-600 text-slate-300 bg-slate-700 hover:bg-slate-600" ? "border-slate-600 text-slate-300 bg-slate-700 hover:bg-slate-600"
: "border-slate-300 text-slate-700 bg-white hover:bg-slate-50" : "border-slate-300 text-slate-700 bg-white hover:bg-slate-50"
}`} }`}
> >
Cancel Cancel