use card styles from figma

rilldata · Jan 22, 2025 · 1475a4a · 1475a4a
1 parent d1abf8e
commit 1475a4a
Showing 1 changed file with 16 additions and 2 deletions.
diff --git a/web-common/src/features/canvas/Component.svelte b/web-common/src/features/canvas/Component.svelte
@@ -129,9 +129,8 @@
     </div>
   {/if}
   <div class="size-full relative {showDragHandle ? 'touch-none' : ''}">
-    <!-- class:shadow-md={isHovered} -->
     <div
-      class="size-full overflow-hidden flex flex-col flex-none rounded-sm border border-slate-200"
+      class="card size-full overflow-hidden flex flex-col flex-none rounded-sm border border-slate-200"
       style:border-radius="{radius}px"
     >
       <ComponentTitle {title} {description} />
@@ -158,4 +157,19 @@
   .drag-handle:active {
     @apply cursor-grabbing;
   }
+
+  .card {
+    box-shadow:
+      0px 2px 3px 0px rgba(15, 23, 42, 0.03),
+      0px 1px 3px 0px rgba(15, 23, 42, 0.04),
+      0px 0px 0px 1px rgba(15, 23, 42, 0.06);
+  }
+
+  .card:hover {
+    box-shadow:
+      0px 2px 3px 0px rgba(15, 23, 42, 0.03),
+      0px 1px 3px 0px rgba(15, 23, 42, 0.04),
+      0px 0px 0px 1px rgba(15, 23, 42, 0.06),
+      0px 4px 6px 0px rgba(15, 23, 42, 0.09);
+  }
 </style>