Skip to content

Commit c3f7aeb

Browse files
juliancwirkojuliancwirko
authored
Merge pull request #4 from xdevguild/improve-ui
improve ui
2 parents 7b11701 + e552206 commit c3f7aeb

28 files changed

Lines changed: 1524 additions & 1238 deletions

‎CHANGELOG.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
### [0.13.0](https://github.com/xdevguild/buildo.dev/releases/tag/v0.13.0) (2024-02-18)
2+
- improve ui
3+
- adjust useElven usage
4+
- refactor tokens Ids
5+
- update dependencies
6+
17
### [0.12.1](https://github.com/xdevguild/buildo.dev/releases/tag/v0.12.1) (2024-01-02)
28
- important bugfix - the ticker is not always the same (API) as token/collection id
39
- important bugfix - fix property name

‎app/globals.css‎

Lines changed: 36 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -5,75 +5,57 @@
55
@layer base {
66
:root {
77
--background: 0 0% 100%;
8-
--foreground: 222.2 84% 4.9%;
8+
--foreground: 240 10% 3.9%;
99
--card: 0 0% 100%;
10-
--card-foreground: 222.2 84% 4.9%;
10+
--card-foreground: 240 10% 3.9%;
1111
--popover: 0 0% 100%;
12-
--popover-foreground: 222.2 84% 4.9%;
13-
--primary: 221.2 83.2% 53.3%;
14-
--primary-foreground: 210 40% 98%;
15-
--secondary: 210 40% 96.1%;
16-
--secondary-foreground: 222.2 47.4% 11.2%;
17-
--muted: 210 40% 96.1%;
18-
--muted-foreground: 215.4 16.3% 46.9%;
19-
--accent: 210 40% 96.1%;
20-
--accent-foreground: 222.2 47.4% 11.2%;
12+
--popover-foreground: 240 10% 3.9%;
13+
--primary: 240 5.9% 10%;
14+
--primary-foreground: 0 0% 98%;
15+
--secondary: 240 4.8% 95.9%;
16+
--secondary-foreground: 240 5.9% 10%;
17+
--muted: 240 4.8% 95.9%;
18+
--muted-foreground: 240 3.8% 46.1%;
19+
--accent: 240 4.8% 95.9%;
20+
--accent-foreground: 240 5.9% 10%;
2121
--destructive: 0 84.2% 60.2%;
22-
--destructive-foreground: 210 40% 98%;
23-
--border: 214.3 31.8% 91.4%;
24-
--input: 214.3 31.8% 91.4%;
25-
--ring: 221.2 83.2% 53.3%;
26-
--radius: 0.3rem;
22+
--destructive-foreground: 0 0% 98%;
23+
--border: 240 5.9% 90%;
24+
--input: 240 5.9% 90%;
25+
--ring: 240 5.9% 10%;
26+
--radius: 0.5rem;
2727
}
2828

2929
.dark {
30-
--background: 222.2 84% 4.9%;
31-
--foreground: 210 40% 98%;
32-
--card: 222.2 84% 4.9%;
33-
--card-foreground: 210 40% 98%;
34-
--popover: 222.2 84% 4.9%;
35-
--popover-foreground: 210 40% 98%;
36-
--primary: 217.2 91.2% 59.8%;
37-
--primary-foreground: 222.2 47.4% 11.2%;
38-
--secondary: 217.2 32.6% 17.5%;
39-
--secondary-foreground: 210 40% 98%;
40-
--muted: 217.2 32.6% 17.5%;
41-
--muted-foreground: 215 20.2% 65.1%;
42-
--accent: 217.2 32.6% 17.5%;
43-
--accent-foreground: 210 40% 98%;
30+
--background: 240 10% 3.9%;
31+
--foreground: 0 0% 98%;
32+
--card: 240 10% 3.9%;
33+
--card-foreground: 0 0% 98%;
34+
--popover: 240 10% 3.9%;
35+
--popover-foreground: 0 0% 98%;
36+
--primary: 0 0% 98%;
37+
--primary-foreground: 240 5.9% 10%;
38+
--secondary: 240 3.7% 15.9%;
39+
--secondary-foreground: 0 0% 98%;
40+
--muted: 240 3.7% 15.9%;
41+
--muted-foreground: 240 5% 64.9%;
42+
--accent: 240 3.7% 15.9%;
43+
--accent-foreground: 0 0% 98%;
4444
--destructive: 0 62.8% 30.6%;
45-
--destructive-foreground: 210 40% 98%;
46-
--border: 217.2 32.6% 17.5%;
47-
--input: 217.2 32.6% 17.5%;
48-
--ring: 224.3 76.3% 48%;
45+
--destructive-foreground: 0 0% 98%;
46+
--border: 240 3.7% 15.9%;
47+
--input: 240 3.7% 15.9%;
48+
--ring: 240 4.9% 83.9%;
4949
}
5050
}
5151

