[FIX] website_profile: improve top banner and navigation and apply various tweaks

Improve the email validation banner and allow adding custom classes when
calling its templates. Also improve top banner design as well as navigation
and tabs.

Finally perform some minor tweaks on design.

Commit linked to task ID 1941250 and PR #31977

1 files changed, 15 insertions, 43 deletions

diff --git a/addons/website_profile/static/src/scss/website_profile.scss b/addons/website_profile/static/src/scss/website_profile.scss
index a20b1ea2eef..ad1771c5d62 100644
--- a/addons/website_profile/static/src/scss/website_profile.scss
+++ b/addons/website_profile/static/src/scss/website_profile.scss
@@ -1,5 +1,5 @@
 $owprofile-color-bg: desaturate(map-get($grays, "200"), 80%);
-$owprofile-tabs-height: 37px;
+$owprofile-tabs-height: 36px;
 
 .o_wprofile_wrap {
     background-color: $owprofile-color-bg;
@@ -119,52 +119,24 @@ $owprofile-tabs-height: 37px;
 
 // All Users Page
 .o_wprofile_all_users_nav {
-    margin: auto;
-    background: linear-gradient(90deg, #875A7B 20%, #62495B 80%) !important;
-    a {
-        color: #FFFFFF;
-    }
-    nav {
-        .breadcrumb-item::before {
-            font-weight: bold;
-            color: #FFFFFF;
-            opacity: 0.8;
-        }
-        .breadcrumb-item {
-            a {
-                font-weight: bold;
-                color: #FFFFFF;
-                opacity: 0.8;
-                transition: opacity linear .3s;
-            }
-            &.active {
-                a {
-                    opacity: 1.0;
-                }
-            }
-        }
-        ol {
-            background-color: transparent;
-        }
+    border-width: 1px 0;
+
+    &, .o_wprofile_course_nav_search {
+        background-color: rgba(white, 0.05);
+        border-color: rgba(white, 0.1);
+        border-style: solid;
     }
-}
 
-.o_wprofile_all_users_header {
-    @include media-breakpoint-up(sm)  {
-        min-height: 200px;
-        margin-bottom: -60px;
+    .o_wprofile_course_nav_search {
+        border-width: 0 1px;
     }
-    margin: auto;
-    background: linear-gradient(90deg, #875A7B 20%, #62495B 80%) !important;
-    > div:first-child {
-        margin: auto;
-        width: 100%;
-        max-width: 1140px;
-        padding: 32px 32px 0px 32px;
+
+    .breadcrumb-item.active a, .breadcrumb-item a:hover {
         color: white;
-        top: 48px;
-        padding-top: 0px;
-        height: 250px;
+    }
+
+    .breadcrumb-item a, .breadcrumb-item + .breadcrumb-item::before, .o_wprofile_course_nav_search input::placeholder {
+        color: rgba(white, 0.8);
     }
 }