Skip to content

Commit 040b940

Browse files
Akshola00Akshola00
authored
Merge pull request #29 from vestor-dev/ui_transform
[FEAT]: UI Redesign: From Slanted to Modern Straight Layout
2 parents 7f5c93a + f3f935d commit 040b940

14 files changed

Lines changed: 122 additions & 62 deletions

‎app/components/Header.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export default function Header() {
1111
return (
1212
<>
1313
<div className="absolute top-4 right-4 sm:top-8 sm:right-8 flex items-center gap-4">
14-
<div className="h-[40px] sm:h-[62px] w-[50px] sm:w-[72px] bg-[#222C38] transform -skew-x-12 flex justify-center items-center">
14+
<div className="h-[40px] sm:h-[62px] w-[50px] sm:w-[72px] bg-[#222C38] transform flex justify-center items-center">
1515
{!playingBackgroundAudio && (
1616
<button
1717
type="button"

‎app/components/WalletConnectButton.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,9 +49,9 @@ function WalletConnectButton() {
4949
{!walletAddress && (
5050
<button
5151
onClick={handleConnect}
52-
className="relative bg-white transform -skew-x-12 cursor-pointer px-4 sm:px-8 h-[40px] sm:h-[62px]"
52+
className="relative bg-white transform cursor-pointer px-4 sm:px-8 h-[40px] sm:h-[62px]"
5353
>
54-
<span className="text-[#222C38] text-sm sm:text-base font-bold transform skew-x-12">
54+
<span className="text-[#222C38] text-sm sm:text-base font-bold transform">
5555
CONNECT WALLET
5656
</span>
5757
</button>

‎app/components/WalletConnector.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -30,9 +30,9 @@ export function WalletConnectorModal() {
3030
return (
3131
<button
3232
onClick={connectWallet}
33-
className="relative bg-white transform -skew-x-12 cursor-pointer px-4 sm:px-8 h-[40px] sm:h-[62px]"
33+
className="relative bg-white transform cursor-pointer px-4 sm:px-8 h-[40px] sm:h-[62px]"
3434
>
35-
<span className="text-[#222C38] text-sm sm:text-base font-bold transform skew-x-12">
35+
<span className="text-[#222C38] text-sm sm:text-base font-bold transform">
3636
CONNECT WALLET
3737
</span>
3838
</button>
@@ -41,12 +41,12 @@ export function WalletConnectorModal() {
4141
return (
4242
<div
4343
onClick={() => disconnect()}
44-
className="flex items-center gap-2 relative bg-white transform -skew-x-12 cursor-pointer px-4 sm:px-8 h-[40px] sm:h-[62px]"
44+
className="flex items-center gap-2 relative bg-white transform cursor-pointer px-4 sm:px-8 h-[40px] sm:h-[62px]"
4545
>
46-
<div className="text-[#222C38] text-sm sm:text-base font-bold transform skew-x-12">
46+
<div className="text-[#222C38] text-sm sm:text-base font-bold transform">
4747
Connected: {address?.slice(0, 6)}...{address?.slice(-4)}
4848
</div>
49-
<button className="text-[#222C38] text-sm sm:text-base font-bold transform skew-x-12">
49+
<button className="text-[#222C38] text-sm sm:text-base font-bold transform">
5050
Disconnect
5151
</button>
5252
</div>

‎app/joingame/page.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -34,14 +34,14 @@ const JoinGame = () => {
3434
<div className="flex flex-col gap-y-16">
3535
<h1 className="font-[family-name:var(--font-geist-sans)] font-extrabold text-3xl">ENTER GAME CODE</h1>
3636
<div className="flex gap-x-2 ">
37-
<input type="text" className="bg-[#222C38] border-[#696969] border-2 h-[4rem] w-[4rem] p-2 transform -skew-x-8" />
38-
<input type="text" className="bg-[#222C38] border-[#696969] border-2 h-[4rem] w-[4rem] p-2 transform -skew-x-8" />
39-
<input type="text" className="bg-[#222C38] border-[#696969] border-2 h-[4rem] w-[4rem] p-2 transform -skew-x-8" />
40-
<input type="text" className="bg-[#222C38] border-[#696969] border-2 h-[4rem] w-[4rem] p-2 transform -skew-x-8" />
37+
<input type="text" className="bg-[#222C38] border-[#696969] border-2 h-[4rem] w-[4rem] p-2 transform" />
38+
<input type="text" className="bg-[#222C38] border-[#696969] border-2 h-[4rem] w-[4rem] p-2 transform" />
39+
<input type="text" className="bg-[#222C38] border-[#696969] border-2 h-[4rem] w-[4rem] p-2 transform" />
40+
<input type="text" className="bg-[#222C38] border-[#696969] border-2 h-[4rem] w-[4rem] p-2 transform" />
4141
</div>
4242
<div>
43-
<button className="relative bg-[#222C38] transform -skew-x-12 cursor-pointer px-4 sm:px-8 h-[40px] sm:h-[62px]">
44-
<span className=" text-sm text-white bg-[#FFA620] border sm:text-base font-bold transform skew-x-12">
43+
<button className="relative bg-[#222C38] transform cursor-pointer px-4 sm:px-8 h-[40px] sm:h-[62px]">
44+
<span className=" text-sm text-white bg-[#FFA620] border sm:text-base font-bold transform">
4545
JOIN GAME
4646
</span>
4747
</button>

‎app/page.tsx‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -23,50 +23,50 @@ export default function Home() {
2323
<div className="flex flex-col gap-1">
2424
<Link
2525
href="/profile"
26-
className="self-center sm:self-start sm:ml-2"
26+
className="self-center sm:self-start"
2727
>
28-
<div className="bg-[#222C38] w-[149.5px] h-[107px] flex flex-col justify-end items-center pb-3 transform -skew-x-6">
29-
<div className="text-[#F3F5FF] font-bold tracking-wide uppercase transform skew-x-6">
28+
<div className="bg-[#222C38] w-[149.5px] h-[105px] flex flex-col justify-end items-center pb-3 transform">
29+
<div className="text-[#F3F5FF] font-bold tracking-wide uppercase transform ">
3030
Profile
3131
</div>
3232
</div>
3333
</Link>
3434

3535
<Link
3636
href="/wallet"
37-
className="self-center sm:self-start sm:-ml-2"
37+
className="self-center sm:self-start mb-1"
3838
>
39-
<div className="bg-[#222C38] w-[149.5px] h-[107px] flex flex-col justify-end items-center pb-3 transform -skew-x-6">
40-
<div className="text-[#F3F5FF] font-bold tracking-wide uppercase transform skew-x-6">
39+
<div className="bg-[#222C38] w-[149.5px] h-[104px] flex flex-col justify-end items-center pb-3 transform">
40+
<div className="text-[#F3F5FF] font-bold tracking-wide uppercase transform">
4141
Wallet
4242
</div>
4343
</div>
4444
</Link>
4545

4646
<Link
4747
href="/settings"
48-
className="self-center sm:self-start sm:-ml-6"
48+
className="self-center sm:self-start"
4949
>
50-
<div className="bg-[#222C38] w-[149.5px] h-[107px] flex flex-col justify-end items-center pb-3 transform -skew-x-6">
51-
<div className="text-[#F3F5FF] font-bold tracking-wide uppercase transform skew-x-6">
50+
<div className="bg-[#222C38] w-[149.5px] h-[105px] flex flex-col justify-end items-center pb-3 transform">
51+
<div className="text-[#F3F5FF] font-bold tracking-wide uppercase transform">
5252
Settings
5353
</div>
5454
</div>
5555
</Link>
5656

5757
<Link
5858
href="/socials"
59-
className="self-center sm:self-start sm:-ml-8"
59+
className="self-center sm:self-start"
6060
>
61-
<div className="bg-[#222C38] w-[149.5px] h-[107px] flex flex-col justify-end items-center pb-3 transform -skew-x-6">
62-
<div className="text-[#F3F5FF] font-bold tracking-wide uppercase transform skew-x-6">
61+
<div className="bg-[#222C38] w-[149.5px] h-[105px] flex flex-col justify-end items-center pb-3 transform">
62+
<div className="text-[#F3F5FF] font-bold tracking-wide uppercase transform">
6363
Socials
6464
</div>
6565
</div>
6666
</Link>
6767
</div>
6868

69-
<div className="flex flex-col gap-2 items-center sm:items-start -ml-4 sm:-ml-4">
69+
<div className="flex flex-col gap-2.5 items-center sm:items-start ">
7070
<div
7171
className="flex flex-col sm:flex-row gap-2 sm:gap-0"
7272
style={{ gap: "2px" }}
@@ -91,7 +91,7 @@ export default function Home() {
9191
</Link>
9292
</div>
9393

94-
<div className="relative -ml-6 sm:-ml-6">
94+
<div className="relative ml-2">
9595
<Image
9696
src="/pool table orange.svg"
9797
alt="Pool Table Orange"
@@ -112,12 +112,12 @@ export default function Home() {
112112
</div>
113113

114114
<div
115-
className="flex flex-col sm:flex-row gap-2 sm:gap-0 sm:-ml-6"
115+
className="flex flex-col sm:flex-row gap-2 sm:gap-0 "
116116
style={{ gap: "2px" }}
117117
>
118118
<div className="relative">
119119
<Image
120-
src="/pool table light green.svg"
120+
src="/pool table yellow.svg"
121121
alt="Pool Table Light Green"
122122
width={509.5}
123123
height={217}
@@ -134,9 +134,9 @@ export default function Home() {
134134
</div>
135135
</div>
136136

137-
<div className="relative -ml-6 sm:-ml-6">
137+
<div className="relative ml-2 ">
138138
<Image
139-
src="/pool table green.svg"
139+
src="/pool table green.svg"
140140
alt="Pool Table Green"
141141
width={509.5}
142142
height={217}

‎app/profile/page.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,20 +16,20 @@ export default function Profile() {
1616
<h1 className="text-[32px] font-bold self-start ml-6">PROFILE</h1>
1717

1818
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-8">
19-
<div className="bg-gradient-to-b from-[rgba(34,44,56,0.7)] to-[rgba(0,0,0,0.7)] border-2 border-[#4B4B4B] w-full max-w-[292px] h-[292px] flex flex-col justify-end items-center transform -skew-x-6 mx-auto">
20-
<div className="text-[#F3F5FF] text-[18px] font-bold tracking-wide transform skew-x-6">
19+
<div className="bg-gradient-to-b from-[rgba(34,44,56,0.7)] to-[rgba(0,0,0,0.7)] border-2 border-[#4B4B4B] w-full max-w-[292px] h-[292px] flex flex-col justify-end items-center transform mx-auto">
20+
<div className="text-[#F3F5FF] text-[18px] font-bold tracking-wide transform">
2121
LEVELS
2222
</div>
2323
</div>
2424

25-
<div className="bg-gradient-to-b from-[rgba(34,44,56,0.7)] to-[rgba(0,0,0,0.7)] border-2 border-[#4B4B4B] w-full max-w-[292px] h-[292px] flex flex-col justify-end items-center transform -skew-x-6 mx-auto">
26-
<div className="text-[#F3F5FF] text-[18px] font-bold tracking-wide transform skew-x-6">
25+
<div className="bg-gradient-to-b from-[rgba(34,44,56,0.7)] to-[rgba(0,0,0,0.7)] border-2 border-[#4B4B4B] w-full max-w-[292px] h-[292px] flex flex-col justify-end items-center transform mx-auto">
26+
<div className="text-[#F3F5FF] text-[18px] font-bold tracking-wide transform">
2727
NFTS
2828
</div>
2929
</div>
3030

31-
<div className="bg-gradient-to-b from-[rgba(34,44,56,0.7)] to-[rgba(0,0,0,0.7)] border-2 border-[#4B4B4B] w-full max-w-[292px] h-[292px] flex flex-col justify-end items-center transform -skew-x-6 mx-auto">
32-
<div className="text-[#F3F5FF] text-[18px] font-bold tracking-wide transform skew-x-6">
31+
<div className="bg-gradient-to-b from-[rgba(34,44,56,0.7)] to-[rgba(0,0,0,0.7)] border-2 border-[#4B4B4B] w-full max-w-[292px] h-[292px] flex flex-col justify-end items-center transform mx-auto">
32+
<div className="text-[#F3F5FF] text-[18px] font-bold tracking-wide transform">
3333
STATS
3434
</div>
3535
</div>

‎public/assets/pool table green.svg‎

Lines changed: 15 additions & 0 deletions
Loading

public/pool table light green.svg renamed to public/assets/pool table light green.svg

File renamed without changes.

‎public/assets/pool table orange.svg‎

Lines changed: 15 additions & 0 deletions
Loading

‎public/assets/pool table purple.svg‎

Lines changed: 15 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)