5252
@layer base {
5353
* {
5454
@apply border-border;
55+
scrollbar-width: thin;
56+
scrollbar-color: hsl(var(--primary)) hsl(var(--background));
5557
}
5658
body {
5759
@apply bg-background text-foreground;
5860
}
5961
}
60-
61-
* {
62-
scrollbar-width: auto;
63-
scrollbar-color: hsl(var(--primary)) hsl(var(--background));
64-
}
65-
66-
/* Chrome, Edge, and Safari */
67-
*::-webkit-scrollbar {
68-
width: 10px;
69-
}
70-
71-
*::-webkit-scrollbar-track {
72-
background: hsl(var(--background));
73-
}
74-
75-
*::-webkit-scrollbar-thumb {
76-
background-color: hsl(var(--primary));
77-
border-radius: 6px;
78-
border: 3px solid hsl(var(--background));
79-
}

‎app/inscriptions/create/page.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,13 @@
11
import { NextPage } from 'next';
22
import { InscriptionsCreate } from '../components/inscription-create';
3+
import { Suspense } from 'react';
34

45
const InscriptionsCreatePage: NextPage = () => {
5-
return <InscriptionsCreate />;
6+
return (
7+
<Suspense>
8+
<InscriptionsCreate />
9+
</Suspense>
10+
);
611
};
712

813
export default InscriptionsCreatePage;

