diff --git a/package-lock.json b/package-lock.json index 7db08c7..e762154 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,7 @@ "version": "0.0.7", "license": "MIT", "dependencies": { - "@codex-storage/marketplace-ui-components": "^0.0.32", + "@codex-storage/marketplace-ui-components": "^0.0.33", "@codex-storage/sdk-js": "^0.0.15", "@sentry/browser": "^8.32.0", "@sentry/react": "^8.31.0", @@ -379,9 +379,9 @@ "peer": true }, "node_modules/@codex-storage/marketplace-ui-components": { - "version": "0.0.32", - "resolved": "https://registry.npmjs.org/@codex-storage/marketplace-ui-components/-/marketplace-ui-components-0.0.32.tgz", - "integrity": "sha512-6vJ9pacl2rzLE3GqBNtbaGEBSxZ6yxb5+ixY/Q6ORtgSgv54LPb6L9VOiwrjrRxD12HEVxosXEeyBLhek7C8tg==", + "version": "0.0.33", + "resolved": "https://registry.npmjs.org/@codex-storage/marketplace-ui-components/-/marketplace-ui-components-0.0.33.tgz", + "integrity": "sha512-Au/k1FNygejrcHNLdgghgxm8VuERb2bQsI0JjGaIdk4LGgTS0EuMCd0Y6fo6VuZeyuVPN/kFSWMVPBO5xdFEEw==", "dependencies": { "lucide-react": "^0.453.0" }, diff --git a/package.json b/package.json index ec3dfda..acae8f0 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,7 @@ "React" ], "dependencies": { - "@codex-storage/marketplace-ui-components": "^0.0.32", + "@codex-storage/marketplace-ui-components": "^0.0.33", "@codex-storage/sdk-js": "^0.0.15", "@sentry/browser": "^8.32.0", "@sentry/react": "^8.31.0", diff --git a/src/components/AlertIcon/AlertIcon.tsx b/src/components/AlertIcon/AlertIcon.tsx new file mode 100644 index 0000000..547ea53 --- /dev/null +++ b/src/components/AlertIcon/AlertIcon.tsx @@ -0,0 +1,15 @@ +export function AlertIcon() { + return ( + + + + ); +} diff --git a/src/components/AppBar/appBar.css b/src/components/AppBar/appBar.css index 37e5777..2cde625 100644 --- a/src/components/AppBar/appBar.css +++ b/src/components/AppBar/appBar.css @@ -59,12 +59,6 @@ border-radius: 50%; color: #969696; } - - @media (max-width: 999px) { - & { - cursor: pointer; - } - } } aside { diff --git a/src/components/ConnectedAccount/ConnectedAccount.css b/src/components/ConnectedAccount/ConnectedAccount.css index 290cc1a..458fe0e 100644 --- a/src/components/ConnectedAccount/ConnectedAccount.css +++ b/src/components/ConnectedAccount/ConnectedAccount.css @@ -1,7 +1,83 @@ .connected-account { border-radius: 8px; - border: 1px solid #96969633; + border: 1px solid hsla(0, 0%, 59%, 0.2); main { + flex: 1; + } + + > footer { + ul { + display: flex; + list-style-type: none; + margin-top: 16px; + border: 1px solid #96969633; + background-color: #14141499; + height: 24px; + border-radius: 6px; + + li { + flex: 1; + display: flex; + justify-content: center; + align-items: center; + font-family: Inter; + font-size: 12px; + font-weight: 500; + line-height: 16px; + text-align: left; + color: #969696; + + &[aria-selected] { + background: #2f2f2f; + color: white; + } + } + } + + button { + background-color: #161616; + border: 1px solid #96969633; + height: 24px; + width: 24px; + border-radius: 6px; + } + + > div { + display: flex; + align-items: center; + justify-content: space-between; + margin-top: 16px; + } + + h6 { + font-family: Inter; + font-size: 14px; + font-weight: 400; + line-height: 20px; + letter-spacing: -0.006em; + text-align: left; + color: #969696; + } + + var { + font-family: Inter; + font-size: 18px; + font-weight: 500; + line-height: 24px; + letter-spacing: -0.015em; + text-align: left; + color: white; + font-style: normal; + } + + small { + font-family: Inter; + font-size: 12px; + font-weight: 500; + line-height: 16px; + text-align: left; + color: #7d7d7d; + } } } diff --git a/src/components/ConnectedAccount/ConnectedAccount.tsx b/src/components/ConnectedAccount/ConnectedAccount.tsx index ba5ec7e..d219501 100644 --- a/src/components/ConnectedAccount/ConnectedAccount.tsx +++ b/src/components/ConnectedAccount/ConnectedAccount.tsx @@ -3,6 +3,8 @@ import { AccountIcon } from "../AccountIcon/AccountIcon"; import "./ConnectedAccount.css"; import { PlusIcon } from "../PlusIcon/PlusIcon"; import { WalletCard } from "./WalletCard"; +import { ProgressCircle } from "./ProgressCircle"; +import { ArrowRightIcon } from "../ArrowRightIcon/ArrowRightIcon"; export function ConnectedAccount() { return ( @@ -17,6 +19,30 @@ export function ConnectedAccount() {
+ ); } diff --git a/src/components/ConnectedAccount/ProgressCircle.css b/src/components/ConnectedAccount/ProgressCircle.css new file mode 100644 index 0000000..6f73ad1 --- /dev/null +++ b/src/components/ConnectedAccount/ProgressCircle.css @@ -0,0 +1,23 @@ +.progress-circle { + border-radius: 50%; + width: 48px; + height: 48px; + display: flex; + background: #2f2f2f; + + background-image: + -webkit-linear-gradient(90deg, #2f2f2f 50%, transparent 50%), + -webkit-linear-gradient(270deg, var(--codex-color-primary) 50%, #2f2f2f 50%); + background-image: linear-gradient(90deg, #2f2f2f 50%, transparent 50%), + linear-gradient(270deg, var(--codex-color-primary) 50%, #2f2f2f 50%); + + div { + border-radius: 50%; + width: 36px; + height: 36px; + margin: auto; + background: #232323; + text-align: center; + box-sizing: border-box; + } +} diff --git a/src/components/ConnectedAccount/ProgressCircle.tsx b/src/components/ConnectedAccount/ProgressCircle.tsx new file mode 100644 index 0000000..1137d1b --- /dev/null +++ b/src/components/ConnectedAccount/ProgressCircle.tsx @@ -0,0 +1,13 @@ +import "./ProgressCircle.css"; + +type Props = { + value: number; +}; + +export function ProgressCircle(_: Props) { + return ( +
+
+
+ ); +} diff --git a/src/components/ConnectedAccount/WalletCard.css b/src/components/ConnectedAccount/WalletCard.css index e2613c7..bd1ff82 100644 --- a/src/components/ConnectedAccount/WalletCard.css +++ b/src/components/ConnectedAccount/WalletCard.css @@ -3,16 +3,17 @@ background-repeat: no-repeat; background-size: cover; border: 1px solid #96969633; - height: 286px; border-radius: 16px; padding: 16px; box-sizing: border-box; position: relative; + display: flex; + flex-direction: column; &::before { content: " "; - width: 217px; - height: 148px; + width: 42%; + height: 50%; position: absolute; bottom: -1px; right: 0; @@ -42,6 +43,11 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + + svg { + position: relative; + top: -2px; + } } } @@ -156,7 +162,6 @@ section:nth-child(2) { margin-top: 16px; margin-bottom: 10px; - height: 90px; position: relative; .wallet-lines { diff --git a/src/components/ConnectedAccount/WalletChart.tsx b/src/components/ConnectedAccount/WalletChart.tsx index 06d2204..e0ab5a1 100644 --- a/src/components/ConnectedAccount/WalletChart.tsx +++ b/src/components/ConnectedAccount/WalletChart.tsx @@ -1,11 +1,6 @@ export function WalletChart() { return ( - + - - + + diff --git a/src/components/Files/Files.css b/src/components/Files/Files.css index 0817d20..9125700 100644 --- a/src/components/Files/Files.css +++ b/src/components/Files/Files.css @@ -3,7 +3,6 @@ border: 1px solid var(--codex-border-color); background-color: var(--codex-background-secondary); padding: 1rem 1.5rem; - margin-bottom: 1rem; } .files-cell-file { diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx index ee3e4ce..72c4d9d 100644 --- a/src/components/Menu/Menu.tsx +++ b/src/components/Menu/Menu.tsx @@ -36,12 +36,10 @@ export type MenuItem = Component: ComponentType; }; -type Props = { - isMobileMenuDisplayed: boolean; -}; +type Props = {}; -export function Menu({ isMobileMenuDisplayed }: Props) { - const [isExpanded, setIsExpanded] = useState(null); +export function Menu({}: Props) { + const [isExpanded, setIsExpanded] = useState(true); const onLogoClick = () => { if (isExpanded === false) { @@ -49,22 +47,15 @@ export function Menu({ isMobileMenuDisplayed }: Props) { } }; - const onExpandMenu = () => setIsExpanded(isExpanded === false ? true : false); + const onExpandMenu = () => setIsExpanded(!isExpanded); return ( <>
diff --git a/src/components/Menu/menu.css b/src/components/Menu/menu.css index 44264af..382b1e8 100644 --- a/src/components/Menu/menu.css +++ b/src/components/Menu/menu.css @@ -15,18 +15,24 @@ left 0.05s; min-width: 0; width: 272px; + min-width: 80px; - @media (max-width: 999px) { - &, - &[aria-hidden] { - width: 272px; - position: fixed; - z-index: 12; - left: -300px; - } + @media (max-width: 1199px) { + & { + width: 80px; + .items { + a { + width: 26px; + gap: 0; + display: flex; + justify-content: center; - &[aria-hidden="false"] { - left: 0px; + span + span { + font-size: 0; + display: none; + } + } + } } } @@ -45,11 +51,7 @@ overflow: visible; } - &[aria-expanded="true"] { - width: 272px; - } - - &[aria-expanded="false"] { + &:not([aria-expanded]) { width: 80px; .items { @@ -61,6 +63,7 @@ span + span { font-size: 0; + display: none; } } } @@ -85,10 +88,15 @@ border-radius: 8px; > svg:first-child { - cursor: pointer; min-width: 30px; } + @media (min-width: 1200px) { + > svg:first-child { + cursor: pointer; + } + } + div { flex: 1; text-align: right; diff --git a/src/components/Welcome/WelcomeCard.css b/src/components/Welcome/WelcomeCard.css index 4c3c987..da0eb73 100644 --- a/src/components/Welcome/WelcomeCard.css +++ b/src/components/Welcome/WelcomeCard.css @@ -9,6 +9,8 @@ background-repeat: no-repeat; background-position: right; flex: 1; + display: flex; + flex-direction: column; } main { diff --git a/src/components/Welcome/WelcomeCard.tsx b/src/components/Welcome/WelcomeCard.tsx index f36b3bb..bec3217 100644 --- a/src/components/Welcome/WelcomeCard.tsx +++ b/src/components/Welcome/WelcomeCard.tsx @@ -5,6 +5,7 @@ import { Logo } from "../Logo/Logo"; import { Logotype } from "../Logotype/Logotype"; import { DiscordIcon } from "./DiscordIcon"; import { Alert } from "@codex-storage/marketplace-ui-components"; +import { AlertIcon } from "../AlertIcon/AlertIcon"; export function WelcomeCard() { return ( @@ -27,7 +28,7 @@ export function WelcomeCard() {

- Explore more content + Learn more @@ -36,7 +37,7 @@ export function WelcomeCard() {
- + }> The website and the content herein is not intended for public use and is for informational and demonstration purposes only. diff --git a/src/routes/dashboard.tsx b/src/routes/dashboard.tsx index c11cfa2..0e271e7 100644 --- a/src/routes/dashboard.tsx +++ b/src/routes/dashboard.tsx @@ -16,12 +16,9 @@ const Layout = () => { const onClose = () => setHasMobileMenu(false); - const isMobileMenuDisplayed = - hasMobileMenu === true && window.innerWidth <= 999; - return (
- +
diff --git a/src/routes/dashboard/index.css b/src/routes/dashboard/index.css index a1c58e6..a93e65f 100644 --- a/src/routes/dashboard/index.css +++ b/src/routes/dashboard/index.css @@ -1,63 +1,86 @@ .dashboard { - display: flex; - justify-content: space-between; - margin-bottom: 16px; - - h3 { - font-family: Inter; - font-size: 12px; - font-weight: 700; - line-height: 14.52px; - letter-spacing: 0.01em; - color: #969696cc; - text-transform: uppercase; - } - - h4 { - font-family: Inter; - font-size: 32px; - font-weight: 400; - line-height: 38.73px; - letter-spacing: 0.01em; - color: white; - } - - .emoji { - border-radius: 50%; - width: 52px; - height: 52px; - background-color: #4a9a73; + header { display: flex; - align-items: center; - justify-content: center; - font-size: 26px; - } -} - -.dashboard-body { - display: flex; - flex-wrap: wrap; - gap: 16px; -} - -.welcome-card, -.connected-account { - min-width: 550px; - display: flex; - flex-direction: column; - flex: 1; -} - -.column { - min-width: 400px; -} - -.files { - flex: 1; - min-width: 100%; -} - -@media (min-width: 1800px) { - .dashboard-body { + justify-content: space-between; + margin-bottom: 16px; + + h3 { + font-family: Inter; + font-size: 12px; + font-weight: 700; + line-height: 14.52px; + letter-spacing: 0.01em; + color: #969696cc; + text-transform: uppercase; + } + + h4 { + font-family: Inter; + font-size: 32px; + font-weight: 400; + line-height: 38.73px; + letter-spacing: 0.01em; + color: white; + } + + .emoji { + border-radius: 50%; + width: 52px; + height: 52px; + background-color: #4a9a73; + display: flex; + align-items: center; + justify-content: center; + font-size: 26px; + } + } + + > main { + display: flex; + flex-wrap: wrap; + gap: 16px; + + .welcome-card, + .connected-account { + display: flex; + flex-direction: column; + flex: 1 1 50%; + } + + .connected-account { + min-width: 550px; + } + + .welcome-card { + min-width: 420px; + } + + .column { + min-width: 350px; + display: flex; + flex-direction: column; + gap: 16px; + flex: 1 1 30%; + } + + .node-space { + flex: 1; + } + + @media (min-width: 2000px) { + .welcome-card, + .connected-account { + flex: 1 1 34%; + } + + .column { + flex: 1 1 25%; + } + } + + .files { + flex: 1; + flex-basis: 66%; + } } } diff --git a/src/routes/dashboard/index.tsx b/src/routes/dashboard/index.tsx index 01dc9c6..96275eb 100644 --- a/src/routes/dashboard/index.tsx +++ b/src/routes/dashboard/index.tsx @@ -23,8 +23,8 @@ function Dashboard() { const emoji = WebStorage.onBoarding.getEmoji(); return ( - <> -
+
+
{emoji}
@@ -33,23 +33,10 @@ function Dashboard() {
-
-
-
- -
- ( - - )}> - - - -
- +
+
+ +
( )}> - - - -
- ( - - )}> - - - - -
- - ( - - )}> - + +
-
- + + ( + + )}> + + + +
+ ( + + )}> + + + + +
+ + ( + + )}> + + + + ); }