chore(ui): improvements of welcome page (#6938)

kestra-io · Jan 25, 2025 · 69dda0e · 69dda0e
1 parent 715226d
commit 69dda0e
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 54 deletions.
diff --git a/ui/src/components/onboarding/OnboardingBottom.vue b/ui/src/components/onboarding/OnboardingBottom.vue
@@ -7,7 +7,7 @@
             :content="card.content"
             :category="card.category"
             :link="card.link"
-            @click="card.category === 'tour' ? startTour() : null"
+            @click="handleCardClick(card)"
         />
     </div>
 </template>
@@ -47,6 +47,13 @@
                 this.$store.commit("core/setGuidedProperties", {tourStarted: false});
                 this.$tours["guidedTour"]?.start();
             },
+            handleCardClick(card) {
+                if (card.category === "tour") {
+                    this.startTour();
+                } else if (card.category === "help") {
+                    window.open("https://kestra.io/slack", "_blank");
+                }
+            }
         }
     }
 </script>

diff --git a/ui/src/components/onboarding/OnboardingCard.vue b/ui/src/components/onboarding/OnboardingCard.vue
@@ -30,7 +30,7 @@
 <script setup>
     import OpenInNew from "vue-material-design-icons/OpenInNew.vue";
     import Monitor from "vue-material-design-icons/Monitor.vue";
-    import Slack from "vue-material-design-icons/Slack.vue";
+    import Slack from "./components/SlackLogo.vue";
     import PlayBox from "vue-material-design-icons/PlayBoxMultiple.vue";
 </script>
 <script>
@@ -64,17 +64,15 @@
                 }
             },
             getLink() {
-                // Define links for the specific categories
                 const links = {
                     help: "https://kestra.io/slack",
                 };
-                return links[this.category] || "#"; // Default to "#" if no link is found
+                return links[this.category] || "#";
             },
         },
         computed: {
             isOpenInNewCategory() {
-                // Define which categories should show the OpenInNew icon
-                return this.category === "help" || this.category === "docs";
+                return this.category === "help";
             },
         },
     };

diff --git a/ui/src/components/onboarding/Welcome.vue b/ui/src/components/onboarding/Welcome.vue
@@ -46,11 +46,9 @@
                         Watch Video
                     </el-button>
                 </div>
-                <div class="mid-bar mb-3">
-                    <div class="title title--center-line">
-                        {{ $t("homeDashboard.guide") }}
-                    </div>
-                </div>
+                <el-divider>
+                    {{ $t("homeDashboard.guide") }}
+                </el-divider>
                 <onboarding-bottom />
             </div>
         </div>
@@ -182,40 +180,12 @@
                 color: var(--ks-content-primary);
             }
         }
+    }
 
-        .mid-bar {
-            margin-top: 50px;
-
-            .title {
-                font-weight: 500;
-                color: var(--ks-content-secondary);
-                display: flex;
-                align-items: center;
-                white-space: nowrap;
-                font-size: var(--el-font-size-extra-small);
-
-                &--center-line {
-                    text-align: center;
-                    padding: 0;
-
-                    &::before,
-                    &::after {
-                        content: "";
-                        background-color: var(--ks-border-primary);
-                        height: 2px;
-                        width: 50%;
-                    }
-
-                    &::before {
-                        margin-right: 1rem;
-                    }
-
-                    &::after {
-                        margin-left: 1rem;
-                    }
-                }
-            }
-        }
+    :deep(.el-divider__text) {
+        color: var(--ks-content-secondary);
+        white-space: nowrap;
+        font-size: var(--el-font-size-extra-small);
     }
 
     @container (max-width: 20px) {
@@ -232,13 +202,6 @@
         .section-1 .section-1-main .container {
             width: 76%;
         }
-
-        .title--center-line {
-            &::before,
-            &::after {
-                width: 50%;
-            }
-        }
     }
 
 </style>
