feat(page-new-cluster): update grid cards (#1740)

Qovery · Oct 29, 2024 · 6a95279 · 6a95279
1 parent ba2c8d7
commit 6a95279
Show file tree

Hide file tree

Showing 8 changed files with 335 additions and 286 deletions.
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
@@ -3,7 +3,7 @@
 exports[`ClusterCard should render correctly 1`] = `
 <div>
   <a
-    class="flex flex-col gap-5 rounded border border-neutral-200 p-5 shadow-sm transition-colors duration-150 hover:border-brand-500"
+    class="duration-50 flex flex-col gap-5 rounded border border-neutral-200 p-5 shadow-sm outline outline-2 outline-transparent transition-all hover:border-brand-500 hover:-outline-offset-2 hover:outline-brand-500"
     href="/organization/org-id/cluster/cluster-id/settings"
   >
     <div

diff --git a/libs/domains/clusters/feature/src/lib/cluster-card/cluster-card.tsx b/libs/domains/clusters/feature/src/lib/cluster-card/cluster-card.tsx
@@ -21,7 +21,7 @@ export function ClusterCard({ cluster, clusterStatus }: ClusterCardProps) {
   return (
     <Link
       to={CLUSTER_URL(cluster.organization.id, cluster.id) + CLUSTER_SETTINGS_URL}
-      className="flex flex-col gap-5 rounded border border-neutral-200 p-5 shadow-sm transition-colors duration-150 hover:border-brand-500"
+      className="duration-50 flex flex-col gap-5 rounded border border-neutral-200 p-5 shadow-sm outline outline-2 outline-transparent transition-all hover:border-brand-500 hover:-outline-offset-2 hover:outline-brand-500"
     >
       <div className="flex items-center justify-between gap-2">
         <div className="flex items-center gap-3">

diff --git a/...ers/feature/src/lib/cluster-installation-guide-modal/cluster-installation-guide-modal.tsx b/...ers/feature/src/lib/cluster-installation-guide-modal/cluster-installation-guide-modal.tsx
@@ -32,9 +32,13 @@ export function ClusterInstallationGuideModal({ type, onClose, ...props }: Clust
     download(installationHelmValues ?? '', `cluster-installation-guide-${props.cluster.id}.yaml`, 'text/plain')
   }
 
+  const isDemo = props.mode === 'CREATE' ? props.isDemo : props.cluster.is_demo
+
   return (
     <div className="flex flex-col gap-6 p-6">
-      <h2 className="h4 text-neutral-400">Installation guide</h2>
+      <h2 className="h4 text-neutral-400">
+        {isDemo ? 'Install Qovery on your local machine' : 'Install Qovery on your cluster'}
+      </h2>
 
       <div className="flex flex-col gap-4">
         {props.mode === 'EDIT' && type === 'ON_PREMISE' && (

diff --git a/...es/clusters/src/lib/feature/page-clusters-create-feature/page-clusters-create-feature.tsx b/...es/clusters/src/lib/feature/page-clusters-create-feature/page-clusters-create-feature.tsx
@@ -13,6 +13,7 @@ import {
 import {
   CLUSTERS_CREATION_GENERAL_URL,
   CLUSTERS_CREATION_URL,
+  CLUSTERS_NEW_URL,
   CLUSTERS_TEMPLATE_CREATION_URL,
   CLUSTERS_URL,
 } from '@qovery/shared/routes'
@@ -157,7 +158,7 @@ export function PageClusterCreateFeature() {
       <FunnelFlow
         onExit={() => {
           if (window.confirm('Do you really want to leave?')) {
-            navigate(CLUSTERS_URL(organizationId))
+            navigate(CLUSTERS_URL(organizationId) + CLUSTERS_NEW_URL)
           }
         }}
         totalSteps={steps(generalData, resourcesData?.cluster_type).length}