feat(ui): update dark version popover menu and dropdown (#1710)

* feat(ui): update popover menu and dropdown * fix: update snapshot
Qovery · Oct 7, 2024 · d3ceaa9 · d3ceaa9
1 parent c9d1c70
commit d3ceaa9
Show file tree

Hide file tree

Showing 28 changed files with 106 additions and 226 deletions.
diff --git a/...feature/src/lib/cluster-action-toolbar/__snapshots__/cluster-action-toolbar.spec.tsx.snap b/...feature/src/lib/cluster-action-toolbar/__snapshots__/cluster-action-toolbar.spec.tsx.snap
diff --git a/libs/domains/clusters/feature/src/lib/cluster-card/__snapshots__/cluster-card.spec.tsx.snap b/libs/domains/clusters/feature/src/lib/cluster-card/__snapshots__/cluster-card.spec.tsx.snap
@@ -13,7 +13,7 @@ exports[`ClusterCard should render correctly 1`] = `
         class="flex items-center gap-3"
       >
         <svg
-          class="shrink-0 "
+          class="text-[#252F3E] dark:text-neutral-50 shrink-0"
           fill="none"
           height="28"
           name="AWS"
@@ -23,7 +23,7 @@ exports[`ClusterCard should render correctly 1`] = `
         >
           <path
             d="M4.50949 3.8218C4.50949 4.0195 4.53083 4.17977 4.56806 4.29731C4.61532 4.42954 4.67222 4.5581 4.73831 4.68193C4.76492 4.72466 4.77553 4.76739 4.77553 4.80483C4.77553 4.85821 4.74364 4.91165 4.67446 4.9651L4.33924 5.18946C4.29134 5.22153 4.24344 5.23754 4.20081 5.23754C4.14764 5.23754 4.09441 5.21082 4.04117 5.16273C3.96948 5.08538 3.90535 5.0013 3.84964 4.91165C3.79641 4.8209 3.74317 4.71931 3.68467 4.59648C3.26959 5.08793 2.74804 5.33371 2.12015 5.33371C1.67319 5.33371 1.31662 5.20546 1.05584 4.94909C0.795133 4.69258 0.662109 4.35069 0.662109 3.92333C0.662109 3.46925 0.82175 3.10063 1.14637 2.82283C1.47092 2.54503 1.90201 2.40613 2.45011 2.40613C2.63103 2.40613 2.81729 2.42213 3.01415 2.44886C3.21108 2.47558 3.41328 2.51831 3.62616 2.56639V2.17641C3.62616 1.77035 3.54097 1.48726 3.376 1.32163C3.20575 1.15601 2.91836 1.07585 2.50861 1.07585C2.32236 1.07585 2.13083 1.09727 1.9339 1.14536C1.73703 1.19338 1.54544 1.25218 1.35918 1.32699C1.27405 1.36436 1.21021 1.38573 1.17292 1.39644C1.13569 1.40715 1.10908 1.41245 1.0878 1.41245C1.01328 1.41245 0.976054 1.35901 0.976054 1.24683V0.98503C0.976054 0.899571 0.986726 0.835477 1.01328 0.798105C1.0399 0.760669 1.0878 0.723297 1.16231 0.685924C1.34857 0.589752 1.57205 0.509587 1.83276 0.445493C2.0936 0.376042 2.37032 0.344027 2.66298 0.344027C3.29627 0.344027 3.75925 0.488222 4.05725 0.77674C4.34991 1.06519 4.49894 1.50326 4.49894 2.09095V3.8218H4.50961H4.50949ZM2.34897 4.63385C2.52462 4.63385 2.70554 4.60183 2.89707 4.53768C3.08867 4.47358 3.25898 4.35604 3.40261 4.19578C3.4878 4.09431 3.55164 3.98213 3.58353 3.85388C3.61549 3.72569 3.63677 3.57072 3.63677 3.38909V3.16473C3.47539 3.1253 3.31194 3.09498 3.14718 3.07391C2.98127 3.05276 2.81421 3.04205 2.64697 3.04183C2.2904 3.04183 2.02969 3.11129 1.85411 3.25554C1.67846 3.3998 1.59333 3.6028 1.59333 3.86989C1.59333 4.12097 1.65718 4.30796 1.7902 4.43621C1.91795 4.56975 2.10421 4.63385 2.34897 4.63385ZM6.6221 5.21082C6.5263 5.21082 6.46246 5.19481 6.4199 5.15738C6.37733 5.12536 6.34004 5.05055 6.30815 4.94909L5.05765 0.819469C5.02563 0.712583 5.00969 0.643132 5.00969 0.60576C5.00969 0.520301 5.05225 0.472152 5.13744 0.472152H5.65892C5.75999 0.472152 5.82923 0.488222 5.86646 0.525595C5.90902 0.557673 5.94098 0.632481 5.97287 0.733948L6.86687 4.27059L7.69702 0.733948C7.72364 0.627124 7.75559 0.557673 7.79809 0.525595C7.84071 0.493579 7.91523 0.472215 8.01103 0.472215H8.43671C8.53778 0.472215 8.60703 0.488222 8.64953 0.525595C8.69215 0.557673 8.72938 0.632481 8.75066 0.733948L9.59149 4.31332L10.512 0.733948C10.5439 0.627124 10.5812 0.557673 10.6184 0.525595C10.661 0.493579 10.7302 0.472215 10.826 0.472215H11.3208C11.406 0.472215 11.4539 0.514944 11.4539 0.60576C11.4539 0.632481 11.4486 0.659203 11.4433 0.691218C11.4379 0.723297 11.4273 0.766026 11.406 0.824826L10.1235 4.95438C10.0916 5.06127 10.0544 5.13072 10.0118 5.16273C9.96921 5.19481 9.90003 5.21618 9.80963 5.21618H9.35199C9.25086 5.21618 9.18168 5.20017 9.13906 5.16273C9.09649 5.12536 9.05927 5.05591 9.03799 4.94909L8.21311 1.50326L7.39362 4.94367C7.36707 5.05055 7.33511 5.12 7.29255 5.15738C7.24999 5.19481 7.17547 5.21082 7.07974 5.21082H6.62204H6.6221ZM13.4601 5.35508C13.1834 5.35508 12.9067 5.323 12.6407 5.25891C12.3746 5.19481 12.1671 5.1253 12.0287 5.04526C11.9435 4.99711 11.885 4.94373 11.8637 4.89564C11.843 4.84849 11.8321 4.79757 11.8318 4.74603V4.47358C11.8318 4.3614 11.8743 4.30796 11.9542 4.30796C11.9868 4.30808 12.0191 4.31351 12.05 4.32403C12.0819 4.33474 12.1298 4.35604 12.183 4.37741C12.371 4.4604 12.5672 4.52309 12.7683 4.5644C12.9768 4.60687 13.1889 4.62834 13.4016 4.62849C13.7369 4.62849 13.9976 4.56975 14.1786 4.45222C14.3595 4.33468 14.4553 4.16376 14.4553 3.9447C14.4553 3.79514 14.4074 3.67225 14.3116 3.57072C14.2158 3.46925 14.0349 3.37844 13.7742 3.29292L13.0025 3.05255C12.614 2.92965 12.3267 2.74802 12.1511 2.50759C11.9755 2.27252 11.885 2.01079 11.885 1.73298C11.885 1.50862 11.9329 1.31092 12.0287 1.13994C12.1244 0.969022 12.2522 0.819469 12.4118 0.701932C12.5715 0.579038 12.7524 0.488222 12.9653 0.424129C13.1781 0.360035 13.4016 0.333313 13.6357 0.333313C13.7528 0.333313 13.8752 0.33867 13.9923 0.354678C14.1147 0.370685 14.2265 0.39205 14.3382 0.413415C14.4446 0.440136 14.5457 0.466858 14.6415 0.498936C14.7373 0.530952 14.8118 0.56303 14.865 0.595046C14.9395 0.637838 14.9927 0.680567 15.0247 0.728654C15.0566 0.771383 15.0726 0.83012 15.0726 0.904928V1.15601C15.0726 1.26819 15.03 1.32699 14.9501 1.32699C14.9076 1.32699 14.8384 1.30556 14.748 1.26283C14.4446 1.12393 14.104 1.05448 13.7263 1.05448C13.4229 1.05448 13.1834 1.10257 13.0184 1.2041C12.8535 1.30556 12.7683 1.46053 12.7683 1.67954C12.7683 1.82915 12.8216 1.95734 12.928 2.05887C13.0345 2.16034 13.2313 2.26187 13.5134 2.35268L14.269 2.59311C14.6521 2.71601 14.9289 2.88692 15.0938 3.10593C15.2588 3.325 15.3387 3.57608 15.3387 3.85388C15.3387 4.0836 15.2907 4.29195 15.2002 4.47358C15.1045 4.65521 14.9768 4.81548 14.8118 4.94373C14.6468 5.07727 14.4499 5.17345 14.2211 5.2429C13.9816 5.31771 13.7315 5.35508 13.4601 5.35508Z"
-            fill="#252F3E"
+            fill="currentColor"
           />
           <path
             d="M14.4653 7.9514C12.7146 9.2496 10.1709 9.93875 7.98386 9.93875C4.91868 9.93875 2.15689 8.80082 0.0708979 6.90964C-0.0940785 6.76009 0.0548899 6.55709 0.251757 6.67456C2.50807 7.98884 5.29119 8.78481 8.17012 8.78481C10.1124 8.78481 12.2463 8.37882 14.21 7.54541C14.5026 7.4118 14.7527 7.73775 14.4653 7.9514ZM15.1944 7.11799C14.9709 6.82954 13.715 6.97909 13.1456 7.04854C12.9753 7.06997 12.9487 6.92035 13.1031 6.80817C14.1035 6.10295 15.7479 6.30601 15.9394 6.54102C16.131 6.78145 15.8862 8.4322 14.9496 9.22288C14.806 9.34578 14.6676 9.28168 14.7314 9.12141C14.9443 8.59247 15.4179 7.40115 15.1944 7.11799Z"

diff --git a/...src/lib/environment-action-toolbar/__snapshots__/environment-action-toolbar.spec.tsx.snap b/...src/lib/environment-action-toolbar/__snapshots__/environment-action-toolbar.spec.tsx.snap
@@ -89,12 +89,12 @@ exports[`EnvironmentActionToolbar should match manage deployment snapshot 1`] =
   <div
     data-radix-popper-content-wrapper=""
     dir="ltr"
-    style="position: fixed; left: 0px; top: 0px; transform: translate(0px, 12px); min-width: max-content; --radix-popper-available-width: 0px; --radix-popper-available-height: -12px; --radix-popper-anchor-width: 0px; --radix-popper-anchor-height: 0px; --radix-popper-transform-origin: 0px 0px;"
+    style="position: fixed; left: 0px; top: 0px; transform: translate(0px, 8px); min-width: max-content; --radix-popper-available-width: 0px; --radix-popper-available-height: -8px; --radix-popper-anchor-width: 0px; --radix-popper-anchor-height: 0px; --radix-popper-transform-origin: 0% 0px;"
   >
     <div
       aria-labelledby="radix-:r6:"
       aria-orientation="vertical"
-      class="flex w-[258px] flex-col gap-1 rounded-md bg-neutral-50 p-3 shadow-[0_0_32px_rgba(0,0,0,0.08)] data-[state=open]:data-[side=bottom]:animate-slidein-up-md-faded data-[state=open]:data-[side=left]:animate-slidein-right-sm-faded data-[state=open]:data-[side=right]:animate-slidein-left-md-faded data-[state=open]:data-[side=top]:animate-slidein-down-md-faded dark:bg-neutral-700"
+      class="flex w-[258px] flex-col gap-1 rounded-md bg-neutral-50 p-3 shadow-[0_0_32px_rgba(0,0,0,0.08)] data-[state=open]:data-[side=bottom]:animate-slidein-up-md-faded data-[state=open]:data-[side=left]:animate-slidein-right-sm-faded data-[state=open]:data-[side=right]:animate-slidein-left-md-faded data-[state=open]:data-[side=top]:animate-slidein-down-md-faded dark:bg-neutral-550"
       data-align="start"
       data-orientation="vertical"
       data-radix-menu-content=""
@@ -106,24 +106,8 @@ exports[`EnvironmentActionToolbar should match manage deployment snapshot 1`] =
       style="outline: none; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); pointer-events: auto;"
       tabindex="-1"
     >
-      <span
-        style="position: absolute; top: 0px; transform-origin: center 0; transform: rotate(180deg); left: 0px;"
-      >
-        <svg
-          class="fill-white dark:fill-neutral-700"
-          height="6"
-          preserveAspectRatio="none"
-          style="display: block;"
-          viewBox="0 0 30 10"
-          width="12"
-        >
-          <polygon
-            points="0,0 30,0 15,10"
-          />
-        </svg>
-      </span>
       <div
-        class="px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none dark:text-neutral-100 data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-550 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500"
+        class="px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none dark:text-neutral-100 data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
         data-orientation="vertical"
         data-radix-collection-item=""
         role="menuitem"
@@ -136,7 +120,7 @@ exports[`EnvironmentActionToolbar should match manage deployment snapshot 1`] =
         Redeploy
       </div>
       <div
-        class="px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none dark:text-neutral-100 data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-550 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500"
+        class="px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none dark:text-neutral-100 data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
         data-orientation="vertical"
         data-radix-collection-item=""
         role="menuitem"
@@ -154,7 +138,7 @@ exports[`EnvironmentActionToolbar should match manage deployment snapshot 1`] =
         role="separator"
       />
       <div
-        class="px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none dark:text-neutral-100 data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-550 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500"
+        class="px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none dark:text-neutral-100 data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
         data-orientation="vertical"
         data-radix-collection-item=""
         role="menuitem"
@@ -267,12 +251,12 @@ exports[`EnvironmentActionToolbar should match other actions snapshot 1`] = `
   <div
     data-radix-popper-content-wrapper=""
     dir="ltr"
-    style="position: fixed; left: 0px; top: 0px; transform: translate(0px, 12px); min-width: max-content; --radix-popper-available-width: 0px; --radix-popper-available-height: -12px; --radix-popper-anchor-width: 0px; --radix-popper-anchor-height: 0px; --radix-popper-transform-origin: 0px 0px;"
+    style="position: fixed; left: 0px; top: 0px; transform: translate(0px, 8px); min-width: max-content; --radix-popper-available-width: 0px; --radix-popper-available-height: -8px; --radix-popper-anchor-width: 0px; --radix-popper-anchor-height: 0px; --radix-popper-transform-origin: 0% 0px;"
   >
     <div
       aria-labelledby="radix-:rv:"
       aria-orientation="vertical"
-      class="flex w-[258px] flex-col gap-1 rounded-md bg-neutral-50 p-3 shadow-[0_0_32px_rgba(0,0,0,0.08)] data-[state=open]:data-[side=bottom]:animate-slidein-up-md-faded data-[state=open]:data-[side=left]:animate-slidein-right-sm-faded data-[state=open]:data-[side=right]:animate-slidein-left-md-faded data-[state=open]:data-[side=top]:animate-slidein-down-md-faded dark:bg-neutral-700"
+      class="flex w-[258px] flex-col gap-1 rounded-md bg-neutral-50 p-3 shadow-[0_0_32px_rgba(0,0,0,0.08)] data-[state=open]:data-[side=bottom]:animate-slidein-up-md-faded data-[state=open]:data-[side=left]:animate-slidein-right-sm-faded data-[state=open]:data-[side=right]:animate-slidein-left-md-faded data-[state=open]:data-[side=top]:animate-slidein-down-md-faded dark:bg-neutral-550"
       data-align="start"
       data-orientation="vertical"
       data-radix-menu-content=""
@@ -284,24 +268,8 @@ exports[`EnvironmentActionToolbar should match other actions snapshot 1`] = `
       style="outline: none; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); pointer-events: auto;"
       tabindex="-1"
     >
-      <span
-        style="position: absolute; top: 0px; transform-origin: center 0; transform: rotate(180deg); left: 0px;"
-      >
-        <svg
-          class="fill-white dark:fill-neutral-700"
-          height="6"
-          preserveAspectRatio="none"
-          style="display: block;"
-          viewBox="0 0 30 10"
-          width="12"
-        >
-          <polygon
-            points="0,0 30,0 15,10"
-          />
-        </svg>
-      </span>
       <a
-        class="transition duration-100 px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none dark:text-neutral-100 data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-550 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 gap-0"
+        class="transition duration-100 px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none dark:text-neutral-100 data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550 gap-0"
         data-orientation="vertical"
         data-radix-collection-item=""
         href="/organization/123/project/123/environment/3840068565336064/logs"
@@ -315,7 +283,7 @@ exports[`EnvironmentActionToolbar should match other actions snapshot 1`] = `
         Logs
       </a>
       <a
-        class="transition duration-100 px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none dark:text-neutral-100 data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-550 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 gap-0"
+        class="transition duration-100 px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none dark:text-neutral-100 data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550 gap-0"
         data-orientation="vertical"
         data-radix-collection-item=""
         href="/organization/123/audit-logs/general?targetType=ENVIRONMENT&projectId=123&targetId=3840068565336064"
@@ -329,7 +297,7 @@ exports[`EnvironmentActionToolbar should match other actions snapshot 1`] = `
         See audit logs
       </a>
       <div
-        class="px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none dark:text-neutral-100 data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-550 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500"
+        class="px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none dark:text-neutral-100 data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
         data-orientation="vertical"
         data-radix-collection-item=""
         role="menuitem"
@@ -342,7 +310,7 @@ exports[`EnvironmentActionToolbar should match other actions snapshot 1`] = `
         Copy identifier
       </div>
       <div
-        class="px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none dark:text-neutral-100 data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-550 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500"
+        class="px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none dark:text-neutral-100 data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
         data-orientation="vertical"
         data-radix-collection-item=""
         role="menuitem"
@@ -355,7 +323,7 @@ exports[`EnvironmentActionToolbar should match other actions snapshot 1`] = `
         Export as Terraform
       </div>
       <div
-        class="px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none dark:text-neutral-100 data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-550 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500"
+        class="px-3 flex items-center h-9 text-sm font-medium rounded-sm outline-none dark:text-neutral-100 data-[highlighted]:bg-brand-50 data-[highlighted]:text-brand-500 dark:data-[highlighted]:bg-neutral-400 cursor-pointer text-neutral-400 hover:bg-brand-50 hover:text-brand-500 dark:hover:bg-neutral-550"
         data-orientation="vertical"
         data-radix-collection-item=""
         role="menuitem"