From 0dbc504a522c2f73f2eb5fe4caf6d6347dda020b Mon Sep 17 00:00:00 2001 From: Jeesun Kim Date: Mon, 4 Mar 2024 14:46:12 -0800 Subject: [PATCH 1/8] [wip] create account --- src/app/(sidebar)/account/create/page.tsx | 26 ++++++++++++++++++++++- src/styles/globals.scss | 24 +++++++++++++++++++++ 2 files changed, 49 insertions(+), 1 deletion(-) diff --git a/src/app/(sidebar)/account/create/page.tsx b/src/app/(sidebar)/account/create/page.tsx index 3aa44803..9a580489 100644 --- a/src/app/(sidebar)/account/create/page.tsx +++ b/src/app/(sidebar)/account/create/page.tsx @@ -1,5 +1,29 @@ "use client"; +import { Card, Link, Text, Button, Icon } from "@stellar/design-system"; + +import { NextLink } from "@/components/NextLink"; + export default function CreateAccount() { - return
Create Account
; + return ( + +
+ + Keypair Generator + + + + These keypairs can be used on the Stellar network where one is + required. For example, it can be used as an account master key, + account signer, and/or as a stellar-core node key. + +
+ +
+ +
+ + ); } diff --git a/src/styles/globals.scss b/src/styles/globals.scss index fcb80fe4..d6711d63 100644 --- a/src/styles/globals.scss +++ b/src/styles/globals.scss @@ -309,3 +309,27 @@ font-size: pxToRem(14px); line-height: pxToRem(20px); } + +.IntroCards { + display: grid; + gap: pxToRem(12px); + grid-template-columns: 1fr 1fr; + + .Card { + display: flex; + flex-direction: column; + gap: pxToRem(8px); + justify-content: space-between; + + :nth-child(2) { + flex: 1; + } + } +} + +// ============================================================================= +// Margin | Padding +// ============================================================================= +.padding-top-30 { + padding-top: pxToRem(30px); +} From 3baecbaacb3a4c83b13a765b1f88e4c18a528d5d Mon Sep 17 00:00:00 2001 From: Jeesun Kim Date: Tue, 5 Mar 2024 11:06:17 -0800 Subject: [PATCH 2/8] [Account Routes] add routes for Account --- src/app/(sidebar)/account/layout.tsx | 8 ++++++++ src/app/(sidebar)/account/muxed-create/page.tsx | 5 +++++ src/app/(sidebar)/account/muxed-parse/page.tsx | 5 +++++ 3 files changed, 18 insertions(+) create mode 100644 src/app/(sidebar)/account/muxed-create/page.tsx create mode 100644 src/app/(sidebar)/account/muxed-parse/page.tsx diff --git a/src/app/(sidebar)/account/layout.tsx b/src/app/(sidebar)/account/layout.tsx index ccbca088..6afd124e 100644 --- a/src/app/(sidebar)/account/layout.tsx +++ b/src/app/(sidebar)/account/layout.tsx @@ -20,6 +20,14 @@ export default function AccountTemplate({ route: Routes.FUND_ACCOUNT, label: "Fund Account", }, + { + route: Routes.CREATE_MUXED_ACCOUNT, + label: "Create Muxed Account", + }, + { + route: Routes.PARSE_MUXED_ACCOUNT, + label: "Parse Muxed Account", + }, ], }} > diff --git a/src/app/(sidebar)/account/muxed-create/page.tsx b/src/app/(sidebar)/account/muxed-create/page.tsx new file mode 100644 index 00000000..8a92f33e --- /dev/null +++ b/src/app/(sidebar)/account/muxed-create/page.tsx @@ -0,0 +1,5 @@ +"use client"; + +export default function CreateMuxedAccount() { + return
Create Muxed Account
; +} diff --git a/src/app/(sidebar)/account/muxed-parse/page.tsx b/src/app/(sidebar)/account/muxed-parse/page.tsx new file mode 100644 index 00000000..609fba8a --- /dev/null +++ b/src/app/(sidebar)/account/muxed-parse/page.tsx @@ -0,0 +1,5 @@ +"use client"; + +export default function ParseMuxedAccount() { + return
Parse Muxed Account
; +} From 9f38f2de8256adb31fcf48b86332dff2e4ff621c Mon Sep 17 00:00:00 2001 From: Jeesun Kim Date: Tue, 5 Mar 2024 11:30:30 -0800 Subject: [PATCH 3/8] updating styles --- src/app/(sidebar)/account/create/page.tsx | 39 ++++++++++++----------- src/app/(sidebar)/account/styles.scss | 7 ++++ src/styles/globals.scss | 6 ---- 3 files changed, 27 insertions(+), 25 deletions(-) create mode 100644 src/app/(sidebar)/account/styles.scss diff --git a/src/app/(sidebar)/account/create/page.tsx b/src/app/(sidebar)/account/create/page.tsx index 9a580489..d528fec4 100644 --- a/src/app/(sidebar)/account/create/page.tsx +++ b/src/app/(sidebar)/account/create/page.tsx @@ -2,28 +2,29 @@ import { Card, Link, Text, Button, Icon } from "@stellar/design-system"; -import { NextLink } from "@/components/NextLink"; +import "../styles.scss"; export default function CreateAccount() { return ( - -
- - Keypair Generator - +
+ +
+ + Keypair Generator + - - These keypairs can be used on the Stellar network where one is - required. For example, it can be used as an account master key, - account signer, and/or as a stellar-core node key. - -
- -
- -
- + + These keypairs can be used on the Stellar network where one is + required. For example, it can be used as an account master key, + account signer, and/or as a stellar-core node key. + +
+
+ +
+ +
); } diff --git a/src/app/(sidebar)/account/styles.scss b/src/app/(sidebar)/account/styles.scss new file mode 100644 index 00000000..8cfdac69 --- /dev/null +++ b/src/app/(sidebar)/account/styles.scss @@ -0,0 +1,7 @@ +@use "../../../styles/utils.scss" as *; + +.Account { + .CardText__button{ + padding-top: pxToRem(30px); + } +} diff --git a/src/styles/globals.scss b/src/styles/globals.scss index d6711d63..9b04d065 100644 --- a/src/styles/globals.scss +++ b/src/styles/globals.scss @@ -327,9 +327,3 @@ } } -// ============================================================================= -// Margin | Padding -// ============================================================================= -.padding-top-30 { - padding-top: pxToRem(30px); -} From 16ee93f221446d28a602167d901a7e3222ed06d9 Mon Sep 17 00:00:00 2001 From: Jeesun Kim Date: Tue, 5 Mar 2024 11:33:59 -0800 Subject: [PATCH 4/8] rename Account 'routes' --- src/constants/routes.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/constants/routes.ts b/src/constants/routes.ts index 5cc10680..d0db9134 100644 --- a/src/constants/routes.ts +++ b/src/constants/routes.ts @@ -1,10 +1,10 @@ export enum Routes { ROOT = "/", // Account - CREATE_ACCOUNT = "/account/create", - FUND_ACCOUNT = "/account/fund", - CREATE_MUXED_ACCOUNT = "/account/muxed-create", - PARSE_MUXED_ACCOUNT = "/account/muxed-parse", + ACCOUNT_CREATE = "/account/create", + ACCOUNT_FUND = "/account/fund", + ACCOUNT_CREATE_MUXED = "/account/muxed-create", + ACCOUNT_PARSE_MUXED = "/account/muxed-parse", // Explore Endpoints EXPLORE_ENDPOINTS = "/explore-endpoints", EXPLORE_ENDPOINTS_ACCOUNTS = "/explore-endpoints/accounts", From 423c8829010969f91e091e4fed348ba571c9bdb7 Mon Sep 17 00:00:00 2001 From: Jeesun Kim Date: Tue, 5 Mar 2024 11:35:15 -0800 Subject: [PATCH 5/8] fix routes --- src/app/(sidebar)/account/layout.tsx | 8 ++++---- src/components/MainNav.tsx | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/app/(sidebar)/account/layout.tsx b/src/app/(sidebar)/account/layout.tsx index 6afd124e..93b82894 100644 --- a/src/app/(sidebar)/account/layout.tsx +++ b/src/app/(sidebar)/account/layout.tsx @@ -13,19 +13,19 @@ export default function AccountTemplate({ sidebar={{ navItems: [ { - route: Routes.CREATE_ACCOUNT, + route: Routes.ACCOUNT_CREATE, label: "Create Account", }, { - route: Routes.FUND_ACCOUNT, + route: Routes.ACCOUNT_FUND, label: "Fund Account", }, { - route: Routes.CREATE_MUXED_ACCOUNT, + route: Routes.ACCOUNT_CREATE_MUXED, label: "Create Muxed Account", }, { - route: Routes.PARSE_MUXED_ACCOUNT, + route: Routes.ACCOUNT_PARSE_MUXED, label: "Parse Muxed Account", }, ], diff --git a/src/components/MainNav.tsx b/src/components/MainNav.tsx index 2490da21..d6577a70 100644 --- a/src/components/MainNav.tsx +++ b/src/components/MainNav.tsx @@ -14,7 +14,7 @@ const primaryNavLinks: NavLink[] = [ label: "Introduction", }, { - href: Routes.CREATE_ACCOUNT, + href: Routes.ACCOUNT_CREATE, label: "Account", }, { From 9a8ecc215e4e733013e7983601d1a5b3af16968f Mon Sep 17 00:00:00 2001 From: Jeesun Kim Date: Tue, 5 Mar 2024 14:41:18 -0800 Subject: [PATCH 6/8] updating scss to use 'gap' --- src/app/(sidebar)/account/create/page.tsx | 31 +++++++++++++---------- src/app/(sidebar)/account/styles.scss | 12 ++++++--- 2 files changed, 26 insertions(+), 17 deletions(-) diff --git a/src/app/(sidebar)/account/create/page.tsx b/src/app/(sidebar)/account/create/page.tsx index d528fec4..aaad4ad8 100644 --- a/src/app/(sidebar)/account/create/page.tsx +++ b/src/app/(sidebar)/account/create/page.tsx @@ -8,21 +8,24 @@ export default function CreateAccount() { return (
-
- - Keypair Generator - +
+
+ + Keypair Generator + - - These keypairs can be used on the Stellar network where one is - required. For example, it can be used as an account master key, - account signer, and/or as a stellar-core node key. - -
-
- + + These keypairs can be used on the Stellar network where one is + required. For example, it can be used as an account master key, + account signer, and/or as a stellar-core node key. + +
+
+ +
hai
+
diff --git a/src/app/(sidebar)/account/styles.scss b/src/app/(sidebar)/account/styles.scss index 8cfdac69..bfa75cfb 100644 --- a/src/app/(sidebar)/account/styles.scss +++ b/src/app/(sidebar)/account/styles.scss @@ -1,7 +1,13 @@ @use "../../../styles/utils.scss" as *; .Account { - .CardText__button{ - padding-top: pxToRem(30px); - } + &__Card { + display: flex; + flex-direction: column; + gap: pxToRem(24px); + } + + .CardText__button { + align-self: flex-start; + } } From 080eaf4e2f6ffa3d6a09d10538a34faaf2a2d8ed Mon Sep 17 00:00:00 2001 From: Jeesun Kim Date: Wed, 6 Mar 2024 13:49:56 -0800 Subject: [PATCH 7/8] fix --- src/app/(sidebar)/account/create/page.tsx | 3 +-- src/app/(sidebar)/account/styles.scss | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/app/(sidebar)/account/create/page.tsx b/src/app/(sidebar)/account/create/page.tsx index aaad4ad8..7d8008a6 100644 --- a/src/app/(sidebar)/account/create/page.tsx +++ b/src/app/(sidebar)/account/create/page.tsx @@ -8,7 +8,7 @@ export default function CreateAccount() { return (
-
+
Keypair Generator @@ -24,7 +24,6 @@ export default function CreateAccount() { -
hai
diff --git a/src/app/(sidebar)/account/styles.scss b/src/app/(sidebar)/account/styles.scss index bfa75cfb..541122ec 100644 --- a/src/app/(sidebar)/account/styles.scss +++ b/src/app/(sidebar)/account/styles.scss @@ -1,7 +1,7 @@ @use "../../../styles/utils.scss" as *; .Account { - &__Card { + &__card { display: flex; flex-direction: column; gap: pxToRem(24px); From 4ff22cc35cc1787fc75ec228af83f85ba1c97b6a Mon Sep 17 00:00:00 2001 From: Jeesun Kim Date: Wed, 6 Mar 2024 13:59:44 -0800 Subject: [PATCH 8/8] remove unused styling --- src/styles/globals.scss | 36 ++++++------------------------------ 1 file changed, 6 insertions(+), 30 deletions(-) diff --git a/src/styles/globals.scss b/src/styles/globals.scss index 9b04d065..1120fe22 100644 --- a/src/styles/globals.scss +++ b/src/styles/globals.scss @@ -179,8 +179,7 @@ color: var(--Nav-navLink-color); text-decoration: none; padding: pxToRem(12px) 0; - transition: - color var(--sds-anim-transition-default), + transition: color var(--sds-anim-transition-default), border-color var(--sds-anim-transition-default); border-bottom: 2px solid var(--Nav-navLink-border-color); white-space: nowrap; @@ -206,8 +205,7 @@ line-height: pxToRem(20px); font-weight: var(--sds-fw-medium); color: var(--SidebarLink-color); - transition: - color var(--sds-anim-transition-default), + transition: color var(--sds-anim-transition-default), font-weight var(--sds-anim-transition-default); text-decoration: none; display: flex; @@ -244,11 +242,9 @@ } // Highlight if nested link is selected - &:has( - ~ .SidebarLink__nestedItemsWrapper - > .SidebarLink__nestedItems - > [data-is-active="true"] - ) { + &:has(~ .SidebarLink__nestedItemsWrapper + > .SidebarLink__nestedItems + > [data-is-active="true"]) { --SidebarLink-color: var(--sds-clr-gray-12); font-weight: var(--sds-fw-semi-bold); } @@ -269,9 +265,7 @@ &__nestedItemsWrapper { display: grid; grid-template-rows: 0fr; - transition: - grid-template-rows 0.5s ease-out, - margin-top 0.5s ease-out; + transition: grid-template-rows 0.5s ease-out, margin-top 0.5s ease-out; margin-left: pxToRem(24px); margin-top: pxToRem(-8px); @@ -309,21 +303,3 @@ font-size: pxToRem(14px); line-height: pxToRem(20px); } - -.IntroCards { - display: grid; - gap: pxToRem(12px); - grid-template-columns: 1fr 1fr; - - .Card { - display: flex; - flex-direction: column; - gap: pxToRem(8px); - justify-content: space-between; - - :nth-child(2) { - flex: 1; - } - } -} -