diff --git a/ui/src/components/onboarding/components/SlackLogo.vue b/ui/src/components/onboarding/components/SlackLogo.vue
@@ -0,0 +1,16 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 256 256" version="1.1" preserveAspectRatio="xMidYMid">
+        <g>
+            <path d="M53.8412698,161.320635 C53.8412698,176.152381 41.8539683,188.139683 27.0222222,188.139683 C12.1904762,188.139683 0.203174603,176.152381 0.203174603,161.320635 C0.203174603,146.488889 12.1904762,134.501587 27.0222222,134.501587 L53.8412698,134.501587 L53.8412698,161.320635 Z M67.2507937,161.320635 C67.2507937,146.488889 79.2380952,134.501587 94.0698413,134.501587 C108.901587,134.501587 120.888889,146.488889 120.888889,161.320635 L120.888889,228.368254 C120.888889,243.2 108.901587,255.187302 94.0698413,255.187302 C79.2380952,255.187302 67.2507937,243.2 67.2507937,228.368254 L67.2507937,161.320635 Z" fill="#E01E5A" />
+            <path d="M94.0698413,53.6380952 C79.2380952,53.6380952 67.2507937,41.6507937 67.2507937,26.8190476 C67.2507937,11.9873016 79.2380952,-7.10542736e-15 94.0698413,-7.10542736e-15 C108.901587,-7.10542736e-15 120.888889,11.9873016 120.888889,26.8190476 L120.888889,53.6380952 L94.0698413,53.6380952 Z M94.0698413,67.2507937 C108.901587,67.2507937 120.888889,79.2380952 120.888889,94.0698413 C120.888889,108.901587 108.901587,120.888889 94.0698413,120.888889 L26.8190476,120.888889 C11.9873016,120.888889 0,108.901587 0,94.0698413 C0,79.2380952 11.9873016,67.2507937 26.8190476,67.2507937 L94.0698413,67.2507937 Z" fill="#36C5F0" />
+            <path d="M201.549206,94.0698413 C201.549206,79.2380952 213.536508,67.2507937 228.368254,67.2507937 C243.2,67.2507937 255.187302,79.2380952 255.187302,94.0698413 C255.187302,108.901587 243.2,120.888889 228.368254,120.888889 L201.549206,120.888889 L201.549206,94.0698413 Z M188.139683,94.0698413 C188.139683,108.901587 176.152381,120.888889 161.320635,120.888889 C146.488889,120.888889 134.501587,108.901587 134.501587,94.0698413 L134.501587,26.8190476 C134.501587,11.9873016 146.488889,-1.42108547e-14 161.320635,-1.42108547e-14 C176.152381,-1.42108547e-14 188.139683, 11.9873016 188.139683,26.8190476 L188.139683,94.0698413 Z" fill="#2EB67D" />
+            <path d="M161.320635,201.549206 C176.152381,201.549206 188.139683,213.536508 188.139683,228.368254 C188.139683,243.2 176.152381,255.187302 161.320635,255.187302 C146.488889,255.187302 134.501587,243.2 134.501587,228.368254 L134.501587,201.549206 L161.320635,201.549206 Z M161.320635,188.139683 C146.488889,188.139683 134.501587,176.152381 134.501587,161.320635 C134.501587,146.488889 146.488889,134.501587 161.320635,134.501587 L228.571429,134.501587 C243.403175,134.501587 255.390476,146.488889 255.390476,161.320635 C255.390476,176.152381 243.403175,188.139683 228.571429,188.139683 L161.320635,188.139683 Z" fill="#ECB22E" />
+        </g>
+    </svg>
+</template>
+
+<script setup>
+    defineOptions({
+        name: "SlackLogo"
+    })
+</script>
diff --git a/ui/src/translations/en.json b/ui/src/translations/en.json
@@ -715,12 +715,11 @@
     "welcome": {
       "tour": {
         "title": "Take a product tour",
-        "text": "Chose your use case and follow a step-by-step guide to learn Kestra 's features and capabilities. ❤️"
+        "text": "Choose your use case and follow a step-by-step guide to learn Kestra's features and capabilities. ❤️"
       },
       "tutorial": {
         "title": "Tutorial",
-        "text": "* [Video Tutorials](https://kestra.io/tutorial-videos/all)\n* [Documentation](https://kestra.io/docs)\n* [Blueprints](https://kestra.io/blueprints)"
-      },
+        "text": " * <a href=\"https://kestra.io/tutorial-videos/all\" target=\"_blank\">Video Tutorials</a> \n* <a href=\"https://kestra.io/docs\" target=\"_blank\">Documentation</a> \n* <a href=\"https://kestra.io/blueprints\" target=\"_blank\">Blueprints</a>"      },
       "help": {
         "title": "Need help?",
         "text": "Ask any question in our Slack community. If you are stuck, we are help to help you. ✋"