Angor Flow + Light mode Introduce by yashop7 · Pull Request #7 · block-core/angor-website

yashop7 · 2025-08-08T19:00:37Z

What's New !!

Introduce Angor Flow
Light Mode
Fixed Bugs + some styling issues

yashop7 · 2025-08-19T17:26:24Z

Hey, can anybody review this @dangershony @miladsoft

dangershony · 2025-08-19T21:01:35Z

also this I would like to know if it can be deployed on a separate instance first to check it out.

Copilot

Pull Request Overview

This PR introduces significant UI improvements to the Angor website by implementing a light/dark theme system and adding a new "Angor Flow" section. The changes enhance user experience with theme switching capabilities while maintaining the existing design aesthetics.

Added comprehensive light/dark theme support with theme context and toggle functionality
Introduced new "Angor Flow" component to explain the protocol workflow
Updated all components to support dual theme modes with appropriate color schemes

Reviewed Changes

Copilot reviewed 18 out of 24 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
tailwind.config.cjs	Added dark mode configuration and light theme color palette
src/styles/Theme.css	Updated styles to support light/dark theme variants
src/pages/index.astro	Added ThemeProvider wrapper and AngorFlow component
src/layouts/Layout.astro	Updated body/html classes for theme support
src/context/ThemeContext.jsx	New theme context provider with localStorage persistence
src/components/ThemeButton.jsx	New theme toggle button component
src/components/*.jsx	Updated all components with theme-aware styling
src/assets/icons/*.jsx	Added new sun and moon icons for theme toggle

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

Copilot · 2025-08-19T21:03:20Z

src/context/ThemeContext.jsx

+    if (shouldBeDark) {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.body.className = 'bg-lightbgLight2 dark:bg-bgDark2';


This line unconditionally sets the body className, overriding any existing classes. Use classList.add/remove instead to preserve other classes.

Suggested change

document.body.className = 'bg-lightbgLight2 dark:bg-bgDark2';

document.body.classList.add('bg-lightbgLight2', 'dark:bg-bgDark2');

Copilot · 2025-08-19T21:03:21Z

src/components/Hero.jsx

-          <div className="rubik-moonrocks-regular text-3xl sm:text-4xl lg:text-5xl xl:text-5xl font-bold tracking-wide text-primaryText px-8 sm:px-8 md:px-20 lg:px-4 sm:mt-32 mt-16">
-            <h1>non custodial crowdfunding</h1>
+          <div className="rubik-moonrocks-regular text-3xl sm:text-4xl lg:text-5xl xl:text-5xl font-bold tracking-wide text-lightprimaryText dark:text-primaryText px-8 sm:px-8 md:px-20 lg:px-4 sm:mt-32 mt-16">
+            <h1>Non custodial crowdfunding</h1>


Should be 'Non-custodial' with a hyphen since it's a compound adjective modifying 'crowdfunding'.

Suggested change

<h1>Non custodial crowdfunding</h1>

<h1>Non-custodial crowdfunding</h1>

Copilot · 2025-08-19T21:03:21Z

src/components/ThemeButton.jsx

+      )}
+      <button
+        onClick={toggleTheme}
+        className="relative size-10 rounded-full p-2.5 transition-all duration-300 ease-in-out bg-lightbgLight1 dark:bg-bgDark3 border border-lightmainBorder dark:border-mainBorder hover:bg-lightbgLight/90 dark:hover:bg-bgDark3Hover hover:scale-105 shadow-sm hover:shadow-md"


This className string is extremely long and difficult to read. Consider extracting it to a variable or using a utility function to conditionally build the classes.

Suggested change

className="relative size-10 rounded-full p-2.5 transition-all duration-300 ease-in-out bg-lightbgLight1 dark:bg-bgDark3 border border-lightmainBorder dark:border-mainBorder hover:bg-lightbgLight/90 dark:hover:bg-bgDark3Hover hover:scale-105 shadow-sm hover:shadow-md"

className={buttonClassName}

Copilot · 2025-08-19T21:03:22Z

src/components/Navbar.jsx

-        items-center gap-10 pb-10 border-y border-solid border-bgDark3 pt-10
-        "
-            >
+          <div className="flex flex-col mt-16 lg:hidden absolute top-4 left-0 z-50 w-full items-center gap-6 py-8 border-y border-solid bg-lightbgLight/95 border-lightmainBorder shadow-2xl backdrop-blur-md dark:bg-bgDark1/95 dark:border-bgDark3">


This className string is extremely long and difficult to maintain. Consider breaking it into smaller, more manageable class groupings or using a utility function.

Suggested change

<div className="flex flex-col mt-16 lg:hidden absolute top-4 left-0 z-50 w-full items-center gap-6 py-8 border-y border-solid bg-lightbgLight/95 border-lightmainBorder shadow-2xl backdrop-blur-md dark:bg-bgDark1/95 dark:border-bgDark3">

<div className={mobileNavbarContainerClasses}>

Copilot · 2025-08-19T21:03:22Z

src/components/FAQ.jsx

-                    transition-all duration-300 hover:scale-105 flex items-center gap-2
-                    ${
+						<div className="mb-12">
+							<div className="hidden md:flex gap-2 bg-lightbgLight1 dark:bg-bgDark2 p-1 rounded-2xl border border-lightmainBorder dark:border-mainBorder shadow-sm">


These two divs have very similar styling with only minor differences (bg-lightbgLight1 vs bg-lightbgLight2 and scrollbar-hide). Consider extracting the common styles to reduce duplication.

Suggested change

<div className="hidden md:flex gap-2 bg-lightbgLight1 dark:bg-bgDark2 p-1 rounded-2xl border border-lightmainBorder dark:border-mainBorder shadow-sm">

<div className={`hidden md:flex bg-lightbgLight1 ${faqCategoryContainerBaseClasses}`}>

Copilot · 2025-08-19T21:03:22Z

src/components/FAQ.jsx

+							</div>
+
+							<div className="md:hidden">
+								<div className="flex overflow-x-auto scrollbar-hide bg-lightbgLight2 dark:bg-bgDark2 p-1 rounded-2xl border border-lightmainBorder dark:border-mainBorder shadow-sm">


These two divs have very similar styling with only minor differences (bg-lightbgLight1 vs bg-lightbgLight2 and scrollbar-hide). Consider extracting the common styles to reduce duplication.

Suggested change

<div className="flex overflow-x-auto scrollbar-hide bg-lightbgLight2 dark:bg-bgDark2 p-1 rounded-2xl border border-lightmainBorder dark:border-mainBorder shadow-sm">

<div className={`overflow-x-auto scrollbar-hide bg-lightbgLight2 dark:bg-bgDark2 ${faqCategoryBaseClasses}`}>

yashop7 · 2025-08-20T08:09:11Z

also this I would like to know if it can be deployed on a separate instance first to check it out.

@mistic0xb Can you help in this ?

yashop7 added 3 commits August 9, 2025 00:13

Angor Flow + Light mode Introduce

cd7208c

fix issues

0e1ec6e

fix

4dff0d8

dangershony requested a review from Copilot August 19, 2025 21:01

Copilot AI reviewed Aug 19, 2025

View reviewed changes

replace png with svg

1492004

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Comments

Angor Flow + Light mode Introduce#7

Angor Flow + Light mode Introduce#7
yashop7 wants to merge 4 commits intoblock-core:mainfrom
yashop7:angor-flow-light

yashop7 commented Aug 8, 2025

Uh oh!

yashop7 commented Aug 19, 2025

Uh oh!

dangershony commented Aug 19, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Aug 19, 2025

Uh oh!

Copilot AI Aug 19, 2025

Uh oh!

Copilot AI Aug 19, 2025

Uh oh!

Copilot AI Aug 19, 2025

Uh oh!

Copilot AI Aug 19, 2025

Uh oh!

Copilot AI Aug 19, 2025

Uh oh!

yashop7 commented Aug 20, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	document.body.className = 'bg-lightbgLight2 dark:bg-bgDark2';
	document.body.classList.add('bg-lightbgLight2', 'dark:bg-bgDark2');

	<h1>Non custodial crowdfunding</h1>
	<h1>Non-custodial crowdfunding</h1>

	className="relative size-10 rounded-full p-2.5 transition-all duration-300 ease-in-out bg-lightbgLight1 dark:bg-bgDark3 border border-lightmainBorder dark:border-mainBorder hover:bg-lightbgLight/90 dark:hover:bg-bgDark3Hover hover:scale-105 shadow-sm hover:shadow-md"
	className={buttonClassName}

	<div className="flex flex-col mt-16 lg:hidden absolute top-4 left-0 z-50 w-full items-center gap-6 py-8 border-y border-solid bg-lightbgLight/95 border-lightmainBorder shadow-2xl backdrop-blur-md dark:bg-bgDark1/95 dark:border-bgDark3">
	<div className={mobileNavbarContainerClasses}>

	<div className="hidden md:flex gap-2 bg-lightbgLight1 dark:bg-bgDark2 p-1 rounded-2xl border border-lightmainBorder dark:border-mainBorder shadow-sm">
	<div className={`hidden md:flex bg-lightbgLight1 ${faqCategoryContainerBaseClasses}`}>

	<div className="flex overflow-x-auto scrollbar-hide bg-lightbgLight2 dark:bg-bgDark2 p-1 rounded-2xl border border-lightmainBorder dark:border-mainBorder shadow-sm">
	<div className={`overflow-x-auto scrollbar-hide bg-lightbgLight2 dark:bg-bgDark2 ${faqCategoryBaseClasses}`}>

Comments

Conversation

yashop7 commented Aug 8, 2025

Uh oh!

yashop7 commented Aug 19, 2025

Uh oh!

dangershony commented Aug 19, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Aug 19, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 19, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 19, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 19, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 19, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 19, 2025

Choose a reason for hiding this comment

Uh oh!

yashop7 commented Aug 20, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants