feat(gui-v2): update grid styles

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>

packages/nc-gui-v2/pages/projects/index/index.vue

@@ -33,12 +33,11 @@ const formatTitle = (title: string) =>
 
 <template>
   <div class="grid grid-cols-2 md:grid-cols-4 3xl:grid-cols-6 gap-6 md:gap-12">
-    <div class="col-span-2 md:col-span-1">
     <div class="group flex flex-col items-center gap-2">
       <v-menu>
         <template #activator="{ props }">
           <div
-              class="cursor-pointer w-full md:w-1/2 min-w-[150px] shadow-md nc-project-thumbnail opacity-50 hover:(opacity-100 shadow-lg) bg-gray-400 uppercase flex items-center justify-center transition-color ease duration-300"
+            class="thumbnail !bg-gradient-to-br from-primary to-gray-500 !opacity-25 hover:(!opacity-100 shadow-lg to-primary/50) bg-gray-400"
             @click="props.onClick"
           >
             <MdiPlus />
@@ -65,21 +64,16 @@ const formatTitle = (title: string) =>
         </v-list>
       </v-menu>
     </div>
-    </div>
 
     <div v-for="(project, i) of projects" :key="project.id" class="group flex flex-col items-center gap-2">
-      <div
+      <div class="thumbnail" :style="{ backgroundColor: getColorByIndex(i) }" @click="openProject(project)">
-        class="nc-project-thumbnail w-full md:w-1/2 min-w-[150px] shadow-md cursor-pointer uppercase flex items-center justify-center transition-color ease duration-300 hover:shadow-lg"
-        :style="{ backgroundColor: getColorByIndex(i) }"
-        @click="openProject(project)"
-      >
         {{ formatTitle(project.title) }}
 
-        <MdiStarOutline class="nc-project-star-icon group-hover:opacity-100" @click.stop />
+        <MdiStarOutline class="star-icon group-hover:opacity-100" @click.stop />
 
         <v-menu>
           <template #activator="{ props }">
-            <MdiMenuDown class="nc-project-option-menu-icon group-hover:opacity-100" @click.stop="props.onClick" />
+            <MdiMenuDown class="menu-icon group-hover:opacity-100" @click.stop="props.onClick" />
           </template>
 
           <v-list class="!py-0 flex flex-col bg-white rounded-lg shadow-md border-1 border-gray-300">
@@ -99,33 +93,21 @@ const formatTitle = (title: string) =>
 </template>
 
 <style scoped>
-.nc-project-thumbnail {
+.thumbnail {
-  @apply font-bold text-white text-[75px] h-[150px] w-full md:w-1/2 min-w-[150px] shadow-md cursor-pointer uppercase flex items-center justify-center transition-color ease duration-300 hover:shadow-lg;
+  @apply relative rounded-md opacity-75 font-bold text-white text-[75px] h-[150px] w-full max-w-[150px] md:w-1/2 min-w-[150px] shadow-md cursor-pointer uppercase flex items-center justify-center transition-color ease-in duration-300 hover:(shadow-lg opacity-100);
+  background-image: linear-gradient(#0002, #0002);
 }
 
-.nc-project-option-menu-icon,
+.menu-icon,
-.nc-project-star-icon {
+.star-icon {
-  width: auto;
+  @apply w-auto opacity-0 absolute h-[1.75rem] transition-opacity duration-300;
-  height: 1.5rem;
-  position: absolute;
-  opacity: 0;
-  transition: 0.3s opacity;
 }
 
-.nc-project-star-icon {
+.star-icon {
   @apply top-1 right-1 transform hover:(scale-120 text-yellow-300/75) transition-all duration-100 ease;
 }
 
-.nc-project-option-menu-icon {
+.menu-icon {
   @apply bottom-1 right-1 transform hover:(scale-150 text-gray-200) transition-all duration-100 ease;
 }
-
-.nc-project-thumbnail {
-  background-image: linear-gradient(#0002, #0002);
-  opacity: 0.5;
-}
-
-.nc-project-thumbnail:hover {
-  opacity: 1;
-}
 </style>