[REF] website_event_track_online: improve reminder / wishlist widget display

PURPOSE

Improve tracks list display at current solution does not scale well with lots
of tracks.

SPECIFICATIONS

Introduce a lighter reminder design: use standard bootstrap btn classes and
let colors be the standard one. This allows to simplify reminder CSS notably.

UDPATE

  * website_event_track_online.track_widget_reminder

LINKS

Task ID-2322408
PR #56095

Co-Authored-By Thibault Delavallée <tde@odoo.com>

X-original-commit: 471ac3d9f0cf918c2318fb74ddfeab39e5046383

addons/website_event_track_online/static/src/scss/event_track_templates.scss

@@ -2,43 +2,22 @@
  * EVENT TOOL: REMINDER WIDGET
  */
 .o_wevent_event .o_wetrack_js_reminder {
-    width: fit-content;
-    height: fit-content;
-    cursor: pointer;
-    background: grey;
+    // Icon only
+    &.btn-link {
+        padding: 0;
+    }
+
+    // Ensure width for size coherency
+    &:not(.btn-link) {
+        min-width: 100px;
+    }
 
     i {
         &.fa-bell {
             color: gold;
         }
         &.fa-bell-o {
-            color: white
-        }
-    }
-
-    // Icon only
-    &.o_wetrack_reminder_light {
-        background: transparent;
-        padding: 0;
-        i {
-            &.inactive_color_dark {
-                color: grey;
-            }
-        }
-        &:not(.o_wetrack_reminder_small) {
-            i {
-                font-size: 1.5em;
-            }
-        }
-    }
-
-    // Text included
-    &:not(.o_wetrack_reminder_light) {
-        &.o_wetrack_reminder_small {
-            padding: 0.25rem 0.50rem;
-            span {
-                min-width: 70px;
-            }
+            color: black;
         }
     }
 }

addons/website_event_track_online/views/event_track_templates_reminder.xml

@@ -7,17 +7,20 @@
     * light_theme: bell is white/gold if set; otherwse bell is gray / white
  -->
 <template id="track_widget_reminder">
-    <div t-att-class="'o_wetrack_js_reminder btn d-flex align-items-center justify-content-between rounded %s %s' % (
-        'o_wetrack_reminder_light' if reminder_light else '',
-        'o_wetrack_reminder_small' if reminder_small else '')">
-        <span t-if="not reminder_light"
-              t-att-class="'o_wetrack_js_reminder_text text-white text-left mr-1 %s' % ('small d-sm-inline' if reminder_small else '')">
-            <t t-esc="'Set Reminder' if not track.is_reminder_on else 'Reminder On'"/>
-        </span>
+    <div t-att-class="'o_wetrack_js_reminder btn %s %s' % (
+        'btn-link' if reminder_light else 'btn-outline-primary',
+        'btn-sm' if reminder_small else '')">
         <i t-att-class="'fa fa-bell%s inactive_color_%s' % ('' if track.is_reminder_on else '-o', 'dark' if reminder_light and not light_theme else 'light')"
            t-att-data-track-id="track.id"
            t-att-title="'Reminder On' if track.is_reminder_on else 'Set a Reminder'"
            t-att-data-reminder-on="bool(track.is_reminder_on)"></i>
+        <span t-if="not reminder_light" class="o_wetrack_js_reminder_text">
+            <t t-if="not track.is_reminder_on">
+                Set Reminder
+            </t><t t-else="">
+                Reminder On
+            </t>
+        </span>
     </div>
 </template>