mejorar login y sidebar: SVG logo, arreglar card estilo docs, corregir Label, agregar componentes de tipografia

public/Alpha.svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 176 59" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(1,0,0,1,-399.244861,-266.63812)">
+        <g transform="matrix(5.465211,0,0,5.465211,-1996.948828,-1452.687037)">
+            <rect x="447.224" y="314.594" width="1.704" height="8.568" style="fill-rule:nonzero;"/>
+        </g>
+        <g transform="matrix(5.465211,0,0,5.465211,-1996.948828,-1452.687037)">
+            <path d="M453.404,322.046C453.132,322.046 452.9,321.99 452.708,321.878C452.516,321.766 452.362,321.62 452.246,321.44C452.13,321.26 452.046,321.05 451.994,320.81C451.942,320.57 451.916,320.326 451.916,320.078C451.916,319.822 451.94,319.574 451.988,319.334C452.036,319.094 452.118,318.882 452.234,318.698C452.35,318.514 452.502,318.364 452.69,318.248C452.878,318.132 453.112,318.074 453.392,318.074C453.664,318.074 453.894,318.132 454.082,318.248C454.27,318.364 454.424,318.516 454.544,318.704C454.664,318.892 454.75,319.106 454.802,319.346C454.854,319.586 454.88,319.83 454.88,320.078C454.88,320.326 454.856,320.57 454.808,320.81C454.76,321.05 454.678,321.26 454.562,321.44C454.446,321.62 454.294,321.766 454.106,321.878C453.918,321.99 453.684,322.046 453.404,322.046ZM450.272,316.958L450.272,325.334L451.976,325.334L451.976,322.394L452,322.394C452.208,322.698 452.474,322.928 452.798,323.084C453.122,323.24 453.476,323.318 453.86,323.318C454.316,323.318 454.714,323.23 455.054,323.054C455.394,322.878 455.678,322.642 455.906,322.346C456.134,322.05 456.304,321.71 456.416,321.326C456.528,320.942 456.584,320.542 456.584,320.126C456.584,319.686 456.528,319.264 456.416,318.86C456.304,318.456 456.132,318.102 455.9,317.798C455.668,317.494 455.376,317.25 455.024,317.066C454.672,316.882 454.252,316.79 453.764,316.79C453.38,316.79 453.028,316.866 452.708,317.018C452.388,317.17 452.124,317.414 451.916,317.75L451.892,317.75L451.892,316.958L450.272,316.958Z" style="fill-rule:nonzero;"/>
+        </g>
+        <g transform="matrix(5.465211,0,0,5.465211,-1996.948828,-1452.687037)">
+            <path d="M457.604,314.594L457.604,323.162L459.308,323.162L459.308,319.91C459.308,319.278 459.412,318.824 459.62,318.548C459.828,318.272 460.164,318.134 460.628,318.134C461.036,318.134 461.32,318.26 461.48,318.512C461.64,318.764 461.72,319.146 461.72,319.658L461.72,323.162L463.424,323.162L463.424,319.346C463.424,318.962 463.39,318.612 463.322,318.296C463.254,317.98 463.136,317.712 462.968,317.492C462.8,317.272 462.57,317.1 462.278,316.976C461.986,316.852 461.612,316.79 461.156,316.79C460.836,316.79 460.508,316.872 460.172,317.036C459.836,317.2 459.56,317.462 459.344,317.822L459.308,317.822L459.308,314.594L457.604,314.594Z" style="fill-rule:nonzero;"/>
+        </g>
+        <g transform="matrix(5.465211,0,0,5.465211,-1996.948828,-1452.687037)">
+            <path d="M464.648,318.866C464.672,318.466 464.772,318.134 464.948,317.87C465.124,317.606 465.348,317.394 465.62,317.234C465.892,317.074 466.198,316.96 466.538,316.892C466.878,316.824 467.22,316.79 467.564,316.79C467.876,316.79 468.192,316.812 468.512,316.856C468.832,316.9 469.124,316.986 469.388,317.114C469.652,317.242 469.868,317.42 470.036,317.648C470.204,317.876 470.288,318.178 470.288,318.554L470.288,321.782C470.288,322.062 470.304,322.33 470.336,322.586C470.368,322.842 470.424,323.034 470.504,323.162L468.776,323.162C468.744,323.066 468.718,322.968 468.698,322.868C468.678,322.768 468.664,322.666 468.656,322.562C468.384,322.842 468.064,323.038 467.696,323.15C467.328,323.262 466.952,323.318 466.568,323.318C466.272,323.318 465.996,323.282 465.74,323.21C465.484,323.138 465.26,323.026 465.068,322.874C464.876,322.722 464.726,322.53 464.618,322.298C464.51,322.066 464.456,321.79 464.456,321.47C464.456,321.118 464.518,320.828 464.642,320.6C464.766,320.372 464.926,320.19 465.122,320.054C465.318,319.918 465.542,319.816 465.794,319.748C466.046,319.68 466.3,319.626 466.556,319.586C466.812,319.546 467.064,319.514 467.312,319.49C467.56,319.466 467.78,319.43 467.972,319.382C468.164,319.334 468.316,319.264 468.428,319.172C468.54,319.08 468.592,318.946 468.584,318.77C468.584,318.586 468.554,318.44 468.494,318.332C468.434,318.224 468.354,318.14 468.254,318.08C468.154,318.02 468.038,317.98 467.906,317.96C467.774,317.94 467.632,317.93 467.48,317.93C467.144,317.93 466.88,318.002 466.688,318.146C466.496,318.29 466.384,318.53 466.352,318.866L464.648,318.866ZM468.584,320.126C468.512,320.19 468.422,320.24 468.314,320.276C468.206,320.312 468.09,320.342 467.966,320.366C467.842,320.39 467.712,320.41 467.576,320.426C467.44,320.442 467.304,320.462 467.168,320.486C467.04,320.51 466.914,320.542 466.79,320.582C466.666,320.622 466.558,320.676 466.466,320.744C466.374,320.812 466.3,320.898 466.244,321.002C466.188,321.106 466.16,321.238 466.16,321.398C466.16,321.55 466.188,321.678 466.244,321.782C466.3,321.886 466.376,321.968 466.472,322.028C466.568,322.088 466.68,322.13 466.808,322.154C466.936,322.178 467.068,322.19 467.204,322.19C467.54,322.19 467.8,322.134 467.984,322.022C468.168,321.91 468.304,321.776 468.392,321.62C468.48,321.464 468.534,321.306 468.554,321.146C468.574,320.986 468.584,320.858 468.584,320.762L468.584,320.126Z" style="fill-rule:nonzero;"/>
+        </g>
+        <g transform="matrix(5.465211,0,0,5.465211,-1996.948828,-1452.687037)">
+            <g transform="matrix(0.110802,0,0,0.110802,428.41993,315.218076)">
+                <path d="M136.673,14.297C136.568,17.373 139.093,16.403 139.111,14.264C140.189,12.008 142.848,3.574 148.455,3.204C164.702,2.132 153.11,17.893 147.586,27.552C142.829,35.869 164.837,68.368 155.611,70.821C136.139,75.999 140.766,37.723 135.674,45.662C134.259,47.868 120.815,68.827 113.563,69.827C81.746,74.21 87.352,32.261 103.298,15.327C116.64,1.16 121.972,-3.196 136.673,14.297ZM102.886,48.509C105.694,36.799 105.465,30.363 118.667,17.701C122.298,14.22 124.604,22.307 129.29,27.665C130.639,29.207 107.445,77.368 102.886,48.509Z"/>
+            </g>
+        </g>
+    </g>
+</svg>

