[IMP] *: Uniformize barcode screens UI on mobile

The main goal of this task is to apply the same style used by
event_barcode.
A new button "tap to scan" is now available in some barcode
screens to use the phone camera.

Task ID: 2210396

closes odoo/odoo#50118

Related: odoo/enterprise#9616
Signed-off-by: Adrien Dieudonné (adr) <adr@odoo.com>

addons/hr_attendance/static/src/scss/hr_attendance.scss

@@ -53,11 +53,35 @@
     text-align: center;
     position: relative;
     background-color: fade-out(white, 0.1);
+    &.o_barcode_main {
+        font-family: 'Lato', sans-serif;
+        width: 100%;
+        text-align: center;
+        background-color: #fff;
+        padding: 3em;
+        img {
+            width: 115px;
+            height: 60px;
+        }
+        .o_hr_attendance_kiosk_welcome_row img {
+            max-width: inherit;
+        }
+        @include media-breakpoint-down(sm) {
+            h2 {
+                margin-left: -10px;
+                margin-right: -10px;
+            }
+        }
+    }
 
     @include media-breakpoint-down(sm) {
         overflow: hidden;
         padding: 0 2em 2em;
         flex: 1 0 auto;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
     }
 
     @include media-breakpoint-up(md) {
@@ -75,11 +99,6 @@
             display: flex;
             align-items: center;
         }
-        @include media-breakpoint-down(md) {
-            > div {
-                margin-bottom: 20px;
-            }
-        }
 
         img {
             max-width: 80px;
@@ -187,7 +206,7 @@
 
     img.o_hr_attendance_kiosk_company_image {
         overflow:hidden; // prevent margins colapsing with h1
-        margin: 1rem 0 4rem;
+        margin: 1rem 0 2rem;
         width: 200px;
     }
 

addons/hr_attendance/static/src/xml/attendance.xml

@@ -9,20 +9,20 @@
         <div class="o_hr_attendance_kiosk_mode_container o_home_menu_background">
             <span class="o_hr_attendance_kiosk_backdrop"/>
             <div class="o_hr_attendance_clock text-center"/>
-            <div class="o_hr_attendance_kiosk_mode">
-                <h1><small>Welcome to</small><br/> <t t-esc="widget.company_name"/></h1>
+            <div class="o_hr_attendance_kiosk_mode o_barcode_main">
+                <h2><small>Welcome to</small> <t t-esc="widget.company_name"/></h2>
                 <img t-attf-src="{{widget.company_image_url}}" alt="Company Logo" class="o_hr_attendance_kiosk_company_image"/>
                 <div class="row o_hr_attendance_kiosk_welcome_row">
-                    <div class="col-sm-5">
-                        <img class="img img-fluid d-block mx-auto" src="/hr_attendance/static/src/img/barcode.png"/>
-                        <h5 class="mt8 mb0">Scan your badge</h5>
+                    <div class="col-sm-5 mt16">
+                        <img class="img img-fluid d-block mx-auto" src="/barcodes/static/src/img/barcode.png"/>
+                        <h5 class="mt8 mb0 text-muted">Scan your badge</h5>
                     </div>
-                    <div class="col-sm-2">
-                        <h3 class="mt0 mb8 text-muted"><i>or</i></h3>
+                    <div class="col-sm-2 mt32">
+                        <h4 class="mt0 mb8"><i>or</i></h4>
                     </div>
-                    <div class="col-sm-5">
+                    <div class="col-sm-5 mt16">
                         <button class="o_hr_attendance_button_employees btn btn-primary mb16">
-                            <div class="mb16 mt16">Identify<br/>Manually</div>
+                            <div class="mb16 mt16">Identify Manually</div>
                         </button>
                     </div>
                 </div>

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

@@ -43,6 +43,8 @@
     font-size: larger;
 }
 .pos .login-body{
+    display: flex;
+    justify-content: center;
     height:37%;
 }
 
@@ -80,6 +82,43 @@
     color: #555555;
     border-radius: 5px;
 }
+@media screen and (max-width: 576px) {
+    .pos .screen-login {
+        font-family: 'Lato', sans-serif;
+        width: 100%;
+        height: 100%;
+        text-align: center;
+        background-color: #fff;
+        overflow: hidden;
+    }
+    .pos .login-body {
+        flex-direction: column;
+        align-items: center;
+    }
+    .pos .login-button {
+        color: #fff;
+        background-color: #00A09D;
+        border-color: #00A09D;
+        height: 38px;
+    }
+    .pos .popups .popup-selection {
+        width: 90%;
+        left: initial;
+        right: initial;
+    }
+    .pos .login-barcode-text {
+        color: #adb5bd;
+        margin-top: 8px;
+        margin-bottom: 0;
+        font-size: 15px;
+        font-weight: 400;
+        line-height: 1.2;
+    }
+    .pos .login-element .o_barcode_mobile_container .o_mobile_barcode {
+        top:0;
+        height: 55px;
+    }
+}
 
 .pos .pos-rightheader .header-button.lock-button {
     font-size: 20px;