refactor(web): move icons to icons pkg

ItsNotGoodName · Sep 14, 2023 · a719205 · a719205
1 parent 15f686c
commit a719205
Show file tree

Hide file tree

Showing 15 changed files with 309 additions and 65 deletions.
diff --git a/web/components/attachment_card.templ b/web/components/attachment_card.templ
@@ -31,6 +31,6 @@ templ AttachmentCard(props AttachmentCardProps) {
         </div>
       </div>
     </div>
-	</div>
+  </div>
 }
 
diff --git a/web/components/base.templ b/web/components/base.templ
@@ -1,27 +1,27 @@
 package components
 
 templ Base(head, body templ.Component, csrfToken string) {
-	<!DOCTYPE html>
-	<html lang="en-US">
-		<head>
-			<meta charset="UTF-8"/>
-			<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-			<title>SMTPBridge</title>
-			<meta name="description" content="Bridge email to other messaging services."/>
-			<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"/>
-			<link rel="icon" type="image/svg+xml" href="/favicon.svg"/>
-			<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"/>
-			<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"/>
-			<link rel="manifest" href="/site.webmanifest"/>
-			<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"/>
-			<meta name="msapplication-TileColor" content="#da532c"/>
-			<meta name="theme-color" content="#ffffff"/>
+  <!DOCTYPE html>
+  <html lang="en-US">
+    <head>
+      <meta charset="UTF-8"/>
+      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+      <title>SMTPBridge</title>
+      <meta name="description" content="Bridge email to other messaging services."/>
+      <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"/>
+      <link rel="icon" type="image/svg+xml" href="/favicon.svg"/>
+      <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"/>
+      <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"/>
+      <link rel="manifest" href="/site.webmanifest"/>
+      <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"/>
+      <meta name="msapplication-TileColor" content="#da532c"/>
+      <meta name="theme-color" content="#ffffff"/>
       <meta name="gorilla.csrf.Token" content={ csrfToken } />
-			{! head }
-		</head>
-		<body hx-boost="true">
-			{! body }
-		</body>
-	</html>
+      {! head }
+    </head>
+    <body hx-boost="true">
+      {! body }
+    </body>
+  </html>
 }
 
diff --git a/web/components/flash.templ b/web/components/flash.templ
@@ -2,6 +2,7 @@ package components
 
 import (
   "github.com/ItsNotGoodName/smtpbridge/web/routes"
+	"github.com/ItsNotGoodName/smtpbridge/web/icons"
 )
 
 type FlashType int
