Differentiate the global quick-create FAB from page action buttons.

Use a squircle white control with a grid icon so it no longer looks like the teal circular page FABs.

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

apps/web/src/components/QuickCreate.vue

@@ -278,16 +278,19 @@ onBeforeUnmount(() => {
         v-if="ready"
         class="fab"
         type="button"
-        :class="{ dragging }"
+        :class="{ dragging, open: isQuickCreateOpen }"
         :style="fabStyle"
         :aria-expanded="isQuickCreateOpen"
         :aria-label="isQuickCreateOpen ? 'بستن ایجاد سریع' : 'ایجاد سریع'"
+        title="ایجاد سریع"
         @pointerdown="onFabPointerDown"
         @pointermove="onFabPointerMove"
         @pointerup="onFabPointerUp"
         @pointercancel="onFabPointerUp"
       >
-        <UiIcon :name="isQuickCreateOpen ? 'x' : 'plus'" :size="22" />
+        <span class="fab-face" aria-hidden="true">
+          <UiIcon :name="isQuickCreateOpen ? 'x' : 'grid'" :size="20" />
+        </span>
       </button>
     </div>
   </Teleport>
@@ -400,38 +403,62 @@ onBeforeUnmount(() => {
 .fab {
   position: fixed;
   z-index: 93;
-  width: 56px;
-  height: 56px;
+  width: 54px;
+  height: 54px;
   padding: 0;
   margin: 0;
-  border: 0;
-  border-radius: 50%;
-  background: #14b8a6;
-  color: #fff;
+  border: 2px solid #0d9488;
+  border-radius: 16px;
+  background: #ffffff;
+  color: #0d9488;
   display: grid;
   place-items: center;
   line-height: 0;
   direction: ltr;
-  box-shadow: 0 6px 16px rgba(13, 148, 136, 0.28);
+  box-shadow:
+    0 4px 14px rgba(15, 23, 42, 0.12),
+    0 0 0 1px rgba(13, 148, 136, 0.08);
   cursor: grab;
   touch-action: none;
   user-select: none;
+  transition:
+    background 0.15s ease,
+    color 0.15s ease,
+    border-color 0.15s ease,
+    box-shadow 0.15s ease,
+    transform 0.12s ease;
+}
+
+.fab-face {
+  display: grid;
+  place-items: center;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
 }
 
 .fab :deep(.ico) {
   display: block;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 36px;
-  height: 36px;
-  margin: 0;
-  transform: translate(-50%, -50%);
-  stroke-width: 1.75;
+  stroke-width: 2;
+}
+
+.fab:hover {
+  background: #f0fdfa;
+  box-shadow:
+    0 8px 20px rgba(13, 148, 136, 0.22),
+    0 0 0 1px rgba(13, 148, 136, 0.12);
+}
+
+.fab.open {
+  background: #0d9488;
+  color: #fff;
+  border-color: #0d9488;
+  box-shadow: 0 8px 22px rgba(13, 148, 136, 0.35);
 }
 
 .fab.dragging {
   cursor: grabbing;
-  box-shadow: 0 8px 18px rgba(13, 148, 136, 0.34);
+  transform: scale(1.04);
+  box-shadow: 0 10px 24px rgba(13, 148, 136, 0.3);
 }
 </style>