From f7f0c115877930441939716a4e4d17e5d20e8ae6 Mon Sep 17 00:00:00 2001 From: Prad Nukala Date: Mon, 7 Oct 2024 13:59:29 -0400 Subject: [PATCH] feat: add ModalForm component --- pkg/nebula/assets/css/styles.css | 185 ---------------------- pkg/nebula/components/auth/modal.templ | 60 ++----- pkg/nebula/components/auth/modal_templ.go | 54 +++++-- pkg/nebula/components/dash/page.templ | 20 +++ pkg/nebula/components/dash/page_templ.go | 120 ++++++++++++++ pkg/nebula/global/styles/layout.templ | 4 +- pkg/nebula/global/styles/layout_templ.go | 4 +- pkg/nebula/nebula.pkl | 24 +++ pkl/UIUX.pkl | 54 ++----- 9 files changed, 226 insertions(+), 299 deletions(-) create mode 100644 pkg/nebula/components/dash/page.templ create mode 100644 pkg/nebula/components/dash/page_templ.go diff --git a/pkg/nebula/assets/css/styles.css b/pkg/nebula/assets/css/styles.css index 8db54c9f3..d196e89da 100644 --- a/pkg/nebula/assets/css/styles.css +++ b/pkg/nebula/assets/css/styles.css @@ -1135,10 +1135,6 @@ select{ margin-top: 6rem; } -.mt-3{ - margin-top: 0.75rem; -} - .mt-4{ margin-top: 1rem; } @@ -1175,10 +1171,6 @@ select{ display: none; } -.h-0\.5{ - height: 0.125rem; -} - .h-10{ height: 2.5rem; } @@ -1239,14 +1231,6 @@ select{ min-height: 100vh; } -.w-0{ - width: 0px; -} - -.w-1\/3{ - width: 33.333333%; -} - .w-14{ width: 3.5rem; } @@ -1360,10 +1344,6 @@ select{ max-width: 20rem; } -.flex-shrink-0{ - flex-shrink: 0; -} - .shrink-0{ flex-shrink: 0; } @@ -1397,11 +1377,6 @@ select{ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } -.-translate-x-px{ - --tw-translate-x: -1px; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - .-translate-y-0\.5{ --tw-translate-y: -0.125rem; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); @@ -1412,11 +1387,6 @@ select{ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } -.-translate-y-px{ - --tw-translate-y: -1px; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - .translate-x-0{ --tw-translate-x: 0px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); @@ -1452,11 +1422,6 @@ select{ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } -.translate-y-full{ - --tw-translate-y: 100%; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - .rotate-1{ --tw-rotate: 1deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); @@ -1682,10 +1647,6 @@ select{ border-width: 2px; } -.border-\[2px\]{ - border-width: 2px; -} - .border-t{ border-top-width: 1px; } @@ -1700,11 +1661,6 @@ select{ border-color: rgb(22 163 74 / var(--tw-border-opacity)); } -.border-neutral-200{ - --tw-border-opacity: 1; - border-color: rgb(229 229 229 / var(--tw-border-opacity)); -} - .border-neutral-200\/60{ border-color: rgb(229 229 229 / 0.6); } @@ -1853,16 +1809,6 @@ select{ background-image: linear-gradient(to right, var(--tw-gradient-stops)); } -.bg-gradient-to-t{ - background-image: linear-gradient(to top, var(--tw-gradient-stops)); -} - -.from-black{ - --tw-gradient-from: #000 var(--tw-gradient-from-position); - --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position); - --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); -} - .from-zinc-100{ --tw-gradient-from: #f4f4f5 var(--tw-gradient-from-position); --tw-gradient-to: rgb(244 244 245 / 0) var(--tw-gradient-to-position); @@ -1888,10 +1834,6 @@ select{ --tw-gradient-to: #18181b var(--tw-gradient-to-position); } -.bg-cover{ - background-size: cover; -} - .bg-clip-text{ -webkit-background-clip: text; background-clip: text; @@ -1939,16 +1881,6 @@ select{ padding: 1.75rem; } -.px-0\.5{ - padding-left: 0.125rem; - padding-right: 0.125rem; -} - -.px-2{ - padding-left: 0.5rem; - padding-right: 0.5rem; -} - .px-2\.5{ padding-left: 0.625rem; padding-right: 0.625rem; @@ -2029,11 +1961,6 @@ select{ padding-bottom: 2rem; } -.py-px{ - padding-top: 1px; - padding-bottom: 1px; -} - .pb-1{ padding-bottom: 0.25rem; } @@ -2118,10 +2045,6 @@ select{ font-family: Inter Tight, sans-serif; } -.font-sans{ - font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; -} - .text-2xl{ font-size: 1.5rem; line-height: 1.415; @@ -2140,10 +2063,6 @@ select{ letter-spacing: -0.017em; } -.text-\[0\.6rem\]{ - font-size: 0.6rem; -} - .text-base{ font-size: 1rem; line-height: 1.5; @@ -2176,10 +2095,6 @@ select{ font-weight: 700; } -.font-extrabold{ - font-weight: 800; -} - .font-medium{ font-weight: 500; } @@ -2192,10 +2107,6 @@ select{ font-weight: 600; } -.uppercase{ - text-transform: uppercase; -} - .italic{ font-style: italic; } @@ -2270,11 +2181,6 @@ select{ color: rgb(115 115 115 / var(--tw-text-opacity)); } -.text-neutral-600{ - --tw-text-opacity: 1; - color: rgb(82 82 82 / var(--tw-text-opacity)); -} - .text-neutral-800{ --tw-text-opacity: 1; color: rgb(38 38 38 / var(--tw-text-opacity)); @@ -2349,18 +2255,6 @@ select{ color: rgb(24 24 27 / var(--tw-text-opacity)); } -.underline{ - text-decoration-line: underline; -} - -.no-underline{ - text-decoration-line: none; -} - -.underline-offset-4{ - text-underline-offset: 4px; -} - .antialiased{ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; @@ -2378,14 +2272,6 @@ select{ opacity: 0.6; } -.opacity-70{ - opacity: 0.7; -} - -.opacity-90{ - opacity: 0.9; -} - .mix-blend-exclusion{ mix-blend-mode: exclusion; } @@ -2456,10 +2342,6 @@ select{ transition-duration: 300ms; } -.duration-500{ - transition-duration: 500ms; -} - .duration-700{ transition-duration: 700ms; } @@ -2889,16 +2771,6 @@ input[type="search"]::-webkit-search-results-decoration { /* Firefox */ } -.placeholder\:text-neutral-500::-moz-placeholder{ - --tw-text-opacity: 1; - color: rgb(115 115 115 / var(--tw-text-opacity)); -} - -.placeholder\:text-neutral-500::placeholder{ - --tw-text-opacity: 1; - color: rgb(115 115 115 / var(--tw-text-opacity)); -} - .placeholder\:text-zinc-400::-moz-placeholder{ --tw-text-opacity: 1; color: rgb(161 161 170 / var(--tw-text-opacity)); @@ -3245,11 +3117,6 @@ input[type="search"]::-webkit-search-results-decoration { opacity: 1; } -.focus\:border-neutral-300:focus{ - --tw-border-opacity: 1; - border-color: rgb(212 212 212 / var(--tw-border-opacity)); -} - .focus\:border-zinc-300:focus{ --tw-border-opacity: 1; border-color: rgb(212 212 216 / var(--tw-border-opacity)); @@ -3260,10 +3127,6 @@ input[type="search"]::-webkit-search-results-decoration { background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } -.focus\:no-underline:focus{ - text-decoration-line: none; -} - .focus\:outline-none:focus{ outline: 2px solid transparent; outline-offset: 2px; @@ -3370,25 +3233,6 @@ input[type="search"]::-webkit-search-results-decoration { opacity: 0.5; } -.group:hover .group-hover\:w-full{ - width: 100%; -} - -.group:hover .group-hover\:-rotate-6{ - --tw-rotate: -6deg; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -.group:hover .group-hover\:scale-150{ - --tw-scale-x: 1.5; - --tw-scale-y: 1.5; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -.group:hover .group-hover\:opacity-100{ - opacity: 1; -} - .group:hover .group-hover\:\[animation-play-state\:paused\]{ animation-play-state: paused; } @@ -3624,26 +3468,14 @@ input[type="search"]::-webkit-search-results-decoration { grid-column: span 6 / span 6; } - .lg\:mb-0{ - margin-bottom: 0px; - } - .lg\:mt-32{ margin-top: 8rem; } - .lg\:block{ - display: block; - } - .lg\:flex{ display: flex; } - .lg\:h-5{ - height: 1.25rem; - } - .lg\:min-w-\[524px\]{ min-width: 524px; } @@ -3680,14 +3512,6 @@ input[type="search"]::-webkit-search-results-decoration { margin-bottom: calc(0px * var(--tw-space-y-reverse)); } - .lg\:border-white\/20{ - border-color: rgb(255 255 255 / 0.2); - } - - .lg\:bg-black\/10{ - background-color: rgb(0 0 0 / 0.1); - } - .lg\:p-24{ padding: 6rem; } @@ -3714,15 +3538,6 @@ input[type="search"]::-webkit-search-results-decoration { line-height: 1.5; letter-spacing: -0.017em; } - - .lg\:text-white{ - --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); - } - - .hover\:lg\:bg-black\/30:hover{ - background-color: rgb(0 0 0 / 0.3); - } } @media (min-width: 1280px){ diff --git a/pkg/nebula/components/auth/modal.templ b/pkg/nebula/components/auth/modal.templ index 2f69f3fa1..75faece7a 100644 --- a/pkg/nebula/components/auth/modal.templ +++ b/pkg/nebula/components/auth/modal.templ @@ -8,54 +8,14 @@ import ( ) templ Modal(c echo.Context) { -
- -
+ @styles.OpenModal("Account Registration", "Enter your account information below to create your account.") { + @ui.Breadcrumbs() + @forms.ProfileDetailsForm() + @styles.Spacer() +
+ + +
+ } } + diff --git a/pkg/nebula/components/auth/modal_templ.go b/pkg/nebula/components/auth/modal_templ.go index efd88f67a..23287c428 100644 --- a/pkg/nebula/components/auth/modal_templ.go +++ b/pkg/nebula/components/auth/modal_templ.go @@ -36,23 +36,45 @@ func Modal(c echo.Context) templ.Component { templ_7745c5c3_Var1 = templ.NopComponent } ctx = templ.ClearChildren(ctx) - _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("
") + }) + templ_7745c5c3_Err = styles.OpenModal("Account Registration", "Enter your account information below to create your account.").Render(templ.WithChildren(ctx, templ_7745c5c3_Var2), templ_7745c5c3_Buffer) if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } diff --git a/pkg/nebula/components/dash/page.templ b/pkg/nebula/components/dash/page.templ new file mode 100644 index 000000000..610f279ee --- /dev/null +++ b/pkg/nebula/components/dash/page.templ @@ -0,0 +1,20 @@ +package dash + +import ( + "github.com/onsonr/sonr/pkg/nebula/global/styles" + "github.com/onsonr/sonr/pkg/nebula/components/home/sections" + "github.com/onsonr/sonr/pkg/nebula/models" +) + +templ View(home *models.Home) { + @styles.LayoutNoBody("Sonr.ID", true) { + @sections.Header() + @sections.SectionHero(home.Hero) + @sections.Highlights() + @sections.Features() + @sections.Bento() + @sections.Lowlights() + @sections.CallToAction() + @sections.Footer() + } +} diff --git a/pkg/nebula/components/dash/page_templ.go b/pkg/nebula/components/dash/page_templ.go new file mode 100644 index 000000000..99892cd72 --- /dev/null +++ b/pkg/nebula/components/dash/page_templ.go @@ -0,0 +1,120 @@ +// Code generated by templ - DO NOT EDIT. + +// templ: version: v0.2.778 +package dash + +//lint:file-ignore SA4006 This context is only used if a nested component is present. + +import "github.com/a-h/templ" +import templruntime "github.com/a-h/templ/runtime" + +import ( + "github.com/onsonr/sonr/pkg/nebula/components/home/sections" + "github.com/onsonr/sonr/pkg/nebula/global/styles" + "github.com/onsonr/sonr/pkg/nebula/models" +) + +func View(home *models.Home) templ.Component { + return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) { + templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context + if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil { + return templ_7745c5c3_CtxErr + } + templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W) + if !templ_7745c5c3_IsBuffer { + defer func() { + templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer) + if templ_7745c5c3_Err == nil { + templ_7745c5c3_Err = templ_7745c5c3_BufErr + } + }() + } + ctx = templ.InitializeContext(ctx) + templ_7745c5c3_Var1 := templ.GetChildren(ctx) + if templ_7745c5c3_Var1 == nil { + templ_7745c5c3_Var1 = templ.NopComponent + } + ctx = templ.ClearChildren(ctx) + templ_7745c5c3_Var2 := templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) { + templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context + templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W) + if !templ_7745c5c3_IsBuffer { + defer func() { + templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer) + if templ_7745c5c3_Err == nil { + templ_7745c5c3_Err = templ_7745c5c3_BufErr + } + }() + } + ctx = templ.InitializeContext(ctx) + templ_7745c5c3_Err = sections.Header().Render(ctx, templ_7745c5c3_Buffer) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" ") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = sections.SectionHero(home.Hero).Render(ctx, templ_7745c5c3_Buffer) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" ") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = sections.Highlights().Render(ctx, templ_7745c5c3_Buffer) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" ") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = sections.Features().Render(ctx, templ_7745c5c3_Buffer) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" ") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = sections.Bento().Render(ctx, templ_7745c5c3_Buffer) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" ") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = sections.Lowlights().Render(ctx, templ_7745c5c3_Buffer) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" ") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = sections.CallToAction().Render(ctx, templ_7745c5c3_Buffer) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" ") + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + templ_7745c5c3_Err = sections.Footer().Render(ctx, templ_7745c5c3_Buffer) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + return templ_7745c5c3_Err + }) + templ_7745c5c3_Err = styles.LayoutNoBody("Sonr.ID", true).Render(templ.WithChildren(ctx, templ_7745c5c3_Var2), templ_7745c5c3_Buffer) + if templ_7745c5c3_Err != nil { + return templ_7745c5c3_Err + } + return templ_7745c5c3_Err + }) +} + +var _ = templruntime.GeneratedTemplate diff --git a/pkg/nebula/global/styles/layout.templ b/pkg/nebula/global/styles/layout.templ index 7d0addb56..f56428d0f 100644 --- a/pkg/nebula/global/styles/layout.templ +++ b/pkg/nebula/global/styles/layout.templ @@ -51,7 +51,7 @@ templ LayoutNoBody(title string, remote bool) { } -templ Modal(title, description string) { +templ OpenModal(title, description string) {