@@ -17,20 +18,20 @@ type FlashProps struct {
 }
 
 templ Flash(t FlashType, c templ.Component) {
-	<div lass="flash">
+  <div lass="flash">
     switch t {
     case FlashTypeSuccess:
       <div class="alert alert-success">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 stroke-current" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+        @icons.CheckboxCircle("h-6 w-6")
         {! c }
       </div>
     default:
-      <div class="alert alert-error">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 stroke-current" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
-        {! c }
-      </div>
+    <div class="alert alert-error">
+      @icons.CloseCircle("h-6 w-6")
+      {! c }
+    </div>
     }
-	</div>
+  </div>
 }
 
 templ FlashMessage(message string) {

diff --git a/web/components/flash_templ.go b/web/components/flash_templ.go
diff --git a/web/components/header.templ b/web/components/header.templ
@@ -10,31 +10,28 @@ templ Header(m meta.Meta) {
   <div class="navbar bg-base-100 border-b-base-200 sticky top-0 z-10 border-b">
     <div class="flex-none">
       <label for="my-drawer-2" class="drawer-button btn btn-square btn-ghost lg:hidden">
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
-          class="inline-block h-5 w-5 stroke-current">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
-        </svg>
+        @icons.Menu("h-5 w-5 inline-block")
       </label>
     </div>
     <div class="flex-1">
       <a class="btn btn-ghost text-xl normal-case" href={ routes.Index().URL() }>SMTPBridge</a>
     </div>
     if !m.Anonymous {
-    <div class="flex-none">
-      <details class="dropdown dropdown-end">
-        <summary class="btn btn-square btn-ghost">
-          @icons.More("h-5 w-5")
-        </summary>
-        <ul class="menu dropdown-content bg-base-100 rounded-box z-50 w-52 p-2 shadow-lg">
-          <li>
-            <a href="#" hx-delete={ routes.Logout().URLString() }>
-              @icons.LogoutBoxR("h-4 w-4") 
-              Logout
-            </a>
-          </li>
-        </ul>
-      </details>
-    </div>
+      <div class="flex-none">
+        <details class="dropdown dropdown-end">
+          <summary class="btn btn-square btn-ghost">
+            @icons.More("h-5 w-5")
+          </summary>
+          <ul class="menu dropdown-content bg-base-100 rounded-box z-50 w-52 p-2 shadow-lg">
+            <li>
+              <a href="#" hx-delete={ routes.Logout().URLString() }>
+                @icons.LogoutBoxR("h-4 w-4") 
+                Logout
+              </a>
+            </li>
+          </ul>
+        </details>
+      </div>
     }
   </div>
 }

diff --git a/web/components/header_templ.go b/web/components/header_templ.go
diff --git a/web/components/paginate_header.templ b/web/components/paginate_header.templ
@@ -38,9 +38,9 @@ templ PaginateHeader(props PaginateHeaderProps) {
           ASC
         </a>
       } else {
-      <a class="btn btn-sm btn-outline" href={ props.Route.URLQuery(helpers.Query(props.Query, "ascending", "1")) }>
-        DESC
-      </a>
+        <a class="btn btn-sm btn-outline" href={ props.Route.URLQuery(helpers.Query(props.Query, "ascending", "1")) }>
+          DESC
+        </a>
       }
     </div>
     <div class="ml-auto flex flex-row items-center justify-between gap-4">

diff --git a/web/components/recent_envelope_list.templ b/web/components/recent_envelope_list.templ
@@ -6,8 +6,8 @@ import (
   "github.com/ItsNotGoodName/smtpbridge/web/helpers"
   "github.com/ItsNotGoodName/smtpbridge/web/routes"
   "github.com/ItsNotGoodName/smtpbridge/internal/models"
-	"github.com/ItsNotGoodName/smtpbridge/web/meta"
-	"github.com/ItsNotGoodName/smtpbridge/web/icons"
+  "github.com/ItsNotGoodName/smtpbridge/web/meta"
+  "github.com/ItsNotGoodName/smtpbridge/web/icons"
 )
 
 type RecentEnvelopeListProps struct {

diff --git a/web/components/rule_form.templ b/web/components/rule_form.templ
@@ -4,7 +4,8 @@ import (
   "strconv"
 
   "github.com/ItsNotGoodName/smtpbridge/web/routes"
-	"github.com/ItsNotGoodName/smtpbridge/internal/models"
+  "github.com/ItsNotGoodName/smtpbridge/internal/models"
+	"github.com/ItsNotGoodName/smtpbridge/web/icons"
 )
 
 type RuleFormCreateProps struct {
@@ -109,7 +110,7 @@ templ RuleFormUpdate(props RuleFormUpdateProps) {
     </fieldset>
     if props.Rule.Internal {
       <div class="alert alert-warning">
-        <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>
+        @icons.Alert("h-6 w-6")
         <span>Cannot be edited because it is an internal rule.</span>
       </div>
     }

diff --git a/web/components/rule_form_templ.go b/web/components/rule_form_templ.go
diff --git a/web/components/table_order_th.templ b/web/components/table_order_th.templ
@@ -6,10 +6,10 @@ import "github.com/ItsNotGoodName/smtpbridge/web/helpers"
 import "net/url"
 
 type TableOrderTHProps struct {
-  Query         url.Values
-	Ascending     bool
-	Order         string
-  Field         string
+  Query url.Values
+  Ascending bool
+  Order string
+  Field string
 }
 
 func tableOrderTHAscending(enable, ascending bool) string {

diff --git a/web/icons/icons.templ b/web/icons/icons.templ
@@ -93,3 +93,27 @@ templ Download(class any) {
   <svg class={ class, "fill-current" } xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 19H21V21H3V19ZM13 13.1716L19.0711 7.1005L20.4853 8.51472L12 17L3.51472 8.51472L4.92893 7.1005L11 13.1716V2H13V13.1716Z"></path></svg>
 }
 
+// https://remixicon.com/icon/checkbox-circle-line
+templ CheckboxCircle(class any) {
+  <svg class={ class, "fill-current" } xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11.0026 16L6.75999 11.7574L8.17421 10.3431L11.0026 13.1716L16.6595 7.51472L18.0737 8.92893L11.0026 16Z"></path></svg>
+}
+
+// https://remixicon.com/icon/close-circle-line
+templ CloseCircle(class any) {
+  <svg class={ class, "fill-current" } viewBox="0 0 24 24"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM12 10.5858L14.8284 7.75736L16.2426 9.17157L13.4142 12L16.2426 14.8284L14.8284 16.2426L12 13.4142L9.17157 16.2426L7.75736 14.8284L10.5858 12L7.75736 9.17157L9.17157 7.75736L12 10.5858Z"></path></svg>
+}
+
+// https://remixicon.com/icon/menu-line
+templ Menu(class any) {
+  <svg class={ class, "fill-current" } xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 4H21V6H3V4ZM3 11H21V13H3V11ZM3 18H21V20H3V18Z"></path></svg>
+}
+
+// https://remixicon.com/icon/error-warning-line
+templ ErrorWarning(class any) {
+  <svg class={ class, "fill-current" } xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 15H13V17H11V15ZM11 7H13V13H11V7Z"></path></svg>
+}
+
+// https://remixicon.com/icon/alert-line
+templ Alert(class any) {
+  <svg class={ class, "fill-current" } xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12.865 3.00017L22.3912 19.5002C22.6674 19.9785 22.5035 20.5901 22.0252 20.8662C21.8732 20.954 21.7008 21.0002 21.5252 21.0002H2.47266C1.92037 21.0002 1.47266 20.5525 1.47266 20.0002C1.47266 19.8246 1.51886 19.6522 1.60663 19.5002L11.1329 3.00017C11.4091 2.52187 12.0206 2.358 12.4989 2.63414C12.651 2.72191 12.7772 2.84815 12.865 3.00017ZM4.20471 19.0002H19.7932L11.9989 5.50017L4.20471 19.0002ZM10.9989 16.0002H12.9989V18.0002H10.9989V16.0002ZM10.9989 9.00017H12.9989V14.0002H10.9989V9.00017Z"></path></svg>
+}