Design updates

src/components/attested-default-content/homepage.tsx

@@ -9,6 +9,7 @@ import { getInitialDidDocument } from "@/lib/did";
 
 const AttestedHomepage = () => {
   const [id, setId] = useState();
+  const [isShowBanner, setIsShowBanner] = useState(true);
   const { t } = useTranslation("content");
 
   useEffect(() => {
@@ -23,7 +24,11 @@ const AttestedHomepage = () => {
           description="Playground for decentralized identifiers"
           socialImage={`/api/og?title=Attested.tech`}
         />
-        <div className="p-8 pt-8 pb-24 md:pt-24 md:36">
+        <div
+          className={`p-8 pt-8 pb-24 md:pt-24 md:36 flex flex-col items-center gap-8 ${
+            !isShowBanner ? "hidden" : ""
+          }`}
+        >
           {/*<Logo size="lg" className="mx-auto" />*/}
           <h2 className="h2 text-center my-2">
             <span className="text-accent">
@@ -44,13 +49,16 @@ const AttestedHomepage = () => {
             <span className={"font-bold"}>Attested.tech</span> is a playground
             for DID Documents.
           </h2>
+          <button
+            className="btn btn-wide btn-info"
+            onClick={() => setIsShowBanner(false)}
+          >
+            Ok, let{`&#39;`}s go!
+          </button>
         </div>
       </div>
       <div className="bg-base-300">
-        <div id="#dids" className="max-w-screen-xl mx-auto pt-2 pb-4">
-          <div className="p-4">
-            <h1 className="text-2xl font-extrabold">DID Document Playground</h1>
-          </div>
+        <div id="#dids" className="w-full mx-auto">
           {id && (
             <DidBuilder
               id={id}

src/components/attested-default-content/infobox.tsx

@@ -0,0 +1,56 @@
+import Link from "next/link";
+import { useState } from "react";
+import { InformationCircleIcon, XCircleIcon } from "@heroicons/react/outline";
+
+const Infobox = ({
+  body,
+  externalDocsLink,
+  externalDocsDesc,
+}: {
+  body: string;
+  externalDocsLink: string;
+  externalDocsDesc: string;
+}) => {
+  const [expanded, setExpanded] = useState(false);
+  if (expanded)
+    return (
+      <div className="pb-4">
+        <button
+          className="btn btn-xs btn-link pl-0 mb-1"
+          onClick={() => setExpanded(false)}
+        >
+          <InformationCircleIcon className="h-4 w-4 text-info mr-1" />
+          Close
+        </button>
+        <div className="flex flex-col gap-y-2 border-l-info border-l-2 pl-2">
+          <p className="prose text-sm text-justify">{body}</p>
+          <p className="min-w-full prose text-sm">
+            See the{" "}
+            <Link
+              className={"underline"}
+              href={externalDocsLink}
+              passHref
+              target={"_blank"}
+            >
+              {externalDocsDesc}
+            </Link>{" "}
+            for more information.
+          </p>
+        </div>
+      </div>
+    );
+  else
+    return (
+      <div>
+        <button
+          className="btn btn-xs btn-link pl-0"
+          onClick={() => setExpanded(true)}
+        >
+          <InformationCircleIcon className="h-4 w-4 text-info mr-1" />
+          Info
+        </button>
+      </div>
+    );
+};
+
+export default Infobox;

src/components/attested-default-content/logo.tsx

@@ -27,20 +27,20 @@ const Logo = ({ size = "lg", className }: Props) => {
           "w-14 md:w-auto": size === "sm",
         })}
       >
-        <ShieldCheckIcon
+        {/* <ShieldCheckIcon
           className={cx({
             "w-24 h-24 text-teal-600": size === "lg",
             "w-10 h-10 text-teal-600": size === "sm",
           })}
-        />
+        /> */}
       </div>
       <h1
-        className={cx("font-black", {
-          "text-3xl md:text-8xl": size === "lg",
-          "text-2xl": size === "sm",
+        className={cx("font-ultrablack", {
+          "text-3xl md:text-7xl": size === "lg",
+          "text-lg": size === "sm",
         })}
       >
-        Attested.tech
+        ATTESTED.TECH
       </h1>
     </div>
   );

src/components/content-pages/content-header-mobile.tsx

@@ -22,9 +22,6 @@ const ContentHeaderMobile = ({ className, onClose }: Props) => {
     >
       <div className="grid gap-y-4">
         <div className="flex justify-between items-center px-2 py-4">
-          <Link href="/" passHref>
-            <Logo size="sm" />
-          </Link>
           <Button
             className="md:hidden"
             shape="square"

src/components/content-pages/content-header.tsx

@@ -23,7 +23,7 @@ const ContentHeader = ({ toggleSidebar }: Props) => {
       <Navbar className="flex justify-between items-center md:px-8 py-4 max-w-screen-xl mx-auto">
         <div className="flex gap-2">
           <Link href="/" passHref className="mr-4 cursor-pointer">
-            <Logo size="sm" />
+            <Logo size="lg" />
           </Link>
           <div className="hidden lg:flex gap-4">
             {navigation.map((nav) => (

src/components/content-pages/content-meta.tsx

@@ -18,7 +18,11 @@ const ContentMeta = ({
     <Head>
       <title>{title}</title>
       <link
-        href="https://fonts.googleapis.com/css2?family=Geologica&display=swap"
+        href="https://fonts.googleapis.com/css2?family=Abel&display=swap"
+        rel="stylesheet"
+      />
+      <link
+        href="https://fonts.googleapis.com/css2?family=Unbounded:wght@900&display=swap"
         rel="stylesheet"
       />
       <meta name="twitter:card" content="summary_large_image" />

src/components/core/theme-selector.tsx

@@ -11,17 +11,7 @@ export const AVAILABLE_THEMES = {
   },
   dark: {
     name: "Dark",
-    id: "dark",
-    Icon: MoonIcon,
-  },
-  night: {
-    name: "Night",
-    id: "night",
-    Icon: MoonIcon,
-  },
-  dracula: {
-    name: "Dracula",
-    id: "dracula",
+    id: "attested",
     Icon: MoonIcon,
   },
 };

src/components/dids/Builder.tsx

@@ -22,6 +22,7 @@ import EditDidController from "./EditDidController";
 import EditDidSubject from "./EditDidSubject";
 import ImportDocument from "./ImportDocument";
 import Modal from "@/components/core/Modal";
+import Infobox from "../attested-default-content/infobox";
 
 function AttemptSerialization({ didDocument }: { didDocument: DidDocument }) {
   const [isJsonLd, setIsJsonLd] = useState<boolean>(true);

src/components/dids/EditDidController.tsx

@@ -1,7 +1,7 @@
 import { DidController } from "@/lib/DidDocument";
 import { useState } from "react";
 import DidInput from "./DidInput";
-import Link from "next/link";
+import Infobox from "../attested-default-content/infobox";
 
 export default function EditDidController({
   existingControllers,
@@ -20,9 +20,21 @@ export default function EditDidController({
   const [isSubject, setIsSubject] = useState<boolean>(controllers.has(subject));
   const [isNewDidValid, setIsNewDidValid] = useState<boolean>(false);
   return (
-    <div className="flex flex-col gap-y-8 text-base-content">
+    <div className="flex flex-col gap-y-2 text-base-content">
       <div>
         <h3 className="text-xl font-bold">Edit DID Controller</h3>
+        <Infobox
+          body="The controller of a DID is the entity (person, organization, or
+          autonomous software) that has the capability—as defined by a DID
+          method—to make changes to a DID document. This capability is typically
+          asserted by the control of a set of cryptographic keys used by
+          software acting on behalf of the controller, though it might also be
+          asserted via other mechanisms. Note that a DID might have more than
+          one controller, and the DID subject can be the DID controller, or one
+          of them."
+          externalDocsLink="https://w3c.github.io/did-core/#did-controller"
+          externalDocsDesc="DID Controller documentation"
+        />
       </div>
       <div className="flex flex-col text-base-content">
         <div>
@@ -111,27 +123,6 @@ export default function EditDidController({
           Save to Document
         </label>
       </div>
-      <div className="prose max-w-max">
-        <p>
-          The controller of a DID is the entity (person, organization, or
-          autonomous software) that has the capability—as defined by a DID
-          method—to make changes to a DID document. This capability is typically
-          asserted by the control of a set of cryptographic keys used by
-          software acting on behalf of the controller, though it might also be
-          asserted via other mechanisms. Note that a DID might have more than
-          one controller, and the DID subject can be the DID controller, or one
-          of them. See the{" "}
-          <Link
-            className={"underline"}
-            href={"https://w3c.github.io/did-core/#did-controller"}
-            passHref
-            target={"_blank"}
-          >
-            DID Controller documentation
-          </Link>{" "}
-          for more information.
-        </p>
-      </div>
     </div>
   );
 }

src/components/dids/EditDidSubject.tsx

@@ -2,7 +2,7 @@ import { Did } from "@/lib/did";
 import { useState } from "react";
 import DidInput from "./DidInput";
 import Link from "next/link";
-import { InformationCircleIcon } from "@heroicons/react/outline";
+import Infobox from "../attested-default-content/infobox";
 
 export default function EditDidSubject({
   existingSubject,
@@ -28,9 +28,16 @@ export default function EditDidSubject({
     <div className="flex flex-col gap-y-8 text-base-content">
       <div>
         <h3 className="text-xl font-bold">Edit DID Subject </h3>
+        <Infobox
+          body="The subject of a DID is, by definition, the entity identified by the
+        DID. The DID subject might also be the DID controller. Anything can be
+        the subject of a DID: person, group, organization, thing, or concept."
+          externalDocsLink="https://w3c.github.io/did-core/#did-subject"
+          externalDocsDesc="DID Subject documentation"
+        />
       </div>
-      <div className="flex flex-col gap-y-8 text-base-content">
-        <div className="font-mono bg-neutral text-neutral-content w-full text-center overflow-scroll whitespace-nowrap p-8 px-4">
+      <div className="flex flex-col gap-y-8 border-2 border-neutral text-base-content">
+        <div className="font-mono text-neutral-content w-full text-center overflow-scroll whitespace-nowrap p-8 px-4">
           <span className="opacity-40">did</span>
           {did.method && (
             <div className="tooltip" data-tip="Method">
@@ -80,14 +87,14 @@ export default function EditDidSubject({
             consist of different parts, you can hover to discover these parts.
           </p>
         </div>
-        <DidInput
-          value={existingSubject}
-          callback={(e) => {
-            setIsDidValid(e.valid);
-            if (e.did) setDid(e.did);
-          }}
-        />
       </div>
+      <DidInput
+        value={existingSubject}
+        callback={(e) => {
+          setIsDidValid(e.valid);
+          if (e.did) setDid(e.did);
+        }}
+      />
       <label
         htmlFor={htmlId}
         className={`btn btn-info btn-outline btn-block ${
@@ -99,23 +106,6 @@ export default function EditDidSubject({
       >
         Save to Document
       </label>
-      <div className="prose max-w-max">
-        <p>
-          The subject of a DID is, by definition, the entity identified by the
-          DID. The DID subject might also be the DID controller. Anything can be
-          the subject of a DID: person, group, organization, thing, or concept.
-          See the{" "}
-          <Link
-            className={"underline"}
-            href={"https://w3c.github.io/did-core/#did-subject"}
-            passHref
-            target={"_blank"}
-          >
-            DID Subject documentation
-          </Link>{" "}
-          for more information.
-        </p>
-      </div>
     </div>
   );
 }