Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

WIP - migrate away from Daisy UI and bring design closer to spec. #457

Merged
merged 51 commits into from
Apr 9, 2022
Merged
Show file tree
Hide file tree
Changes from 50 commits
Commits
Show all changes
51 commits
Select commit Hold shift + click to select a range
0d0992e
WIP - migrate away from Daisy UI.
0xekez Apr 1, 2022
a274a33
Use text sizes from spec in pages covered so far.
0xekez Apr 2, 2022
3809cc5
Proposal view working and new proposal template selection modal.
0xekez Apr 3, 2022
55e51d3
WIP - proposal voting page.
0xekez Apr 4, 2022
f80c43f
Update ProposalDetails and allow voting.
0xekez Apr 5, 2022
28d6b30
Add proposal execute button.
0xekez Apr 5, 2022
8c4ce60
Add loading state to button.
0xekez Apr 5, 2022
39ae7b7
Update multisig page visuals.
0xekez Apr 5, 2022
1da577d
Fix build errors.
0xekez Apr 5, 2022
7a9f924
Updated DAO create page.
0xekez Apr 6, 2022
cba7b49
DAO create page visual improvements.
0xekez Apr 6, 2022
ac7a006
Update Multisig create page.
0xekez Apr 7, 2022
30667af
Remove unused component files.
0xekez Apr 8, 2022
02271b3
Checkpoint don't commit this Zeke.
0xekez Apr 8, 2022
db8d805
Added weeks and days to seconds formatter.
NoahSaso Apr 8, 2022
39deeac
Merge branch 'zeke/colors' of github.com:DA0-DA0/dao-ui into zeke/colors
0xekez Apr 8, 2022
d7ed634
Add Token image field and update most templates.
0xekez Apr 9, 2022
d43bb6c
Prompt to stake if no voting power for voting.
0xekez Apr 9, 2022
e6c2dda
Accent DAO / Multisig page with average color of logo (#460)
NoahSaso Apr 9, 2022
97549f0
Address feedback from Sager.
0xekez Apr 9, 2022
a0ab0b0
Merge branch 'zeke/colors' of github.com:DA0-DA0/dao-ui into zeke/colors
0xekez Apr 9, 2022
8e83016
Add label to DAO / Multisig name field (#470)
JakeHartnell Apr 9, 2022
ab2c536
WIP - migrate away from Daisy UI.
0xekez Apr 1, 2022
1c72f96
Use text sizes from spec in pages covered so far.
0xekez Apr 2, 2022
94c3f16
Proposal view working and new proposal template selection modal.
0xekez Apr 3, 2022
45244f2
WIP - proposal voting page.
0xekez Apr 4, 2022
3d2a40e
Update ProposalDetails and allow voting.
0xekez Apr 5, 2022
0f06777
Add proposal execute button.
0xekez Apr 5, 2022
31299d4
Add loading state to button.
0xekez Apr 5, 2022
0ba3fa6
Update multisig page visuals.
0xekez Apr 5, 2022
73a02ab
Fix build errors.
0xekez Apr 5, 2022
f2e84cc
Updated DAO create page.
0xekez Apr 6, 2022
c9f02c9
DAO create page visual improvements.
0xekez Apr 6, 2022
2f42a58
Update Multisig create page.
0xekez Apr 7, 2022
2996c3e
Remove unused component files.
0xekez Apr 8, 2022
04ba6c3
Checkpoint don't commit this Zeke.
0xekez Apr 8, 2022
c0e893f
Added weeks and days to seconds formatter.
NoahSaso Apr 8, 2022
a3feca8
Add Token image field and update most templates.
0xekez Apr 9, 2022
7ad00eb
Prompt to stake if no voting power for voting.
0xekez Apr 9, 2022
ecaffec
Address feedback from Sager.
0xekez Apr 9, 2022
f7f2edc
Accent DAO / Multisig page with average color of logo (#460)
NoahSaso Apr 9, 2022
d8b5e3d
Add label to DAO / Multisig name field (#470)
JakeHartnell Apr 9, 2022
831bf59
Misc fixes.
0xekez Apr 9, 2022
cccdb24
Merge branch 'zeke/colors' of github.com:DA0-DA0/dao-ui into zeke/colors
0xekez Apr 9, 2022
11d4f33
Swap to a tooltip library that actually works.
0xekez Apr 9, 2022
f28e766
Marketing token image & ensure sufficent contrast in accent color.
0xekez Apr 9, 2022
47a653a
Prompt to configure keplr if installed but not configured.
0xekez Apr 9, 2022
43e9c4e
Don't perform accent color check in useEffect.
0xekez Apr 9, 2022
2634e7f
Final fixups from testing.
0xekez Apr 9, 2022
902c9cc
Feedback from elgorithm.
0xekez Apr 9, 2022
8d24992
Correctly center background token images.
0xekez Apr 9, 2022
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions apps/dapp/assets/icons/Abstain.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion apps/dapp/assets/icons/Discord.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions apps/dapp/assets/icons/MemberCheck.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions apps/dapp/assets/icons/arrowUpRight.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions apps/dapp/assets/icons/copy.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion apps/dapp/assets/icons/github.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 0 additions & 7 deletions apps/dapp/atoms/sidebar.ts

This file was deleted.

73 changes: 37 additions & 36 deletions apps/dapp/components/BetaWarning.tsx
Original file line number Diff line number Diff line change
@@ -1,60 +1,61 @@
import { ChevronRightIcon, XIcon } from '@heroicons/react/outline'

import { Button } from '@components'
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i think want either:
import { Button } from 'ui'
or
import Button from 'ui/Button'


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">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we need to be careful with z-index

<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"
Expand Down
2 changes: 1 addition & 1 deletion apps/dapp/components/Breadcrumbs.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
42 changes: 21 additions & 21 deletions apps/dapp/components/ChainEnableModal.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { XIcon } from '@heroicons/react/outline'
import { Button } from 'ui/Button'
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i think want either:
import { Button } from 'ui'
or
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

Expand All @@ -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>
)
}

Expand Down
7 changes: 2 additions & 5 deletions apps/dapp/components/CodeIdSelect.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nice! 👍

</Button>
<ul
tabIndex={0}
Expand Down
Loading