diff --git a/docusaurus.config.ts b/docusaurus.config.ts index 8f274766..d70c5224 100644 --- a/docusaurus.config.ts +++ b/docusaurus.config.ts @@ -83,7 +83,7 @@ const config: Config = { respectPrefersColorScheme: false, }, navbar: { - title: "Recode Hive", + logo: { alt: "RecodeHive Logo", src: "img/logo.png", diff --git a/package.json b/package.json index 1dac038c..082250ad 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,7 @@ "@docusaurus/plugin-content-docs": "3.8.1", "@docusaurus/plugin-google-analytics": "^3.8.1", "@docusaurus/plugin-ideal-image": "3.8.1", - "@docusaurus/preset-classic": "3.8.1", + "@docusaurus/preset-classic": "^3.8.1", "@docusaurus/theme-classic": "^3.8.1", "@docusaurus/theme-mermaid": "3.8.1", "@docusaurus/theme-search-algolia": "3.8.1", diff --git a/src/css/custom.css b/src/css/custom.css index ad7022ef..5d1e02ee 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -6,11 +6,6 @@ .dropdown-content a.col-span-2 { color: #111 !important; } -/** - * Any CSS included here will be global. The classic template - * bundles Infima by default. Infima is a CSS framework designed to - * work well for content-centric websites. - */ /* You can override the default Infima variables here. */ @import "tailwindcss"; @@ -42,7 +37,7 @@ textarea { transition: all 0.1s ease !important; } -/* Instant navbar theme change */ +/* Navbar styling and alignment */ .navbar, .navbar__inner, .navbar__brand, @@ -51,6 +46,96 @@ textarea { transition: background-color 0.1s ease, color 0.1s ease !important; } +/* Fix navbar alignment and spacing */ +.navbar { + padding: 0.2rem 1rem; + height: auto; + display: flex; + align-items: center; +} + +.navbar__brand { + display: flex; + align-items: center; + margin-right: 1rem; + margin-left: 0.9rem; +} + +.navbar__logo { + height: 3rem; + margin-right: 0.5rem; +} + +.navbar__items { + display: flex; + align-items: center; + gap: 0 !important; + margin: 0 !important; + padding: 0 !important; +} + +/* Adjust individual navbar items */ +.navbar__items > .navbar__item { + padding: 0.5rem 0.4rem !important; + margin: 0 !important; +} + +.navbar__item { + display: flex; + align-items: center; + padding: 0.5rem; + font-size: 1rem; +} + +.navbar__link { + display: flex; + align-items: center; + gap: 0.5rem; +} + +/* Fix icon alignment in navbar */ +.navbar__link svg, +.navbar__link img { + margin: auto; + vertical-align: middle; +} + +/* Fix dropdown menu spacing and alignment */ +.dropdown { + display: inline-flex !important; + align-items: center !important; + margin: 0 !important; + padding: 0 !important; +} + +.dropdown__menu { + min-width: max-content !important; + margin-top: 0.5rem !important; + padding: 0.25rem 0 !important; +} + +.dropdown__link { + display: flex !important; + align-items: center !important; + padding: 0.4rem 0.75rem !important; + margin: 0 !important; + width: 100% !important; + font-size: 0.9rem !important; +} + +/* Remove extra spacing between dropdown items */ +.dropdown__menu > .dropdown__link { + padding: 0.4rem 0.75rem !important; + margin: 0 !important; +} + +/* Fix spacing between icon and text in dropdown */ +.dropdown__link svg, +.dropdown__link img { + margin-right: 0.5rem !important; + margin-left: 0 !important; +} + /* Force instant theme updates for key elements */ [data-theme="light"] .navbar { background-color: #ffffff !important; @@ -128,6 +213,92 @@ textarea { --dark-input-focus-border: #25c2a0; } +/* Mobile navigation styles */ +@media screen and (max-width: 996px) { + /* Hide text in navbar */ + .navbar__items .navbar__item span, + .navbar__items .navbar__link span, + span[id^="nav-"] { + display: none !important; + } + + /* Hide text but keep icons visible */ + .navbar__items + .navbar__item:not(.navbar__toggle):not(.navbar__brand):not( + .quickstart-icons + ), + .navbar__items + .navbar__link:not(.navbar__toggle):not(.navbar__brand):not( + .quickstart-icons + ) { + font-size: 0 !important; + padding: 0.4rem !important; + } + + /* Layout for mobile navbar */ + .navbar { + justify-content: flex-start !important; + padding: 0.3rem 0.5rem !important; + } + + .navbar__inner { + width: 100% !important; + display: flex !important; + align-items: center !important; + justify-content: space-between !important; + } + + /* Essential elements visibility and styling */ + .navbar__toggle, + .navbar__search, + .navbar-sidebar__brand, + .navbar__brand, + .navbar-sidebar .navbar__item, + .quickstart-icons { + display: flex !important; + align-items: center !important; + } + + /* Icon sizes and visibility */ + .navbar__toggle svg, + .navbar__search svg, + .navbar__link svg, + .navbar__link img, + .quickstart-icons svg, + .quickstart-icons img { + display: block !important; + width: 24px !important; + height: 24px !important; + margin: 0 !important; + opacity: 1 !important; + color: currentColor !important; + } + + /* Toggle and search button styling */ + .navbar__toggle { + transform: scale(1.2) !important; + padding: 0.6rem !important; + margin-right: 0.5rem !important; + } + + .navbar__search { + margin-left: 0.5rem !important; + } + + /* Right side items */ + .navbar__items--right { + display: flex !important; + align-items: center !important; + gap: 0.8rem !important; + margin-left: auto !important; + } + + /* Logo size */ + .navbar__logo { + height: 40px !important; + } +} + @media screen and (min-width: 1057px) { .nav-emoji { display: none; @@ -178,12 +349,12 @@ textarea { background-color: #24292e !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; - /* Increase sidebar width for better spacing */ - .navbar-sidebar { - width: 270px !important; - min-width: 270px !important; - max-width: 320px !important; - } + /* Increase sidebar width for better spacing */ + .navbar-sidebar { + width: 270px !important; + min-width: 270px !important; + max-width: 320px !important; + } box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15) !important; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important; cursor: pointer !important; @@ -449,7 +620,37 @@ textarea { border-right: 1px solid #4e8da0db; margin: 2px; } +/* Fix navbar icon and text alignment */ +.navbar__items .navbar__link { + display: inline-flex !important; + align-items: center !important; + gap: 0.2rem !important; + height: 40px !important; /* Consistent height */ + padding: 0.5rem 0.8rem !important; +} + +/* Fix specific icon alignment in navbar */ +.navbar__link img, +.navbar__link svg { + width: 20px !important; + height: 20px !important; + margin: 0 !important; + vertical-align: middle !important; +} + +/* Ensure text and icons are centered */ +.navbar__link span { + display: inline-flex !important; + align-items: center !important; + line-height: 1 !important; +} +/* Adjust dropdown items alignment */ +.dropdown__link { + display: inline-flex !important; + align-items: center !important; + gap: 0.2rem !important; +} .nav__icons { color: #111 !important; text-decoration: none; @@ -1357,6 +1558,10 @@ html { pointer-events: auto !important; } + /* STAR section border fixes for dark mode */ + [data-theme="dark"] .star-border-red { + border-color: #ef4444 !important; + } /* Fix: Remove extra box/space above dropdown nav items in sidebar */ .navbar-sidebar__item, @@ -1395,66 +1600,103 @@ html { border-color: #ef4444 !important; } -[data-theme='dark'] .star-border-yellow { - border-color: #eab308 !important; -} + /* Fix: Remove extra box/space above dropdown nav items in sidebar */ + .navbar-sidebar__item, + .navbar-sidebar__link, + .navbar-sidebar__brand { + margin-top: 0 !important; + padding-top: 0 !important; + border-top: none !important; + box-shadow: none !important; + } + .navbar-sidebar__item:first-child, + .navbar-sidebar__link:first-child { + margin-top: 0 !important; + padding-top: 0 !important; + border-top: none !important; + box-shadow: none !important; + } + /* Remove any unwanted hr or divider above dropdowns */ + .navbar-sidebar hr, + .navbar-sidebar__item hr { + display: none !important; + margin: 0 !important; + padding: 0 !important; + border: none !important; + } + /* Remove grid gap above dropdowns */ + .navbar-sidebar .grid { + gap: 0 !important; + margin-top: 0 !important; + padding-top: 0 !important; + } -[data-theme='dark'] .star-border-green { - border-color: #22c55e !important; -} -[data-theme='dark'] .star-border-blue { - border-color: #3b82f6 !important; +/* STAR section border fixes for dark mode */ +[data-theme='dark'] .star-border-red { + border-color: #ef4444 !important; } -[data-theme='light'] .interview-prep-page h1, -[data-theme='light'] .interview-prep-page h2, -[data-theme='light'] .interview-prep-page h3, -[data-theme='light'] .interview-prep-page h4, -[data-theme='light'] .interview-prep-page h5, -[data-theme='light'] .interview-prep-page h6 { - color: #ffffff !important; -} + [data-theme="dark"] .star-border-green { + border-color: #22c55e !important; + } -.watch-video-btn { - background-color: #dc2626; - color: #ffffff; - padding: 0.5rem 1rem; - border-radius: 0.5rem; - font-size: 0.875rem; - font-weight: 500; - display: inline-flex; - align-items: center; - transition: background-color 0.2s ease-in-out; -} + [data-theme="dark"] .star-border-blue { + border-color: #3b82f6 !important; + } -.watch-video-btn:hover { - background-color: #b91c1c; -} + [data-theme="light"] .interview-prep-page h1, + [data-theme="light"] .interview-prep-page h2, + [data-theme="light"] .interview-prep-page h3, + [data-theme="light"] .interview-prep-page h4, + [data-theme="light"] .interview-prep-page h5, + [data-theme="light"] .interview-prep-page h6 { + color: #ffffff !important; + } -[data-theme='dark'] .interview-prep-sidebar:hover { - border-color: #3b82f6 !important; -} + .watch-video-btn { + background-color: #dc2626; + color: #ffffff; + padding: 0.5rem 1rem; + border-radius: 0.5rem; + font-size: 0.875rem; + font-weight: 500; + display: inline-flex; + align-items: center; + transition: background-color 0.2s ease-in-out; + } -[data-theme='dark'] .interview-prep-sidebar { - border-color:#4b5563 !important; -} + .watch-video-btn:hover { + background-color: #b91c1c; + } -/* Active tab in dark mode */ -[data-theme='dark'] .interview-prep-nav-tab-active { - border-bottom-color: #60a5fa !important; - color: #60a5fa !important; -} + [data-theme="dark"] .interview-prep-sidebar:hover { + border-color: #3b82f6 !important; + } -/* Inactive tab in dark mode */ -[data-theme='dark'] .interview-prep-nav-tab-inactive { - border-bottom-color: transparent !important; - color: #9ca3af !important; -} + [data-theme="dark"] .interview-prep-sidebar { + border-color: #4b5563 !important; + } -[data-theme='dark'] .interview-prep-nav-tab-inactive:hover { - color: #d1d5db !important; -} + /* Active tab in dark mode */ + [data-theme="dark"] .interview-prep-nav-tab-active { + border-bottom-color: #60a5fa !important; + color: #60a5fa !important; + } + + /* Inactive tab in dark mode */ + [data-theme="dark"] .interview-prep-nav-tab-inactive { + border-bottom-color: transparent !important; + color: #9ca3af !important; + } + + [data-theme="dark"] .interview-prep-nav-tab-inactive:hover { + color: #d1d5db !important; + } + + .interview-prep-discord-btn { + color: white; + } .interview-prep-discord-btn{ color:white; diff --git a/src/pages/dashboard/dashboard.css b/src/pages/dashboard/dashboard.css index 64321fa6..9a5bb06d 100644 --- a/src/pages/dashboard/dashboard.css +++ b/src/pages/dashboard/dashboard.css @@ -174,32 +174,1510 @@ max-width: 100%; } -/* Discussion Section */ +/* Discussion Section - Enhanced Modern UI */ .discussion-container { - max-width: 800px; + max-width: 1200px; margin: 0 auto; - padding: 2rem 0; + padding: 2rem 1rem; + color: var(--ifm-font-color-base); + position: relative; +} + +/* Sidebar compatibility */ +.dashboard-main.discuss-view .discussion-container { + padding: 2rem 2rem; +} + +.dashboard-main.sidebar-collapsed.discuss-view .discussion-container { + padding: 2rem 1rem; +} + +/* Animated background particles */ +.discussion-container::before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: radial-gradient( + circle at 20% 50%, + var(--ifm-color-primary-lightest) 0%, + transparent 50% + ), + radial-gradient( + circle at 80% 20%, + var(--ifm-color-secondary-lightest) 0%, + transparent 50% + ), + radial-gradient( + circle at 40% 80%, + var(--ifm-color-primary-lightest) 0%, + transparent 50% + ); + opacity: 0.3; + pointer-events: none; + z-index: -1; +} + +.discussion-header { + text-align: center; + margin-bottom: 3rem; + position: relative; + z-index: 1; +} + +.discussion-header h1 { + font-size: 3.5rem; + font-weight: 800; + margin-bottom: 1rem; + color: var(--ifm-color-emphasis-900); + position: relative; + display: inline-block; +} + +.discussion-header h1::after { + content: ""; + position: absolute; + bottom: -10px; + left: 50%; + transform: translateX(-50%); + width: 60px; + height: 4px; + background: linear-gradient( + 135deg, + var(--ifm-color-primary), + var(--ifm-color-secondary) + ); + border-radius: 2px; + animation: pulse-glow 2s ease-in-out infinite alternate; +} + +@keyframes pulse-glow { + 0% { + box-shadow: 0 0 5px var(--ifm-color-primary); + width: 60px; + } + 100% { + box-shadow: 0 0 20px var(--ifm-color-primary), + 0 0 30px var(--ifm-color-primary-light); + width: 80px; + } +} + +.discussion-header h1 .highlight { + background: linear-gradient( + 135deg, + var(--ifm-color-primary), + #e74c3c, + var(--ifm-color-secondary) + ); + background-size: 200% 200%; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + animation: gradient-shift 3s ease-in-out infinite; +} + +@keyframes gradient-shift { + 0%, + 100% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } +} + +.discussion-header p { + font-size: 1.2rem; + color: var(--ifm-color-emphasis-700); + max-width: 700px; + margin: 0 auto; + line-height: 1.6; + opacity: 0.9; +} + +/* Enhanced Toolbar */ +.discussion-toolbar { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 2rem; + padding: 1rem 1.5rem; + background: var(--ifm-card-background-color); + border-radius: 20px; + border: 1px solid var(--ifm-color-border); + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08); + backdrop-filter: blur(10px); + position: relative; + overflow: hidden; +} + +[data-theme="dark"] .discussion-toolbar { + background: rgba(var(--ifm-card-background-color-rgb), 0.8); + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); +} + +.discussion-toolbar::before { + content: ""; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient( + 90deg, + transparent, + rgba(255, 255, 255, 0.1), + transparent + ); + transition: left 0.5s; +} + +.discussion-toolbar:hover::before { + left: 100%; +} + +.toolbar-left { + display: flex; + align-items: center; + gap: 0.75rem; +} + +/* Enhanced Tab Buttons */ +.tab-btn { + padding: 0.875rem 1.5rem; + border: none; + background: transparent; + color: var(--ifm-color-emphasis-700); + font-size: 0.95rem; + font-weight: 600; + cursor: pointer; + border-radius: 12px; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + position: relative; + overflow: hidden; + display: flex; + align-items: center; + gap: 0.5rem; + white-space: nowrap; + flex-shrink: 0; +} + +.tab-btn::before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: var(--ifm-color-primary); + opacity: 0; + transition: opacity 0.3s ease; + z-index: -1; +} + +.tab-btn:hover { + background: var(--ifm-color-primary-lightest); + color: var(--ifm-color-primary); + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); +} + +.tab-btn:hover::before { + opacity: 0.1; +} + +.tab-btn.active { + background: var(--ifm-color-primary); + color: white; + box-shadow: 0 4px 20px rgba(var(--ifm-color-primary-rgb), 0.4); + transform: translateY(-1px); +} + +.tab-btn.active::before { + opacity: 1; +} + +/* Enhanced Sort Dropdown */ +.sort-dropdown { + position: relative; +} + +.sort-dropdown select { + padding: 0.875rem 3rem 0.875rem 1.5rem; + border: 2px solid var(--ifm-color-border); + border-radius: 12px; + background: var(--ifm-card-background-color); + color: var(--ifm-color-emphasis-700); + font-size: 0.95rem; + font-weight: 600; + cursor: pointer; + appearance: none; + transition: all 0.3s ease; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); +} + +.sort-dropdown select:hover { + border-color: var(--ifm-color-primary); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); + transform: translateY(-1px); +} + +.sort-dropdown select:focus { + outline: none; + border-color: var(--ifm-color-primary); + box-shadow: 0 0 0 3px var(--ifm-color-primary-lightest); +} + +.sort-dropdown::after { + content: "▼"; + position: absolute; + right: 1rem; + top: 50%; + transform: translateY(-50%); + color: var(--ifm-color-primary); + pointer-events: none; + transition: transform 0.3s ease; +} + +.sort-dropdown:hover::after { + transform: translateY(-50%) scale(1.1); +} + +/* Enhanced New Discussion Button */ +.new-discussion-btn { + display: flex; + align-items: center; + gap: 0.75rem; + padding: 0.875rem 2rem; + background: linear-gradient( + 135deg, + var(--ifm-color-primary), + var(--ifm-color-primary-dark) + ); + color: white; + border: none; + border-radius: 25px; + font-size: 0.95rem; + font-weight: 700; + cursor: pointer; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + position: relative; + overflow: hidden; + box-shadow: 0 4px 15px rgba(var(--ifm-color-primary-rgb), 0.3); + white-space: nowrap; +} + +.new-discussion-btn:hover { + transform: translateY(-3px); + box-shadow: 0 8px 25px rgba(var(--ifm-color-primary-rgb), 0.4); +} + +/* Enhanced Categories Bar */ +.categories-bar { + display: flex; + gap: 1rem; + margin-bottom: 2rem; + padding: 1rem 0; + overflow-x: auto; + scrollbar-width: none; + position: relative; +} + +.categories-bar::-webkit-scrollbar { + display: none; +} + +.category { + padding: 0.75rem 1.5rem; + border-radius: 25px; + background: var(--ifm-card-background-color); + border: 2px solid var(--ifm-color-border); + color: var(--ifm-color-emphasis-700); + font-size: 0.9rem; + font-weight: 600; + cursor: pointer; + white-space: nowrap; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); + flex-shrink: 0; +} + +.category:hover { + transform: translateY(-2px); + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); + border-color: var(--ifm-color-primary); + color: var(--ifm-color-primary); +} + +.category.active { + background: var(--ifm-color-primary); + color: white; + border-color: var(--ifm-color-primary); + font-weight: 700; + transform: translateY(-2px); + box-shadow: 0 4px 20px rgba(var(--ifm-color-primary-rgb), 0.3); +} + +/* Enhanced Search Filters */ +.search-filters { + display: flex; + gap: 1.5rem; + margin-bottom: 2.5rem; + align-items: center; +} + +.search-bar { + flex: 1; + position: relative; + min-width: 0; +} + +.search-bar input { + width: 100%; + padding: 1rem 1.5rem 1rem 3.5rem; + border: 2px solid var(--ifm-color-border); + border-radius: 15px; + background: var(--ifm-card-background-color); + color: var(--ifm-font-color-base); + font-size: 1rem; + font-weight: 500; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); +} + +.search-bar input:focus { + outline: none; + border-color: var(--ifm-color-primary); + box-shadow: 0 0 0 3px var(--ifm-color-primary-lightest), + 0 4px 12px rgba(0, 0, 0, 0.1); + transform: translateY(-1px); +} + +.searchbar-icon { + position: absolute; + top: 50%; + left: 1.25rem; + transform: translateY(-50%); + color: var(--ifm-color-primary); + font-size: 1.1rem; + transition: all 0.3s ease; + z-index: 1; +} + +.searchbar-icon::before { + content: "🔍"; + font-size: 1rem; +} + +/* Responsive Design */ +@media (max-width: 1200px) { + .dashboard-main.discuss-view .discussion-container { + padding: 2rem 1.5rem; + } +} + +@media (max-width: 992px) { + .dashboard-main { + margin-left: 0; + max-width: 100%; + padding: 1rem; + } + + .dashboard-sidebar { + transform: translateX(-100%); + z-index: 1000; + } + + .dashboard-sidebar.show { + transform: translateX(0); + } + + .discussion-container { + padding: 1rem; + } + + .discussion-header h1 { + font-size: 2.5rem; + } +} + +@media (max-width: 768px) { + .discussion-header h1 { + font-size: 2rem; + } + + .discussion-header p { + font-size: 1rem; + } + + .discussion-toolbar { + flex-direction: column; + gap: 1rem; + padding: 1rem; + } + + .toolbar-left { + flex-wrap: wrap; + justify-content: center; + gap: 0.5rem; + } + + .tab-btn { + padding: 0.75rem 1rem; + font-size: 0.85rem; + } + + .new-discussion-btn { + width: 100%; + justify-content: center; + padding: 1rem; + } + + .categories-bar { + padding: 0.5rem 0; + gap: 0.75rem; + } + + .category { + padding: 0.6rem 1rem; + font-size: 0.85rem; + } + + .search-filters { + flex-direction: column; + gap: 1rem; + } + + .search-bar input { + padding: 0.875rem 1rem 0.875rem 3rem; + font-size: 0.9rem; + } + + .sort-dropdown select { + width: 100%; + padding: 0.875rem 2.5rem 0.875rem 1rem; + } +} + +@media (max-width: 480px) { + .discussion-container { + padding: 0.5rem; + } + + .discussion-header { + margin-bottom: 2rem; + } + + .discussion-header h1 { + font-size: 1.75rem; + } + + .discussion-header p { + font-size: 0.9rem; + } + + .discussion-toolbar { + padding: 0.75rem; + } + + .tab-btn { + padding: 0.6rem 0.8rem; + font-size: 0.8rem; + } + + .category { + padding: 0.5rem 0.8rem; + font-size: 0.8rem; + } + + .search-bar input { + padding: 0.75rem 0.875rem 0.75rem 2.75rem; + font-size: 0.85rem; + } + + .searchbar-icon { + left: 1rem; + } + + .sort-dropdown select { + padding: 0.75rem 2rem 0.75rem 0.875rem; + font-size: 0.85rem; + } +} + +/* Mobile Menu Button */ +.mobile-menu-btn { + display: none; + position: fixed; + top: 1rem; + left: 1rem; + z-index: 1001; + background: var(--ifm-color-primary); + color: white; + border: none; + border-radius: 8px; + width: 44px; + height: 44px; + align-items: center; + justify-content: center; + cursor: pointer; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); + transition: all 0.3s ease; +} + +.mobile-menu-btn:hover { + background: var(--ifm-color-primary-dark); + transform: scale(1.05); +} + +.mobile-menu-btn::before { + content: "☰"; + font-size: 1.2rem; +} + +.mobile-menu-btn.open::before { + content: "✕"; +} + +/* Mobile responsive styles */ +@media (max-width: 992px) { + .mobile-menu-btn { + display: flex; + } + + .dashboard-sidebar { + transform: translateX(-100%); + z-index: 1000; + box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1); + } + + .dashboard-sidebar.show { + transform: translateX(0); + } + + .dashboard-layout::before { + content: ""; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.5); + z-index: 999; + opacity: 0; + visibility: hidden; + transition: all 0.3s ease; + } + + .dashboard-layout.sidebar-open::before { + opacity: 1; + visibility: visible; + } + + .discussion-container { + padding-top: 4rem; + } +} + +/* Sidebar collapsed states */ +@media (min-width: 993px) { + .dashboard-main.sidebar-collapsed.discuss-view .discussion-container { + padding: 2rem 1.5rem; + } +} + +/* Mobile sidebar overlay */ +@media (max-width: 992px) { + .dashboard-layout::before { + content: ""; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.5); + z-index: 999; + opacity: 0; + visibility: hidden; + transition: all 0.3s ease; + } + + .dashboard-layout.sidebar-open::before { + opacity: 1; + visibility: visible; + } +} + +/* Enhanced New Discussion Button */ +.new-discussion-btn { + display: flex; + align-items: center; + gap: 0.75rem; + padding: 0.875rem 2rem; + background: linear-gradient( + 135deg, + var(--ifm-color-primary), + var(--ifm-color-primary-dark) + ); + color: white; + border: none; + border-radius: 25px; + font-size: 0.95rem; + font-weight: 700; + cursor: pointer; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + position: relative; + overflow: hidden; + box-shadow: 0 4px 15px rgba(var(--ifm-color-primary-rgb), 0.3); +} + +.new-discussion-btn::before { + content: ""; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient( + 90deg, + transparent, + rgba(255, 255, 255, 0.2), + transparent + ); + transition: left 0.5s; +} + +.new-discussion-btn:hover { + transform: translateY(-3px); + box-shadow: 0 8px 25px rgba(var(--ifm-color-primary-rgb), 0.4); +} + +.new-discussion-btn:hover::before { + left: 100%; +} + +.new-discussion-btn:active { + transform: translateY(-1px); +} + +/* Enhanced Categories Bar */ +.categories-bar { + display: flex; + gap: 1rem; + margin-bottom: 2rem; + padding: 1rem 0; + overflow-x: auto; + scrollbar-width: none; + position: relative; +} + +.categories-bar::-webkit-scrollbar { + display: none; +} + +.categories-bar::after { + content: ""; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 2px; + background: linear-gradient( + 90deg, + var(--ifm-color-primary), + var(--ifm-color-secondary) + ); + border-radius: 1px; + opacity: 0.3; +} + +.category { + padding: 0.75rem 1.5rem; + border-radius: 25px; + background: var(--ifm-card-background-color); + border: 2px solid var(--ifm-color-border); + color: var(--ifm-color-emphasis-700); + font-size: 0.9rem; + font-weight: 600; + cursor: pointer; + white-space: nowrap; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + position: relative; + overflow: hidden; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); +} + +.category::before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: var(--ifm-color-primary); + opacity: 0; + transition: opacity 0.3s ease; + z-index: -1; +} + +.category:hover { + transform: translateY(-2px); + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); + border-color: var(--ifm-color-primary); + color: var(--ifm-color-primary); +} + +.category:hover::before { + opacity: 0.1; +} + +.category.active { + background: var(--ifm-color-primary); + color: white; + border-color: var(--ifm-color-primary); + font-weight: 700; + transform: translateY(-2px); + box-shadow: 0 4px 20px rgba(var(--ifm-color-primary-rgb), 0.3); +} + +.category.active::before { + opacity: 1; +} + +/* Enhanced Search Filters */ +.search-filters { + display: flex; + gap: 1.5rem; + margin-bottom: 2.5rem; + align-items: center; +} + +.search-bar { + flex: 1; + position: relative; +} + +.search-bar input { + width: 100%; + padding: 1rem 1.5rem 1rem 3.5rem; + border: 2px solid var(--ifm-color-border); + border-radius: 15px; + background: var(--ifm-card-background-color); + color: var(--ifm-font-color-base); + font-size: 1rem; + font-weight: 500; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); +} + +.search-bar input:hover { + border-color: var(--ifm-color-primary-light); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); +} + +.search-bar input:focus { + outline: none; + border-color: var(--ifm-color-primary); + box-shadow: 0 0 0 3px var(--ifm-color-primary-lightest), + 0 4px 12px rgba(0, 0, 0, 0.1); + transform: translateY(-1px); +} + +.search-bar input::placeholder { + color: var(--ifm-color-emphasis-500); + font-style: italic; +} + +.searchbar-icon { + position: absolute; + top: 50%; + left: 1.25rem; + transform: translateY(-50%); + color: var(--ifm-color-primary); + font-size: 1.1rem; + transition: all 0.3s ease; + z-index: 1; +} + +.searchbar-icon::before { + content: "🔍"; + font-size: 1rem; +} + +.search-bar:hover .searchbar-icon { + color: var(--ifm-color-primary-dark); + transform: translateY(-50%) scale(1.1) lateY(-50%) scale(1.1); +} + +/* Enhanced New Discussion Button */ +.new-discussion-btn { + display: flex; + align-items: center; + gap: 0.75rem; + padding: 0.875rem 2rem; + background: linear-gradient( + 135deg, + var(--ifm-color-primary), + var(--ifm-color-primary-dark) + ); + color: white; + border: none; + border-radius: 25px; + font-size: 0.95rem; + font-weight: 700; + cursor: pointer; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + position: relative; + overflow: hidden; + box-shadow: 0 4px 15px rgba(var(--ifm-color-primary-rgb), 0.3); +} + +.new-discussion-btn::before { + content: ""; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient( + 90deg, + transparent, + rgba(255, 255, 255, 0.2), + transparent + ); + transition: left 0.5s; +} + +.new-discussion-btn:hover { + transform: translateY(-3px); + box-shadow: 0 8px 25px rgba(var(--ifm-color-primary-rgb), 0.4); +} + +.new-discussion-btn:hover::before { + left: 100%; +} + +.new-discussion-btn:active { + transform: translateY(-1px); +} + +/* Enhanced Categories Bar */ +.categories-bar { + display: flex; + gap: 1rem; + margin-bottom: 2rem; + padding: 1rem 0; + overflow-x: auto; + scrollbar-width: none; + position: relative; +} + +.categories-bar::-webkit-scrollbar { + display: none; +} + +.categories-bar::after { + content: ""; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 2px; + background: linear-gradient( + 90deg, + var(--ifm-color-primary), + var(--ifm-color-secondary) + ); + border-radius: 1px; + opacity: 0.3; +} + +.category { + padding: 0.75rem 1.5rem; + border-radius: 25px; + background: var(--ifm-card-background-color); + border: 2px solid var(--ifm-color-border); + color: var(--ifm-color-emphasis-700); + font-size: 0.9rem; + font-weight: 600; + cursor: pointer; + white-space: nowrap; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + position: relative; + overflow: hidden; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); +} + +.category::before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: var(--ifm-color-primary); + opacity: 0; + transition: opacity 0.3s ease; + z-index: -1; +} + +.category:hover { + transform: translateY(-2px); + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); + border-color: var(--ifm-color-primary); + color: var(--ifm-color-primary); +} + +.category:hover::before { + opacity: 0.1; +} + +.category.active { + background: var(--ifm-color-primary); + color: white; + border-color: var(--ifm-color-primary); + font-weight: 700; + transform: translateY(-2px); + box-shadow: 0 4px 20px rgba(var(--ifm-color-primary-rgb), 0.3); +} + +.category.active::before { + opacity: 1; +} + +/* Enhanced Search Filters */ +.search-filters { + display: flex; + gap: 1.5rem; + margin-bottom: 2.5rem; + align-items: center; +} + +.search-bar { + flex: 1; + position: relative; +} + +.search-bar input { + width: 100%; + padding: 1rem 1.5rem 1rem 3.5rem; + border: 2px solid var(--ifm-color-border); + border-radius: 15px; + background: var(--ifm-card-background-color); + color: var(--ifm-font-color-base); + font-size: 1rem; + font-weight: 500; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); +} + +.search-bar input:hover { + border-color: var(--ifm-color-primary-light); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); +} + +.search-bar input:focus { + outline: none; + border-color: var(--ifm-color-primary); + box-shadow: 0 0 0 3px var(--ifm-color-primary-lightest), + 0 4px 12px rgba(0, 0, 0, 0.1); + transform: translateY(-1px); +} + +.search-bar input::placeholder { + color: var(--ifm-color-emphasis-500); + font-style: italic; +} + +.searchbar-icon { + position: absolute; + top: 50%; + left: 1.25rem; + transform: translateY(-50%); + color: var(--ifm-color-primary); + font-size: 1.1rem; + transition: all 0.3s ease; +} + +.search-bar:hover .searchbar-icon { + color: var(--ifm-color-primary-dark); + transform: translateY(-50%) scale(1.1); +} + +/* Enhanced Discussions List */ +.discussions-list { + display: grid; + grid-template-columns: 1fr; + gap: 2rem; +} + +/* Enhanced Discussion Items */ +.discussion-item { + display: flex; + flex-direction: column; + padding: 1.5rem; + background: #ffffff; + border-radius: 16px; + border: 1px solid #e2e8f0; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + position: relative; + overflow: hidden; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), + 0 2px 4px -1px rgba(0, 0, 0, 0.06); + cursor: pointer; +} + +[data-theme="dark"] .discussion-item { + background: #1e293b; + border-color: #334155; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), + 0 2px 4px -1px rgba(0, 0, 0, 0.2); +} + +[data-theme="dark"] .discussion-item { + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); +} + +.discussion-item::before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 4px; + background: linear-gradient( + 90deg, + var(--ifm-color-primary), + var(--ifm-color-secondary) + ); + transform: scaleX(0); + transition: transform 0.3s ease; +} + +.discussion-item:hover { + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), + 0 10px 10px -5px rgba(0, 0, 0, 0.04); + border-color: #10b981; +} + +[data-theme="dark"] .discussion-item:hover { + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), + 0 10px 10px -5px rgba(0, 0, 0, 0.2); + border-color: #10b981; +} + +.discussion-item:hover::before { + transform: scaleX(1); +} + +/* Enhanced Avatar */ +.discussion-avatar { + width: 48px; + height: 48px; + border-radius: 50%; + overflow: hidden; + flex-shrink: 0; + position: relative; + border: 2px solid #e2e8f0; + transition: all 0.2s ease; + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1); +} + +[data-theme="dark"] .discussion-avatar { + border-color: #475569; +} + +.discussion-avatar img { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 50%; +} + +.discussion-avatar.verified::after { + content: "✓"; + position: absolute; + bottom: -2px; + right: -2px; + width: 16px; + height: 16px; + background: #2563eb; + color: white; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 10px; + font-weight: bold; + border: 2px solid #ffffff; +} + +[data-theme="dark"] .discussion-avatar.verified::after { + border-color: #1e293b; +} + +.discussion-content { + flex: 1; + display: flex; + flex-direction: column; +} + +[data-theme="dark"] .discussion-content { + color: #f1f5f9; +} + +.discussion-content { + flex: 1; + display: flex; + flex-direction: column; +} + +.discussion-header { + display: flex; + align-items: center; + gap: 1rem; + margin-bottom: 1rem; +} + +.discussion-pinned-badge { + display: inline-flex; + align-items: center; + gap: 0.5rem; + background: #059669; + color: white; + padding: 0.5rem 1rem; + border-radius: 20px; + font-size: 0.875rem; + font-weight: 600; +} + +.discussion-pinned-badge::before { + content: "📌"; +} + +.discussion-title { + font-size: 1.5rem; + font-weight: 700; + margin: 0 0 1rem 0; + color: #1e293b; + line-height: 1.375; + transition: color 0.2s ease; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; +} + +.discussion-item:hover .discussion-title { + color: #2563eb; +} + +[data-theme="dark"] .discussion-title { + color: #f1f5f9; +} + +[data-theme="dark"] .discussion-item:hover .discussion-title { + color: #60a5fa; +} + +/* Enhanced Pinned Badge */ +.pinned-badge { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.5rem 1rem; + background: linear-gradient( + 135deg, + var(--ifm-color-primary), + var(--ifm-color-primary-dark) + ); + color: white; + border-radius: 25px; + font-size: 0.8rem; + font-weight: 700; + box-shadow: 0 2px 8px rgba(var(--ifm-color-primary-rgb), 0.3); + animation: glow-pulse 2s ease-in-out infinite alternate; +} + +@keyframes glow-pulse { + 0% { + box-shadow: 0 2px 8px rgba(var(--ifm-color-primary-rgb), 0.3); + } + 100% { + box-shadow: 0 4px 16px rgba(var(--ifm-color-primary-rgb), 0.5); + } +} + +.discussion-body p { + color: #475569; + font-size: 1rem; + line-height: 1.625; + margin: 0 0 1.5rem 0; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; +} + +[data-theme="dark"] .discussion-body p { + color: #cbd5e1; +} + +.discussion-meta { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 1rem; + padding-top: 1rem; + border-top: 1px solid #e2e8f0; +} + +[data-theme="dark"] .discussion-meta { + border-top-color: #334155; +} + +.discussion-author { + color: #64748b; + font-size: 0.875rem; +} + +[data-theme="dark"] .discussion-author { + color: #94a3b8; +} + +.discussion-stats { + display: flex; + gap: 1rem; + align-items: center; + color: #64748b; + font-size: 0.875rem; } -.discussion-container h2 { - font-size: 2rem; +[data-theme="dark"] .discussion-stats { + color: #94a3b8; +} + +.discussion-stats span { + display: flex; + align-items: center; + gap: 0.25rem; +} + +/* Enhanced Meta Section */ +.discussion-meta { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1.5rem; + padding-top: 1rem; + border-top: 1px solid var(--ifm-color-border); +} + +/* Enhanced Tags */ +.tags { + display: flex; + gap: 0.75rem; + flex-wrap: wrap; +} + +.tags { + display: flex; + gap: 0.5rem; + flex-wrap: wrap; margin-bottom: 1rem; - color: var(--ifm-heading-color); } -.discussion-container p { - color: var(--ifm-color-emphasis-700); - margin-bottom: 2rem; - font-size: 1.1rem; - line-height: 1.6; +.tags .tag { + padding: 0.375rem 0.75rem; + background: linear-gradient(135deg, #dbeafe 0%, #e0e7ff 100%); + border-radius: 9999px; + color: #1e40af; + font-size: 0.75rem; + font-weight: 500; + transition: all 0.2s ease; + border: 1px solid #bfdbfe; + text-decoration: none; } -.giscus-container { - margin-top: 2rem; - background: var(--ifm-card-background-color); - border-radius: 8px; - padding: 2rem; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); +[data-theme="dark"] .tags .tag { + background: linear-gradient(135deg, #1e3a8a 0%, #3730a3 100%); + color: #dbeafe; + border-color: #3b82f6; +} + +.tags .tag:hover { + background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%); + color: white; + border-color: #2563eb; +} + +.tags .tag::before { + content: "#"; + opacity: 0.8; + margin-right: 0.125rem; +} + +/* Enhanced Meta Info */ +.meta-info { + display: flex; + align-items: center; + gap: 1.5rem; + color: var(--ifm-color-emphasis-600); + font-size: 0.9rem; + font-weight: 500; +} + +.meta-info span { + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0.25rem 0.75rem; + border-radius: 15px; + background: var(--ifm-color-emphasis-100); + transition: all 0.3s ease; +} + +.meta-info span:hover { + background: var(--ifm-color-primary-lightest); + color: var(--ifm-color-primary); + transform: translateY(-1px); +} + +/* Enhanced Giscus Wrapper */ +.giscus-wrapper { + margin-top: 4rem; + padding-top: 3rem; + border-top: 2px solid var(--ifm-color-border); + position: relative; +} + +.giscus-wrapper::before { + content: ""; + position: absolute; + top: -1px; + left: 50%; + transform: translateX(-50%); + width: 100px; + height: 2px; + background: linear-gradient( + 90deg, + var(--ifm-color-primary), + var(--ifm-color-secondary) + ); + border-radius: 1px; +} + +/* Responsive Design */ +@media (max-width: 768px) { + .discussion-container { + padding: 1rem; + } + + .discussion-header h1 { + font-size: 2.5rem; + } + + .discussion-toolbar { + flex-direction: column; + gap: 1.5rem; + align-items: stretch; + padding: 1.5rem; + } + + .toolbar-left { + flex-wrap: wrap; + justify-content: center; + gap: 0.5rem; + } + + .tab-btn { + padding: 0.75rem 1rem; + font-size: 0.85rem; + } + + .new-discussion-btn { + justify-content: center; + padding: 1rem 1.5rem; + } + + .categories-bar { + gap: 0.75rem; + padding: 0.75rem 0; + } + + .category { + padding: 0.6rem 1rem; + font-size: 0.85rem; + } + + .search-filters { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + + .search-bar input { + padding: 0.875rem 1.25rem 0.875rem 3rem; + } + + .discussions-list { + gap: 1.5rem; + } + + .discussion-item { + flex-direction: column; + gap: 1rem; + padding: 1.5rem; + } + + .discussion-avatar { + width: 48px; + height: 48px; + align-self: flex-start; + } + + .discussion-meta { + flex-direction: column; + align-items: flex-start; + gap: 1rem; + } + + .meta-info { + gap: 1rem; + flex-wrap: wrap; + } +} + +@media (max-width: 480px) { + .discussion-header h1 { + font-size: 2rem; + } + + .discussion-header p { + font-size: 1rem; + } + + .discussion-item { + padding: 1rem; + } + + .discussion-header-content h3 { + font-size: 1.1rem; + } + + .tab-btn { + padding: 0.6rem 0.8rem; + font-size: 0.8rem; + } + + .category { + padding: 0.5rem 0.8rem; + font-size: 0.8rem; + } } /* Dashboard Container */ @@ -256,32 +1734,109 @@ } .dashboard-stat-card { - background: var(--ifm-color-background); - border-radius: 1.5rem; - padding: 2rem; - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); + background: linear-gradient( + 135deg, + var(--ifm-card-background-color) 0%, + rgba(var(--ifm-color-primary-rgb), 0.05) 100% + ); + border-radius: 2rem; + padding: 2.5rem; + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04); border: 1px solid var(--ifm-color-border); - transition: all 0.3s ease; + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); display: flex; align-items: center; - gap: 1.5rem; + gap: 2rem; + position: relative; + overflow: hidden; + backdrop-filter: blur(10px); +} + +[data-theme="dark"] .dashboard-stat-card { + background: linear-gradient( + 135deg, + rgba(var(--ifm-card-background-color-rgb), 0.95) 0%, + rgba(var(--ifm-color-primary-rgb), 0.1) 100% + ); + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2); +} + +.dashboard-stat-card::before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient( + 135deg, + rgba(var(--ifm-color-primary-rgb), 0.1) 0%, + transparent 50%, + rgba(var(--ifm-color-secondary-rgb), 0.05) 100% + ); + opacity: 0; + transition: opacity 0.4s ease; + pointer-events: none; } .dashboard-stat-card:hover { - transform: translateY(-2px); - box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15); + transform: translateY(-8px) scale(1.02); + box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 8px 24px rgba(0, 0, 0, 0.08); + border-color: var(--ifm-color-primary-light); +} + +[data-theme="dark"] .dashboard-stat-card:hover { + box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.3); +} + +.dashboard-stat-card:hover::before { + opacity: 1; } .dashboard-stat-icon { - font-size: 3rem; - width: 4rem; - height: 4rem; + font-size: 3.5rem; + width: 5rem; + height: 5rem; display: flex; align-items: center; justify-content: center; - background: var(--ifm-color-primary-lightest); - border-radius: 1rem; + background: linear-gradient( + 135deg, + var(--ifm-color-primary) 0%, + var(--ifm-color-primary-dark) 100% + ); + border-radius: 1.5rem; flex-shrink: 0; + position: relative; + overflow: hidden; + box-shadow: 0 8px 24px rgba(var(--ifm-color-primary-rgb), 0.3); + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); +} + +.dashboard-stat-icon::before { + content: ""; + position: absolute; + top: -50%; + left: -50%; + width: 200%; + height: 200%; + background: linear-gradient( + 45deg, + transparent 30%, + rgba(255, 255, 255, 0.3) 50%, + transparent 70% + ); + transform: rotate(-45deg); + transition: transform 0.6s ease; +} + +.dashboard-stat-card:hover .dashboard-stat-icon { + transform: scale(1.1) rotate(5deg); + box-shadow: 0 12px 32px rgba(var(--ifm-color-primary-rgb), 0.4); +} + +.dashboard-stat-card:hover .dashboard-stat-icon::before { + transform: rotate(-45deg) translate(100%, 100%); } .dashboard-stat-content { @@ -289,18 +1844,59 @@ } .dashboard-stat-title { - font-size: 1.1rem; - font-weight: 600; - color: var(--ifm-color-emphasis-800); - margin-bottom: 0.5rem; + font-size: 1.2rem; + font-weight: 700; + color: var(--ifm-color-emphasis-900); + margin-bottom: 0.75rem; + transition: all 0.3s ease; + position: relative; } -.dashboard-stat-value { - font-size: 2.5rem; - font-weight: 700; +.dashboard-stat-title::after { + content: ""; + position: absolute; + bottom: -4px; + left: 0; + width: 0; + height: 2px; + background: linear-gradient( + 90deg, + var(--ifm-color-primary), + var(--ifm-color-secondary) + ); + transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1); + border-radius: 1px; +} + +.dashboard-stat-card:hover .dashboard-stat-title { color: var(--ifm-color-primary); + transform: translateX(4px); +} + +.dashboard-stat-card:hover .dashboard-stat-title::after { + width: 100%; +} + +.dashboard-stat-value { + font-size: 3rem; + font-weight: 800; + background: linear-gradient( + 135deg, + var(--ifm-color-primary) 0%, + var(--ifm-color-primary-dark) 100% + ); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; margin-bottom: 0.5rem; - text-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + text-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + transition: all 0.3s ease; + position: relative; +} + +.dashboard-stat-card:hover .dashboard-stat-value { + transform: scale(1.05); + filter: drop-shadow(0 0 10px rgba(var(--ifm-color-primary-rgb), 0.3)); } .dashboard-slot-counter { @@ -310,10 +1906,18 @@ } .dashboard-stat-description { - font-size: 0.9rem; - color: var(--ifm-color-emphasis-600); + font-size: 0.95rem; + color: var(--ifm-color-emphasis-700); margin: 0; - line-height: 1.4; + line-height: 1.5; + transition: all 0.3s ease; + opacity: 0.9; +} + +.dashboard-stat-card:hover .dashboard-stat-description { + color: var(--ifm-color-emphasis-800); + opacity: 1; + transform: translateY(-2px); } .loading-spinner { diff --git a/src/pages/dashboard/giveaway/index.tsx b/src/pages/dashboard/giveaway/index.tsx index 62f86adb..4cebdb19 100644 --- a/src/pages/dashboard/giveaway/index.tsx +++ b/src/pages/dashboard/giveaway/index.tsx @@ -1,9 +1,15 @@ import React, { useEffect, useState } from 'react'; import Layout from '@theme/Layout'; import Head from '@docusaurus/Head'; +import NavbarIcon from "../../../components/navbar/NavbarIcon"; +import { useHistory } from "@docusaurus/router"; import type confettiType from 'canvas-confetti'; +import "../dashboard.css"; const GiveawayPage: React.FC = () => { + const history = useHistory(); + const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false); + const [isMobileSidebarOpen, setIsMobileSidebarOpen] = useState(false); const [timeLeft, setTimeLeft] = useState({ days: '--', hours: '--', @@ -11,7 +17,7 @@ const GiveawayPage: React.FC = () => { seconds: '--', }); - const countdownTarget = new Date('2025-08-15T23:59:59').getTime(); // Update the deadline if needed + const countdownTarget = new Date('2025-08-15T23:59:59').getTime(); // Countdown Timer Effect useEffect(() => { @@ -59,60 +65,155 @@ const GiveawayPage: React.FC = () => { return () => clearTimeout(timer); }, []); + const handleTabChange = (tab: "home" | "discuss" | "leaderboard" | "giveaway") => { + setIsMobileSidebarOpen(false); + if (tab === "discuss") { + history.push("/dashboard#discuss"); + } else if (tab === "leaderboard") { + history.push("/dashboard#leaderboard"); + } else if (tab === "home") { + history.push("/dashboard"); + } + }; + return ( - + 🎁 RecodeHive Giveaway +
+ {/* Mobile Menu Button */} + +
+ +
+ +
+ + +
+
+
+

🎉 RecodeHive Giveaway

+

Participate now and win exclusive swag, resources, and more!

+ +
+ {['days', 'hours', 'minutes', 'seconds'].map((unit) => ( +
+
{timeLeft[unit as keyof typeof timeLeft]}
+
{unit}
+
+ ))} +
-
-
-

🎉 RecodeHive Giveaway

-

Participate now and win exclusive swag, resources, and more!

- -
- {['days', 'hours', 'minutes', 'seconds'].map((unit) => ( -
-
{timeLeft[unit as keyof typeof timeLeft]}
-
{unit}
+
+

🏆 Leaderboard

+ + + + + + + + + + + + + + + + + + + + + + + + + +
RankUsernamePoints
1OpenSourcePro1200
2CodeWizard950
3DevChampion875
- ))} -
-
-

🏆 Leaderboard

- - - - - - - - - - - - - - - - - - - - - - - - - -
RankUsernamePoints
1OpenSourcePro1200
2CodeWizard950
3DevChampion875
+

+ Winners will be announced after the countdown ends. Stay active on the dashboard to climb up the leaderboard! +

+
- -

- Winners will be announced after the countdown ends. Stay active on the dashboard to climb up the leaderboard! -

-
+
); diff --git a/src/pages/dashboard/index.tsx b/src/pages/dashboard/index.tsx index f4f0c6dc..a6eeb417 100644 --- a/src/pages/dashboard/index.tsx +++ b/src/pages/dashboard/index.tsx @@ -12,6 +12,25 @@ import Giscus from "@giscus/react"; import { useLocation, useHistory } from "@docusaurus/router"; import "./dashboard.css"; +type DiscussionTab = "discussions" | "trending" | "unanswered"; +type SortOption = "most_popular" | "latest" | "oldest"; +type Category = "all" | "react" | "typescript" | "nodejs" | "python" | "ai_ml"; + +interface Discussion { + id: string; + title: string; + content: string; + author: { + name: string; + avatar: string; + }; + createdAt: string; + likes: number; + comments: number; + tags: string[]; + isPinned?: boolean; +} + interface LeaderboardEntry { rank: number; name: string; @@ -82,13 +101,89 @@ const parseCSVToJSON = (csvText: string): any[] => { return data; }; +const categories: Category[] = [ + "all", + "react", + "typescript", + "nodejs", + "python", + "ai_ml", +]; + const DashboardContent: React.FC = () => { const location = useLocation(); const history = useHistory(); const [activeTab, setActiveTab] = useState< "home" | "discuss" | "leaderboard" | "giveaway" >("home"); + + // Discussion state management + const [activeDiscussionTab, setActiveDiscussionTab] = + useState("discussions"); + const [selectedCategory, setSelectedCategory] = useState("all"); + const [sortBy, setSortBy] = useState("most_popular"); + const [searchQuery, setSearchQuery] = useState(""); + const [discussions, setDiscussions] = useState([ + { + id: "1", + title: "Best practices for React component optimization", + content: + "I've been working on a large React application and noticed some performance issues. What are the most effective ways to optimize React components for better performance? I'm particularly interested in memo, useMemo, and useCallback usage patterns.", + author: { + name: "Sarah Chen", + avatar: "/img/default-avatar.png", + }, + createdAt: new Date(Date.now() - 2 * 60 * 60 * 1000).toISOString(), + likes: 24, + comments: 8, + tags: ["react", "performance", "frontend"], + isPinned: true, + }, + { + id: "2", + title: "Building scalable microservices with Node.js", + content: + "Looking for advice on architecting microservices using Node.js. What patterns and tools do you recommend?", + author: { + name: "Mike Rodriguez", + avatar: "/img/default-avatar.png", + }, + createdAt: new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString(), + likes: 31, + comments: 14, + tags: ["nodejs", "microservices", "architecture"], + }, + { + id: "3", + title: "How to use AI/ML in Python for sentiment analysis?", + content: + "I'm new to AI/ML and want to build a sentiment analysis tool in Python. Where should I start? What libraries are recommended?", + author: { + name: "Alex Doe", + avatar: "/img/default-avatar.png", + }, + createdAt: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString(), + likes: 15, + comments: 3, + tags: ["python", "ai_ml", "sentiment-analysis"], + }, + { + id: "4", + title: "Getting started with TypeScript in a React project", + content: + "What are the benefits of using TypeScript with React? I'm looking for a simple guide to set it up.", + author: { + name: "Jane Smith", + avatar: "/img/default-avatar.png", + }, + createdAt: new Date(Date.now() - 5 * 24 * 60 * 60 * 1000).toISOString(), + likes: 45, + comments: 0, + tags: ["react", "typescript"], + }, + ]); const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false); + const [isMobileSidebarOpen, setIsMobileSidebarOpen] = useState(false); const [leaderboardData, setLeaderboardData] = useState( [] ); @@ -123,6 +218,89 @@ const DashboardContent: React.FC = () => { } }, [activeTab]); + // Discussion handlers + const handleDiscussionTabChange = (tab: DiscussionTab) => { + setActiveDiscussionTab(tab); + }; + + const handleCategoryChange = (category: Category) => { + setSelectedCategory(category); + }; + + const handleSortChange = (event: React.ChangeEvent) => { + setSortBy(event.target.value as SortOption); + }; + + const handleSearchChange = (event: React.ChangeEvent) => { + setSearchQuery(event.target.value); + }; + + const handleNewDiscussion = () => { + // This could open a modal or navigate to a new discussion form + alert("New discussion feature coming soon!"); + }; + + // Filter discussions based on current state and tab + const getFilteredDiscussions = (discussions: Discussion[]) => { + return discussions + .filter((discussion) => { + // First apply tab filter + switch (activeDiscussionTab) { + case "trending": + return discussion.likes > 20; // Show discussions with more than 20 likes + case "unanswered": + return discussion.comments === 0; + default: + return true; + } + }) + .filter((discussion) => { + // Then apply category filter + if (selectedCategory !== "all") { + return discussion.tags.some( + (tag) => tag.toLowerCase() === selectedCategory + ); + } + return true; + }) + .filter((discussion) => { + // Then apply search filter + if (searchQuery) { + return ( + discussion.title + .toLowerCase() + .includes(searchQuery.toLowerCase()) || + discussion.content.toLowerCase().includes(searchQuery.toLowerCase()) + ); + } + return true; + }) + .sort((a, b) => { + // Pinned discussions first + if (a.isPinned && !b.isPinned) return -1; + if (!a.isPinned && b.isPinned) return 1; + + // Finally sort the results + switch (sortBy) { + case "latest": + return ( + new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime() + ); + case "oldest": + return ( + new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime() + ); + default: + return b.likes - a.likes; // most_popular + } + }); + }; + + const filteredDiscussions = React.useMemo( + () => getFilteredDiscussions(discussions), + [discussions, activeDiscussionTab, selectedCategory, searchQuery, sortBy] + ); + // Rate limit timer useEffect(() => { let interval: NodeJS.Timeout; @@ -515,6 +693,7 @@ const DashboardContent: React.FC = () => { tab: "home" | "discuss" | "leaderboard" | "giveaway" ) => { setActiveTab(tab); + setIsMobileSidebarOpen(false); // Close mobile sidebar if (tab === "discuss") { history.push("#discuss"); window.scrollTo(0, 0); @@ -804,12 +983,18 @@ const DashboardContent: React.FC = () => { RecodeHive | Dashboard -
+
+ {/* Mobile Menu Button */} + + + +
+ +
+ +
+ {categories.map((category) => ( +
handleCategoryChange(category)} + > + {category.charAt(0).toUpperCase() + category.slice(1)} +
+ ))} +
+ +
+
+ + + + +
+
+ +
+
+ +
+ {filteredDiscussions.map((discussion) => ( +
+
+ {`${discussion.author.name}'s +
+
+
+

{discussion.title}

+ {discussion.isPinned && ( + 📌 Pinned + )} +
+
+

{discussion.content}

+
+
+
+ {discussion.tags.map((tag) => ( + + {tag} + + ))} +
+
+ + by {discussion.author.name} + + + {new Date( + discussion.createdAt + ).toLocaleDateString()} + + 👍 {discussion.likes} + 💬 {discussion.comments} +
+
+
+
+ ))} +
+ ) : ( // Giveaway tab content