UI revamp#321
Merged
Merged
Conversation
- Updated IncidentAnnouncement component with new icons and improved styling. - Refined Header component for better aesthetics and responsiveness. - Enhanced HeroSection with a darker theme and improved text readability. - Introduced HowItWorksSection to explain the domain registration process. - Added LiveStatsSection to display real-time statistics about the platform. - Improved dialog overlay with backdrop blur effect. - Updated global CSS for smoother animations and better performance. - Modified Register page to include new icons for better visual representation.
- Updated the registration button styles for better UX. - Introduced a new Globe3D component to visualize global markers. - Added a MissionSection component featuring a floating globe illustration. - Implemented a NetworkMapSection to display globally distributed nameservers. - Created a DottedMap component for visualizing markers on a map. - Developed various Tailwind CSS button components for consistent styling.
- Updated descriptions for domain extensions in HowItWorksSection for clarity and marketing alignment. - Enhanced LiveStatsSection to display more relevant statistics and improved layout. - Expanded sampleMarkers in MissionSection to include a comprehensive list of global cities. - Improved styling and layout in MissionSection for better visual hierarchy and user engagement. - Removed FAQSection from Landing page to streamline content. - Added a script to automate the update of sampleMarkers in MissionSection. - Adjusted 3D globe component to handle resizing more effectively and removed unused marker overlays.
- Enhanced FeatureCards component with new layout and typography. - Updated Header component styles for buttons to improve accessibility and aesthetics. - Refined HowItWorksSection and LiveStatsSection for better responsiveness and visual appeal. - Removed floating badges from MissionSection to streamline design. - Reorganized Landing page to integrate HowItWorksSection and LiveStatsSection in a cohesive layout. - Added Header component to Login and Signup pages for consistent navigation. - Improved form styling and layout in Signup page for better user experience.
…ments, and CAPTCHA integration for login and password recovery
…ndling, and enhance overall layout
…proved dark mode styles
…and accessibility
- Enhanced toggle switch styles for better visibility and accessibility. - Improved password field design with updated colors and hover effects. - Updated user profile display with consistent text colors and improved layout. - Refined abuse reporting sections in AUP and Abuse pages for better readability and dark mode support.
…ponent - Updated background and border styles for various sections to improve visual hierarchy and consistency. - Changed text colors and font weights for better readability and accessibility. - Enhanced button styles for better interaction feedback and consistency across the component. - Improved layout and spacing for form elements and informational text. - Updated modal styles for better visibility and user experience.
…ross multiple components
… update styles for improved user experience
…implement new component for displaying domain extensions
There was a problem hiding this comment.
Pull request overview
This PR performs a broad UI refresh across the app, adding consistent dark-mode styling, updating multiple auth/account flows with OTP-style inputs and CAPTCHA gating, and introducing new landing-page sections/visual components (stats, mission, maps, 3D globe).
Changes:
- Revamps styling across pages/layouts/components to a translucent “glass” look with Tailwind
dark:support and class-based theming. - Updates auth flows (login, forgot/reset, email verify, 2FA verify) with
InputOTPUI and Cloudflare Turnstile integration. - Reworks the landing page structure (new sections like mission/extensions/stats) and adds new UI components (dotted map, 3D globe, button variants, Discord pill).
Reviewed changes
Copilot reviewed 48 out of 51 changed files in this pull request and generated 11 comments.
Show a summary per file
| File | Description |
|---|---|
| src/pages/Whois.jsx | Visual refresh + dark-mode styling for WHOIS page. |
| src/pages/VerifyEmail.jsx | Uses OTP UI component + adds Turnstile token gating for resend. |
| src/pages/Verify2FA.jsx | Adds OTP UI + backup-code toggle + dark-mode styling. |
| src/pages/SetPassword.jsx | Dark-mode styling updates. |
| src/pages/ResetPassword.jsx | Major UI/layout refresh + OTP UI for reset code. |
| src/pages/Login.jsx | Major UI/layout refresh + Turnstile gating for email login. |
| src/pages/legal/AUP.jsx | Dark-mode styling adjustments in legal page content. |
| src/pages/legal/Abuse.jsx | Dark-mode styling adjustments in legal page content. |
| src/pages/Landing.jsx | Landing page restructure; new sections imported/assembled. |
| src/pages/ForgotPassword.jsx | UI refresh + Turnstile gating + copy updates (“reset code”). |
| src/pages/Donate.jsx | UI refresh with background effects and updated card styles. |
| src/pages/dashboard/Overview.jsx | Dashboard overview restyle + KYC CTA behavior change. |
| src/pages/dashboard/History.jsx | Activity history restyle (table + states) with dark mode. |
| src/pages/dashboard/Help.jsx | Help page restyle + new iconography/layout improvements. |
| src/pages/dashboard/DNS.jsx | DNS page redesign + refreshed “Managed DNS” CTA layout. |
| src/pages/CompleteProfile.jsx | Dark-mode styling and updated branding assets/year text. |
| src/pages/ChangeEmail.jsx | Dark-mode styling and updated branding assets. |
| src/pages/About.jsx | About page restyle to match new theme + dark-mode classes. |
| src/main.jsx | ThemeProvider updated to apply theme via class attribute. |
| src/layouts/LegalLayout.jsx | Legal layout restyle + dark-mode typography utilities. |
| src/layouts/DashboardLayout.jsx | Dashboard layout restyle + dark-mode and glass UI. |
| src/index.css | Adds dark custom variant, theme token tweaks, autofill fixes, animation perf tweaks. |
| src/components/ui/toast.jsx | Toast viewport moved bottom-right + restyled variants for new theme. |
| src/components/ui/tailwindcss-buttons.jsx | New: collection of reusable button variants. |
| src/components/ui/input-otp.jsx | OTP UI restyle (slot sizing, borders, caret styling). |
| src/components/ui/dotted-map.jsx | New: SVG dotted map renderer with marker support. |
| src/components/ui/dialog.jsx | Dialog overlay blur added. |
| src/components/ui/3d-globe.jsx | New: Three.js globe visualization with markers and auto-rotation. |
| src/components/sponsors-section.jsx | Sponsors section redesigned into logo strip layout. |
| src/components/PSLAnnouncement.jsx | Removed prior PSL announcement component. |
| src/components/network-map-section.jsx | New: nameserver map section using DottedMap. |
| src/components/mission-section.jsx | New: mission/features section including globe visualization. |
| src/components/live-stats.jsx | New: stats widget (optionally fetched from backend). |
| src/components/IncidentAnnouncement.jsx | Banner/modal redesign + height calculation logic tweak. |
| src/components/hero-section.jsx | Hero redesign + namespace dropdown + availability check updates. |
| src/components/header.jsx | Header redesign + theme toggle + new logo assets. |
| src/components/Globe3DDemo.jsx | New: demo component for globe (likely for experimentation/showcase). |
| src/components/footer-section.jsx | Footer branding/year text update. |
| src/components/feature-cards.jsx | Feature cards redesigned to match new theme and copy updates. |
| src/components/faq-section.jsx | FAQ styling redesign (accordion visuals). |
| src/components/domain-extensions.jsx | New: “Available Namespaces” section component. |
| src/App.jsx | Removes top announcement render; adds fixed Discord CTA pill. |
| package.json | Adds deps for globe/map (three, svg-dotted-map) and bumps tailwind-merge. |
| package-lock.json | Lockfile updates for new dependencies/versions. |
| .env | Minor formatting change; still committed env config. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| import { FAQSection } from "@/components/faq-section"; | ||
| import { Footer } from "@/components/footer-section"; | ||
| import { PSLAnnouncement } from "@/components/PSLAnnouncement"; | ||
| import { HowItWorksSection } from "@/components/domain-extensions"; |
|
|
||
| <div className="max-w-[1600px] mx-auto px-4 sm:px-6 md:px-12 lg:px-16 relative z-10"> | ||
| <div className="grid grid-cols-1 xl:grid-cols-2 gap-12 xl:gap-8 items-center"> | ||
| <HowItWorksSection /> |
Comment on lines
+30
to
+32
| <img src="/stackryze_logo_black.png" alt="Stackryze Logo" className="h-8 sm:h-10 md:h-10 w-auto dark:hidden dark:hidden" /> | ||
| <img src="/stackryze_logo_white.png" alt="Stackryze Logo" className="h-8 sm:h-10 md:h-10 w-auto dark:hidden hidden dark:block" /> | ||
| <img src="/stackryze_logo_white.png" alt="Stackryze Logo" className="h-8 sm:h-10 md:h-10 w-auto hidden dark:block" /> |
| label="Expiring" | ||
| sub="within 30 days" | ||
| accent={expiringCount > 0 ? "#b45309" : "#888"} | ||
| accentClass={expiringCount > 0 ? "text-amber-600 dark:text-amber-400" : "text-slate-900 dark:text-white dark:text-slate-900 dark:text-white"} |
| label="Expired" | ||
| sub="domains" | ||
| accent={expiredCount > 0 ? "#c5221f" : "#888"} | ||
| accentClass={expiredCount > 0 ? "text-red-600 dark:text-red-400" : "text-slate-900 dark:text-white dark:text-slate-900 dark:text-white"} |
Comment on lines
17
to
24
| // Delay slighty to ensure fonts/layout are ready before calculating height | ||
| setTimeout(updateHeight, 50); | ||
|
|
||
| window.addEventListener('resize', updateHeight); | ||
| return () => { | ||
| window.removeEventListener('resize', updateHeight); | ||
| document.documentElement.style.removeProperty('--incident-height'); | ||
| }; |
Comment on lines
+307
to
+317
| cancelAnimationFrame(animationFrameId); | ||
| resizeObserver.disconnect(); | ||
| controls.dispose(); | ||
| renderer.dispose(); | ||
|
|
||
| // Dispose Three.js objects | ||
| globeGeometry.dispose(); | ||
| globeMaterial.dispose(); | ||
| earthTexture.dispose(); | ||
| bumpTexture.dispose(); | ||
| scene.clear(); |
| bumpScale: 1.0, | ||
| autoRotateSpeed: 0.4, | ||
| }} | ||
| onMarkerClick={(marker) => console.log("Clicked:", marker.label)} |
Comment on lines
2
to
+4
| VITE_API_URL=http://localhost:5000 | ||
| VITE_HCAPTCHA_SITE_KEY=d1288a8e-6dfa-4e3c-a478-816662d659fe | ||
| VITE_TURNSTILE_SITE_KEY=0x4AAAAAACLn2IKs96pbDFS5 | ||
| VITE_TURNSTILE_SITE_KEY=0x4AAAAAACLn2IKs96pbDFS5 No newline at end of file |
Comment on lines
+170
to
+173
| <button | ||
| onClick={() => setErrorBanner(null)} | ||
| className="text-red-900 hover:text-red-700 font-bold text-xl leading-none" | ||
| >×</button> |
Comment on lines
79
to
82
| <AuthProvider> | ||
| <Router> | ||
| <IncidentAnnouncement /> | ||
|
|
||
| <Routes> |
Comment on lines
+10
to
+12
| const { theme, setTheme } = useTheme(); | ||
| const isDashboard = location.pathname.startsWith("/dashboard"); | ||
| const [isScrolled, setIsScrolled] = useState(false); |
Comment on lines
+100
to
+104
| <button | ||
| onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')} | ||
| className="p-2 rounded-full hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors" | ||
| title="Toggle theme" | ||
| > |
Comment on lines
87
to
93
| <a | ||
| href="https://github.com/stackryze/FreeDomains" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| className="text-[#1A1A1A] hover:text-[#FF6B35] transition-colors duration-150 font-medium text-sm lg:text-base" | ||
| className="text-[#1A1A1A] dark:text-white dark:text-slate-200 hover:text-[#FF6B35] dark:hover:text-[#FF6B35] transition-colors duration-150 font-bold text-sm lg:text-sm" | ||
| > | ||
| GitHub |
Comment on lines
+74
to
+80
| export function Globe3D({ | ||
| markers = [], | ||
| config = {}, | ||
| className, | ||
| onMarkerClick, | ||
| onMarkerHover, | ||
| }) { |
Comment on lines
+83
to
+86
| const avatarRefs = useRef([]); | ||
| const markerTipObjects = useRef([]); | ||
| const [hoveredIndex, setHoveredIndex] = useState(null); | ||
|
|
Comment on lines
+1
to
+2
| import React from "react"; | ||
| import { cn } from "@/lib/utils"; |
Member
Author
|
@copilot review the changes |
Comment on lines
7
to
+11
| export function Header() { | ||
| const location = useLocation(); | ||
| const { user } = useAuth(); | ||
| const isDashboard = location.pathname.startsWith("/dashboard"); | ||
| const { theme, setTheme } = useTheme(); | ||
| const [isScrolled, setIsScrolled] = useState(false); |
Comment on lines
+23
to
+27
| })); | ||
| } | ||
| } catch (err) { | ||
| // Keep defaults | ||
| } |
Comment on lines
1
to
6
| @@ -2,7 +2,7 @@ import React, { useState } from 'react'; | |||
| import { | |||
| Mail, Shield, Scale, LifeBuoy, AlertTriangle, MessageCircle, | |||
| FileText, ChevronDown, ChevronUp, ExternalLink, Book, Zap, | |||
| Globe, Settings, GitBranch, Search | |||
| Globe, Settings, GitBranch, Search, HelpCircle | |||
| } from 'lucide-react'; | |||
Comment on lines
1
to
+4
| # Backend API URL | ||
| VITE_API_URL=http://localhost:5000 | ||
| VITE_HCAPTCHA_SITE_KEY=d1288a8e-6dfa-4e3c-a478-816662d659fe | ||
| VITE_TURNSTILE_SITE_KEY=0x4AAAAAACLn2IKs96pbDFS5 | ||
| VITE_TURNSTILE_SITE_KEY=0x4AAAAAACLn2IKs96pbDFS5 No newline at end of file |
Comment on lines
+139
to
+145
| const DiscordPill = () => ( | ||
| <a | ||
| href="https://discord.gg/wr7s97cfM7" | ||
| target="_blank" | ||
| rel="noreferrer" | ||
| className="fixed bottom-6 right-6 z-[9999] flex items-center gap-2.5 bg-black dark:bg-white text-white dark:text-black px-4 py-2.5 rounded-full font-bold text-sm shadow-[0_8px_30px_rgb(0,0,0,0.12)] hover:scale-105 hover:shadow-[0_8px_30px_rgb(0,0,0,0.2)] transition-all duration-300 group" | ||
| > |
Comment on lines
+1
to
+4
| import { Fragment } from "react"; | ||
| import { Terminal, ShieldCheck, Eye, Users, Key, Server, Database, Globe } from "lucide-react"; | ||
| import { Globe3D } from "./ui/3d-globe"; | ||
|
|
…n import, handle errors gracefully in LiveStatsSection, implement lazy loading for Globe3D in MissionSection, and streamline imports in Help component
Member
Author
|
@copilot add comments and merge |
Copilot stopped work on behalf of
sudheerbhuvana due to an error
June 4, 2026 19:31
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
@copilot