‎components/elven-ui/ledger-accounts-list.tsx‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,7 @@ export const LedgerAccountsList: FC<LedgerAccountsListProps> = ({
134134

135135
if (error) {
136136
return (
137-
<div className="text-center ml-auto mr-auto mt-6">
137+
<div className="text-center m-auto mt-6">
138138
<div>{error}</div>
139139
<Button className="mt-4" onClick={handleRefresh}>
140140
Refresh
@@ -145,7 +145,7 @@ export const LedgerAccountsList: FC<LedgerAccountsListProps> = ({
145145

146146
if (chosenAddress) {
147147
return (
148-
<div className="flex flex-col justify-center items-center mt-6 break-all border border-solid border-zinc-200 dark:border-0 px-8 py-3">
148+
<div className="flex flex-col justify-center items-center mt-6 break-all w-full sm:w-3/4 m-auto border border-solid border-zinc-200 dark:border-0 px-8 py-3">
149149
<Spinner />
150150
<div className="mt-3">Confirm on the Ledger device:</div>
151151
<div className="mt-3 break-words text-center">
@@ -154,7 +154,7 @@ export const LedgerAccountsList: FC<LedgerAccountsListProps> = ({
154154
{loginToken && (
155155
<div className="mt-3">
156156
<div className="font-bold text-center">Login token:</div>
157-
<div className="break-words">{loginToken}</div>
157+
<div className="break-words text-center">{loginToken}</div>
158158
</div>
159159
)}
160160
</div>
@@ -164,20 +164,23 @@ export const LedgerAccountsList: FC<LedgerAccountsListProps> = ({
164164
if (!accounts) return null;
165165

166166
return (
167-
<div className="ml-auto mr-auto mt-6 border border-solid border-zinc-200 dark:border-0 px-8 py-3">
167+
<div className="m-auto mt-6 w-full sm:w-3/4 border border-solid border-zinc-200 dark:border-0 px-8 py-3">
168168
<div className="font-semibold text-center mb-2">Choose address:</div>
169169
{accounts?.map((account: string, index: number) => (
170170
<div
171171
key={account}
172-
className="mb-0.5 p-2 cursor-pointer border border-transparent border-solid rounded-md hover:border-dotted hover:border-white transition duration-200"
172+
className="mb-0.5 p-2 cursor-pointer border border-solid rounded-md hover:border-dotted hover:bg-accent transition duration-200"
173173
onClick={login(index, account)}
174174
>
175175
<span className="inline-block text-center min-w-4">
176-
{index + currentPage.current * ADDRESSES_PER_PAGE}
176+
{index + currentPage.current * ADDRESSES_PER_PAGE}:
177177
</span>
178178
:
179-
<span className="inline-block ml-4 text-center">
180-
{shortenHash(account, 11)}
179+
<span className="hidden md:inline-block text-center flex-1">
180+
{shortenHash(account, 14)}
181+
</span>
182+
<span className="inline-block md:hidden text-center flex-1">
183+
{shortenHash(account, 10)}
181184
</span>
182185
</div>
183186
))}

‎components/elven-ui/login-component.tsx‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -55,49 +55,51 @@ export const LoginComponent = memo(() => {
5555
<div className="flex inset-0 z-50 items-center justify-center min-h-[200px]">
5656
<div>
5757
{ledgerOrPortalName ? (
58-
<>
59-
<div className="text-lg">Confirmation required</div>
60-
<div className="text-sm">Approve on {ledgerOrPortalName}</div>
61-
</>
58+
<div className="mb-4">
59+
<div className="text-lg text-center">Confirmation required</div>
60+
<div className="text-sm text-center">
61+
Approve on {ledgerOrPortalName}
62+
</div>
63+
</div>
6264
) : null}
6365
<div className="flex items-center justify-center">
64-
<Spinner size="40" />
66+
<Spinner size="26" />
6567
</div>
6668
</div>
6769
</div>
6870
) : (
69-
<div className="flex flex-col gap-4 items-center px-8">
71+
<div className="flex flex-col gap-3 items-center lg:px-8">
7072
<Button
71-
className="w-full select-none h-auto"
73+
className="w-full select-none h-auto py-3"
7274
variant="outline"
7375
onClick={handleLogin(LoginMethodsEnum.walletconnect)}
7476
>
7577
xPortal Mobile App
7678
</Button>
7779

7880
<Button
79-
className="w-full select-none h-auto"
81+
className="w-full select-none h-auto py-3"
8082
variant="outline"
8183
onClick={handleLogin(LoginMethodsEnum.extension)}
8284
>
8385
MultiversX Browser Extension
8486
</Button>
8587
<Button
86-
className="w-full select-none h-auto"
88+
className="w-full select-none h-auto py-3"
8789
variant="outline"
8890
onClick={handleLogin(LoginMethodsEnum.wallet)}
8991
>
9092
MultiversX Web Wallet
9193
</Button>
9294
<Button
93-
className="w-full select-none h-auto"
95+
className="w-full select-none h-auto py-3"
9496
variant="outline"
9597
onClick={handleLedgerAccountsList}
9698
>
9799
Ledger
98100
</Button>
99101
<Button
100-
className="w-full select-none h-auto"
102+
className="w-full select-none h-auto py-3"
101103
variant="outline"
102104
onClick={handleLogin(LoginMethodsEnum.xalias)}
103105
>

‎components/elven-ui/login-modal-button.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -59,10 +59,10 @@ export const LoginModalButton: FC<LoginModalButtonProps> = ({
5959
</Button>
6060
)}
6161
<DialogContent className="max-w-xs sm:max-w-lg bg-white dark:bg-[hsl(var(--background))] p-0">
62-
<DialogHeader className="px-6 pt-6">
63-
<DialogTitle>Connect your wallet</DialogTitle>
62+
<DialogHeader className="px-8 pt-10">
63+
<DialogTitle className="text-center">Connect your wallet</DialogTitle>
6464
</DialogHeader>
65-
<div className="grid gap-4 overflow-y-auto max-h-[calc(100vh-160px)] p-6 pb-8">
65+
<div className="grid gap-4 overflow-y-auto max-h-[calc(100vh-160px)] px-6 pb-12 pt-6">
6666
<LoginComponent />
6767
</div>
6868
</DialogContent>

‎components/elven-ui/walletconnect-pairings.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ export const WalletConnectPairings: FC<WalletConnectPairingsProps> = ({
2727

2828
return (
2929
<div className="flex flex-row justify-center">
30-
<div className="w-4/5">
30+
<div className="w-full sm:w-4/5">
3131
{pairings?.length > 0 && (
3232
<div className="text-base mt-4">Existing pairings:</div>
3333
)}

‎components/elven-ui/walletconnect-qr-code.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ export const WalletConnectQRCode: FunctionComponent<
1717
useEffect(() => {
1818
const generateQRCode = async () => {
1919
if (!uri) {
20-
setQrCodeSvg('<div>dupa</div>');
2120
return;
2221
}
2322

@@ -51,9 +50,9 @@ export const WalletConnectQRCode: FunctionComponent<
5150
) : null}
5251
<div
5352
className="[&>svg]:rounded-xl [&>svg]:max-w-xs [&>svg]:mx-auto [&>svg]:border [&>svg]:border-solid [&>svg]:border-zinc-300 dark:[&>svg]:border-0"
54-
dangerouslySetInnerHTML={{
55-
__html: qrCodeSvg,
56-
}}
53+
{...(qrCodeSvg
54+
? { dangerouslySetInnerHTML: { __html: qrCodeSvg } }
55+
: {})}
5756
/>
5857
</div>
5958
);

‎components/header-address.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export const HeaderAddress = () => {
1313
<a
1414
href={`${explorerAddress}/address/${address}`}
1515
target="_blank"
16-
className="underline hidden min-[450px]:block"
16+
className="underline hidden md:block"
1717
>
1818
{shortenHash(address, 6)}
1919
</a>

‎components/header-chain-indicator.tsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,14 @@ export const HeaderChainIndicator = () => {
66
const { chainType } = useConfig();
77

88
return (
9-
<div className="flex items-center justify-center gap-1 text-xs bg-slate-100 dark:bg-slate-900 py-1 text-center font-light">
10-
<div className="flex h-2 w-2 mt-[-1px] rounded-full bg-green-700 dark:bg-green-200 mr-1" />{' '}
11-
<div>MultiversX</div>{' '}
12-
<div className="capitalize font-bold">{chainType}</div>
13-
<div>|</div>
9+
<div className="flex items-center flex-col sm:flex-row justify-center gap-1 text-xs bg-zinc-100 dark:bg-zinc-900 py-1 text-center font-light">
10+
<div className="flex items-center justify-center gap-1">
11+
<div className="flex h-2 w-2 mt-[-1px] rounded-full bg-green-700 dark:bg-green-200 mr-1" />{' '}
12+
<div>You are using MultiversX</div>{' '}
13+
<div className="capitalize font-bold">{chainType}</div>
14+
</div>
1415
<div>
15-
Switch to{' '}
16+
(Do you want to switch to{' '}
1617
<a
1718
href={
1819
chainType === 'mainnet'
@@ -24,6 +25,7 @@ export const HeaderChainIndicator = () => {
2425
>
2526
{chainType === 'mainnet' ? 'devnet' : 'mainnet'}
2627
</a>
28+
?)
2729
</div>
2830
</div>
2931
);

0 commit comments

Comments
 (0)