src/components/AppSidebar.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { computed } from 'vue'
 import {
   LayoutDashboard,
   Calendar,
@@ -40,20 +39,10 @@ function setTab(tab: string) {
 
 <template>
   <Sidebar collapsible="icon" variant="inset">
-    <SidebarHeader>
+    <SidebarHeader class="px-4 pt-5 pb-3">
-      <SidebarMenu>
+      <div class="flex items-center h-8">
-        <SidebarMenuItem>
+        <img src="/Alpha.svg" alt="Alpha" class="h-full w-auto dark:invert" />
-          <SidebarMenuButton size="lg" as="button" @click="setTab('dashboard')">
-            <div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
-              <span class="font-bold text-sm">A</span>
       </div>
-            <div class="grid flex-1 text-left text-sm leading-tight">
-              <span class="truncate font-semibold">Alpha</span>
-              <span class="truncate text-xs">Alpha</span>
-            </div>
-          </SidebarMenuButton>
-        </SidebarMenuItem>
-      </SidebarMenu>
     </SidebarHeader>
 
     <SidebarContent>

src/components/ui/label/Label.vue

@@ -1,11 +1,21 @@
 <script setup lang="ts">
-defineProps<{
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
   for?: string
+  class?: HTMLAttributes["class"]
 }>()
 </script>
 
 <template>
-  <label>
+  <label
+    :for="props.for"
+    :class="cn(
+      'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+      props.class,
+    )"
+  >
     <slot />
   </label>
 </template>

src/components/ui/typography/TypographyBlockquote.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <blockquote :class="cn('mt-6 border-l-2 pl-6 italic', props.class)">
+    <slot />
+  </blockquote>
+</template>

src/components/ui/typography/TypographyH1.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <h1 :class="cn('scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl', props.class)">
+    <slot />
+  </h1>
+</template>

src/components/ui/typography/TypographyH2.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <h2 :class="cn('scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0', props.class)">
+    <slot />
+  </h2>
+</template>

src/components/ui/typography/TypographyH3.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <h3 :class="cn('scroll-m-20 text-2xl font-semibold tracking-tight', props.class)">
+    <slot />
+  </h3>
+</template>

src/components/ui/typography/TypographyH4.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <h4 :class="cn('scroll-m-20 text-xl font-semibold tracking-tight', props.class)">
+    <slot />
+  </h4>
+</template>

src/components/ui/typography/TypographyInlineCode.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <code :class="cn('relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold', props.class)">
+    <slot />
+  </code>
+</template>

src/components/ui/typography/TypographyLarge.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div :class="cn('text-lg font-semibold', props.class)">
+    <slot />
+  </div>
+</template>

src/components/ui/typography/TypographyLead.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <p :class="cn('text-xl text-muted-foreground', props.class)">
+    <slot />
+  </p>
+</template>

src/components/ui/typography/TypographyList.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <ul :class="cn('my-6 ml-6 list-disc [&>li]:mt-2', props.class)">
+    <slot />
+  </ul>
+</template>

src/components/ui/typography/TypographyMuted.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <p :class="cn('text-sm text-muted-foreground', props.class)">
+    <slot />
+  </p>
+</template>

src/components/ui/typography/TypographyP.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <p :class="cn('leading-7 [&:not(:first-child)]:mt-6', props.class)">
+    <slot />
+  </p>
+</template>

src/components/ui/typography/TypographySmall.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <small :class="cn('text-sm font-medium leading-none', props.class)">
+    <slot />
+  </small>
+</template>

src/components/ui/typography/TypographyTable.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div :class="cn('my-6 w-full overflow-y-auto', props.class)">
+    <table class="w-full">
+      <slot />
+    </table>
+  </div>
+</template>

src/components/ui/typography/index.ts

@@ -0,0 +1,13 @@
+export { default as TypographyH1 } from './TypographyH1.vue'
+export { default as TypographyH2 } from './TypographyH2.vue'
+export { default as TypographyH3 } from './TypographyH3.vue'
+export { default as TypographyH4 } from './TypographyH4.vue'
+export { default as TypographyP } from './TypographyP.vue'
+export { default as TypographyBlockquote } from './TypographyBlockquote.vue'
+export { default as TypographyTable } from './TypographyTable.vue'
+export { default as TypographyList } from './TypographyList.vue'
+export { default as TypographyInlineCode } from './TypographyInlineCode.vue'
+export { default as TypographyLead } from './TypographyLead.vue'
+export { default as TypographyLarge } from './TypographyLarge.vue'
+export { default as TypographySmall } from './TypographySmall.vue'
+export { default as TypographyMuted } from './TypographyMuted.vue'

src/views/LoginView.vue

@@ -4,7 +4,8 @@ import { useAuthStore } from '@/stores/auth'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Checkbox } from '@/components/ui/checkbox'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Label } from '@/components/ui/label'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Eye, EyeOff } from 'lucide-vue-next'
 
 const auth = useAuthStore()
