diff --git a/bun.lockb b/bun.lockb
index efe9f35..26da72f 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index 8777ac7..fd86c75 100644
--- a/package.json
+++ b/package.json
@@ -9,10 +9,13 @@
"lint": "next lint"
},
"dependencies": {
+ "@emotion/cache": "^11.14.0",
"@emotion/react": "^11.14.0",
+ "@emotion/server": "^11.11.0",
"@emotion/styled": "^11.14.0",
"@mui/icons-material": "^6.3.0",
"@mui/material": "^6.3.0",
+ "@mui/material-nextjs": "^6.3.1",
"@mui/x-charts": "^7.23.2",
"axios": "^1.7.9",
"axios-case-converter": "^1.1.1",
diff --git a/src/components/CapAppBar.tsx b/src/components/CapAppBar.tsx
index 54700b3..6665098 100644
--- a/src/components/CapAppBar.tsx
+++ b/src/components/CapAppBar.tsx
@@ -1,17 +1,59 @@
import { useUserStore } from '@/services/user'
-import { AppBar, Avatar, Box, IconButton, Toolbar, Typography, useTheme } from '@mui/material'
+import {
+ AppBar,
+ AppBarProps,
+ Avatar,
+ createTheme,
+ IconButton,
+ ThemeProvider,
+ Toolbar,
+ Typography,
+ useScrollTrigger,
+ useTheme,
+} from '@mui/material'
+import { getAttachmentUrl } from '@/services/network'
import MenuIcon from '@mui/icons-material/Menu'
import AccountCircle from '@mui/icons-material/AccountCircle'
import Link from 'next/link'
-import { getAttachmentUrl } from '@/services/network'
+import React from 'react'
+
+interface ElevationAppBarProps {
+ elevation?: number
+ color?: any
+ children?: React.ReactElement<{ elevation?: number } & AppBarProps>
+}
+
+function ElevationScroll(props: ElevationAppBarProps) {
+ if (typeof window === 'undefined') return props.children
+
+ const trigger = useScrollTrigger({
+ disableHysteresis: true,
+ threshold: 0,
+ target: window,
+ })
+
+ const commonStyle = {
+ transition: 'all',
+ transitionDuration: '300ms',
+ }
+
+ return props.children
+ ? React.cloneElement(props.children, {
+ elevation: trigger ? props.elevation : 0,
+ sx: trigger
+ ? { backgroundColor: props.color, ...commonStyle }
+ : { backgroundColor: 'transparent', ...commonStyle },
+ })
+ : null
+}
export function CapAppBar() {
const userStore = useUserStore()
const theme = useTheme()
return (
-
-
+
+
@@ -41,6 +83,6 @@ export function CapAppBar() {
-
+
)
}
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 4af8138..877363b 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -13,6 +13,7 @@ const fontRoboto = Roboto({
})
const siteTheme = createTheme({
+ cssVariables: true,
palette: {
mode: 'light',
primary: {
@@ -43,7 +44,7 @@ export default function App({ Component, pageProps }: AppProps) {
-
+
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
index 89f88e1..ea9f190 100644
--- a/src/pages/_document.tsx
+++ b/src/pages/_document.tsx
@@ -1,13 +1,28 @@
-import { Html, Head, Main, NextScript } from 'next/document'
+import {
+ AppCacheProvider,
+ DocumentHeadTags,
+ DocumentHeadTagsProps,
+ documentGetInitialProps,
+} from '@mui/material-nextjs/v15-pagesRouter'
+import { Html, Head, Main, NextScript, DocumentContext, DocumentProps } from 'next/document'
-export default function Document() {
+export default function Document(props: DocumentProps & DocumentHeadTagsProps) {
return (
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
)
}
+
+Document.getInitialProps = async (ctx: DocumentContext) => {
+ const finalProps = await documentGetInitialProps(ctx)
+ return finalProps
+}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 85e85d1..ec0ce73 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -3,7 +3,7 @@ import { Container, Typography } from '@mui/material'
export default function Home() {
return (
-
+
Welcome to
the Solsynth Capital.
diff --git a/src/pages/users/[name].tsx b/src/pages/users/[name].tsx
index 74e4304..fe20da2 100644
--- a/src/pages/users/[name].tsx
+++ b/src/pages/users/[name].tsx
@@ -98,25 +98,27 @@ export default function UserProfile({ user, checkIn }: InferGetServerSidePropsTy
order={{ xs: -1, sm: -1, md: 1 }}
sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}
>
-
-
-
- Badges
-
+ {user.badges && (
+
+
+
+ Badges
+
-
- {user.badges.map((b) => (
-
- {SnAccountBadgeMapping[b.type].icon}
-
- {SnAccountBadgeMapping[b.type].name}
- {b.metadata.title && {b.metadata.title}}
+
+ {user.badges.map((b) => (
+
+ {SnAccountBadgeMapping[b.type].icon}
+
+ {SnAccountBadgeMapping[b.type].name}
+ {b.metadata.title && {b.metadata.title}}
+
-
- ))}
-
-
-
+ ))}
+
+
+
+ )}
diff --git a/src/pages/users/me.tsx b/src/pages/users/me.tsx
index 286ced3..ef517c4 100644
--- a/src/pages/users/me.tsx
+++ b/src/pages/users/me.tsx
@@ -14,26 +14,16 @@ export default function UserItself() {
return (
<>
- {userStore.account && (
+ {userStore.account?.banner && (
)}
-
-
-
- {userStore.account && }
-
- {userStore.account?.nick}
-
- @{userStore.account?.name}
-
-
-
-
-
-
+
+
+ Your Solarpass
+
)