Make the quick-create FAB high-contrast while keeping the squircle shape.

Use a solid teal gradient and white grid icon so it stays visible on light backgrounds.

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/web/src/components/QuickCreate.vue

@@ -407,24 +407,22 @@ onBeforeUnmount(() => {
   height: 54px;
   padding: 0;
   margin: 0;
-  border: 2px solid #0d9488;
+  border: 0;
   border-radius: 16px;
-  background: #ffffff;
-  color: #0d9488;
+  background: linear-gradient(145deg, #0f766e 0%, #14b8a6 100%);
+  color: #fff;
   display: grid;
   place-items: center;
   line-height: 0;
   direction: ltr;
   box-shadow:
-    0 4px 14px rgba(15, 23, 42, 0.12),
-    0 0 0 1px rgba(13, 148, 136, 0.08);
+    0 8px 22px rgba(13, 148, 136, 0.4),
+    inset 0 1px 0 rgba(255, 255, 255, 0.22);
   cursor: grab;
   touch-action: none;
   user-select: none;
   transition:
-    background 0.15s ease,
-    color 0.15s ease,
-    border-color 0.15s ease,
+    filter 0.15s ease,
     box-shadow 0.15s ease,
     transform 0.12s ease;
 }
@@ -439,26 +437,25 @@ onBeforeUnmount(() => {
 
 .fab :deep(.ico) {
   display: block;
-  stroke-width: 2;
+  stroke-width: 2.2;
+  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.15));
 }
 
 .fab:hover {
-  background: #f0fdfa;
+  filter: brightness(1.06);
   box-shadow:
-    0 8px 20px rgba(13, 148, 136, 0.22),
-    0 0 0 1px rgba(13, 148, 136, 0.12);
+    0 10px 26px rgba(13, 148, 136, 0.48),
+    inset 0 1px 0 rgba(255, 255, 255, 0.25);
 }
 
 .fab.open {
-  background: #0d9488;
-  color: #fff;
-  border-color: #0d9488;
-  box-shadow: 0 8px 22px rgba(13, 148, 136, 0.35);
+  background: linear-gradient(145deg, #115e59 0%, #0d9488 100%);
+  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.28);
 }
 
 .fab.dragging {
   cursor: grabbing;
-  transform: scale(1.04);
-  box-shadow: 0 10px 24px rgba(13, 148, 136, 0.3);
+  transform: scale(1.05);
+  box-shadow: 0 12px 28px rgba(13, 148, 136, 0.5);
 }
 </style>