From 9a189c6eb0c00349d9389eeec0237364ea4f0ff3 Mon Sep 17 00:00:00 2001
From: divy-odoo <divy@odoo.com>
Date: Fri, 26 May 2023 07:08:48 +0000
Subject: [PATCH] [FIX] website: image gallery snippet arrow visibility

This commit solves the visibility issue of an arrow in the image gallery
snippet. Before this commit, an arrow was not visible over the white
background.

In this PR[1], we adapted directional odoo icons by replacing font
awesome but there were some CSS directly targeting the `fa` class that
also should be replaced by the `oi` to target the `oi` class. So adding
the CSS selector `oi`.
- Keeping 'fa' too, as this still can be used by the already dropped
snippet.

[1]: https://github.com/odoo/odoo/commit/418413e4997a6b65eb7ad9e9ef8aba42805f1c0c

task-3339169

closes odoo/odoo#129939

X-original-commit: 59c7a371c9389135ff6fa9778e6f5adea9a97aea
Signed-off-by: Benjamin Vray (bvr) <bvr@odoo.com>
Signed-off-by: Divyesh Vyas (divy) <divy@odoo.com>
---
 .../src/snippets/s_image_gallery/001.scss     | 93 ++++++++++++-------
 1 file changed, 61 insertions(+), 32 deletions(-)

diff --git a/addons/website/static/src/snippets/s_image_gallery/001.scss b/addons/website/static/src/snippets/s_image_gallery/001.scss
index d4d66c11340..4ce91fcd224 100644
--- a/addons/website/static/src/snippets/s_image_gallery/001.scss
+++ b/addons/website/static/src/snippets/s_image_gallery/001.scss
@@ -141,47 +141,74 @@
         }
         &.s_image_gallery_indicators_arrows_boxed, &.s_image_gallery_indicators_arrows_rounded {
             .carousel {
-                .carousel-control-prev .fa,
-                .carousel-control-next .fa {
-                    text-shadow: none;
+                .carousel-control-prev,
+                .carousel-control-next {
+                    // Directional icons replaced by oi but keeping fa here, it
+                    // is still used by already dropped snippet
+                    .fa, .oi {
+                        text-shadow: none;
+                    }
                 }
             }
         }
         &.s_image_gallery_indicators_arrows_boxed {
             .carousel {
-                .carousel-control-prev .fa:before {
-                    content: "\f104";
-                    padding-right: 2px;
+                .carousel-control-prev {
+                    .fa:before {
+                        content: "\f104";
+                    }
+                    .oi:before, .fa:before {
+                        padding-right: 2px;
+                    }
                 }
-                .carousel-control-next .fa:before {
-                    content: "\f105";
-                    padding-left: 2px;
+                .carousel-control-next {
+                    .fa:before {
+                        content: "\f105";
+                    }
+                    .oi:before, .fa:before {
+                        padding-left: 2px;
+                    }
                 }
-                .carousel-control-prev .fa:before,
-                .carousel-control-next .fa:before {
-                    display: block;
-                    width: 3rem;
-                    height: 3rem;
-                    line-height: 3rem;
-                    color: black;
-                    background: white;
-                    font-size: 1.25rem;
-                    border: 1px solid $gray-500;
+                .carousel-control-prev,
+                .carousel-control-next {
+                    .fa:before, .oi:before {
+                            display: block;
+                            width: 3rem;
+                            height: 3rem;
+                            line-height: 3rem;
+                            color: black;
+                            background: white;
+                            border: 1px solid $gray-500;
+                    }
+                    .fa:before {
+                        font-size: 1.25rem;
+                    }
+                    .oi:before {
+                        font-size: 0.75rem;
+                    }
                 }
             }
         }
         &.s_image_gallery_indicators_arrows_rounded {
             .carousel {
-                .carousel-control-prev .fa:before { content: "\f060"; }
-                .carousel-control-next .fa:before { content: "\f061"; }
-                .carousel-control-prev .fa:before,
-                .carousel-control-next .fa:before {
-                    color: black;
-                    background: white;
-                    font-size: 1.25rem;
-                    border-radius: 50%;
-                    padding: 1.25rem;
-                    border: 1px solid $gray-500;
+                .carousel-control-prev {
+                    .fa:before { content: "\f060"; }
+                    .oi:before { content: "\e842"; }
+                }
+                .carousel-control-next {
+                    .fa:before { content: "\f061"; }
+                    .oi:before { content: "\e843"; }
+                }
+                .carousel-control-prev,
+                .carousel-control-next {
+                    .fa:before, .oi:before {
+                            color: black;
+                            background: white;
+                            font-size: 1.25rem;
+                            border-radius: 50%;
+                            padding: 1.25rem;
+                            border: 1px solid $gray-500;
+                    }
                 }
             }
         }
@@ -270,9 +297,11 @@
             align-items: center;
             height: 100%;
         }
-        .carousel-control-next .fa,
-        .carousel-control-prev .fa {
-            text-shadow: 0px 0px 3px $gray-800;
+        .carousel-control-next,
+        .carousel-control-prev {
+             .fa, .oi {
+                text-shadow: 0px 0px 3px $gray-800;
+            }
         }
     }
 }