Migrate away from Daisy UI and bring design closer to spec. (#457)

* WIP - migrate away from Daisy UI.

* Use text sizes from spec in pages covered so far.

Have mostly completed:

- /starred
- DAO homepage
- staking modal
- nav bar

* Proposal view working and new proposal template selection modal.

* WIP - proposal voting page.

* Update ProposalDetails and allow voting.

* Add proposal execute button.

* Add loading state to button.

* Update multisig page visuals.

* Fix build errors.

* Updated DAO create page.

* DAO create page visual improvements.

* Update Multisig create page.

* Remove unused component files.

* Checkpoint don't commit this Zeke.

* Added weeks and days to seconds formatter.

* Add Token image field and update most templates.

* Prompt to stake if no voting power for voting.

* Accent DAO / Multisig page with average color of logo (#460)

* Use average color from DAO's logo as accent color.

* Added colorization to multisig page.

* Ran next formatter.

* Fixed yarn lock URLs.

* Failsafe and load page if client fails to connect when averaging color.

* Address feedback from Sager.

* Add label to DAO / Multisig name field (#470)

* WIP - migrate away from Daisy UI.

* Use text sizes from spec in pages covered so far.

Have mostly completed:

- /starred
- DAO homepage
- staking modal
- nav bar

* Proposal view working and new proposal template selection modal.

* WIP - proposal voting page.

* Update ProposalDetails and allow voting.

* Add proposal execute button.

* Add loading state to button.

* Update multisig page visuals.

* Fix build errors.

* Updated DAO create page.

* DAO create page visual improvements.

* Update Multisig create page.

* Remove unused component files.

* Checkpoint don't commit this Zeke.

* Added weeks and days to seconds formatter.

* Add Token image field and update most templates.

* Prompt to stake if no voting power for voting.

* Address feedback from Sager.

* Accent DAO / Multisig page with average color of logo (#460)

* Use average color from DAO's logo as accent color.

* Added colorization to multisig page.

* Ran next formatter.

* Fixed yarn lock URLs.

* Failsafe and load page if client fails to connect when averaging color.

* Add label to DAO / Multisig name field (#470)

* Misc fixes.

* Swap to a tooltip library that actually works.

* Marketing token image & ensure sufficent contrast in accent color.

* Prompt to configure keplr if installed but not configured.

* Don't perform accent color check in useEffect.

Pls vercel.

* Final fixups from testing.

* Feedback from elgorithm.

* Correctly center background token images.

Co-authored-by: Noah Saso <noahsaso@gmail.com>
Co-authored-by: Jake Hartnell <Jake.Hartnell@gmail.com>

apps/dapp/components/BetaWarning.tsx

@@ -1,60 +1,61 @@
 import { ChevronRightIcon, XIcon } from '@heroicons/react/outline'
 
+import { Button } from '@components'
+
 import SvgMessage from 'components/icons/Message'
 
 export function BetaWarningModal({ onAccept }: { onAccept: Function }) {
   return (
-    <div className="modal modal-open">
-      <div className="modal-box rounded-md">
-        <h1 className="text-2xl font-medium">Before you continue...</h1>
-        <p className="mt-3">
-          DAO DAO is in beta, and has not yet been audited. <b>Do not</b> keep
-          large sums of money in your DAO, and <b>do not</b> use your DAO for
-          anything mission critical.
-        </p>
-        <p className="mt-3">
-          <a
-            className="text-accent underline hover:no-underline"
-            href="https://njc09z4coq8.typeform.com/to/EBkp9QJU"
-            target="_blank"
-            rel="noreferrer"
-          >
-            <b>Give us feedback!</b>
-          </a>
-          Bug reports and feature requests are welcome.
-        </p>
-        <p className="mt-3 text-sm">
-          DAO DAO TOOLING IS PROVIDED “AS IS”, AT YOUR OWN RISK, AND WITHOUT
-          WARRANTIES OF ANY KIND. No developer or entity involved in creating
-          the DAO DAO UI or smart contracts will be liable for any claims or
-          damages whatsoever associated with your use, inability to use, or your
-          interaction with other users of DAO DAO tooling, including any direct,
-          indirect, incidental, special, exemplary, punitive or consequential
-          damages, or loss of profits, cryptocurrencies, tokens, or anything
-          else of value.
-        </p>
-        <button
-          className="btn btn-outline btn-md rounded-md normal-case mt-6"
-          onClick={() => onAccept()}
-        >
+    <div className="fixed z-10 w-screen h-full backdrop-filter backdrop-blur-sm flex items-center justify-center">
+      <div className="bg-white h-min max-w-md p-6 rounded-lg border border-focus">
+        <div className="rounded-md prose prose-sm dark:prose-invert mb-6">
+          <h2>Before you continue...</h2>
+          <p>
+            DAO DAO is in beta, and has not yet been audited. <b>Do not</b> keep
+            large sums of money in your DAO, and <b>do not</b> use your DAO for
+            anything mission critical.
+          </p>
+          <p>
+            <a
+              className="text-accent underline hover:no-underline"
+              href="https://njc09z4coq8.typeform.com/to/EBkp9QJU"
+              target="_blank"
+              rel="noreferrer"
+            >
+              Give us feedback!
+            </a>{' '}
+            Bug reports and feature requests are welcome.
+          </p>
+          <p>
+            DAO DAO TOOLING IS PROVIDED “AS IS”, AT YOUR OWN RISK, AND WITHOUT
+            WARRANTIES OF ANY KIND. No developer or entity involved in creating
+            the DAO DAO UI or smart contracts will be liable for any claims or
+            damages whatsoever associated with your use, inability to use, or
+            your interaction with other users of DAO DAO tooling, including any
+            direct, indirect, incidental, special, exemplary, punitive or
+            consequential damages, or loss of profits, cryptocurrencies, tokens,
+            or anything else of value.
+          </p>
+        </div>
+        <Button onClick={() => onAccept()}>
           I accept the terms
           <ChevronRightIcon className="w-4 h-4 ml-2" />
-        </button>
+        </Button>
       </div>
     </div>
   )
 }
 
 export function BetaNotice({ onClose }: { onClose: Function }) {
   return (
-    <div className="fixed bottom-3 left-3 bg-primary text-primary-content z-10 rounded-md p-3">
+    <div className="fixed bottom-3 left-3 bg-light text-primary-content z-10 rounded-md p-3">
       <div className="flex gap-2 items-center">
         <SvgMessage />
         <h2>
           DAO DAO is in <div className="inline text-error">beta!</div>
         </h2>
         <a
-          className="link font-mono text-secondary text-sm"
+          className="underline font-mono text-secondary text-sm"
           href="https://njc09z4coq8.typeform.com/to/EBkp9QJU"
           target="_blank"
           rel="noreferrer"

apps/dapp/components/Breadcrumbs.tsx

@@ -7,7 +7,7 @@ import { ArrowNarrowLeftIcon } from '@heroicons/react/outline'
  */
 export function Breadcrumbs({ crumbs }: { crumbs: Array<[string, string]> }) {
   return (
-    <ul className="list-none flex text-sm">
+    <ul className="link-text list-none flex">
       <li key="icon">
         <Link href={crumbs[crumbs.length - 2][0]}>
           <a>

apps/dapp/components/ChainEnableModal.tsx

@@ -1,6 +1,7 @@
 import { XIcon } from '@heroicons/react/outline'
+import { Button } from 'ui/Button'
 
-import { GradientWrapper } from './GradientWrapper'
+import { Modal } from './Modal'
 const CHAIN_ID = process.env.NEXT_PUBLIC_CHAIN_ID
 const CHAIN_NAME = process.env.NEXT_PUBLIC_CHAIN_NAME
 
@@ -12,27 +13,26 @@ function ChainEnableModal({
   onAction: () => void
 }) {
   return (
-    <GradientWrapper>
-      <div className="modal modal-open">
-        <div className="modal-box rounded-md">
-          <XIcon className="float-right h-6 cursor-pointer" onClick={onClose} />
-          <h1 className="text-2xl font-medium">
-            Add Chain &quot;{CHAIN_ID}&quot;
-          </h1>
-          <p className="mt-3">
-            This application is running on the {CHAIN_NAME}{' '}
-            <code>{CHAIN_ID}</code> chain. You will need to approve adding the{' '}
-            {CHAIN_NAME} <code>{CHAIN_ID}</code> chain to connect your wallet.
-          </p>
-          <button
-            className="btn btn-outline btn-md rounded-md normal-case mt-6"
-            onClick={onAction}
-          >
-            ENABLE CHAIN &quot;{CHAIN_ID?.toUpperCase()}&quot;
-          </button>
-        </div>
+    <Modal>
+      <div className="bg-white h-min max-w-md p-6 rounded-lg border border-focus relative">
+        <button
+          className="hover:bg-secondary transition rounded-full p-1 absolute right-2 top-2"
+          onClick={onClose}
+        >
+          <XIcon className="h-4 w-4" />
+        </button>
+
+        <h1 className="header-text">Add Chain &quot;{CHAIN_ID}&quot;</h1>
+        <p className="mt-6 body-text">
+          This application is running on the {CHAIN_NAME}{' '}
+          <code>{CHAIN_ID}</code> chain. You will need to approve adding the{' '}
+          {CHAIN_NAME} <code>{CHAIN_ID}</code> chain to connect your wallet.
+        </p>
+        <Button onClick={onAction} className="mt-8">
+          ENABLE CHAIN &quot;{CHAIN_ID?.toUpperCase()}&quot;
+        </Button>
       </div>
-    </GradientWrapper>
+    </Modal>
   )
 }
 

apps/dapp/components/CodeIdSelect.tsx

@@ -20,11 +20,8 @@ export default function CodeIdSelect({
     <div className="flex items-center">
       <span className="font-medium px-2">Contract Version</span>
       <div className="dropdown dropdown-end">
-        <Button
-          size="sm"
-          iconAfter={<ChevronDownIcon className="inline h-4 w-4" />}
-        >
-          {currentVersion.name}
+        <Button size="sm">
+          {currentVersion.name} <ChevronDownIcon className="inline h-4 w-4" />
         </Button>
         <ul
           tabIndex={0}