Skip to content

Commit

Permalink
new profile styles
Browse files Browse the repository at this point in the history
  • Loading branch information
awidearray committed Nov 10, 2024
1 parent 041509e commit 4fb3d00
Show file tree
Hide file tree
Showing 14 changed files with 906 additions and 662 deletions.
646 changes: 284 additions & 362 deletions package-lock.json

Large diffs are not rendered by default.

8 changes: 4 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,21 +12,20 @@
},
"dependencies": {
"@babel/runtime": "^7.x",
"bs58": "^4.0.1",
"tslib": "^2.6.2",
"fastestsmallesttextencoderdecoder": "^1.0.22",
"@heroicons/react": "^1.0.5",
"@noble/ed25519": "^1.7.1",
"@solana/spl-token": "^0.4.9",
"@solana/wallet-adapter-base": "^0.9.22",
"@solana/wallet-adapter-react": "^0.15.35",
"@solana/wallet-adapter-react-ui": "^0.9.31",
"@solana/wallet-adapter-react-ui": "^0.9.35",
"@solana/wallet-adapter-wallets": "^0.19.16",
"@solana/web3.js": "^1.95.4",
"@tailwindcss/typography": "^0.5.9",
"bs58": "^4.0.1",
"chart.js": "^4.4.6",
"daisyui": "^1.24.3",
"date-fns": "^2.29.3",
"fastestsmallesttextencoderdecoder": "^1.0.22",
"immer": "^9.0.12",
"next": "^13.1.5",
"next-auth": "^4.24.10",
Expand All @@ -38,6 +37,7 @@
"react-dom": "^18.2.0",
"react-icons": "^5.3.0",
"react-responsive": "^10.0.0",
"tslib": "^2.6.2",
"zustand": "^3.6.9"
},
"devDependencies": {
Expand Down
56 changes: 12 additions & 44 deletions src/components/nav-element/NavBar.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,9 @@
flex-shrink: 0;
}

.logo {
height: 24px;
width: auto;
.logoLink {
display: flex;
align-items: center;
}

.searchContainer {
Expand Down Expand Up @@ -45,18 +45,6 @@
box-shadow: 0 0 0 2px rgba(249, 140, 19, 0.1);
}

.searchButton {
position: absolute;
right: 12px;
background: none;
border: none;
cursor: pointer;
padding: 4px;
display: flex;
align-items: center;
justify-content: center;
}

.actionsContainer {
display: flex;
align-items: center;
Expand All @@ -71,6 +59,7 @@
border-radius: 12px;
font-size: 14px;
transition: all 0.2s ease;
text-decoration: none;
white-space: nowrap;
}

Expand All @@ -82,43 +71,28 @@
background-color: #EDE9DE;
padding: 8px 16px;
border-radius: 24px;
}

.profileLink {
display: flex;
align-items: center;
gap: 8px;
text-decoration: none;
transition: all 0.2s ease;
}

.profileContainer:hover {
background-color: #E5DFD3;
}

.profileImage {
width: 32px;
height: 32px;
border-radius: 50%;
cursor: pointer;
transition: opacity 0.2s;
}

.profileImage:hover {
opacity: 0.8;
}

.walletAddress {
color: #9a8c7c;
font-weight: 500;
font-size: 14px;
object-fit: cover;
}

.profileText {
color: #9a8c7c;
font-weight: 500;
}

@media (max-width: 1024px) {
.actionButton {
padding: 8px 12px;
font-size: 13px;
}
font-size: 14px;
}

@media (max-width: 768px) {
Expand Down Expand Up @@ -147,13 +121,7 @@
padding: 6px 12px;
}

.walletAddress {
.profileText {
font-size: 12px;
}
}

