x/nebula
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(ui): migrate to webawesome dark theme by default

Browse Source
This commit is contained in:
Prad Nu
2026-01-05 19:33:54 -05:00
parent 30ed4e9ec7
commit 169d576694
4 changed files with 310 additions and 763 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
layouts/base.templ
View File

@@ -3,18 +3,12 @@ package layouts
// Base provides the HTML document structure for all pages // Base provides the HTML document structure for all pages
templ Base(title string) { templ Base(title string) {
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" class="wa-cloak"> <html lang="en" class="wa-cloak wa-theme-dark">
<head> <head>
<meta charset="utf-8"/> <meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/> <meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="color-scheme" content="light dark"/> <meta name="color-scheme" content="dark light"/>
<title>{ title } - Sonr Motr Wallet</title> <title>{ title } - Sonr Motr Wallet</title>
<script>
(function() {
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
if (prefersDark) document.documentElement.classList.add('wa-theme-dark');
})();
</script>
<script src="https://kit.webawesome.com/47c7425b971f443c.js" crossorigin="anonymous"></script> <script src="https://kit.webawesome.com/47c7425b971f443c.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/htmx.org@4.0.0-alpha5/dist/htmx.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/htmx.org@4.0.0-alpha5/dist/htmx.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/htmx-ext-preload@2.1.1/preload.js"></script> <script src="https://cdn.jsdelivr.net/npm/htmx-ext-preload@2.1.1/preload.js"></script>
@@ -37,11 +31,6 @@ templ Base(title string) {
</head> </head>
<body hx-ext="preload"> <body hx-ext="preload">
{ children... } { children... }
<script>
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
document.documentElement.classList.toggle('wa-theme-dark', e.matches);
});
</script>
</body> </body>
</html> </html>
} }

6
layouts/base_templ.go
View File

@@ -30,7 +30,7 @@ func Base(title string) templ.Component {
templ_7745c5c3_Var1 = templ.NopComponent templ_7745c5c3_Var1 = templ.NopComponent
} }
ctx = templ.ClearChildren(ctx) ctx = templ.ClearChildren(ctx)
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<!doctype html><html lang=\"en\" class=\"wa-cloak\"><head><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"><meta name=\"color-scheme\" content=\"light dark\"><title>") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<!doctype html><html lang=\"en\" class=\"wa-cloak wa-theme-dark\"><head><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"><meta name=\"color-scheme\" content=\"dark light\"><title>")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
@@ -43,7 +43,7 @@ func Base(title string) templ.Component {
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, " - Sonr Motr Wallet</title><script>\n\t\t\t\t(function() {\n\t\t\t\t\tconst prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;\n\t\t\t\t\tif (prefersDark) document.documentElement.classList.add('wa-theme-dark');\n\t\t\t\t})();\n\t\t\t</script><script src=\"https://kit.webawesome.com/47c7425b971f443c.js\" crossorigin=\"anonymous\"></script><script src=\"https://cdn.jsdelivr.net/npm/htmx.org@4.0.0-alpha5/dist/htmx.min.js\"></script><script src=\"https://cdn.jsdelivr.net/npm/htmx-ext-preload@2.1.1/preload.js\"></script><script src=\"https://cdn.jsdelivr.net/npm/d3@7\"></script><style>\n\t\t\t\t:root {\n\t\t\t\t\t--wa-color-primary: #17c2ff;\n\t\t\t\t\t--sidebar-width: 64px;\n\t\t\t\t}\n\t\t\t\thtml, body {\n\t\t\t\t\tmin-height: 100%;\n\t\t\t\t\tpadding: 0;\n\t\t\t\t\tmargin: 0;\n\t\t\t\t\tcursor: default;\n\t\t\t\t}\n\t\t\t\twa-button, a, [onclick], [hx-get], [hx-post] {\n\t\t\t\t\tcursor: pointer;\n\t\t\t\t}\n\t\t\t</style></head><body hx-ext=\"preload\">") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, " - Sonr Motr Wallet</title><script src=\"https://kit.webawesome.com/47c7425b971f443c.js\" crossorigin=\"anonymous\"></script><script src=\"https://cdn.jsdelivr.net/npm/htmx.org@4.0.0-alpha5/dist/htmx.min.js\"></script><script src=\"https://cdn.jsdelivr.net/npm/htmx-ext-preload@2.1.1/preload.js\"></script><script src=\"https://cdn.jsdelivr.net/npm/d3@7\"></script><style>\n\t\t\t\t:root {\n\t\t\t\t\t--wa-color-primary: #17c2ff;\n\t\t\t\t\t--sidebar-width: 64px;\n\t\t\t\t}\n\t\t\t\thtml, body {\n\t\t\t\t\tmin-height: 100%;\n\t\t\t\t\tpadding: 0;\n\t\t\t\t\tmargin: 0;\n\t\t\t\t\tcursor: default;\n\t\t\t\t}\n\t\t\t\twa-button, a, [onclick], [hx-get], [hx-post] {\n\t\t\t\t\tcursor: pointer;\n\t\t\t\t}\n\t\t\t</style></head><body hx-ext=\"preload\">")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
@@ -51,7 +51,7 @@ func Base(title string) templ.Component {
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "<script>\n\t\t\t\twindow.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {\n\t\t\t\t\tdocument.documentElement.classList.toggle('wa-theme-dark', e.matches);\n\t\t\t\t});\n\t\t\t</script></body></html>") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "</body></html>")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }

112
views/dashboard.templ
View File

