New Look for Demo Site

packages/example/components/buttons.tsx

@@ -6,11 +6,9 @@ export function PrimaryButton(
   return (
     <button
       {...props}
-      className={`px-4 py-2 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-gradient-to-r from-purple-600 to-indigo-600 ${
-        props.disabled
-          ? 'cursor-not-allowed'
-          : 'hover:from-purple-700 hover:to-indigo-700'
-      } mt-2 ml-auto ${props.className || ''}`}
+      className={`px-4 py-2 border border-celo-gold rounded shadow-sm text-base font-medium text-slate-900 bg-celo-gold ${
+        props.disabled ? 'cursor-not-allowed' : 'hover:bg-celo-gold-light'
+      } mt-2 ${props.className || ''}`}
     />
   );
 }
@@ -21,10 +19,12 @@ export function SecondaryButton(
   return (
     <button
       {...props}
-      className={`px-4 py-2 border border-transparent rounded-md text-base font-medium outline-none focus:outline-none ${
+      className={`px-3 py-1 my-1 border border-transparent bg-rc-violet-light rounded text-base font-medium outline-none focus:outline-none ${
         props.className || ''
       } ${
-        props.disabled ? 'cursor-not-allowed text-slate-400' : 'text-purple-700'
+        props.disabled
+          ? 'cursor-not-allowed text-slate-400'
+          : 'text-rc-violet hover:text-rc-violet-light hover:bg-rc-violet'
       }`}
     />
   );

packages/example/components/test-plan/disconnect-button.tsx

@@ -2,10 +2,15 @@ import { useCelo } from '@celo/react-celo';
 import React from 'react';
 
 export default function DisconnectButton() {
-  const { destroy } = useCelo();
-
+  const { destroy, address } = useCelo();
+  if (!address) {
+    return null;
+  }
   return (
-    <button className="inline underline text-purple-700" onClick={destroy}>
+    <button
+      className="inline underline text-rc-violet dark:rc-violet-light"
+      onClick={destroy}
+    >
       Disconnect wallet
     </button>
   );

packages/example/components/test-plan/ui.tsx

@@ -29,7 +29,7 @@ export function TestBlock({
   onRunTest: () => void;
 }>) {
   return (
-    <div className="test-block">
+    <div className="test-block dark:text-slate-100">
       <div className="tag-column">
         <TestTag type={status} />
       </div>
@@ -52,7 +52,7 @@ export function TestBlock({
 }
 
 export const Header: React.FC = (props) => (
-  <h3 className="font-semibold text-base" {...props} />
+  <h3 className="font-semibold text-base mr-2" {...props} />
 );
 
 export const Text: React.FC = (props) => (

packages/example/components/theme-button.tsx

@@ -20,7 +20,7 @@ export function ThemeButton({ theme, currentTheme, onClick }: Props) {
       }}
       onClick={() => onClick(selected ? null : theme)}
     >
-      <div className="flex flex-col gap-y-2 w-full">
+      <div className="flex flex-col gap-y-1 w-full">
         <div
           className="w-1/3 h-0.5 rounded"
           style={{ background: theme.text }}

packages/example/pages/_app.tsx

@@ -13,14 +13,16 @@ function MyApp({ Component, pageProps, router }: AppProps): React.ReactElement {
     const active = router.pathname === props.href;
     const activeClass = active ? 'font-semibold' : '';
     return (
-      <div className={`hover:text-slate-500 text-slate-900 ${activeClass}`}>
+      <div
+        className={`bg-rc-violet-light text-rc-violet rounded ${activeClass} px-1 py-1 hover:text-rc-violet-light hover:bg-rc-violet text-center`}
+      >
         <Link {...props} />
       </div>
     );
   };
 
   return (
-    <div>
+    <div className="flex flex-col justify-between items-center min-h-screen dark:bg-slate-900">
       <Toaster
         position="top-right"
         toastOptions={{
@@ -30,22 +32,46 @@ function MyApp({ Component, pageProps, router }: AppProps): React.ReactElement {
           },
         }}
       />
-      <div className="max-w-screen-sm mx-auto py-10 px-4">
-        <nav className="flex gap-[40px] mt-[20px] mb-[20px] justify-between items-center flex-col md:flex-row lg:flex-row">
-          <div className="flex items-center gap-[5px]">
-            <CeloLogo />
-            <span className="font-light text-[25px] font-['Philosopher']">
-              react-celo
-            </span>
-          </div>
-          <div className="flex gap-[40px]">
-            <StyledLink href="/">Home</StyledLink>
+      <div className="max-w-screen-sm mx-auto px-4">
+        <nav className="flex w-full fixed left-0 z-5 top-0 backdrop-blur-sm bg-rc-mist dark:bg-rc-smog py-2 px-4 gap-[10px] justify-between items-center flex-col md:flex-row lg:flex-row">
+          <a href="/">
+            <div className="flex items-center gap-[5px]">
+              <CeloLogo />
+              <span className="font-light text-[25px] font-['Philosopher'] dark:text-white">
+                react-celo
+              </span>
+            </div>
+          </a>
+          <div className="flex gap-[12px]">
             <StyledLink href="/wallet">Wallet example</StyledLink>
             <StyledLink href="/wallet-test-plan">Test plan</StyledLink>
+            <StyledLink href="https://github.com/celo-org/react-celo">
+              Github
+            </StyledLink>
+            <StyledLink href="https://www.npmjs.com/package/@celo/react-celo">
+              NPM
+            </StyledLink>
           </div>
         </nav>
+        <div className="h-20 md:h-14" />
         <Component {...pageProps} />
       </div>
+      <footer className="flex gap-[36px] items-center text-white justify-center w-full py-4 px-6 bg-slate-900 mt-8">
+        <a
+          target="_blank"
+          href="https://discord.com/channels/600834479145353243/929644242790383636"
+          rel="noreferrer"
+        >
+          Discord
+        </a>
+        <a
+          target="_blank"
+          href="https://github.com/celo-org/react-celo/discussions"
+          rel="noreferrer"
+        >
+          Discussions
+        </a>
+      </footer>
     </div>
   );
 }