From 4d466ec2d0dd4155b7fd8e4ae72409152cf37901 Mon Sep 17 00:00:00 2001
From: ayasayadi1 <aya.sayadi@count.ly>
Date: Wed, 1 Nov 2023 18:38:45 +0000
Subject: [PATCH] new design for walkthrough tile

---
 .../public/images/icons/arrow_drop_right.svg  |  3 ++
 .../public/localization/guides.properties     |  3 +-
 .../frontend/public/stylesheets/main.scss     | 35 +++++++++----------
 .../templates/walkthrough-component.html      |  5 ++-
 4 files changed, 26 insertions(+), 20 deletions(-)
 create mode 100644 frontend/express/public/images/icons/arrow_drop_right.svg

diff --git a/frontend/express/public/images/icons/arrow_drop_right.svg b/frontend/express/public/images/icons/arrow_drop_right.svg
new file mode 100644
index 00000000000..4c33989c357
--- /dev/null
+++ b/frontend/express/public/images/icons/arrow_drop_right.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 11.8324V2.80952V2.30538C0 0.80209 1.59635 -0.163818 2.92801 0.533722L12.4551 5.52408C13.9153 6.28896 13.8752 8.39275 12.3869 9.10147L2.85987 13.6382C1.53266 14.2702 0 13.3024 0 11.8324Z" fill="white"/>
+</svg>
diff --git a/plugins/guides/frontend/public/localization/guides.properties b/plugins/guides/frontend/public/localization/guides.properties
index 2047523eef5..1c26ce48916 100755
--- a/plugins/guides/frontend/public/localization/guides.properties
+++ b/plugins/guides/frontend/public/localization/guides.properties
@@ -29,4 +29,5 @@ guides.search.start-description= Type something and press enter to see the resul
 guides.search.no-result = ...hmm, there are no results
 guides.search.no-result-description = Try adjusting your search to find what you’re looking for
 
-guides.view = View Guide
\ No newline at end of file
+guides.view = View Guide
+guides.take-the-tour = Take the tour
\ No newline at end of file
diff --git a/plugins/guides/frontend/public/stylesheets/main.scss b/plugins/guides/frontend/public/stylesheets/main.scss
index 602a0b95780..15905acefde 100755
--- a/plugins/guides/frontend/public/stylesheets/main.scss
+++ b/plugins/guides/frontend/public/stylesheets/main.scss
@@ -55,11 +55,12 @@
     .walkthrough {
         position: relative; 
         display: flex;
-        align-items: center;
-        justify-content: center;
+        flex-direction: column;
+        justify-content: space-between;
         border-radius: 10px;
-        width: 100%;
-        height: 250px;
+        height: 200px;
+        box-sizing: border-box;
+        padding: 1rem;
         cursor: pointer;
         &--blue {
             background: linear-gradient(139.69deg, #017AFF 22.95%, rgba(1, 122, 255, 0.5) 96.04%);
@@ -75,30 +76,28 @@
         }
 
         &__title {
-            position: absolute;
             font-size: 23px;
             font-weight: 500;
             line-height: 30px;
             letter-spacing: .003em;
             text-align: left;
             color: #fff;
-            z-index: 9;
             width: 80%;
             word-break: break-word;
             overflow-wrap: break-word;
-            left: 50%;
-            top: 50%;
-            transform: translate(-50%, -50%);
         }
-
-        &__icon {
-            position: absolute;
-            width: 50px;
-            opacity: 0.8;
-            z-index: 10;
-            left: 50%;
-            top: 50%;
-            transform: translate(-50%, -50%);
+        
+        &__button {
+            display: flex;
+            flex-direction: row;
+            &__icon {
+                width: 16px;
+                margin-right: 5px;
+            }
+            &__text {
+                opacity: 0.8px;
+                color: #fff;
+            }
         }
     }
 }
diff --git a/plugins/guides/frontend/public/templates/walkthrough-component.html b/plugins/guides/frontend/public/templates/walkthrough-component.html
index f2d7c336ea9..97f196cab3d 100755
--- a/plugins/guides/frontend/public/templates/walkthrough-component.html
+++ b/plugins/guides/frontend/public/templates/walkthrough-component.html
@@ -1,9 +1,12 @@
 <div class="walkthrough-wrapper bu-column">
     <div :class="['walkthrough', gradientClass]" :id="'walkthrough__'+value.id" @click="openDialog()">
-        <img src="images/icons/play-circle-filled.svg" alt="Icon" class="walkthrough__icon"/>
         <div class="walkthrough__title">
             {{ value.title }}
         </div>
+        <div class="walkthrough__button">
+            <img src="images/icons/arrow_drop_right.svg" alt="Icon" class="walkthrough__button__icon"/>
+            <div class="walkthrough__button__text">{{ i18n('guides.take-the-tour') }}</div>
+        </div>
     </div>
     <el-dialog
         :visible.sync="isDialogIframeVisible"