Skip to content

Flashcard updation #657

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
Roshansuthar1105 merged 2 commits into from
Oct 21, 2025
Merged

Flashcard updation #657

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2bc2106
Changed the theme style error in flashcards page
Roshansuthar1105 Oct 21, 2025
7eff3f1
changed the navbar also for theme style match
Roshansuthar1105 Oct 21, 2025
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
18 changes: 18 additions & 0 deletions client/src/components/MobileMenu.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -281,6 +281,24 @@ function MobileMenu({ isOpen, onClose, isLoggedIn, userdata }) {
<FaQuestionCircle className="text-xl transition-transform duration-200 group-hover:scale-110" />
<span className="text-xl">Questions</span>
</NavLink>
<NavLink
to="/flashcards"
onClick={onClose}
className={({ isActive }) => `
px-3 py-2.5 rounded-xl text-base font-medium transition-all duration-300 flex items-center gap-2 group relative overflow-hidden
${isActive
? isDark
? "bg-dark-bg-tertiary text-primary shadow-lg"
: "bg-light-bg-tertiary text-primary shadow-md"
: isDark
? "text-dark-text-primary hover:bg-dark-bg-tertiary/70"
: "text-light-text-primary hover:bg-light-bg-tertiary/70"
}
`}
>
<FaBook className="text-xl transition-transform duration-200 group-hover:scale-110" />
<span className="text-xl">Flashcards</span>
</NavLink>

<NavLink
to="/contact"
Expand Down
2 changes: 1 addition & 1 deletion client/src/components/Modal.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export default function Modal({ open, onClose, title, children }) {
onClick={onClose}
/>
{/* Panel */}
<div className="relative bg-white rounded-lg shadow-lg w-full max-w-2xl mx-4 p-6 z-10">
<div className="relative dark:bg-slate-900 bg-white rounded-lg shadow-lg w-full max-w-2xl mx-4 p-6 z-10">
<div className="flex justify-between items-center mb-4">
<h2 className="text-xl font-semibold">{title}</h2>
<button
Expand Down
2 changes: 1 addition & 1 deletion client/src/components/NavBar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -155,7 +155,7 @@ function NavBar() {
transition-all duration-300 ease-out relative group
transform hover:scale-[1.02] hover:-translate-y-0.5
${isActive
? "bg-primary text-white shadow-lg shadow-primary/25"
? "bg-primary dark:text-white text-black shadow-lg shadow-primary/25"
: isDark
? "bg-gray-800/40 border border-gray-700/30 text-dark-text-primary hover:bg-primary/10 hover:text-white hover:border-primary/30 hover:shadow-md hover:shadow-primary/10"
: "bg-white/25 border border-white/20 text-light-text-primary hover:bg-primary/10 hover:text-black hover:border-primary/30 hover:shadow-md hover:shadow-primary/10"
Expand Down
25 changes: 13 additions & 12 deletions client/src/pages/Flashcards.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -213,7 +213,7 @@ export default function Flashcards() {
setCurrentIndex(0);
setFlipped(false);
}}
className="block w-full text-left px-4 py-2 hover:bg-purple-100 dark:hover:bg-gray-800 rounded-t-lg"
className="block w-full text-left px-4 py-2 hover:bg-primary-100 dark:hover:bg-gray-800 rounded-t-lg"
>
All Topics
</button>
Expand All @@ -226,7 +226,7 @@ export default function Flashcards() {
setCurrentIndex(0);
setFlipped(false);
}}
className="block w-full text-left px-4 py-2 hover:bg-purple-100 dark:hover:bg-gray-800"
className="block w-full text-left px-4 py-2 hover:bg-primary-100 dark:hover:bg-gray-800"
>
{t}
</button>
Expand All @@ -241,7 +241,7 @@ export default function Flashcards() {
<div className="flex gap-4">
<button
onClick={handleReview}
className="p-2 bg-purple-100 text-purple-800 rounded font-medium"
className="p-2 bg-primary-100 text-primary-800 rounded font-medium"
>
Reviewed: {reviewCount}
</button>
Expand All @@ -256,7 +256,7 @@ export default function Flashcards() {
<div className="flex flex-col items-end gap-2">
<button
onClick={handleOpenModal}
className="bg-purple-500 text-white px-4 py-2 rounded hover:bg-purple-600"
className="bg-primary text-white px-4 py-2 rounded hover:bg-primary-600"
>
+ Add Flashcard
</button>
Expand Down Expand Up @@ -293,7 +293,7 @@ export default function Flashcards() {

<div
className={`flip-card-back flex flex-col justify-center items-center text-center p-8 rounded-2xl shadow-2xl ${
isDark ? "bg-purple-800 text-white" : "bg-purple-200 text-gray-900"
isDark ? "bg-primary-800 text-white" : "bg-primary-200 text-gray-900"
}`}
>
<h2 className="text-2xl font-semibold mb-3">Definition</h2>
Expand All @@ -307,13 +307,13 @@ export default function Flashcards() {
<div className="flex justify-center gap-6 mt-8">
<button
onClick={prevCard}
className="px-6 py-2 rounded bg-purple-200 hover:bg-purple-300 text-purple-900 font-medium"
className="px-6 py-2 rounded bg-primary-200 hover:bg-primary-300 text-primary-900 font-medium"
>
← Previous
</button>
<button
onClick={nextCard}
className="px-6 py-2 rounded bg-purple-500 hover:bg-purple-600 text-white font-medium"
className="px-6 py-2 rounded bg-primary hover:bg-primary-600 text-white font-medium"
>
Next →
</button>
Expand All @@ -334,17 +334,18 @@ export default function Flashcards() {
<div>
<label className="block text-sm font-medium mb-1">Term</label>
<input
className="w-full border rounded p-2"
className="w-full border rounded p-2 dark:bg-slate-800 bg-gray-100"
value={form.term}
onChange={(e) => setForm({ ...form, term: e.target.value })}
placeholder="Enter Term here"
required
/>
</div>

<div>
<label className="block text-sm font-medium mb-1">Definition</label>
<textarea
className="w-full border rounded p-2"
className="w-full border rounded p-2 dark:bg-slate-800 bg-gray-100"
value={form.definition}
onChange={(e) => setForm({ ...form, definition: e.target.value })}
rows={3}
Expand All @@ -356,7 +357,7 @@ export default function Flashcards() {
<label className="block text-sm font-medium mb-1">Topic</label>
<div className="flex gap-3">
<select
className="border rounded p-2 flex-1"
className="border rounded p-2 flex-1 dark:bg-slate-800 bg-gray-100"
value={topicChoice === "custom" ? "custom" : form.topic || ""}
onChange={(e) => {
const val = e.target.value;
Expand All @@ -379,7 +380,7 @@ export default function Flashcards() {
</select>

<input
className="border rounded p-2 flex-1"
className="border rounded p-2 flex-1 dark:bg-slate-800 bg-gray-100"
placeholder="Or type a new topic"
value={topicChoice === "custom" ? form.topic : ""}
onChange={(e) => {
Expand All @@ -394,7 +395,7 @@ export default function Flashcards() {
<button type="button" onClick={handleCloseModal} className="px-4 py-2 rounded border">
Cancel
</button>
<button type="submit" className="px-4 py-2 rounded bg-purple-500 text-white hover:bg-purple-600">
<button type="submit" className="px-4 py-2 rounded bg-primary text-white hover:bg-primary-600">
Add
</button>
</div>
Expand Down