ui changes

krisoshea-eth · Jun 26, 2024 · 3aef170 · 3aef170
1 parent 76d3f0a
commit 3aef170
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 72 deletions.
diff --git a/packages/nextjs/app/dashboard/page.tsx b/packages/nextjs/app/dashboard/page.tsx
@@ -12,19 +12,19 @@ const Dashboard = () => {
             <div className="flex flex-col bg-[#475299] px-10 py-10 text-center items-center max-w-xs rounded-3xl">
               <CheckBadgeIcon className="h-8 w-8 fill-secondary" />
               <p>
-                Tinker with your smart contract using the{" "}
+              Start making attestations on existing schemas using the{" "}
                 <Link href="/dashboard/attestations" passHref className="link">
-                  Make Attestations
+                  Attestations 
                 </Link>{" "}
                 tab.
               </p>
             </div>
             <div className="flex flex-col bg-[#475299] px-10 py-10 text-center items-center max-w-xs rounded-3xl">
               <DocumentTextIcon className="h-8 w-8 fill-secondary" />
               <p>
-                Explore attestation and schemas via the{" "}
+              Explore the schemas or create a new schema using the{" "}
                 <Link href="/dashboard/schemas" passHref className="link">
-                  Create Schemas
+                Schemas
                 </Link>{" "}
                 tab.
               </p>

diff --git a/packages/nextjs/app/layout.tsx b/packages/nextjs/app/layout.tsx
@@ -12,7 +12,7 @@ export const metadata: Metadata = {
 const ScaffoldStarkApp = ({ children }: { children: React.ReactNode }) => {
   return (
     <html suppressHydrationWarning>
-      <body>
+      <body className="bg-[#E9E9F6]">
         <ThemeProvider enableSystem>
           <ScaffoldStarkAppWithProviders>
             {children}

diff --git a/packages/nextjs/app/page.tsx b/packages/nextjs/app/page.tsx
@@ -6,73 +6,14 @@ import { BugAntIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
 import { Address } from "~~/components/scaffold-stark";
 import { useAccount } from "@starknet-react/core";
 import { Address as AddressType } from "@starknet-react/chains";
-
+import Dashboard from "./dashboard/page";
 const Home: NextPage = () => {
   const connectedAddress = useAccount();
   return (
     <>
-      <div className="flex items-center flex-col flex-grow pt-10">
-        <div className="px-5">
-          <h1 className="text-center">
-            <span className="block text-2xl mb-2">Welcome to</span>
-            <span className="block text-4xl font-bold">Solas</span>
-          </h1>
-          <div className="flex justify-center items-center space-x-2">
-            <p className="my-2 font-medium">Connected Address:</p>
-            <Address address={connectedAddress.address as AddressType} />
-          </div>
-          <p className="text-center text-lg">
-            Get started by editing{" "}
-            <code className="italic bg-base-300 text-base font-bold max-w-full break-words break-all inline-block">
-              packages/nextjs/app/page.tsx
-            </code>
-          </p>
-          <p className="text-center text-lg">
-            Edit your smart contract{" "}
-            <code className="italic bg-base-300 text-base font-bold max-w-full break-words break-all inline-block">
-              YourContract.cairo
-            </code>{" "}
-            in{" "}
-            <code className="italic bg-base-300 text-base font-bold max-w-full break-words break-all inline-block">
-              packages/snfoundry/contracts/src
-            </code>
-          </p>
-        </div>
-
-        <div className="flex-grow bg-base-300 w-full mt-16 px-8 py-12">
-          <div className="flex justify-center items-center gap-12 flex-col sm:flex-row">
-            <div className="flex flex-col bg-base-100 px-10 py-10 text-center items-center max-w-xs rounded-3xl">
-              <BugAntIcon className="h-8 w-8 fill-secondary" />
-              <p>
-                Tinker with your smart contract using the{" "}
-                <Link href="/debug" passHref className="link">
-                  Debug Contracts
-                </Link>{" "}
-                tab.
-              </p>
-            </div>
-            <div className="flex flex-col bg-base-100 px-10 py-10 text-center items-center max-w-xs rounded-3xl">
-              <MagnifyingGlassIcon className="h-8 w-8 fill-secondary" />
-              <p>
-                Explore attestation and schemas via the{" "}
-                <Link href="/dashboard" passHref className="link">
-                  Dashboard
-                </Link>{" "}
-                tab.
-              </p>
-            </div>
-          </div>
-        </div>
-        {/* <div
-          onClick={() => {
-            writeAsync();
-          }}
-        >
-          TEST TX
-        </div> */}
-      </div>
+     <Dashboard />
     </>
   );
 };
 
-export default Home;
+export default Home;
diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx
@@ -4,7 +4,13 @@ import React, { useCallback, useRef, useState } from "react";
 import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { Bars3Icon, BugAntIcon,CheckBadgeIcon,DocumentTextIcon,CodeBracketIcon } from "@heroicons/react/24/outline";
+import {
+  Bars3Icon,
+  BugAntIcon,
+  CheckBadgeIcon,
+  DocumentTextIcon,
+  CodeBracketIcon,
+} from "@heroicons/react/24/outline";
 import { useOutsideClick } from "~~/hooks/scaffold-stark";
 import { CustomConnectButton } from "~~/components/scaffold-stark/CustomConnectButton";
 import { FaucetButton } from "~~/components/scaffold-stark/FaucetButton";
@@ -50,8 +56,10 @@ export const HeaderMenuLinks = () => {
               href={href}
               passHref
               className={`${
-                isActive ? "bg-secondary shadow-md" : ""
-              } hover:bg-secondary hover:shadow-md focus:!bg-secondary active:!text-neutral py-1.5 px-3 text-sm rounded-full gap-2 grid grid-flow-col`}
+                isActive
+                  ? "bg-[#E9E9F6] shadow-md text-[#475299]"
+                  : "text-[#E9E9F6]"
+              } hover:bg-[#E9E9F6] hover:shadow-md hover:text-[#475299] focus:bg-[#E9E9F6] focus:text-[#475299] active:bg-[#E9E9F6] active:text-[#475299] py-1.5 px-3 text-sm rounded-full gap-2 grid grid-flow-col`}
             >
               {icon}
               <span>{label}</span>
@@ -71,9 +79,8 @@ export const Header = () => {
   const burgerMenuRef = useRef<HTMLDivElement>(null);
   useOutsideClick(
     burgerMenuRef,
-    useCallback(() => setIsDrawerOpen(false), []),
+    useCallback(() => setIsDrawerOpen(false), [])
   );
-
   return (
     <div className="sticky lg:static top-0 navbar bg-[#475299] min-h-0 flex-shrink-0 justify-between z-20  px-0 sm:px-2">
       <div className="navbar-start w-auto lg:w-1/2">