Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/51 dark theme #52

Merged
merged 13 commits into from
Dec 5, 2024
Merged

Feature/51 dark theme #52

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
c6dc8e6
added color schemas + update for dark theme
RabbITCybErSeC Sep 6, 2024
dc6b797
wip on darktheme
RabbITCybErSeC Sep 6, 2024
7fdce0b
wip on darktheme
RabbITCybErSeC Sep 6, 2024
5beb27f
more dark theme additions
RabbITCybErSeC Sep 6, 2024
ebfd199
added dark theme to tags
RabbITCybErSeC Sep 6, 2024
e2d7b09
added more dark themes
RabbITCybErSeC Sep 10, 2024
0d4a255
updated the detailed view with more dark theme
RabbITCybErSeC Sep 11, 2024
7bc344c
wip on dark theme
RabbITCybErSeC Sep 11, 2024
713df8a
version fix for air as we + minor color update
RabbITCybErSeC Sep 25, 2024
0956a1d
button
RabbITCybErSeC Sep 25, 2024
099e857
improve strcuture + settings coloring
RabbITCybErSeC Dec 5, 2024
c4b169c
darkcard fix
RabbITCybErSeC Dec 5, 2024
e5b0c2a
finalising darktheme v1
RabbITCybErSeC Dec 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions Makefile
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ dev:
dev-server:
# run air to detect any go file changes to re-build and re-run the server.

@go run github.com/air-verse/air@latest \
@go run github.com/air-verse/air@v1.52.3 \
--build.cmd "templ generate && go build -ldflags \"-X main.Version=$(VERSION)\" --tags dev -o tmp/bin/main ./server/" --build.bin "tmp/bin/main" --build.delay "100" \
--build.exclude_dir "node_modules" \
--build.exclude_regex ".*_templ.go" \
Expand Down Expand Up @@ -85,4 +85,4 @@ run: docker
test: build-templ
go test ./... -v

.DEFAULT_GOAL := dev
.DEFAULT_GOAL := dev
10 changes: 10 additions & 0 deletions tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,16 @@ module.exports = {
'c-blue-deep': colors.blue[600],
'c-blue-deep-extra': colors.blue[700],
'c-blue-light-backgroud': colors.blue[50],
'c-dark-slate-background': colors.slate[950],
'c-dark-slate-header-background': colors.slate[800],
'c-dark-slate-navbar-background': colors.slate[800],
'c-dark-slate-card': colors.slate[800],
'c-dark-slate-border': colors.slate[600],
'c-dark-slate-text': colors.slate[200],
'c-dark-slate-text-dark': colors.slate[600],
'c-dark-slate-documentation-background': colors.slate[900],
'c-dark-background': colors.slate[600],
'c-dark-blue-background': colors.blue[950],
}
},
},
Expand Down
4 changes: 2 additions & 2 deletions views/components/cards/card.templ
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ package cards

import "soarca-gui/utils"

const cardBaseCSS = "p-2 m-2 rounded-lg bg-white border-gray-100 shadow-md dark:bg-gray-800"
const cardBaseCSS = "p-2 m-2 rounded-lg bg-white border-gray-100 shadow-md dark:bg-c-dark-slate-navbar-background dark:border-2 dark:border-c-dark-slate-border"

