[FIX] pos*: various ui fixes

pos*: point_of_sale, pos_hr, pos_restaurant

In this PR we fix a number of small UI issues in the point of sale app.

Issues fixed:
- Align filter option in the TicketScreen search bar;
- Align items in the opening popup that shows the available
login options in the pos_hr module;
- Align tips column in ticket screen;
- Made it so clicking on the employee icon does not open the
selection popup if there is only one employee configured
( as it will be empty in this case );

closes odoo/odoo#131351

Task: 3458435
Related: odoo/enterprise#45526
Signed-off-by: Joseph Caburnay (jcb) <jcb@odoo.com>

addons/point_of_sale/static/src/app/screens/ticket_screen/search_bar/search_bar.xml

@@ -24,8 +24,9 @@
                             </t>
                         </ul>
                     </div>
-                    <div t-if="props.config.filter.show" class="filter radius-right btn btn-secondary py-2 dropdown-toggle h-100"
-                    t-on-click.stop="() => { state.showFilterOptions = !state.showFilterOptions }">
+                    <div t-if="props.config.filter.show" 
+                        class="filter btn btn-secondary d-flex align-items-center dropdown-toggle"
+                        t-on-click.stop="() => { state.showFilterOptions = !state.showFilterOptions }">
                         <span>
                             <t t-esc="props.config.filter.options.get(state.selectedFilter).text" />
                         </span>

addons/pos_hr/static/src/app/login_screen/login_screen.xml

@@ -7,14 +7,14 @@
                     <span class="text-primary" t-esc="shopName" />
                 </div>
                 <div class="login-body d-flex d-flex flex-column flex-sm-row align-items-center justify-content-around px-3 py-4">
-                    <span class="login-element border p-3 rounded">
-                        <img class="login-barcode-img w-50"
+                    <span class="login-element border rounded">
+                        <img class="login-barcode-img img-fluid"
                              src="/point_of_sale/static/img/barcode.png" />
                         <div class="login-barcode-text mt-2">Scan your badge</div>
                     </span>
                     <span class="login-or m-2 fs-2 text-muted">or</span>
                     <span class="login-element">
-                        <button class="login-button select-cashier btn btn-lg btn-secondary py-5 px-3"
+                        <button class="login-button select-cashier btn btn-lg btn-secondary"
                                 t-on-click="selectCashier">Select Cashier</button>
                     </span>
                 </div>

addons/pos_hr/static/src/app/select_cashier_mixin.js

@@ -70,6 +70,9 @@ export function useCashierSelector(
                         isSelected: false,
                     };
                 });
+            if (!employeesList.length) {
+                return;
+            }
             const { confirmed, payload: employee } = await popup.add(SelectionPopup, {
                 title: _t("Change Cashier"),
                 list: employeesList,

addons/pos_hr/static/src/css/pos.scss

@@ -20,6 +20,14 @@
     height: fit-content;
 }
 
+.screen-login img,
+.screen-login button{
+    width: 180px;
+}
+.screen-login button{
+    height: 150px;
+}
+
 @media screen and (max-width: 576px) {
     .screen-login {
         height: 450px;

addons/pos_restaurant/static/src/overrides/components/ticket_screen/ticket_screen.xml

@@ -4,7 +4,7 @@
     <t t-name="pos_restaurant.TicketScreen" t-inherit="point_of_sale.TicketScreen" t-inherit-mode="extension">
         <xpath expr="//div[hasclass('header-row')]//div[@name='delete']" position="before">
             <div t-if="pos.config.module_pos_restaurant" class="col p-2" name="table">Table</div>
-            <div t-if="_state.ui.filter == 'TIPPING'" class="col end narrow" name="tip">Tip</div>
+            <div t-if="_state.ui.filter == 'TIPPING'" class="col end narrow p-2" name="tip">Tip</div>
         </xpath>
         <xpath expr="//div[hasclass('order-row')]//div[@name='delete']" position="before">
             <div t-if="pos.config.module_pos_restaurant" class="col p-2" name="table">
@@ -13,7 +13,7 @@
                     <div><t t-esc="getTable(order)"></t></div>
                 </t>
             </div>
-            <div t-if="_state.ui.filter == 'TIPPING'" class="col end narrow" name="tip">
+            <div t-if="_state.ui.filter == 'TIPPING'" class="col end narrow p-2" name="tip">
                 <div t-if="ui.isSmall">Tip</div>
                 <div><TipCell order="order" /></div>
             </div>

addons/pos_restaurant/static/src/scss/restaurant.scss

@@ -44,12 +44,12 @@
 .tip-cell {
     height: 100%;
     width: 100%;
-    text-align: right;
+    text-align: left;
     white-space: nowrap;
 
     input {
         width: 100%;
-        text-align: right;
+        text-align: left;
         font-size: medium;
         color: #555555;
         padding-bottom: 5px;