From f3542f711b220a5421e8ba6c48d485b7780ca74c Mon Sep 17 00:00:00 2001
From: Emily <adharaultimasheireen@gmail.com>
Date: Mon, 22 Jul 2024 15:07:51 +0200
Subject: [PATCH] .

---
 dashboard/assets/scss/main.scss               |  2 +
 dashboard/components/lyx-ui/Button.vue        | 18 +++++++
 dashboard/components/lyx-ui/Card.vue          | 10 ++++
 dashboard/components/lyx-ui/Icon.vue          | 11 +++++
 .../components/lyx-ui/ProjectSelector.vue     | 26 ++++++++++
 dashboard/nuxt.config.ts                      |  6 +++
 dashboard/pages/project_selector.vue          | 20 ++++++--
 dashboard/tailwind.config.js                  | 49 +++++++++++++++++--
 8 files changed, 133 insertions(+), 9 deletions(-)
 create mode 100644 dashboard/components/lyx-ui/Button.vue
 create mode 100644 dashboard/components/lyx-ui/Card.vue
 create mode 100644 dashboard/components/lyx-ui/Icon.vue
 create mode 100644 dashboard/components/lyx-ui/ProjectSelector.vue

diff --git a/dashboard/assets/scss/main.scss b/dashboard/assets/scss/main.scss
index 6c9b12b..9f74870 100644
--- a/dashboard/assets/scss/main.scss
+++ b/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";
diff --git a/dashboard/components/lyx-ui/Button.vue b/dashboard/components/lyx-ui/Button.vue
new file mode 100644
index 0000000..1bc8927
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/dashboard/components/lyx-ui/Card.vue b/dashboard/components/lyx-ui/Card.vue
new file mode 100644
index 0000000..9e59af5
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/dashboard/components/lyx-ui/Icon.vue b/dashboard/components/lyx-ui/Icon.vue
new file mode 100644
index 0000000..ae49ef6
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/dashboard/components/lyx-ui/ProjectSelector.vue b/dashboard/components/lyx-ui/ProjectSelector.vue
new file mode 100644
index 0000000..da5cbab
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/dashboard/nuxt.config.ts b/dashboard/nuxt.config.ts
index d602f88..f01f5a8 100644
--- a/dashboard/nuxt.config.ts
+++ b/dashboard/nuxt.config.ts
@@ -9,6 +9,12 @@ const gooleSignInConfig: any = {
 }
 
 export default defineNuxtConfig({
+  postcss: {
+    plugins: {
+      tailwindcss: {},
+      autoprefixer: {}
+    }
+  },
   colorMode: {
     preference: 'dark',
   },
diff --git a/dashboard/pages/project_selector.vue b/dashboard/pages/project_selector.vue
index 5a543c8..fff6e82 100644
--- a/dashboard/pages/project_selector.vue
+++ b/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' : ''"
diff --git a/dashboard/tailwind.config.js b/dashboard/tailwind.config.js
index ce41b78..c755913 100644
--- a/dashboard/tailwind.config.js
+++ b/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'
+                    }
+                }
+
+
             }
         },
     },