templ Card(opts ...func(*templ.Attributes)) {
<div { utils.CreateClassAttrs(cardBaseCSS, opts...)... }>
Expand All @@ -12,7 +12,7 @@ templ Card(opts ...func(*templ.Attributes)) {

templ UnkownCard() {
@Card(utils.Class("relative")) {
<div class="absolute inset-0 rounded-lg bg-white bg-opacity-60 z-10 flex items-center justify-center">
<div class="absolute inset-0 rounded-lg bg-white dark:bg-c-dark-slate-navbar-background dark:bg-opacity-60 bg-opacity-60 z-10 flex items-center justify-center">
<div class="flex items-center">
<svg class="animate-spin h-5 w-5 text-gray-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
Expand Down
22 changes: 11 additions & 11 deletions views/components/cards/reporting_card.templ
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,13 +31,13 @@ var reportingCards = []ReportingCardData{
templ executedPlaybooksCard(data ReportingCardData) {
@Card() {
<div class="col-span-12 sm:col-span-6 md:col-span-3">
<div class="flex flex-row bg-white shadow-sm rounded p-4">
<div class="flex flex-row bg-white shadow-sm rounded p-4 dark:bg-c-dark-slate-card">
<div class="flex items-center justify-center flex-shrink-0 h-12 w-12 rounded-xl bg-blue-100 text-blue-600">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-book-open"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path></svg>
</div>
<div class="flex flex-col flex-grow ml-4">
<div class="text-sm text-gray-500">Executed Playbooks</div>
<div class="font-bold text-lg">{ fmt.Sprint(data.Value) }</div>
<div class="text-sm text-gray-500 dark:text-c-dark-slate-text">Executed Playbooks</div>
<div class="font-bold text-lg dark:text-white">{ fmt.Sprint(data.Value) }</div>
</div>
</div>
</div>
Expand All @@ -47,13 +47,13 @@ templ executedPlaybooksCard(data ReportingCardData) {
templ failedPlaybooksCard(data ReportingCardData) {
@Card() {
<div class="col-span-12 sm:col-span-6 md:col-span-3">
<div class="flex flex-row bg-white shadow-sm rounded p-4">
<div class="flex flex-row bg-white shadow-sm rounded p-4 dark:bg-c-dark-slate-card">
<div class="flex items-center justify-center flex-shrink-0 h-12 w-12 rounded-xl bg-red-100 text-red-600">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-triangle"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
</div>
<div class="flex flex-col flex-grow ml-4">
<div class="text-sm text-gray-500">Failed Playbooks</div>
<div class="font-bold text-lg">{ fmt.Sprint(data.Value) }</div>
<div class="text-sm text-gray-500 dark:text-dark-slate-text">Failed Playbooks</div>
<div class="font-bold text-lg dark:text-white">{ fmt.Sprint(data.Value) }</div>
</div>
</div>
</div>
Expand All @@ -63,13 +63,13 @@ templ failedPlaybooksCard(data ReportingCardData) {
templ ongoingPlaybooksCard(data ReportingCardData) {
@Card() {
<div class="col-span-12 sm:col-span-6 md:col-span-3">
<div class="flex flex-row bg-white shadow-sm rounded p-4">
<div class="flex flex-row bg-white shadow-sm rounded p-4 dark:bg-c-dark-slate-card">
<div class="flex items-center justify-center flex-shrink-0 h-12 w-12 rounded-xl bg-orange-100 text-orange-600">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-play"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
</div>
<div class="flex flex-col flex-grow ml-4">
<div class="text-sm text-gray-500">Ongoing Playbooks</div>
<div class="font-bold text-lg">{ fmt.Sprint(data.Value) }</div>
<div class="text-sm text-gray-500 dark:text-c-dark-slate-text">Ongoing Playbooks</div>
<div class="font-bold text-lg dark:text-white">{ fmt.Sprint(data.Value) }</div>
</div>
</div>
</div>
Expand All @@ -79,13 +79,13 @@ templ ongoingPlaybooksCard(data ReportingCardData) {
templ reportingCardUnkown() {
@UnkownCard() {
<div class="col-span-12 sm:col-span-6 md:col-span-3">
<div class="flex flex-row bg-white shadow-sm rounded-lg p-4">
<div class="flex flex-row bg-white dark:bg-c-dark-slate-card shadow-sm rounded-lg p-4">
<div class="flex items-center justify-center flex-shrink-0 h-12 w-12 rounded-xl bg-red-100 text-red-600">
@icons.NewIcon("x").InsertIcon("")
</div>
<div class="flex flex-col max-sm:hidden flex-grow ml-4">
<div class="text-sm text-gray-500">Could not load</div>
<div class="font-bold text-lg">None</div>
<div class="font-bold text-lg dark:text-white">None</div>
</div>
</div>
</div>
Expand Down
47 changes: 23 additions & 24 deletions views/components/cards/settings_cards.templ
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,51 +1,50 @@
package cards

templ AccountSettingsCard() {
<div class="col-span-8 overflow-hidden rounded-xl sm:bg-gray-50 sm:px-8 sm:shadow">
<div class="col-span-8 overflow-hidden rounded-xl sm:bg-gray-50 sm:px-8 sm:shadow dark:bg-c-dark-slate-card dark:sm:bg-c-dark-slate-documentation-background dark:border dark:border-c-dark-slate-border">
<div class="pt-4">
<h1 class="py-2 text-2xl font-semibold">Account settings</h1>
<!-- <p class="font- text-slate-600">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p> -->
<h1 class="py-2 text-2xl font-semibold text-black dark:text-c-dark-slate-text">Account settings</h1>
</div>
<hr class="mt-4 mb-8"/>
<p class="py-2 text-xl font-semibold">Email Address</p>
<hr class="mt-4 mb-8 dark:border-c-dark-slate-border"/>
<p class="py-2 text-xl font-semibold text-black dark:text-c-dark-slate-text">Email Address</p>
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between">
<p class="text-gray-600">Your email address is <strong></strong></p>
<button class="inline-flex text-sm font-semibold text-blue-600 underline decoration-2">Change</button>
<p class="text-gray-600 dark:text-c-dark-slate-text-dark">Your email address is <strong></strong></p>
<button class="inline-flex text-sm font-semibold text-blue-600 underline decoration-2 dark:text-blue-400">Change</button>
</div>
<hr class="mt-4 mb-8"/>
<p class="py-2 text-xl font-semibold">Password</p>
<hr class="mt-4 mb-8 dark:border-c-dark-slate-border"/>
<p class="py-2 text-xl font-semibold text-black dark:text-c-dark-slate-text">Password</p>
<div class="flex items-center">
<div class="flex flex-col space-y-2 sm:flex-row sm:space-y-0 sm:space-x-3">
<label for="login-password">
<span class="text-sm text-gray-500">Current Password</span>
<div class="relative flex overflow-hidden rounded-md border-2 transition focus-within:border-blue-600">
<input type="password" id="login-password" class="w-full flex-shrink appearance-none border-gray-300 bg-white py-2 px-4 text-base text-gray-700 placeholder-gray-400 focus:outline-none" placeholder="***********"/>
<span class="text-sm text-gray-500 dark:text-c-dark-slate-text-dark">Current Password</span>
<div class="relative flex overflow-hidden rounded-md border-2 transition focus-within:border-blue-600 dark:bg-c-dark-slate-background dark:border-c-dark-slate-border">
<input type="password" id="login-password" class="w-full flex-shrink appearance-none border-gray-300 bg-white py-2 px-4 text-base text-gray-700 placeholder-gray-400 focus:outline-none dark:bg-c-dark-slate-card dark:text-c-dark-slate-text dark:border-c-dark-slate-border dark:placeholder-c-dark-slate-text-dark"/>
</div>
</label>
<label for="login-password">
<span class="text-sm text-gray-500">New Password</span>
<div class="relative flex overflow-hidden rounded-md border-2 transition focus-within:border-blue-600">
<input type="password" id="login-password" class="w-full flex-shrink appearance-none border-gray-300 bg-white py-2 px-4 text-base text-gray-700 placeholder-gray-400 focus:outline-none" placeholder="***********"/>
<label for="new-password">
<span class="text-sm text-gray-500 dark:text-c-dark-slate-text-dark">New Password</span>
<div class="relative flex overflow-hidden rounded-md border-2 transition focus-within:border-blue-600 dark:bg-c-dark-slate-background dark:border-c-dark-slate-border">
<input type="password" id="new-password" class="w-full flex-shrink appearance-none border-gray-300 bg-white py-2 px-4 text-base text-gray-700 placeholder-gray-400 focus:outline-none dark:bg-c-dark-slate-card dark:text-c-dark-slate-text dark:border-c-dark-slate-border dark:placeholder-c-dark-slate-text-dark" placeholder="***********"/>
</div>
</label>
</div>
<svg xmlns="http://www.w3.org/2000/svg" class="mt-5 ml-2 h-6 w-6 cursor-pointer text-sm font-semibold text-gray-600 underline decoration-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<svg xmlns="http://www.w3.org/2000/svg" class="mt-5 ml-2 h-6 w-6 cursor-pointer text-sm font-semibold text-gray-600 underline decoration-2 dark:text-c-dark-slate-text-dark" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"></path>
</svg>
</div>
<p class="mt-2">Can't remember your current password. <a class="text-sm font-semibold text-blue-600 underline decoration-2" href="#">Recover Account</a></p>
<button class="mt-4 rounded-lg bg-blue-600 px-4 py-2 text-white">Save Password</button>
<hr class="mt-4 mb-8"/>
<p class="mt-2 text-gray-600 dark:text-c-dark-slate-text-dark">Can't remember your current password. <a class="text-sm font-semibold text-blue-600 underline decoration-2 dark:text-blue-400" href="#">Recover Account</a></p>
<button class="mt-4 rounded-lg bg-blue-600 px-4 py-2 text-white dark:bg-blue-700 dark:hover:bg-blue-600">Save Password</button>
<hr class="mt-4 mb-8 dark:border-c-dark-slate-border"/>
<div class="mb-10">
<p class="py-2 text-xl font-semibold">Delete Account</p>
<p class="inline-flex items-center rounded-full bg-rose-100 px-4 py-1 text-rose-600">
<p class="py-2 text-xl font-semibold text-black dark:text-c-dark-slate-text">Delete Account</p>
<p class="inline-flex items-center rounded-full bg-rose-100 px-4 py-1 text-rose-600 dark:bg-rose-900/20 dark:text-rose-400">
<svg xmlns="http://www.w3.org/2000/svg" class="mr-2 h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
</svg>
Proceed with caution
</p>
<p class="mt-2">Make sure you have taken backup of your account in case you ever need to get access to your data. We will completely wipe your data. There is no way to access your account after this action.</p>
<button class="ml-auto text-sm font-semibold text-rose-600 underline decoration-2">Continue with deletion</button>
<p class="mt-2 text-gray-600 dark:text-c-dark-slate-text-dark">Make sure you have taken backup of your account in case you ever need to get access to your data. We will completely wipe your data. There is no way to access your account after this action.</p>
<button class="ml-auto text-sm font-semibold text-rose-600 underline decoration-2 dark:text-rose-400">Continue with deletion</button>
</div>
</div>
}
45 changes: 29 additions & 16 deletions views/components/headbar/headbar.templ
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,23 +31,22 @@ templ themeButton() {
<button
id="theme-toggle"
@click="darkMode = !darkMode"
:class="darkMode ? 'bg-blue-600' : 'bg-neutral-200'"
class="relative inline-flex h-6 py-0.5 focus:outline-none rounded-full w-10"
:class="darkMode ? 'bg-c-dark-slate-text-dark' : 'bg-neutral-200'"
class="relative inline-flex h-6 w-10 rounded-full py-0.5 focus:outline-none"
x-cloak
>
<span
:class="darkMode ? 'translate-x-[18px]' : 'translate-x-0.5'"
class="w-5 h-5 duration-200 ease-in-out bg-white rounded-full shadow-md"
class="h-5 w-5 rounded-full bg-white shadow-md duration-200 ease-in-out"
>
<svg class="fill-yellow-500 hidden dark:block absolute inset-0 w-3 h-3 m-auto" fill="currentColor" viewBox="0 0 20 20">
<svg class="absolute inset-0 m-auto hidden h-3 w-3 fill-yellow-500 dark:block" fill="currentColor" viewBox="0 0 20 20">
<path
d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
fill-rule="evenodd"
clip-rule="evenodd"
></path>
</svg>
<!-- Light Mode SVG -->
<svg class="fill-violet-700 block dark:hidden absolute inset-0 w-3 h-3 m-auto" fill="currentColor" viewBox="0 0 20 20">
<svg class="absolute inset-0 m-auto block h-3 w-3 fill-violet-700 dark:hidden" fill="currentColor" viewBox="0 0 20 20">
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
</svg>
</span>
Expand All @@ -56,35 +55,49 @@ templ themeButton() {
}

templ DesktopHeaderBar() {
<header class="w-full items-center bg-slate-50 py-2 px-6 hidden sm:flex">
<header class="hidden w-full items-center bg-slate-50 px-6 py-2 dark:bg-c-dark-slate-header-background sm:flex">
@indicators.HealthIndicator(indicators.HealthIndicatorData{Loaded: false})
@themeButton()
<div class="w-1/2"></div>
<div x-data="{ isOpen: false }" class="relative w-1/2 flex justify-end">
<div x-data="{ isOpen: false }" class="relative flex w-1/2 justify-end">
<button
@click="isOpen = !isOpen"
class="relative z-10 w-12 h-12 rounded-full overflow-hidden border-4 border-gray-400 hover:border-blue-600 focus:border-blue-600 focus:outline-none"
class="relative z-10 h-12 w-12 overflow-hidden rounded-full border-4 border-gray-400 hover:border-blue-600 hover:bg-blue-50 focus:border-blue-600 focus:outline-none dark:border-c-dark-slate-border dark:hover:border-c-blue-deep dark:hover:bg-slate-700"
>
<img src="" alt="Profile image"/>
<img src="" alt="Profile image" class="dark:filter dark:brightness-75"/>
</button>
<button x-show="isOpen" @click="isOpen = false" class="h-full w-full fixed inset-0 cursor-default"></button>
<div x-show="isOpen" class="absolute w-32 bg-white rounded-lg shadow-lg py-2 mt-16 z-50">
<button x-show="isOpen" @click="isOpen = false" class="fixed inset-0 h-full w-full cursor-default"></button>
<div
x-show="isOpen"
class="absolute z-50 mt-16 w-32 rounded-lg bg-white py-2 shadow-lg dark:bg-c-dark-slate-card dark:text-c-dark-slate-text dark:border dark:border-c-dark-slate-border"
>
{ children... }
</div>
</div>
</header>
}

templ MobileHeaderBar(homePageLink string) {
<header x-data="{ isOpen: false }" class="w-full bg-blue-600 bg-sidebar py-5 px-6 sm:hidden">
<header x-data="{ isOpen: false }" class="bg-sidebar w-full bg-blue-600 dark:bg-c-dark-blue-background px-6 py-5 sm:hidden">
<div class="flex items-center justify-between">
<a href={ templ.URL(homePageLink) } class="text-white text-3xl font-semibold uppercase hover:text-gray-300">SOARCA</a>
<button @click="isOpen = !isOpen" class="text-white text-3xl focus:outline-none">
<a
href={ templ.URL(homePageLink) }
class="text-3xl font-semibold uppercase text-white hover:text-gray-300 dark:hover:text-c-dark-slate-text"
>
SOARCA
</a>
<button
@click="isOpen = !isOpen"
class="text-3xl text-white focus:outline-none"
>
@icons.NewIcon("more-horizontal").InsertIcon("mr-3", utils.WithXshow("!isOpen"))
@icons.NewIcon("x").InsertIcon("mr-3", utils.WithXshow("isOpen"))
</button>
</div>
<nav :class="isOpen ? 'flex': 'hidden'" class="flex flex-col pt-4">
<nav
:class="isOpen ? 'flex': 'hidden'"
class="flex flex-col pt-4 dark:bg-c-dark-blue-background"
>
{ children... }
</nav>
</header>
Expand Down
10 changes: 5 additions & 5 deletions views/components/indicators/tags.templ
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,35 +14,35 @@ templ Tag(opts ...func(*templ.Attributes)) {
}

templ TagSucces() {
@Tag(utils.Class("text-emerald-500 bg-emerald-100/60 dark:bg-emerald-800")) {
@Tag(utils.Class("text-emerald-500 bg-emerald-100/60 dark:text-c-dark-slate-text dark:bg-emerald-800")) {
@icons.NewIcon("check").SetSize("12").InsertIcon("")
{ children... }
}
}

templ TagFailed() {
@Tag(utils.Class("text-red-500 rounded-full gap-x-2 bg-red-100/60 dark:bg-red-800")) {
@Tag(utils.Class("text-red-500 rounded-full gap-x-2 bg-red-100/60 dark:text-c-dark-slate-text dark:bg-red-800")) {
@icons.NewIcon("x").SetSize("12").InsertIcon("")
{ children... }
}
}

templ TagOngoing() {
@Tag(utils.Class("text-orange-500 rounded-full gap-x-2 bg-orange-100/60 dark:bg-orange-800")) {
@Tag(utils.Class("text-orange-500 rounded-full gap-x-2 bg-orange-100/60 dark:text-c-dark-slate-text dark:bg-orange-800")) {
@icons.NewIcon("loader").SetSize("12").InsertIcon("animate-spin ")
{ children... }
}
}

templ TagServerSideError() {
@Tag(utils.Class("text-red-500 rounded-full gap-x-2 bg-red-100/60 dark:bg-red-800")) {
@Tag(utils.Class("text-red-500 rounded-full gap-x-2 bg-red-100/60 dark:text-c-dark-slate-text dark:bg-red-800")) {
@icons.NewIcon("server").SetSize("12").InsertIcon("")
{ children... }
}
}

templ TagClientSideError() {
@Tag(utils.Class("text-red-500 rounded-full gap-x-2 bg-red-100/60 dark:bg-red-800")) {
@Tag(utils.Class("text-red-500 rounded-full gap-x-2 bg-red-100/60 dark:text-c-dark-slate-text dark:bg-red-800")) {
@icons.NewIcon("monitor").SetSize("12").InsertIcon("")
{ children... }
}
Expand Down
Loading
Loading