Init commit - palette, typography, input, logo, icon

agentcoinorg · Jan 23, 2024 · e759c8d · e759c8d
1 parent 64cad78
commit e759c8d
Show file tree

Hide file tree

Showing 9 changed files with 329 additions and 180 deletions.
diff --git a/web/app/globals.css b/web/app/globals.css
@@ -2,24 +2,13 @@
 @tailwind components;
 @tailwind utilities;
 
-:root {
-  --foreground-rgb: 255, 255, 255;
-  --background-start-rgb: 20, 20, 30;
-  --background-end-rgb: 0, 0, 0;
-}
-
 body {
   color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
+  @apply font-medium bg-gradient-to-br from-indigo-200 to-indigo-300 text-indigo-900;
 }
 
 .checkbox {
-  @apply rounded border-2 border-zinc-500 w-4 h-4 transition-colors duration-300 cursor-pointer hover:border-zinc-400;
+  @apply rounded border-2 border-indigo-500 w-4 h-4 transition-colors duration-300 cursor-pointer hover:border-indigo-400;
 }
 
 .checkbox.checked {
@@ -28,7 +17,7 @@ body {
 
 .checkmark {
   @apply w-full h-full bg-no-repeat;
-  background-image: url('../public/checkmark.svg');
+  background-image: url("../public/checkmark.svg");
   background-size: 70%;
   background-position: 56% 58%;
-}
+}
diff --git a/web/app/layout.tsx b/web/app/layout.tsx
@@ -1,12 +1,13 @@
 import type { Metadata } from "next";
-import { Ubuntu } from "next/font/google";
+import { Plus_Jakarta_Sans } from "next/font/google";
 
 import "./globals.css";
 import WalletProvider from "./WalletProvider";
+import { Logo } from "@/components/Logo";
 
-const ubuntu = Ubuntu({
+const sans = Plus_Jakarta_Sans({
   subsets: ["latin"],
-  weight: ['300', '400', '500', '700'],
+  weight: "variable",
 });
 
 export const metadata: Metadata = {
@@ -16,20 +17,28 @@ export const metadata: Metadata = {
 
 function Header() {
   return (
-    <div className="flex w-full justify-between text-sm p-6 border-b border-zinc-700">
-      <p className="pl-5">fundpublicgoods.ai</p>
+    <div className='flex w-full justify-between text-sm p-6 pb-2'>
+      <a href='/' className='flex hover:opacity-80'>
+        <Logo size={160} />
+      </a>
     </div>
   );
 }
 
 function Footer() {
+  const year = new Date().getFullYear();
   return (
-    <footer className="flex flex-col w-full border-t border-zinc-700 pl-5 pt-4">
-      <div className="flex gap-x-1.5">
-        built by
-        <a href="https://polywrap.io" target="_blank" rel="noopener noreferrer">
+    <footer className='flex flex-col w-full p-6 pt-2'>
+      <div className='flex gap-x-1 text-[10px]'>
+        <span className='font-regular text-indigo-800'>built by</span>
+        <a
+          className='underline font-semibold'
+          href='https://polywrap.io'
+          target='_blank'
+          rel='noopener noreferrer'>
           polywrap
         </a>
+        <span className='font-regular text-indigo-800'>© {year}</span>
       </div>
     </footer>
   );
@@ -41,12 +50,12 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en">
-      <body className={ubuntu.className}>
+    <html lang='en'>
+      <body className={sans.className}>
         <WalletProvider>
-          <main className="flex h-screen flex-col items-center">
+          <main className='flex h-screen min-h-screen flex-col items-center'>
             <Header />
-            <div className="flex flex-col w-full h-5/6 overflow-y-auto">
+            <div className='flex flex-col w-full flex-grow overflow-y-auto'>
               {children}
             </div>
             <Footer />

diff --git a/web/components/Button.tsx b/web/components/Button.tsx
@@ -29,12 +29,9 @@ const Button = ({
         "hover:bg-top": !disabled,
       }
     ),
-    secondary: clsx(
-      "bg-button border-zinc-700 bg-gradient-to-b from-zinc-700 via-zinc-800 to-zinc-900 bg-bottom text-white",
-      {
-        "hover:bg-top": !disabled,
-      }
-    ),
+    secondary: clsx("border-indigo-300 bg-transparent text-indigo-600", {
+      "hover:bg-top": !disabled,
+    }),
   };
 
   const sizeClasses = {
@@ -43,16 +40,16 @@ const Button = ({
   };
 
   const variantClasses = {
-    icon: "border-none bg-none !p-1 text-zinc-500 hover:!text-cyan-500 focus-within:ring-2 focus-within:ring-cyan-500/10",
-    text: "border-none bg-none !p-1 text-cyan-500 hover:text-white",
+    icon: "border-none bg-none !p-1 text-indigo-500 hover:!text-indigo-500 focus-within:ring-2 focus-within:ring-indigo-500/10",
+    text: "border-none bg-none !p-1 text-indigo-500 hover:text-white",
   };
   const variantClass = variant ? variantClasses[variant] : null;
   return (
-    <Popover className="relative">
+    <Popover className='relative'>
       <Popover.Button
         // as="button"
         className={clsx(
-          "text-shadow-md relative inline-flex items-center justify-center space-x-2 rounded-md border transition-all duration-500",
+          "text-shadow-md relative inline-flex items-center justify-center space-x-2 rounded-full border-2 transition-all duration-500",
           hierarchyClasses[hierarchy],
           sizeClasses[size],
           variantClass,
@@ -61,8 +58,7 @@ const Button = ({
         )}
         onMouseEnter={() => setShowTooltip(true)}
         onMouseLeave={() => setShowTooltip(false)}
-        {...props}
-      >
+        {...props}>
         {children}
         {/* {helperContent && showTooltip && (
           <Tooltip placement={helperPlacement} content={helperContent} />

diff --git a/web/components/ChatInputButton.tsx b/web/components/ChatInputButton.tsx
@@ -18,13 +18,12 @@ const ChatInputButton = ({
     <>
       {!running ? (
         <Button
-          hierarchy="secondary"
+          hierarchy='secondary'
           onClick={handleSend}
           disabled={message.length === 0}
-          className="!p-2"
-          type="submit"
-        >
-          <ArrowRight weight="bold" />
+          className='!p-1'
+          type='submit'>
+          <ArrowRight weight='bold' size={20} className='text-[currentColor]' />
         </Button>
       ) : (
         <LoadingCircle />

diff --git a/web/components/Icons.tsx b/web/components/Icons.tsx
@@ -0,0 +1,62 @@
+export interface IconProps {
+  size?: number;
+  className?: string;
+}
+
+export const SparkleIcon = ({ size = 32, className }: IconProps) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox='0 0 32 32'
+      className={className}
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'>
+      <path
+        d='M19.8445 28.9687C18.6061 19.0604 19.2257 16.4405 9.22217 15.0114C19.8445 14.2493 18.2727 9.34305 19.8445 2.67391C21.4164 9.34305 19.8445 14.2493 30.4669 15.0114C20.4634 16.4405 21.083 19.0604 19.8445 28.9687Z'
+        className='fill-indigo-200'
+      />
+      <path
+        fillRule='evenodd'
+        clipRule='evenodd'
+        d='M20.2647 4.77857C20.3438 5.24154 20.4149 5.69346 20.4841 6.13335C21.0051 9.44615 21.4189 12.077 24.3771 13.6143C24.5319 13.8684 24.6834 14.1026 24.83 14.3127C19.7352 16.2791 19.4858 8.31679 19.998 4.08984C20.0774 4.29836 20.1667 4.52923 20.2647 4.77857ZM14.2062 14.0936C18.178 12.6638 18.6251 9.82105 19.2051 6.13335C19.2218 6.02743 19.2385 5.92081 19.2555 5.81351C19.6749 9.9149 19.1429 16.0136 14.188 14.5921C14.181 14.4359 14.1875 14.2693 14.2062 14.0936ZM19.5696 26.6669C21.2134 14.804 16.2286 14.4077 13.2739 15.818C18.4811 17.3017 18.7968 20.0177 19.5588 26.5735C19.5624 26.6046 19.566 26.6357 19.5696 26.6669ZM21.2547 18.2233C21.3199 17.4505 21.9921 15.9049 24.1596 15.9049C23.3216 16.1842 22.344 16.6312 21.2547 18.2233Z'
+        className='fill-indigo-100'
+      />
+      <path
+        d='M20.2499 22.7481C20.1021 23.65 19.9769 24.6606 19.8445 25.7871C19.7122 24.6606 19.587 23.65 19.4391 22.7481C19.1647 21.0742 18.8044 19.7154 18.1414 18.6166C17.046 16.8014 15.1811 15.7829 11.8375 15.0814C15.4351 14.4606 17.2553 13.1452 18.2594 11.2321C18.8546 10.0979 19.1448 8.78467 19.3852 7.37086C19.4514 6.9812 19.5138 6.58413 19.5775 6.17919C19.6607 5.65047 19.746 5.10832 19.8445 4.55171C19.9431 5.10832 20.0284 5.65047 20.1115 6.17919C20.1752 6.58413 20.2377 6.9812 20.3039 7.37086C20.5443 8.78467 20.8345 10.0979 21.4297 11.2321C22.4338 13.1452 24.254 14.4606 27.8516 15.0814C24.508 15.7829 22.6431 16.8014 21.5477 18.6166C20.8847 19.7154 20.5244 21.0742 20.2499 22.7481Z'
+        className='stroke-indigo-500 stroke-1'
+        strokeWidth='1'
+      />
+      <path
+        d='M10.7448 29.7544C10.1706 25.1605 10.4579 23.9458 5.81982 23.2832C10.7448 22.9299 10.0161 20.6551 10.7448 17.563C11.4736 20.6551 10.7448 22.9299 15.6698 23.2832C11.0317 23.9458 11.319 25.1605 10.7448 29.7544Z'
+        className='fill-indigo-200'
+      />
+      <path
+        fillRule='evenodd'
+        clipRule='evenodd'
+        d='M10.9397 18.5388C10.9764 18.7535 11.0094 18.963 11.0414 19.1669C11.283 20.7029 11.4749 21.9227 12.8464 22.6355C12.9182 22.7533 12.9884 22.8619 13.0564 22.9593C10.6942 23.871 10.5786 20.1793 10.8161 18.2195C10.8529 18.3162 10.8943 18.4232 10.9397 18.5388ZM8.13072 22.8577C9.97224 22.1947 10.1795 20.8767 10.4484 19.1669C10.4562 19.1178 10.4639 19.0684 10.4718 19.0186C10.6662 20.9202 10.4196 23.7479 8.12228 23.0888C8.11905 23.0164 8.12205 22.9391 8.13072 22.8577ZM10.6174 28.6872C11.3796 23.1871 9.06839 23.0033 7.69849 23.6572C10.1128 24.3451 10.2591 25.6043 10.6124 28.6439C10.6141 28.6583 10.6158 28.6727 10.6174 28.6872ZM11.3987 24.7724C11.4289 24.4141 11.7406 23.6975 12.7456 23.6975C12.357 23.827 11.9038 24.0342 11.3987 24.7724Z'
+        className='fill-indigo-100'
+      />
+      <path
+        d='M11.3623 24.8509C11.0434 25.3793 10.8721 26.0192 10.7448 26.7745C10.6176 26.0192 10.4462 25.3793 10.1274 24.8509C9.68154 24.112 8.9854 23.6497 7.90055 23.3254C9.08221 22.9847 9.7724 22.4162 10.188 21.6244C10.4798 21.0683 10.6183 20.4321 10.7301 19.7745C10.7351 19.7453 10.74 19.7162 10.7448 19.687C10.7497 19.7162 10.7546 19.7453 10.7595 19.7745C10.8713 20.4321 11.0098 21.0683 11.3017 21.6244C11.7173 22.4162 12.4074 22.9847 13.5891 23.3254C12.5043 23.6497 11.8081 24.112 11.3623 24.8509Z'
+        className='stroke-indigo-500 stroke-1'
+        strokeWidth='1'
+      />
+      <path
+        d='M6.45796 14.4366C5.88377 9.84267 6.17104 8.62794 1.53296 7.96536C6.45796 7.61202 5.7292 5.33726 6.45796 2.24515C7.18672 5.33726 6.45796 7.61202 11.383 7.96536C6.74487 8.62794 7.03215 9.84267 6.45796 14.4366Z'
+        className='fill-indigo-200'
+      />
+      <path
+        fillRule='evenodd'
+        clipRule='evenodd'
+        d='M6.65283 3.22094C6.68954 3.43559 6.7225 3.64512 6.75457 3.84907C6.99614 5.38503 7.18799 6.60483 8.55955 7.31758C8.63133 7.43539 8.70153 7.54399 8.76954 7.6414C6.40736 8.55309 6.29173 4.86141 6.5292 2.90161C6.56601 2.99829 6.60741 3.10533 6.65283 3.22094ZM3.84386 7.53981C5.68538 6.87686 5.89267 5.55885 6.16158 3.84907C6.16931 3.79996 6.17708 3.75053 6.18495 3.70078C6.37938 5.60236 6.13273 8.43 3.83541 7.77093C3.83218 7.6985 3.83519 7.62125 3.84386 7.53981ZM6.33058 13.3693C7.09272 7.86918 4.78152 7.68541 3.41162 8.33929C5.82591 9.02721 5.97227 10.2865 6.32555 13.326C6.32722 13.3404 6.3289 13.3549 6.33058 13.3693ZM7.11185 9.45449C7.14207 9.09619 7.45374 8.3796 8.4587 8.3796C8.07018 8.50911 7.61692 8.71631 7.11185 9.45449Z'
+        className='fill-indigo-100'
+      />
+      <path
+        d='M7.07542 9.53298C6.75657 10.0614 6.58521 10.7014 6.45796 11.4566C6.33071 10.7014 6.15935 10.0614 5.8405 9.53298C5.39468 8.79414 4.69853 8.3318 3.61369 8.00753C4.79534 7.66682 5.48553 7.09833 5.90109 6.30657C6.19297 5.75047 6.33145 5.11427 6.44326 4.45658C6.44821 4.42746 6.4531 4.3983 6.45796 4.3691C6.46281 4.3983 6.46771 4.42746 6.47266 4.45658C6.58447 5.11427 6.72295 5.75047 7.01483 6.30657C7.43039 7.09833 8.12058 7.66682 9.30223 8.00753C8.21739 8.3318 7.52124 8.79414 7.07542 9.53298Z'
+        className='stroke-indigo-500 stroke-1'
+        strokeWidth='1'
+      />
+    </svg>
+  );
+};