@@ -372,6 +372,7 @@ templ AccountCard(initials string, name string, address string, color string, ac
} }
templ TransactionsPanel(transactions []Transaction) { templ TransactionsPanel(transactions []Transaction) {
@components.TxStyles()
<header style="margin-bottom: var(--wa-space-l);"> <header style="margin-bottom: var(--wa-space-l);">
<div class="wa-flank"> <div class="wa-flank">
<div class="wa-stack wa-gap-2xs"> <div class="wa-stack wa-gap-2xs">
@@ -384,32 +385,13 @@ templ TransactionsPanel(transactions []Transaction) {
</wa-button> </wa-button>
</div> </div>
</header> </header>
<div class="wa-grid stats-grid"> @components.TxStatsGrid(components.DefaultTxStats())
@StatCard("Total Received", "+$15,420.50", "42 transactions", "success")
@StatCard("Total Sent", "-$8,234.18", "28 transactions", "danger")
@StatCard("Swaps", "12", "$4,892.00 volume", "neutral")
@StatCard("Gas Spent", "$127.45", "All time", "neutral")
</div>
<wa-card> <wa-card>
<div class="filter-bar"> @components.TxFilterBar(components.DefaultTxFilter())
<wa-select placeholder="All Types" size="small" style="min-width: 140px;" clearable> for _, group := range components.DefaultTxGroups() {
<wa-option value="send">Send</wa-option> @components.TxDateGroupComponent(group)
<wa-option value="receive">Receive</wa-option> }
<wa-option value="swap">Swap</wa-option> @components.TxPagination(1, 82, 10)
</wa-select>
<wa-select placeholder="All Assets" size="small" style="min-width: 140px;" clearable>
<wa-option value="eth">ETH</wa-option>
<wa-option value="snr">SNR</wa-option>
<wa-option value="usdc">USDC</wa-option>
</wa-select>
<div style="flex: 1;"></div>
<wa-input placeholder="Search by hash or address..." size="small" style="width: 240px;">
<wa-icon slot="prefix" name="magnifying-glass"></wa-icon>
</wa-input>
</div>
@TransactionDateGroup("Today", transactions[:1])
@TransactionDateGroup("Yesterday", transactions[1:])
@Pagination(1, 82, 10)
</wa-card> </wa-card>
} }
@@ -423,86 +405,6 @@ templ StatCard(label string, value string, subtitle string, variant string) {
</wa-card> </wa-card>
} }
templ TransactionDateGroup(date string, transactions []Transaction) {
<div class="date-group">
<div class="date-group-header">
<h3>{ date }</h3>
<span class="tx-count">{ lenStr(transactions) } transaction(s)</span>
</div>
for _, tx := range transactions {
@TransactionRow(tx)
}
</div>
}
func lenStr(txs []Transaction) string {
return string(rune('0' + len(txs)))
}
templ TransactionRow(tx Transaction) {
<div class="tx-row">
<div class={ "tx-icon", tx.Type }>
if tx.Type == "receive" {
<wa-icon name="arrow-down"></wa-icon>
} else if tx.Type == "send" {
<wa-icon name="arrow-up"></wa-icon>
} else {
<wa-icon name="arrow-right-arrow-left"></wa-icon>
}
</div>
<div class="tx-details">
<div class="tx-type-label">
if tx.Type == "receive" {
Received { tx.Asset }
} else if tx.Type == "send" {
Sent { tx.Asset }
} else {
Swapped { tx.Asset }
}
</div>
<div class="tx-address">{ tx.Address }</div>
</div>
<div class={ "tx-amount", templ.KV("positive", tx.Positive), templ.KV("negative", !tx.Positive) }>
<div class="value">{ tx.Amount }</div>
<div class="usd">{ tx.USD }</div>
</div>
<div class="tx-time">
<div class="time">{ tx.Time }</div>
<wa-badge variant="success" size="small">Confirmed</wa-badge>
</div>
<div class="tx-actions">
<wa-tooltip content="View on Explorer">
<wa-icon-button name="arrow-up-right-from-square" label="Explorer"></wa-icon-button>
</wa-tooltip>
<wa-copy-button value={ tx.Hash } copy-label="Copy hash"></wa-copy-button>
</div>
</div>
}
templ Pagination(current int, total int, perPage int) {
<div class="pagination">
<div class="pagination-info">
Showing <strong>1-{ string(rune('0' + perPage)) }</strong> of <strong>{ string(rune('0' + total/10)) }{ string(rune('0' + total%10)) }</strong> transactions
</div>
<div class="pagination-controls">
<wa-select value="10" size="small" style="width: 100px;">
<wa-option value="10">10 / page</wa-option>
<wa-option value="25">25 / page</wa-option>
<wa-option value="50">50 / page</wa-option>
</wa-select>
<div class="page-numbers">
<button class="page-btn" disabled><wa-icon name="chevron-left"></wa-icon></button>
<button class="page-btn active">1</button>
<button class="page-btn">2</button>
<button class="page-btn">3</button>
<span style="padding: 0 var(--wa-space-xs); color: var(--wa-color-neutral-400);">...</span>
<button class="page-btn">9</button>
<button class="page-btn"><wa-icon name="chevron-right"></wa-icon></button>
</div>
</div>
</div>
}
templ TokensPanel(tokens []Token) { templ TokensPanel(tokens []Token) {
<header style="margin-bottom: var(--wa-space-l);"> <header style="margin-bottom: var(--wa-space-l);">
<div class="wa-flank"> <div class="wa-flank">

940
views/dashboard_templ.go
View File

File diff suppressed because one or more lines are too long