@@ -35,29 +36,27 @@ async function handleLogin() {
 </script>
 
 <template>
-  <div class="flex min-h-svh flex-col items-center justify-center bg-background p-6">
+  <div class="flex min-h-svh flex-col items-center justify-center gap-6 bg-background p-6">
-    <Card class="w-full max-w-[400px]">
+    <img src="/Alpha.svg" alt="Alpha" class="h-10 w-auto dark:invert" />
-      <CardHeader class="text-center pb-4">
+
-        <div class="flex aspect-square size-12 items-center justify-center rounded-xl bg-primary text-primary-foreground mx-auto mb-3">
+    <Card class="w-full max-w-sm">
-          <span class="font-bold text-xl">A</span>
+      <CardHeader>
-        </div>
+        <CardTitle class="text-2xl">Iniciar sesión</CardTitle>
-        <CardTitle class="text-2xl font-bold tracking-tight">Alpha</CardTitle>
-        <CardDescription class="text-xs mt-1">Alpha</CardDescription>
       </CardHeader>
 
       <CardContent>
-        <form @submit.prevent="handleLogin" class="flex flex-col gap-4">
+        <form @submit.prevent="handleLogin" class="grid gap-4">
-          <div class="space-y-1.5">
+          <div class="grid gap-2">
-            <label class="text-xs font-medium text-muted-foreground uppercase tracking-wider">Email</label>
+            <Label for="email">Email</Label>
-            <Input v-model="email" name="email" type="email" placeholder="ricardo@..." autocomplete="email" />
+            <Input id="email" v-model="email" type="email" placeholder="ricardo@..." autocomplete="email" />
           </div>
-          <div class="space-y-1.5">
+          <div class="grid gap-2">
-            <label class="text-xs font-medium text-muted-foreground uppercase tracking-wider">Contraseña</label>
+            <Label for="password">Contraseña</Label>
             <div class="relative">
               <Input
+                id="password"
                 v-model="password"
                 :type="showPassword ? 'text' : 'password'"
-                name="password"
                 placeholder="••••••••"
                 autocomplete="current-password"
                 class="pr-10"
@@ -75,19 +74,19 @@ async function handleLogin() {
 
           <div class="flex items-center gap-2">
             <Checkbox id="remember" v-model:checked="rememberMe" />
-            <label for="remember" class="text-xs text-muted-foreground cursor-pointer select-none">Recordarme</label>
+            <Label for="remember" class="text-sm font-normal cursor-pointer">Recordarme</Label>
           </div>
 
-          <div v-if="auth.error" class="text-xs text-destructive bg-destructive/10 rounded-md px-3 py-2">
+          <div v-if="auth.error" class="text-sm text-destructive bg-destructive/10 rounded-md px-3 py-2">
             {{ auth.error }}
           </div>
 
-          <Button type="submit" class="w-full mt-2" :disabled="auth.loading">
+          <Button type="submit" class="w-full" :disabled="auth.loading">
             {{ auth.loading ? 'Ingresando...' : 'Iniciar sesión' }}
           </Button>
         </form>
 
-        <p class="text-center text-[11px] text-muted-foreground/40 mt-6">
+        <p class="text-center text-xs text-muted-foreground/40 mt-6">
           kappa.lambdaanalytics.co
         </p>
       </CardContent>