add fonts, basic designs, logo

keizerworks · Nov 14, 2024 · 46c9b97 · 46c9b97
1 parent c889852
commit 46c9b97
Show file tree

Hide file tree

Showing 11 changed files with 64 additions and 26 deletions.
diff --git a/internal/controllers/auth_controller.go b/internal/controllers/auth_controller.go
@@ -3,6 +3,7 @@ package controllers
 import (
 	"errors"
 	"fmt"
+
 	"keizer-auth/internal/models"
 	"keizer-auth/internal/services"
 	"keizer-auth/internal/utils"

diff --git a/internal/services/auth_service.go b/internal/services/auth_service.go
@@ -4,11 +4,12 @@ import (
 	"encoding/base64"
 	"encoding/json"
 	"fmt"
+	"time"
+
 	"keizer-auth/internal/models"
 	"keizer-auth/internal/repositories"
 	"keizer-auth/internal/utils"
 	"keizer-auth/internal/validators"
-	"time"
 
 	"github.com/nrednav/cuid2"
 	"github.com/redis/go-redis/v9"

diff --git a/web/index.html b/web/index.html
@@ -2,9 +2,16 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/assets/logo/logo.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>Keizer Auth</title>
+
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap"
+      rel="stylesheet"
+    />
   </head>
   <body>
     <div id="app"></div>

diff --git a/web/public/assets/logo/logo-full.svg b/web/public/assets/logo/logo-full.svg
diff --git a/web/public/assets/logo/logo.svg b/web/public/assets/logo/logo.svg
diff --git a/web/public/vite.svg b/web/public/vite.svg
diff --git a/web/src/components/sign-in/form.tsx b/web/src/components/sign-in/form.tsx
@@ -107,7 +107,7 @@ export function SignInForm({ className, ...props }: UserAuthFormProps) {
       </div>
 
       <Button disabled variant="outline" type="button">
-        <GitHubLogoIcon className="mr-2 h-4 w-4" /> GitHub
+        <GitHubLogoIcon className="size-4" /> GitHub
       </Button>
     </div>
   );

diff --git a/web/src/components/sign-up/form.tsx b/web/src/components/sign-up/form.tsx
@@ -126,7 +126,7 @@ export function SignUpForm({ className, ...props }: UserAuthFormProps) {
       </div>
 
       <Button disabled variant="outline" type="button">
-        <GitHubLogoIcon className="mr-2 h-4 w-4" /> GitHub
+        <GitHubLogoIcon className="size-4" /> GitHub
       </Button>
     </div>
   );

diff --git a/web/src/routes/_auth.tsx b/web/src/routes/_auth.tsx
@@ -11,19 +11,7 @@ function RouteComponent() {
         <div className="absolute inset-0 bg-zinc-900" />
 
         <div className="relative z-20 flex items-center text-lg font-medium">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="2"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            className="mr-2 h-6 w-6"
-          >
-            <path d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3" />
-          </svg>
-          Keizer Auth
+          <img src="/assets/logo/logo-full.svg" />
         </div>
 
         <div className="relative z-20 mt-auto">

diff --git a/web/src/styles/index.css b/web/src/styles/index.css
@@ -82,34 +82,42 @@
 
 @layer base {
   * {
-    @apply border-border;
+    @apply border-border font-sans box-border antialiased;
   }
 
   body {
     @apply bg-background text-foreground;
   }
 
   h1 {
-    @apply scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl;
+    @apply scroll-m-20 text-4xl font-bold font-serif tracking-tight lg:text-5xl;
   }
 
   h2 {
-    @apply scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight;
+    @apply scroll-m-20 border-b pb-2 text-3xl font-serif font-semibold tracking-tight;
   }
 
   h3 {
-    @apply scroll-m-20 text-2xl font-semibold tracking-tight;
+    @apply scroll-m-20 text-2xl font-semibold font-serif tracking-tight;
   }
 
   h4 {
-    @apply scroll-m-20 text-xl font-semibold tracking-tight;
+    @apply scroll-m-20 text-xl font-semibold font-serif tracking-tight;
   }
 
   p {
-    @apply leading-7;
+    @apply leading-7 font-sans;
+  }
+
+  label {
+    @apply font-serif;
+  }
+
+  button {
+    @apply font-serif;
   }
 
   blockquote {
-    @apply mt-6 border-l-2 pl-6 italic;
+    @apply mt-6 border-l-2 pl-6 font-serif italic;
   }
 }
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
@@ -6,6 +6,10 @@ export default {
   content: ["./index.html", "./src/**/*.{ts,tsx,js,jsx}"],
   theme: {
     extend: {
+      fontFamily: {
+        sans: ["Open Sans", "sans-serif"],
+        serif: ["Lora", "serif"],
+      },
       borderRadius: {
         lg: "var(--radius)",
         md: "calc(var(--radius) - 2px)",