[IMP] website_slides_survey: add a specific background for certification channels

This commit introduces a specific icon/design for certifications. It is applied
to channels having at least one slide of certification type.

Linked to task 1958372
Related to PR #32648

3 files changed, 35 insertions, 26 deletions

diff --git a/addons/website_slides_survey/static/src/img/certification.svg b/addons/website_slides_survey/static/src/img/certification.svg
new file mode 100644
index 00000000000..54895cf600f
--- /dev/null
+++ b/addons/website_slides_survey/static/src/img/certification.svg
@@ -0,0 +1 @@
+<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path d="M7.158 11.549a2.005 2.005 0 0 1-3.105-1.286 2.005 2.005 0 0 1-1.286-3.105 2.005 2.005 0 0 1 1.286-3.105 2.005 2.005 0 0 1 3.105-1.286 2.005 2.005 0 0 1 3.105 1.286 2.005 2.005 0 0 1 1.286 3.105 2.005 2.005 0 0 1-1.286 3.105 2.005 2.005 0 0 1-3.105 1.286z" id="a"/><filter filterUnits="objectBoundingBox" id="b"><feMorphology radius=".5" in="SourceAlpha" result="shadowSpreadInner1"/><feOffset in="shadowSpreadInner1" result="shadowOffsetInner1"/><feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0749562937 0" in="shadowInnerInner1"/></filter><path id="d" d="M6.04788912 6.85018391L7.55257375 8.20939291 9.91700506 6 11 6.947144 7.55257375 10 5 7.75171917z"/><filter x="-2.5%" y="-3.8%" width="105%" height="115%" filterUnits="objectBoundingBox" id="c"><feOffset dy=".3" in="SourceAlpha" result="shadowOffsetOuter1"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.233200393 0" in="shadowOffsetOuter1"/></filter></defs><g transform="translate(-2 -2)" fill="none" fill-rule="evenodd"><g transform="rotate(22 5.57 9.903)"><use fill="#00C9FF" xlink:href="#a"/><use fill="#000" filter="url(#b)" xlink:href="#a"/><path stroke="#FFF" stroke-width=".7" d="M7.158 11.96a2.355 2.355 0 0 1-3.395-1.407 2.355 2.355 0 0 1-1.406-3.395 2.355 2.355 0 0 1 1.406-3.395 2.355 2.355 0 0 1 3.395-1.406 2.355 2.355 0 0 1 3.395 1.406 2.355 2.355 0 0 1 1.406 3.395 2.355 2.355 0 0 1-1.406 3.395 2.355 2.355 0 0 1-3.395 1.406z"/></g><use fill="#000" filter="url(#c)" xlink:href="#d"/><use fill="#FFF" xlink:href="#d"/></g></svg>
\ No newline at end of file
diff --git a/addons/website_slides_survey/static/src/scss/website_profile.scss b/addons/website_slides_survey/static/src/scss/website_profile.scss
deleted file mode 100644
index c912aebf31b..00000000000
--- a/addons/website_slides_survey/static/src/scss/website_profile.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-// Certification Card
-.o_wprofile_slides_certif_card_body {
-    height: 66px;
-    > div > div:first-child {
-        position: absolute;
-        padding: 0px;
-        top: 8px;
-        left: 8px;
-        width: 66px;
-        height: 66px;
-    }
-    > div > div:nth-child(3) > span {
-        position: absolute;
-        right: 32px;
-        top: 13px;
-    }
-    > div > div > div:nth-child(2) {
-        position: absolute;
-        bottom: 0px;
-        right: 32px;
-        a {
-            margin-left: 8px;
-            color: grey;
-        }
-    }
-}
diff --git a/addons/website_slides_survey/static/src/scss/website_slides_survey.scss b/addons/website_slides_survey/static/src/scss/website_slides_survey.scss
new file mode 100644
index 00000000000..3aaa503352c
--- /dev/null
+++ b/addons/website_slides_survey/static/src/scss/website_slides_survey.scss
@@ -0,0 +1,34 @@
+$o_wss_color_1 : #5B7687;
+$o_wss_color_2 : #485761;
+
+// General
+// **************************************************
+.o_wss_certification_icon {
+    @include size(1.4em, auto);
+}
+
+// Course page
+// **************************************************
+#wrap.o_wss_certification_channel {
+    .o_wslides_course_header {
+        background-image: linear-gradient(120deg, $o_wss_color_1, $o_wss_color_2);
+    }
+
+    .o_wslides_course_pict {
+        @include media-breakpoint-up(md)  {
+            border-color: $o_wss_color_2;
+        }
+    }
+
+    .o_wslides_nav_tabs .nav-link {
+        @include media-breakpoint-up(md) {
+            &, &:hover{
+                border-color: $o_wss_color_1;
+            }
+
+            &.active {
+                border-color: $gray-100;
+            }
+        }
+    }
+}