add aztec noir theming to app

Kryha · Sep 5, 2023 · cf4f2a1 · cf4f2a1
1 parent 5163d2f
commit cf4f2a1
Show file tree

Hide file tree

Showing 11 changed files with 46 additions and 39 deletions.
diff --git a/packages/nextjs/components/Footer.tsx b/packages/nextjs/components/Footer.tsx
@@ -18,7 +18,7 @@ export const Footer = () => {
         <div className="fixed flex justify-between items-center w-full z-10 p-4 bottom-0 left-0 pointer-events-none">
           <div className="flex space-x-2 pointer-events-auto">
             {nativeCurrencyPrice > 0 && (
-              <div className="btn btn-primary btn-sm font-normal cursor-auto gap-0">
+              <div className="btn btn-secondary btn-sm font-normal cursor-auto gap-0">
                 <CurrencyDollarIcon className="h-4 w-4 mr-0.5" />
                 <span>{nativeCurrencyPrice}</span>
               </div>

diff --git a/packages/nextjs/components/SwitchTheme.tsx b/packages/nextjs/components/SwitchTheme.tsx
@@ -8,15 +8,15 @@ export const SwitchTheme = ({ className }: { className?: string }) => {
 
   useEffect(() => {
     const body = document.body;
-    body.setAttribute("data-theme", isDarkMode ? "scaffoldEthDark" : "scaffoldEth");
+    body.setAttribute("data-theme", isDarkMode ? "darkTheme" : "lightTheme");
   }, [isDarkMode]);
 
   return (
     <div className={`flex space-x-2 text-sm ${className}`}>
       <input
         id="theme-toggle"
         type="checkbox"
-        className="toggle toggle-primary bg-primary"
+        className="toggle toggle-accent bg-primary"
         onChange={toggle}
         checked={isDarkMode}
       />

diff --git a/packages/nextjs/components/scaffold-eth/Faucet.tsx b/packages/nextjs/components/scaffold-eth/Faucet.tsx
@@ -82,7 +82,7 @@ export const Faucet = () => {
 
   return (
     <div>
-      <label htmlFor="faucet-modal" className="btn btn-primary btn-sm px-2 rounded-full font-normal normal-case">
+      <label htmlFor="faucet-modal" className="btn btn-secondary btn-sm px-2 rounded-full font-normal normal-case">
         <BanknotesIcon className="h-4 w-4" />
         <span>Faucet</span>
       </label>
@@ -113,7 +113,7 @@ export const Faucet = () => {
                 onChange={value => setInputAddress(value)}
               />
               <EtherInput placeholder="Amount to send" value={sendValue} onChange={value => setSendValue(value)} />
-              <button className="h-10 btn btn-primary btn-sm px-2 rounded-full" onClick={sendETH} disabled={loading}>
+              <button className="h-10 btn btn-secondary btn-sm px-2 rounded-full" onClick={sendETH} disabled={loading}>
                 {!loading ? (
                   <BanknotesIcon className="h-6 w-6" />
                 ) : (

diff --git a/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton.tsx b/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton.tsx
@@ -40,7 +40,7 @@ export const RainbowKitCustomConnectButton = () => {
             {(() => {
               if (!connected) {
                 return (
-                  <button className="btn btn-primary btn-sm" onClick={openConnectModal} type="button">
+                  <button className="btn btn-secondary btn-sm" onClick={openConnectModal} type="button">
                     Connect Wallet
                   </button>
                 );

diff --git a/packages/nextjs/pages/example-zk/AgeRestrictedContractExecutor.tsx b/packages/nextjs/pages/example-zk/AgeRestrictedContractExecutor.tsx
@@ -59,7 +59,7 @@ export const AgeRestrictedContractExecutor = () => {
                 onChange={e => setProof(e.target.value as `0x${string}`)}
               />
             </div>
-            <button className="btn btn-primary mt-6" onClick={() => writeAsync()} disabled={isLoading}>
+            <button className="btn btn-secondary mt-6" onClick={() => writeAsync()} disabled={isLoading}>
               Get free balloon 🎈
             </button>
           </div>

diff --git a/packages/nextjs/pages/example-zk/BirthDateSignature.tsx b/packages/nextjs/pages/example-zk/BirthDateSignature.tsx
@@ -128,7 +128,7 @@ export const BirthDateSignature = ({ aliceDefaultAge }: { aliceDefaultAge: numbe
               />
             </div>
             <div className="form-control">
-              <button className="btn btn-primary mt-6" onClick={handleSubmission}>
+              <button className="btn btn-secondary mt-6" onClick={handleSubmission}>
                 Sign birth year 📜
               </button>
             </div>

diff --git a/packages/nextjs/pages/example-zk/GenerateProof.tsx b/packages/nextjs/pages/example-zk/GenerateProof.tsx
@@ -194,7 +194,7 @@ export const GenerateProof = ({ requiredBirthYear }: { requiredBirthYear: number
               />
             </div>
             <div className="form-control mt-6">
-              <button className="btn btn-primary" onClick={handleSubmission} disabled={isProofRunning}>
+              <button className="btn btn-secondary" onClick={handleSubmission} disabled={isProofRunning}>
                 Generate proof ✅
               </button>
             </div>

diff --git a/packages/nextjs/pages/example-zk/ZkSteps.tsx b/packages/nextjs/pages/example-zk/ZkSteps.tsx
@@ -31,12 +31,14 @@ const ZkSteps: NextPage = () => {
   const step2ClassName = currentStep >= 2 ? "step-primary" : "";
   const step3ClassName = currentStep >= 3 ? "step-primary" : "";
   const previousButtonDisabled = currentStep === INTRO_STEP;
+  const isNotIntroStep = currentStep !== INTRO_STEP;
+  const isNotLastStep = currentStep !== LAST_STEP;
 
   return (
-    <>
-      <SignedStats />
+    <div className="flex justify-center items-center flex-col px-4 w-full">
+      {isNotIntroStep && <SignedStats />}
       {renderZkSteps(currentStep, setCurrentStep)}
-      {currentStep !== INTRO_STEP && (
+      {isNotIntroStep && (
         <>
           <ul className="steps pt-12 steps-vertical md:steps-horizontal">
             <li className="step step-primary">Third party signature 🏛📜</li>
@@ -46,15 +48,15 @@ const ZkSteps: NextPage = () => {
           <div className="join grid grid-cols-2 mt-8 gap-8">
             <>
               <button
-                className="join-item btn btn-outline"
+                className="join-item btn btn-secondary"
                 onClick={() => setCurrentStep(currentStep => currentStep - 1)}
                 disabled={previousButtonDisabled}
               >
                 Previous
               </button>
-              {currentStep !== LAST_STEP && (
+              {isNotLastStep && (
                 <button
-                  className="join-item btn btn-outline"
+                  className="join-item btn btn-secondary"
                   onClick={() => setCurrentStep(currentStep => currentStep + 1)}
                 >
                   Next
@@ -64,7 +66,7 @@ const ZkSteps: NextPage = () => {
           </div>
         </>
       )}
-    </>
+    </div>
   );
 };
 

diff --git a/packages/nextjs/pages/example-zk/ZkStepsIntro.tsx b/packages/nextjs/pages/example-zk/ZkStepsIntro.tsx
@@ -5,7 +5,7 @@ type ZkStepsIntroProps = { setCurrentStep: Dispatch<SetStateAction<number>>; yea
 
 export const ZkStepsIntro = ({ setCurrentStep, yearTenYearsAgo }: ZkStepsIntroProps) => {
   return (
-    <div className="hero bg-base-200">
+    <div className="hero">
       <div className="hero-content text-center">
         <div className="max-w-3xl">
           <div className="flex flex-col justify-center items-center">
@@ -33,7 +33,7 @@ export const ZkStepsIntro = ({ setCurrentStep, yearTenYearsAgo }: ZkStepsIntroPr
               </li>
             </ol>
           </div>
-          <button className="btn btn-primary mt-6" onClick={() => setCurrentStep(currentStep => currentStep + 1)}>
+          <button className="btn btn-secondary mt-6" onClick={() => setCurrentStep(currentStep => currentStep + 1)}>
             Get Started
           </button>
         </div>

diff --git a/packages/nextjs/styles/globals.css b/packages/nextjs/styles/globals.css
@@ -31,7 +31,12 @@ p {
   @apply shadow-none;
 }
 
+.step:before,
+.step:after {
+  background-color: hsl(var(--s)) !important;
+}
+
 .step-primary:before,
 .step-primary:after {
-  background-color: rgb(57, 82, 132) !important;
+  background-color: hsl(var(--a)) !important;
 }
diff --git a/packages/nextjs/tailwind.config.js b/packages/nextjs/tailwind.config.js
@@ -2,12 +2,12 @@
 module.exports = {
   content: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}", "./utils/**/*.{js,ts,jsx,tsx}"],
   plugins: [require("daisyui")],
-  darkTheme: "scaffoldEthDark",
+  darkTheme: "darkTheme",
   // DaisyUI theme colors
   daisyui: {
     themes: [
       {
-        scaffoldEth: {
+        lightTheme: {
           primary: "#93BBFB",
           "primary-content": "#212638",
           secondary: "#DAE8FF",
@@ -33,20 +33,20 @@ module.exports = {
         },
       },
       {
-        scaffoldEthDark: {
-          primary: "#212638",
-          "primary-content": "#F9FBFF",
-          secondary: "#323f61",
-          "secondary-content": "#F9FBFF",
-          accent: "#4969A6",
-          "accent-content": "#F9FBFF",
-          neutral: "#F9FBFF",
-          "neutral-content": "#385183",
-          "base-100": "#385183",
-          "base-200": "#2A3655",
-          "base-300": "#212638",
-          "base-content": "#F9FBFF",
-          info: "#385183",
+        darkTheme: {
+          primary: "#231735",
+          "primary-content": "#F0F0F0",
+          secondary: "#2F1F49",
+          "secondary-content": "#F0F0F0",
+          accent: "#99A5EE",
+          "accent-content": "#231735",
+          neutral: "#F0F0F0",
+          "neutral-content": "#231735",
+          "base-100": "#231735",
+          "base-200": "#231735",
+          "base-300": "#2F1F49",
+          "base-content": "#F0F0F0",
+          info: "#231735",
           success: "#34EEB6",
           warning: "#FFCF72",
           error: "#FF8863",
@@ -62,18 +62,18 @@ module.exports = {
       {
         exampleUi: {
           primary: "#000000",
-          "primary-content": "#ffffff",
+          "primary-content": "#F0F0F0",
           secondary: "#FF6644",
           "secondary-content": "#212638",
-          accent: "#93BBFB",
+          accent: "#F0F0F0",
           "accent-content": "#212638",
           neutral: "#f3f3f3",
           "neutral-content": "#212638",
-          "base-100": "#ffffff",
+          "base-100": "#F0F0F0",
           "base-200": "#f1f1f1",
           "base-300": "#d0d0d0",
           "base-content": "#212638",
-          info: "#93BBFB",
+          info: "#F0F0F0",
           success: "#34EEB6",
           warning: "#FFCF72",
           error: "#FF8863",