@media (max-width: 480px) {
.actionButton:not(:last-child) {
display: none;
}
}
37 changes: 30 additions & 7 deletions src/components/nav-element/NavBar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,8 @@ const NavBar: FC<NavBarProps> = () => {
<Image
src="/logo.svg"
alt="Logo"
width={24}
height={24}
width={60}
height={60}
priority
/>
</Link>
Expand All @@ -46,13 +46,36 @@ const NavBar: FC<NavBarProps> = () => {
</form>
</div>

<div className={styles.navLinks}>
<Link href="/explorer" className={styles.navLink}>
<div className={styles.actionsContainer}>
<Link href="/explorer" className={styles.actionButton}>
Explorer
</Link>
{session && (
<Link href="/profile" className={styles.navLink}>
Profile
<a
href="https://www.daos.fun/HeLp6NuQkmYB4pYWo2zYs22mESHXPQYzXbB8n4V98jwC"
target="_blank"
rel="noopener noreferrer"
className={styles.actionButton}
>
Become Partner
</a>
{session ? (
<Link href="/profile" className={styles.profileContainer}>
<Image
src={session.user?.image || '/default-avatar.png'}
alt="Profile"
width={32}
height={32}
className={styles.profileImage}
/>
{publicKey && (
<span className={styles.profileText}>
{`${publicKey.toString().slice(0, 4)}...${publicKey.toString().slice(-4)}`}
</span>
)}
</Link>
) : (
<Link href="/api/auth/signin" className={styles.actionButton}>
Sign In
</Link>
)}
</div>
Expand Down
56 changes: 56 additions & 0 deletions src/components/profile/ApiSection.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
.title {
font-size: 24px;
font-weight: 600;
color: #242424;
padding: 24px 0px 10px;
margin: 0 24px;
}

.buttonParent {
display: flex;
flex-direction: row;
align-items: left;
gap: 12px;
width: calc(100% - 48px);
margin: 0 24px;
}

.button {
border-radius: 14px;
background-color: #9B8D7D;
height: 38px;
overflow: hidden;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 8px 0px;
box-sizing: border-box;
max-width: 300px;
transition: all 0.2s ease;
cursor: pointer;
}

.button.active {
background-color: #f98c13;
}

.button:hover {
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.text {
position: relative;
line-height: 22px;
font-weight: 600;
margin: 0 14px;
color: #fff;
}

@media (max-width: 768px) {
.buttonParent {
width: calc(100% - 48px);
margin: 0 24px;
}
}
29 changes: 29 additions & 0 deletions src/components/profile/ApiSection.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import { FC } from 'react';
import { useRouter } from 'next/router';
import styles from './ApiSection.module.css';

export const ApiSection: FC = () => {
const router = useRouter();

const handleNavigateToSaas = () => {
router.push('/saas');
};

return (
<div>
<h2 className={styles.title}>API Access</h2>
<div className={styles.buttonParent}>
<div
className={styles.button}
onClick={handleNavigateToSaas}
>
<div className={styles.text}>
Get API Access
</div>
</div>
</div>
</div>
);
};

export default ApiSection;
53 changes: 53 additions & 0 deletions src/components/profile/ProfileData.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
.container {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 24px 24px 0;
max-width: 800px;
margin: 0 auto;
}

.userInfo {
display: flex;
flex-direction: column;
gap: 4px;
}

.userName {
font-size: 24px;
font-weight: 600;
color: #242424;
margin: 0;
}

.userRole {
font-size: 14px;
color: #9B8D7D;
font-weight: 500;
}

.imageContainer {
display: flex;
align-items: center;
justify-content: center;
}

.profileImage {
border-radius: 50%;
object-fit: cover;
}

@media (max-width: 768px) {
.container {
padding: 16px 16px 0;
}

.userName {
font-size: 20px;
}

.userRole {
font-size: 12px;
}
}
33 changes: 33 additions & 0 deletions src/components/profile/ProfileData.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import { FC } from 'react';
import { useSession } from 'next-auth/react';
import Image from 'next/image';
import styles from './ProfileData.module.css';

export const ProfileData: FC = () => {
const { data: session } = useSession();

return (
<div className={styles.container}>
<div className={styles.userInfo}>
<h1 className={styles.userName}>
{session?.user?.name || 'Anonymous'}
</h1>
<span className={styles.userRole}>Partner</span>
</div>
{session?.user?.image && (
<div className={styles.imageContainer}>
<Image
src={session.user.image}
alt="Profile"
width={48}
height={48}
className={styles.profileImage}
priority
/>
</div>
)}
</div>
);
};

export default ProfileData;
Loading

0 comments on commit 4fb3d00

Please sign in to comment.