.

dashboard/assets/scss/main.scss

@@ -11,6 +11,8 @@
 @import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
 
+@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0');
+
 
 @font-face {
   font-family: "Geist";

dashboard/components/lyx-ui/Button.vue

@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+
+export type ButtonType = 'primary' | 'secondary' | 'outline' | 'danger';
+
+const props = defineProps<{ type: ButtonType, }>();
+
+</script>
+
+<template>
+    <div class="poppins w-fit cursor-pointer px-4 py-1 rounded-md outline outline-[1px] text-text" :class="{
+        'bg-lyx-primary-dark outline-lyx-primary hover:bg-lyx-primary-hover': type === 'primary',
+        'bg-lyx-widget-lighter outline-lyx-widget-lighter hover:bg-lyx-widget-light': type === 'secondary',
+        'bg-lyx-transparent outline-lyx-widget-lighter hover:bg-lyx-widget-light': type === 'outline',
+        'bg-lyx-danger-dark outline-lyx-danger hover:bg-lyx-danger': type === 'danger',
+    }">
+        <slot></slot>
+    </div>
+</template>

dashboard/components/lyx-ui/Card.vue

@@ -0,0 +1,10 @@
+<script lang="ts" setup>
+
+
+</script>
+
+<template>
+    <div class="w-fit h-fit rounded-md bg-lyx-widget p-4 outline outline-[1px] outline-lyx-background-lighter">
+        <slot></slot>
+    </div>
+</template>

dashboard/components/lyx-ui/Icon.vue

@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+
+const props = defineProps<{ icon: string }>();
+
+</script>
+
+<template>
+    <span class="material-symbols-outlined">
+        {{ props.icon }}
+    </span>
+</template>

dashboard/components/lyx-ui/ProjectSelector.vue

@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+
+
+</script>
+
+<template>
+    <LyxUiCard>
+        <div class="flex items-center">
+            <div class="grow">
+                PROJECT_NAME
+            </div>
+            <div>
+                Active
+            </div>
+            <LyxUiIcon icon="drag_indicator"></LyxUiIcon>
+        </div>
+        <div class="flex items-center">
+            <LyxUiButton type="primary">
+                CURRENT_SUBSCRIPTION
+            </LyxUiButton>
+            <div class="poppins font-light text-lyx-text-dark">
+                next billing: NEXT_BILLING_DATE
+            </div>
+        </div>
+    </LyxUiCard>
+</template>

dashboard/nuxt.config.ts

@@ -9,6 +9,12 @@ const gooleSignInConfig: any = {
 }
 
 export default defineNuxtConfig({
+  postcss: {
+    plugins: {
+      tailwindcss: {},
+      autoprefixer: {}
+    }
+  },
   colorMode: {
     preference: 'dark',
   },

dashboard/pages/project_selector.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-
 definePageMeta({ layout: 'dashboard' });
 
 const { projects, refresh } = useProjectsList();
@@ -97,15 +96,25 @@ async function deleteAccount() {
                         {{ projects?.length ?? '-' }} / {{ maxProjects || 3 }}
                     </div>
                 </div>
-                <NuxtLink v-if="(projects?.length || 0) < (maxProjects || 3)" to="/project_creation"
+
+                <LyxUiButton type="primary">
+                    <NuxtLink v-if="(projects?.length || 0) < (maxProjects || 3)" to="/project_creation">
+                        Create new project
+                    </NuxtLink>
+                </LyxUiButton>
+                <!-- <NuxtLink v-if="(projects?.length || 0) < (maxProjects || 3)" to="/project_creation"
                     class="bg-blue-500/20 hover:bg-blue-500/30 px-4 py-1 flex items-center gap-4 rounded-xl cursor-pointer">
                     <div class="h-full aspect-[1/1] flex items-center justify-center">
                         <i class="fas fa-plus text-[1rem] text-text-sub/80"></i>
                     </div>
                     <div>
-                        <div class="text-text font-semibold manrope text-[1.3rem]"> Create new project</div>
+                        <div class="text-text font-semibold manrope text-[1.3rem]">
+                            Create new project
+                        </div>
                     </div>
-                </NuxtLink>
+                </NuxtLink> -->
+
+
             </div>
 
             <div class="text-text/85 mt-8 poppis text-[1.2rem]" v-if="projects.length == 0">
@@ -115,6 +124,9 @@ async function deleteAccount() {
             <div class="flex gap-12 flex-wrap" v-if="pid">
 
                 <div v-for="e of projects">
+                    <LyxUiProjectSelector>
+
+                    </LyxUiProjectSelector>
                     <DashboardProjectSelectionCard @click="onProjectClick(e._id.toString())"
                         :active="pid == e._id.toString()" :title="e.name"
                         :subtitle="pid == e._id.toString() ? 'ATTIVO' : ''"

dashboard/tailwind.config.js

@@ -19,16 +19,55 @@ module.exports = {
                 menu: {
                     DEFAULT: '#1d1d1f'
                 },
-                text: {
-                    DEFAULT: '#FFFFFF',
-                    sub: '#909aa1',
-                    dirty: '#dadde0'
-                },
                 accent: {
                     DEFAULT: '#5680F8',
                     light: '#2c91ed',
                     sub: '#99A7F1',
                 },
+                "lyx-primary": {
+                    DEFAULT: '#5680F8',
+                    dark: '#222A42',
+                    hover: '#2A3450'
+                },
+                "lyx-text": {
+                    DEFAULT: '#FFFFFF',
+                    dark: '#D4D4D4',
+                    darker: '#6A6A6A'
+                },
+                "lyx-widget": {
+                    DEFAULT: '#151515',
+                    light: '#1E1E1E',
+                    lighter: '#262626'
+                },
+                "lyx-background": {
+                    DEFAULT: '#0A0A0A',
+                    light: '#121212',
+                    lighter: '#212121'
+                },
+                "lyx-danger": {
+                    DEFAULT: '#F86956',
+                    dark: '#4A2D29'
+                },
+                "lyx-chart": {
+                    purple: {
+                        DEFAULT: '#5655D7',
+                        dark: '#282844'
+                    },
+                    green: {
+                        DEFAULT: '#1D9B86',
+                        dark: '#213734'
+                    },
+                    cyan: {
+                        DEFAULT: '#4ABDE8',
+                        dark: '#273D48'
+                    },
+                    orange: {
+                        DEFAULT: '#F56524',
+                        dark: '#492C22'
+                    }
+                }
+
+
             }
         },
     },