Skip to content

Commit ec9adf5

Browse files
CipherYuvrajCipherYuvraj
authored
Merge pull request #44 from bdhamithkumara/update-twitter-logo
fix the component not showing issue in Graaph Algorithm Visualizer + update the Twitter Icon
2 parents 826b8cf + 1258a1a commit ec9adf5

File tree

2 files changed

+84
-70
lines changed

2 files changed

+84
-70
lines changed

‎frontend/src/components/Layout/Footer.jsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { FaGithub, FaLinkedin, FaTwitter } from "react-icons/fa";
1+
import { FaGithub, FaLinkedin } from "react-icons/fa";
2+
import { BsTwitterX } from "react-icons/bs";
23
import { useTheme } from "../../contexts/ThemeContext";
34

45
const Footer = () => {
@@ -19,7 +20,7 @@ const Footer = () => {
1920
{
2021
platform: "Twitter",
2122
url: "https://twitter.com/your_twitter_handle",
22-
icon: <FaTwitter className="w-5 h-5" />,
23+
icon: <BsTwitterX className="w-5 h-5" />,
2324
},
2425
];
2526

‎frontend/src/pages/GraphVisualizer.jsx‎

Lines changed: 81 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -546,92 +546,105 @@ const GraphVisualizer = () => {
546546
? 'bg-gray-800/20 border-gray-700/50'
547547
: 'bg-white/20 border-white/50'
548548
}`}>
549-
<div className="bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 p-6">
550-
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 sm:gap-0">
551-
<div className="w-full sm:flex-1">
552-
<h1 className="text-2xl sm:text-4xl font-bold mb-2 text-white">
549+
<div className={`bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 md:pt-6 md:px-6 pt-6 px-6 ${showUserMenu ? "pb-20 md:pb-14" : "pb-6 md:pb-6"}`}>
550+
<div className="flex justify-between items-center md:flex-row flex-col">
551+
<div className="flex-1">
552+
<h1 className="text-4xl font-bold mb-2 text-white">
553553
Graph Algorithm Visualizer
554554
</h1>
555555
<p className="text-sm sm:text-base text-blue-100">
556556
Interactive graph algorithm visualization platform
557557
</p>
558558
</div>
559-
560-
<div className="flex items-center space-x-2 sm:space-x-4 w-full sm:w-auto justify-start sm:justify-end">
561-
{/* Search Bar */}
562-
<div className="relative flex-1 sm:flex-none">
563-
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
564-
<input
565-
type="text"
566-
placeholder="Search algorithms..."
567-
value={searchTerm}
568-
onChange={(e) => setSearchTerm(e.target.value)}
569-
className={`w-full sm:w-auto pl-10 pr-4 py-2 rounded-lg backdrop-blur-md border transition-all ${
570-
isDark
571-
? 'bg-gray-800/50 border-gray-600 text-white'
572-
: 'bg-white/50 border-white/30 text-gray-800'
559+
560+
<div className="flex items-center md:flex-row flex-col md:mt-0 mt-5 w-full md:w-auto space-y-3 md:space-y-0 md:space-x-4">
561+
{/* Search + Theme Toggle */}
562+
<div className="flex space-x-4 w-full md:w-auto">
563+
<div className="relative flex-1">
564+
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
565+
<input
566+
type="text"
567+
placeholder="Search algorithms..."
568+
value={searchTerm}
569+
onChange={(e) => setSearchTerm(e.target.value)}
570+
className={`pl-10 pr-4 py-2 w-full rounded-lg backdrop-blur-md border transition-all ${
571+
darkMode
572+
? "bg-gray-800/50 border-gray-600 text-white"
573+
: "bg-white/50 border-white/30 text-gray-800"
574+
}`}
575+
/>
576+
</div>
577+
578+
{/* Theme Toggle */}
579+
<button
580+
onClick={() => setDarkMode(!darkMode)}
581+
className={`p-3 rounded-lg backdrop-blur-md transition-all hover:scale-110 ${
582+
darkMode
583+
? "bg-yellow-500/20 text-yellow-300 hover:bg-yellow-500/30"
584+
: "bg-gray-800/20 text-gray-600 hover:bg-gray-800/30"
573585
}`}
574-
/>
586+
>
587+
{darkMode ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />}
588+
</button>
575589
</div>
576590

577-
{/* Theme Toggle */}
578-
<button
579-
onClick={toggleTheme}
580-
className={`p-3 rounded-lg backdrop-blur-md transition-all hover:scale-110 ${
581-
isDark
582-
? 'bg-yellow-500/20 text-yellow-300 hover:bg-yellow-500/30'
583-
: 'bg-gray-800/20 text-gray-600 hover:bg-gray-800/30'
584-
}`}
585-
>
586-
{isDark ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />}
587-
</button>
588-
589-
{/* Algorithm Selector */}
590-
<button
591-
onClick={() => setIsAlgorithmSelectorOpen(!isAlgorithmSelectorOpen)}
592-
className="px-6 py-3 bg-white/20 backdrop-blur-md rounded-lg hover:bg-white/30 transition-all flex items-center space-x-2 border border-white/30"
593-
>
594-
<Network className="h-5 w-5 text-white" />
595-
<span className="text-white font-medium">{selectedAlgorithm?.name}</span>
596-
{isAlgorithmSelectorOpen ?
597-
<ChevronUp className="h-4 w-4 text-white" /> :
598-
<ChevronDown className="h-4 w-4 text-white" />
599-
}
600-
</button>
601-
602-
{/* User Menu */}
603-
<div className="relative">
591+
{/* Algorithm Selector + User Menu */}
592+
<div className="flex space-x-4 w-full md:w-auto">
593+
{/* Algorithm Selector */}
604594
<button
605-
onClick={() => setShowUserMenu(!showUserMenu)}
606-
className="p-3 bg-white/20 backdrop-blur-md rounded-lg hover:bg-white/30 transition-all border border-white/30"
595+
onClick={() => setIsAlgorithmSelectorOpen(!isAlgorithmSelectorOpen)}
596+
className="px-4 py-2 w-full md:w-auto bg-white/20 backdrop-blur-md rounded-lg hover:bg-white/30 transition-all flex items-center justify-between border border-white/30"
607597
>
608-
<User className="h-5 w-5 text-white" />
598+
<Network className="h-5 w-5 text-white" />
599+
<span className="text-white text-sm md:text-md font-medium flex-1 text-center">
600+
{selectedAlgorithm?.name}
601+
</span>
602+
{isAlgorithmSelectorOpen ? (
603+
<ChevronUp className="h-4 w-4 text-white" />
604+
) : (
605+
<ChevronDown className="h-4 w-4 text-white" />
606+
)}
609607
</button>
610-
611-
{showUserMenu && (
612-
<div className={`absolute right-0 mt-2 w-48 rounded-lg shadow-xl backdrop-blur-xl border z-50 ${
613-
isDark
614-
? 'bg-gray-800/90 border-gray-700'
615-
: 'bg-white/90 border-gray-200'
616-
}`}>
617-
<div className="p-2">
618-
<button
619-
onClick={() => setShowParticles(!showParticles)}
620-
className={`w-full text-left px-3 py-2 rounded transition-colors ${
621-
isDark ? 'hover:bg-gray-700 text-white' : 'hover:bg-gray-100 text-gray-800'
622-
}`}
623-
>
624-
<Palette className="h-4 w-4 inline mr-2" />
625-
{showParticles ? 'Hide' : 'Show'} Particles
626-
</button>
608+
609+
{/* User Menu */}
610+
<div className="relative">
611+
<button
612+
onClick={() => setShowUserMenu(!showUserMenu)}
613+
className="p-3 bg-white/20 backdrop-blur-md rounded-lg hover:bg-white/30 transition-all border border-white/30"
614+
>
615+
<User className="h-5 w-5 text-white" />
616+
</button>
617+
618+
{showUserMenu && (
619+
<div
620+
className={`absolute right-0 mt-2 w-48 rounded-lg shadow-xl backdrop-blur-xl border z-50 ${
621+
darkMode
622+
? "bg-gray-800/90 border-gray-700"
623+
: "bg-white/90 border-gray-200"
624+
}`}
625+
>
626+
<div className="p-2">
627+
<button
628+
onClick={() => setShowParticles(!showParticles)}
629+
className={`w-full text-left px-3 py-2 rounded transition-colors ${
630+
darkMode
631+
? "hover:bg-gray-700 text-white"
632+
: "hover:bg-gray-100 text-gray-800"
633+
}`}
634+
>
635+
<Palette className="h-4 w-4 inline mr-2" />
636+
{showParticles ? "Hide" : "Show"} Particles
637+
</button>
638+
</div>
627639
</div>
628-
</div>
629-
)}
640+
)}
641+
</div>
630642
</div>
631643
</div>
632644
</div>
633645
</div>
634646

647+
635648
{/* Algorithm Selector */}
636649
{isAlgorithmSelectorOpen && (
637650
<div className={`backdrop-blur-xl border-t transition-all duration-300 ${

0 commit comments

Comments
 (0)