From 559536b62331d129af46c406b2d5d3dc0b04ac6a Mon Sep 17 00:00:00 2001
From: Pierre Masereel <pim@odoo.com>
Date: Thu, 18 Aug 2022 09:50:01 +0000
Subject: [PATCH] [IMP] point_of_sale, pos_restaurant: convert to scss

This commit converts `pos.css` and `restaurant.css` to use SCSS color
variables. The style of the point of sale application has also been
improved to be more clean and mobile friendly.

task-2954422

closes odoo/odoo#99033

Signed-off-by: Masereel Pierre <pim@odoo.com>
---
 addons/point_of_sale/__manifest__.py          |   8 +-
 .../static/src/{css/pos.css => scss/pos.scss} | 892 ++++++++++--------
 .../static/src/scss/pos_variables_extra.scss  |  33 +
 .../point_of_sale/static/src/xml/Chrome.xml   |   9 +-
 .../static/src/xml/Misc/SearchBar.xml         |  30 +-
 .../static/src/xml/Popups/EditListPopup.xml   |   2 +-
 .../static/src/xml/Popups/NumberPopup.xml     |   2 +-
 .../static/src/xml/Popups/TextAreaPopup.xml   |   6 +-
 .../static/src/xml/Popups/TextInputPopup.xml  |   2 +-
 .../Screens/PartnerListScreen/PartnerLine.xml |   6 +-
 .../PartnerListScreen/PartnerListScreen.xml   |   2 +-
 .../Screens/PaymentScreen/PaymentScreen.xml   |  88 +-
 .../PaymentScreen/PaymentScreenNumpad.xml     |   3 -
 .../PaymentScreenPaymentLines.xml             |   1 +
 .../Screens/ProductScreen/ActionpadWidget.xml |   2 +-
 .../Screens/ProductScreen/NumpadWidget.xml    |   3 -
 .../xml/Screens/ProductScreen/ProductItem.xml |  11 +-
 .../ProductsWidgetControlPanel.xml            |  37 +-
 .../Screens/ReceiptScreen/ReceiptScreen.xml   |  11 +-
 .../pos_loyalty/static/src/css/Loyalty.scss   |   8 +-
 addons/pos_restaurant/__manifest__.py         |   2 +-
 .../restaurant.css => scss/restaurant.scss}   |   8 +-
 .../pos_restaurant/static/src/xml/Chrome.xml  |   2 +-
 23 files changed, 653 insertions(+), 515 deletions(-)
 rename addons/point_of_sale/static/src/{css/pos.css => scss/pos.scss} (85%)
 create mode 100644 addons/point_of_sale/static/src/scss/pos_variables_extra.scss
 rename addons/pos_restaurant/static/src/{css/restaurant.css => scss/restaurant.scss} (98%)

diff --git a/addons/point_of_sale/__manifest__.py b/addons/point_of_sale/__manifest__.py
index 025b0ae0d22..30ced490628 100644
--- a/addons/point_of_sale/__manifest__.py
+++ b/addons/point_of_sale/__manifest__.py
@@ -106,10 +106,16 @@
         ],
         # This bundle includes the main pos assets.
         'point_of_sale.assets': [
+            'point_of_sale/static/src/scss/pos_variables_extra.scss',
+            ('include', 'web._assets_helpers'),
+            ('include', 'web._assets_backend_helpers'),
+            ('include', 'web._assets_primary_variables'),
+            'web/static/lib/bootstrap/scss/_functions.scss',
+            'web/static/lib/bootstrap/scss/_variables.scss',
             'web/static/fonts/fonts.scss',
             'web/static/src/libs/fontawesome/css/font-awesome.css',
             'web/static/lib/daterangepicker/daterangepicker.css',
-            'point_of_sale/static/src/css/pos.css',
+            'point_of_sale/static/src/scss/pos.scss',
             'point_of_sale/static/src/css/pos_receipts.css',
             'point_of_sale/static/src/css/popups/product_info_popup.css',
             'point_of_sale/static/src/css/popups/common.css',
diff --git a/addons/point_of_sale/static/src/css/pos.css b/addons/point_of_sale/static/src/scss/pos.scss
similarity index 85%
rename from addons/point_of_sale/static/src/css/pos.css
rename to addons/point_of_sale/static/src/scss/pos.scss
index 0a251236825..316a9e83239 100644
--- a/addons/point_of_sale/static/src/css/pos.css
+++ b/addons/point_of_sale/static/src/scss/pos.scss
@@ -102,7 +102,7 @@ td {
 }
 .pos textarea:focus {
     outline: none;
-    box-shadow: 0px 0px 0px 3px #6EC89B;
+    box-shadow: 0px 0px 0px 3px $primary;
 }
 
 
@@ -117,12 +117,14 @@ td {
 }
 
 .pos {
+    background: $gray-900;
+    --btn-height-size: 54px;
     direction: ltr;
     padding: 0;
     margin: 0;
     background-color: #f0eeee;
     font-family: "Lato","Lucida Grande", Helvetica, Verdana, Arial;
-    color: #555555;
+    color: $gray-700;
     font-size: 12px;
     /* Some elements inside .pos are allowed to be moved/resized. When
      * this 'move/resize' event is performed in touch devices, .pos
@@ -155,7 +157,7 @@ td {
     z-index: 999;
     text-align: center;
     font-family: Lato;
-    color: #555555;
+    color: $gray-700;
 }
 
 .pos .loader-feedback{
@@ -192,7 +194,7 @@ td {
 }
 .pos .loader-feedback .button:active{
     color: #222;
-    background: #555555;
+    background: $gray-700;
 }
 /*  ********* Generic Layout Constructs  ********* */
 
@@ -270,7 +272,7 @@ td {
     height: 10px;
 }
 .pos .scroller-container ::-webkit-scrollbar-track{
-    background: rgb(224,224,224);
+    background: $gray-200;
     border-left: solid 1px rgb(200,200,200);
     border-top-right-radius: 3px;
     border-bottom-right-radius: 3px;
@@ -284,16 +286,16 @@ td {
 
 .pos a {
     text-decoration: none;
-    color: #555555;
+    color: $gray-700;
 }
 .pos button, .pos a.button {
     display: inline-block;
     cursor: pointer;
     padding: 4px 10px;
     font-size: 11px;
-    border: 1px solid #cacaca;
-    background: #e2e2e2;
-    border-radius: 3px;
+    border: 1px solid $gray-200;
+    color: $primary;
+    background: #fff;
 }
 .pos ul, .pos ol {
     padding: 0;
@@ -326,14 +328,13 @@ td {
     margin:0;
     padding:0;
     color: gray;
-    background: #875A7B;
+    background: $o-brand-odoo;
     display: flex;
 }
 
 /*  a) The left part of the top-bar */
 
 .pos .pos-branding{
-    min-width: 503px;
     max-width: 503px;
     flex-grow: 1;
     height:100%;
@@ -343,13 +344,13 @@ td {
     line-height:100%;
     vertical-align: middle;
     display: flex;
-    justify-content: space-between;
+    justify-content: flex-start;
 }
 .pos .pos-logo {
-    height: 35px;
+    height: 50%;
     margin-left: 10px;
-    margin-top: 5px;
-    vertical-align:middle;
+    margin-right: auto;
+    align-self: center;
 }
 .pos .pos-branding .username{
     float:right;
@@ -375,7 +376,7 @@ td {
     overflow-x: auto;
 }
 .pos .pos-rightheader > * {
-    border-right: 1px solid #875A7B;
+    border-right: 1px solid $o-brand-odoo;
 }
 
 .pos .status-buttons {
@@ -427,10 +428,6 @@ td {
     min-width: 45px;
 }
 
-.pos .order-button:first-child {
-    margin-left: 0px;
-}
-
 .pos .order-button.selected{
     font-weight: 900;
     background: #EEEEEE;
@@ -529,7 +526,7 @@ td {
     position: absolute;
     top: 48px;
     bottom: 0;
-    background: #F0EEEE;
+    background: $gray-200;
 }
 
 /*  ********* The leftpane contains the order, numpad and paypad ********* */
@@ -543,7 +540,7 @@ td {
     border-top: 1px solid #ebebeb;
     padding: 8px 16px;
     background-color: #FFFFFF;
-    color: #6ec89b;
+    color: $primary;
 }
 .pos .switchpane .order-info h2 {
     padding: 0px;
@@ -552,7 +549,7 @@ td {
 }
 
 .pos .switchpane .btn-switchpane {
-    background-color: #6ec89b;
+    background-color: $primary;
     border-radius: 0px;
     color: #FFFFFF;
     font-size: 15px;
@@ -567,15 +564,15 @@ td {
 
 .pos .switchpane .btn-switchpane.secondary {
     background-color: #FFFFFF;
-    color: #6ec89b;
+    color: $primary;
 }
 
 .pos .pane-border {
-    border-right: solid 3px #787878;
+    border-right: solid 3px $gray-300;
 }
 
 .pos .leftpane {
-    background: #e2e2e2;
+    background: $gray-200;
     height: 100%;
     display: flex;
     flex-direction: column;
@@ -583,8 +580,18 @@ td {
     max-width: 500px;
 }
 
+@media screen and (max-width: 768px) {
+    .pos .product-screen .order,
+    .product-screen .leftpane {
+        max-width: inherit;
+    }
+    .product-screen .leftpane {
+        border-right: none;
+    }
+}
+
 .pos .leftpane .pads {
-    border-top: solid 3px rgb(110, 200, 155);
+    border-top: solid 1px $gray-300;
 }
 
 .pos .leftpane .pads .subpads {
@@ -595,36 +602,34 @@ td {
 /*  ********* The control buttons ********* */
 
 .pos .control-buttons {
-    display: -webkit-flex;
     display: flex;
-    -webkit-flex-flow: row wrap;
     flex-flow: row wrap;
-    padding: 8px 16px 0px 11px;
-    margin-bottom: -6px;
 }
 .pos .popup-control-buttons .control-buttons {
     flex-direction: column;
 }
+.pos .leftpane .control-buttons .control-button {
+    flex: 1 1 29%;
+}
 .pos .control-button {
     -webkit-flex-grow: 1;
     flex-grow: 1;
-    background: #e2e2e2;
-    border: solid 1px #bfbfbf;
+    background: #fff;
+    border-left: solid 1px $gray-300;
+    border-bottom: solid 1px $gray-300;
     display: inline-block;
     line-height: 38px;
     min-width: 80px;
     text-align: center;
-    border-radius: 3px;
     padding: 0px 10px;
-    font-size: 18px;
-    margin-left: 6px;
-    margin-bottom: 6px;
+    font-size: 1rem;
+    font-weight: bold;
     cursor: pointer;
     overflow: hidden;
     transition: all linear 150ms;
 }
 .pos .control-button:hover {
-    background: #efefef;
+    background: $gray-200;
 }
 .pos .control-button:active {
     background: black;
@@ -651,8 +656,8 @@ td {
 
 .pos .control-button.highlight,
 .pos .button.highlight {
-    background: #6EC89B !important;
-    border: solid 1px #64AF8A !important;
+    background: $primary !important;
+    border-color: $primary !important;
     color: white !important;
 }
 .pos .control-button.altlight,
@@ -674,76 +679,72 @@ td {
 
 .pos .actionpad {
     padding: 0;
-    margin: 16px;
-    margin-top: 8px;
-    margin-right: 0;
     text-align: center;
     vertical-align: top;
     border: none;
-    border-radius: 0;
-    border-top: 1px solid;
-    border-left: 1px solid;
-    border-color: #bfbfbf;
-    border-top-left-radius: 4px;
-    border-bottom-left-radius: 4px;
+    border-right: 1px solid $gray-300;
     flex-grow: 1;
+    width: 50%;
 }
 .pos .actionpad .button {
-    --btn-height-size: 54px;
     position: relative;
     display: block;
     height: var(--btn-height-size);
     width: 100%;
     font-weight: bold;
     vertical-align: middle;
-    color: #555555;
+    color: $gray-700;
     font-size: 14px;
-    border-radius: 0;
-    border: none;
-    border-right: 1px solid;
     border-bottom: 1px solid;
     border-color: #bfbfbf;
     transition: all 150ms linear;
 }
-.pos .actionpad .button.pay .pay-circle.highlight {
+.pos .button.validation .pay-circle.highlight {
     color: white;
-    background-color: #6ec89b;
+    background-color: $primary;
 }
 .pos .actionpad .button:hover {
-    background: #efefef;
+    background: $gray-200;
 }
 .pos .actionpad .button:active {
     background: black;
     border-color: black;
     color: white;
 }
-.pos .actionpad .button:first-child {
-    border-top-left-radius: 4px;
-}
-.pos .actionpad .button:last-child {
-    border-bottom-left-radius: 4px;
-}
-.pos .actionpad .button.pay {
+.pos .button.validation {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
     height: calc(var(--btn-height-size) * 3);
+    border: none;
+    background: $primary;
+    color: #fff;
+    font-size: 14px;
+    font-weight: bold;
+    transition: all 150ms linear;
+}
+.pos .button.validation:hover {
+    background: darken($primary, 5%) !important;
 }
 @media screen and (max-width: 768px) {
-    .pos .actionpad .button.pay {
+    .pos .button.validation {
         height: calc(var(--btn-height-size) * 2);
     }
 }
-.pos .actionpad .button.pay .pay-circle {
+.pos .button.validation .pay-circle {
     display: block;
     font-size: 32px;
     line-height: var(--btn-height-size);
     padding-top: 6px;
-    background: rgb(86, 86, 86);
+    background: $gray-900;
     color: white;
     width: 60px;
-    margin: auto;
+    text-align: center;
     border-radius: 30px;
     margin-bottom: 10px;
 }
-.pos .actionpad .button.pay .pay-circle .fa {
+.pos .button.validation .pay-circle .fa {
     position: relative;
     top: -1px;
     left: 3px;
@@ -752,6 +753,8 @@ td {
 .pos .actionpad .button.set-partner{
     padding-left: 40px;
     padding-right: 40px;
+    border-top: none;
+    border-right: none;
 }
 .pos .actionpad .button.set-partner.decentered {
     padding-left: 40px;
@@ -783,66 +786,59 @@ td {
 /*  ********* The Numpad ********* */
 
 .pos .numpad {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
     text-align: center;
-    width: 216px;
-    margin: 16px;
-    margin-top: 8px;
-    margin-left: 0px;
-    border: none;
-    border-radius: 0;
-    border-top: 1px solid;
-    border-color: #bfbfbf;
-    border-top-right-radius: 4px;
+    flex-grow: 1;
+    width: 50%;
     min-width: 216px;
 }
 .pos .numpad button {
     float: left/*rtl:ignore*/; /* rtlcss forced to keep ltr */
     height: 54px;
-    width: 54px;
-    font-weight: bold;
     vertical-align: middle;
-    color: #555555;
+    color: $gray-700;
     border-radius: 0;
     border: none;
     border-right: 1px solid;
     border-bottom: 1px solid;
-    border-color: #bfbfbf;
+    border-color: $gray-300;
     transition: all 150ms linear;
     padding: unset;
+    width: 100%;
+    font-weight: bold;
 }
 .pos .numpad button:hover {
-    background: #efefef;
+    background: $gray-200;
 }
 .pos .numpad button:active {
     background: black;
     color: white;
     border-color: transparent;
 }
-.pos .numpad button:nth-child(4) {
-    border-top-right-radius: 4px;
-}
-.pos .numpad button:last-child {
-    border-bottom-right-radius: 4px;
-}
 .pos .input-button {
-    font-size: 24px;
+    font-size: map-get($font-sizes, 4);
 }
 .pos .mode-button {
     font-size: 14px;
 }
+.number-char,
+.numpad-minus {
+    width: 54px;
+}
 .pos .mode-button.selected-mode {
     color: white;
-    background: #6EC89B;
+    background: $o-brand-odoo;
     border-color: transparent;
 }
 .pos .mode-button.selected-mode:hover {
-    background: #6EC89B;
+    background: $primary;
     color: white;
     border-color: transparent;
 }
 .pos .numpad .disabled-mode, .pos .numpad .disabled-mode:hover {
-    background: #c7c7c7;
-    color: #a5a1a1;
+    background: $gray-200;
+    color: $gray-500;
     cursor: not-allowed;
 }
 
@@ -855,6 +851,7 @@ td {
     flex-direction: column;
     flex-basis: 25%;
     flex-grow: 1;
+    background: $gray-300;
 }
 
 .pos .products-widget {
@@ -866,6 +863,8 @@ td {
 
 .pos .products-widget .products-widget-control{
     display: grid;
+    z-index: 1;
+    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, .08);
 }
 
 .pos .product-list-container {
@@ -875,14 +874,20 @@ td {
 }
 
 .pos .rightpane-header {
+    display: flex;
+    justify-content: space-between;
     padding: 0;
-    background: #d3d3d3;
+    background: #fff;
     text-align: center;
     display: flex;
     overflow-x: auto;
     overflow-y: hidden;
 }
 
+.pos .rightpane-header .breadcrumbs {
+    display: flex;
+}
+
 .pos .green-border-bottom {
     border-bottom: solid 3px rgb(110, 200, 155);
 }
@@ -894,22 +899,15 @@ td {
 /*  ********* The product list  ********* */
 
 .pos .product-list {
-    padding: 10px 5px;
-    display: flex;
-    flex-wrap: wrap;
-    gap: 2px;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(122px, 1fr));
+    padding: 3px;
+    gap: 3px;
 }
 .pos .product-list-container .product-list-empty p {
     margin: 10px;
     text-align: center;
 }
-@media screen and (max-width: 768px) {
-    .pos .product-list {
-        padding: 0px;
-        gap: 0px;
-        justify-content: space-between;
-    }
-}
 
 .pos .product-list-scroller{
     -webkit-box-sizing: border-box;
@@ -938,14 +936,14 @@ td {
 }
 .pos .breadcrumb:last-child {
     padding-right: 3px;
-    border-right: 1px solid #c5c5c5;
 }
 .pos .breadcrumb-button {
     display: inline-block;
     padding: 0 9px;
     vertical-align: top;
-    color: #808080;
-    font-size: 14px;
+    color: $primary;
+    font-size: 12px;
+    font-weight: bold;
     cursor: pointer;
     max-width: 300px;
     overflow: hidden;
@@ -1040,7 +1038,7 @@ td {
 }
 .pos .category-list.simple {
     padding: 0px;
-    background: #cecece;
+    background: #fff;
     display: flex;
     flex: 1;
 }
@@ -1066,13 +1064,12 @@ td {
 .pos .category-simple-button{
     display: inline-block;
     align-items: center;
-    font-size: 14px;
+    font-size: 12px;
+    font-weight: bold;
     padding: 5px 12px;
     cursor: pointer;
     text-align: left;
-    background: rgb(229, 229, 229);
-    border-right: solid 1px #d3d3d3;
-    border-top: solid 1px #d3d3d3;
+    background: #fff;
     max-width: 300px;
     vertical-align: middle;
     white-space: nowrap;
@@ -1135,70 +1132,39 @@ td {
 
 .pos .product {
     position:relative;
-    line-height: 100px;
-    width: 122px;
-    height:115px;
     background:#fff;
-    border: 1px solid #e2e2e2;
-    border-radius: 3px;
-    border-bottom-width: 3px;
     overflow: hidden;
     cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
 }
 
-.pos .product .product-img {
-    position: relative;
-    width: 120px;
-    height: 100px;
-    background: white;
-    text-align: center;
+.pos .product-content {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    height: 100%;
 }
 
 .pos .product .product-img img {
-    max-height: 100px;
-    max-width:  120px;
-    vertical-align: middle;
+    width: 100%;
+    height: 100px;
+    object-fit: cover;
 }
 
 @media screen and (max-width: 768px) {
-    .pos .product {
-        width: 32%;
-        height: auto;
-        margin: 0px !important;
-    }
     .pos .product:active {
-        border: solid 3px #6ec89b;
+        border: solid 3px $primary;
         box-sizing: border-box;
     }
-    .pos .product:after {
-        content: "";
-        display: block;
-        padding-bottom: 100%;
-    }
-    .pos .product .product-img {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-    }
-    .pos .product .product-img img {
-        max-height: none;
-        max-width: none;
-    }
-
 }
 
-
-
 .pos .product .price-tag {
-    position: absolute;
-    top: 2px;
-    right: 2px;
-    vertical-align: top;
-    color: white;
-    line-height: 13px;
-    background: #7f82ac;
+    color: $o-brand-odoo;
     padding: 2px 5px;
-    border-radius: 2px;
+    font-weight: bold;
+    padding: 0 map-get($spacers, 2) map-get($spacers, 2);
 }
 
 .pos .product .product-info-button {
@@ -1221,26 +1187,13 @@ td {
 }
 
 .pos .product .product-name {
-    position: absolute;
-    -webkit-box-sizing: border-box;
-       -moz-box-sizing: border-box;
-        -ms-box-sizing: border-box;
-            box-sizing: border-box;
-    bottom:0;
-    top:auto;
+    box-sizing: border-box;
     line-height: 14px;
-    width:100%;
     overflow: hidden;
-    text-overflow: ellipsis;
-    background: -webkit-linear-gradient(-90deg,rgba(255,255,255,0),rgba(255,255,255,1), rgba(255,255,255,1));
-    background:    -moz-linear-gradient(-90deg,rgba(255,255,255,0),rgba(255,255,255,1), rgba(255,255,255,1));
-    background:     -ms-linear-gradient(-90deg,rgba(255,255,255,0),rgba(255,255,255,1), rgba(255,255,255,1));
-    /* troublesome in latest webkit
-    background:         linear-gradient(-90deg,rgba(255,255,255,0),rgba(255,255,255,1), rgba(255,255,255,1));
-    */
-    /*background:#FFF;*/
-    padding: 3px;
-    padding-top:15px;
+    margin: map-get($spacers, 2);
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
 }
 
 /*  ********* The BlockUI Component (frontend)  ********* */
@@ -1267,6 +1220,7 @@ td {
     top:0px;
     bottom:0px;
     width:100%;
+    background: $gray-100;
     overflow: auto;
     -webkit-overflow-scrolling: touch;
 }
@@ -1295,12 +1249,12 @@ td {
 .screen .screen-content{
     position: relative;
     margin: 0px auto;
-    max-width: 1024px;
     text-align: left;
     height: 100%;
     overflow: hidden;
     display: flex;
     flex-direction: column;
+    background: #fff;
 }
 
 .screen .screen-full-width{
@@ -1310,37 +1264,35 @@ td {
     flex-direction: row;
 }
 
-@media screen and (min-width: 1024px) {
-    .screen .screen-content{
-        border-left:  dashed 1px rgb(215,215,215);
-        border-right: dashed 1px rgb(215,215,215);
-    }
-}
-
 .screen .top-content{
     height: 64px;
-    border-bottom: dashed 1px rgb(215,215,215);
+    border-bottom: solid 1px $gray-300;
     text-align: center;
     display: flex;
     padding-right: 10px;
     padding-left: 10px;
 }
+.screen .top-content .search-bar-container {
+    margin-right: -10px;
+}
+.screen .top-content .pos-search-bar {
+    border-left: solid 1px $gray-300;
+}
 .screen .top-content .button {
     line-height: 32px;
     padding: 3px 13px;
-    font-size: 20px;
-    background: rgb(230, 230, 230);
+    font-size: 14px;
     margin-top: 12px;
     margin-bottom: 12px;
     margin-left: 6px;
     margin-right: 6px;
-    border-radius: 3px;
-    border: solid 1px rgb(209, 209, 209);
+    border: solid 1px $gray-200;
+    color: $primary;
     cursor: pointer;
     transition: all 150ms linear;
 }
 .screen .top-content .button:hover {
-    background: #efefef;
+    background: $gray-200;
 }
 .screen .top-content .button:active {
     background: black;
@@ -1348,14 +1300,28 @@ td {
     color: white;
 }
 .screen .top-content .button.highlight {
-    background: rgb(110,200,155);
+    background: $primary;
     color: white;
-    border: solid 1px rgb(110,200,155);
+    border: solid 1px $primary;
 }
 .screen .top-content .button.highlight:hover {
     background: rgb(120,210,165);
 }
 
+.screen .button.next.validation {
+    position: sticky;
+    bottom: 0;
+    height: auto;
+    padding: map-get($spacers, 5) 0;
+}
+.screen .button.next:not(.highlight) {
+    cursor: not-allowed;
+    background: $gray-300;
+    color: $gray-600;
+    opacity: .3;
+    pointer-events: none;
+}
+
 .screen .top-content .top-content-center {
     flex-grow: 1;
 }
@@ -1369,18 +1335,23 @@ td {
 .screen .left-content{
     overflow-x: hidden;
     overflow-y: auto;
-    border-right: dashed 1px rgb(215,215,215);
+    border-right: solid 1px $gray-300;
     flex-grow: 1;
     min-width: 200px;
 }
 
-.screen .right-content{
-    overflow-x: hidden;
-    overflow-y: auto;
+.screen .center-content{
     flex-grow: 1;
     display: flex;
     flex-direction: column;
 }
+.screen .right-content {
+    flex-grow: 1;
+    min-width: 200px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    border-left: solid 1px $gray-300;
+}
 
 @media screen and (min-width: 768px) {
     .screen .left-content {
@@ -1389,7 +1360,7 @@ td {
 }
 
 .pos .btn-switch-payment {
-    background-color: #6ec89b;
+    background-color: $primary;
     border-radius: 0px;
     color: #FFFFFF;
     font-size: 15px;
@@ -1398,8 +1369,8 @@ td {
     width: 100%;
 }
 .screen .centered-content{
-    border-right: dashed 1px rgb(215,215,215);
-    border-left: dashed 1px rgb(215,215,215);
+    border-right: solid 1px $gray-300;
+    border-left: solid 1px $gray-300;
     overflow-x: hidden;
     overflow-y: auto;
     max-width: 512px;
@@ -1441,6 +1412,33 @@ td {
 
 /* b) The payment screen */
 
+.payment-screen .main-content {
+    display: grid;
+    grid-template-columns: 300px 1fr auto;
+}
+.payment-screen .left-content {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    max-width: inherit;
+    border: none;
+}
+.payment-screen .center-content {
+    display: grid;
+    grid-template-rows: auto 1fr;
+    border: 10px solid $gray-300;
+}
+.payment-screen p.title-category {
+    margin: 0;
+    padding: map-get($spacers, 1) map-get($spacers, 3);
+    background: $gray-300;
+    color: $gray-700;
+    text-transform: uppercase;
+    font-weight: bold;
+    font-size: $small-font-size;
+    order: 1;
+}
+
 .pos .payment-buttons-container {
     display: flex;
     flex-direction: row;
@@ -1449,63 +1447,54 @@ td {
 
 .pos .payment-numpad {
     box-sizing: border-box;
-    margin: 16px;
     text-align: center;
     flex-grow: 1;
 }
 .pos .payment-numpad .numpad {
-    border-radius: 4px;
     border-top: 1px solid;
     border-left: 1px solid;
-    border-color: #cacaca;
-    width: 296px;
+    border-color: $gray-300;
+    width: 100%;
     height: 100%;
     margin: auto;
 }
 .pos .payment-numpad .numpad button {
-    width: 74px;
-    height: 74px;
+    height: 100%;
+    min-height: 54px;
+    font-size: clamp(map-get($font-sizes, 6), 3vw, 36px);
 }
-.pos .payment-numpad .numpad button:first-child {
-    border-top-left-radius: 4px;
-}
-.pos .payment-numpad .numpad button:nth-child(16) {
-    border-bottom-left-radius: 4px;
+
+.pos .payment-numpad .numpad button:nth-child(16) img {
+    width: 35%;
+    max-width: 64px;
+    height: auto;
 }
 
 .pos .paymentlines-container {
     padding: 16px;
     padding-top: 0;
-    border-bottom: dashed 1px gainsboro;
+    border-bottom: solid 10px $gray-300;
     min-height: 154px;
 }
 
 .pos .paymentlines {
+    display: flex;
+    flex-direction: column-reverse;
     border-spacing: 0px 10px;
     border-collapse: inherit;
-    margin: 16px;
 }
 
 .paymentlines .paymentline:first-child {
     border-top-width: 1px;
-    border-top-left-radius: 3px;
-    border-top-right-radius: 3px;
 }
-.paymentlines .paymentline:last-child {
-    border-bottom-left-radius: 3px;
-    border-bottom-right-radius: 3px;
-}
-
-.pos  .paymentline {
-    background: #e2e2e2;
-    line-height: 74px;
+.pos .paymentline {
+    background: #fff;
     font-size: 16px;
-    border: solid 1px rgb(202, 202, 202);
+    border-bottom: solid 1px $gray-300;
     border-top-width: 0px;
     cursor: pointer;
     display: flex;
-    padding-left: 30px;
-    padding-right: 30px;
+    padding: map-get($spacers, 3) map-get($spacers, 2);
     flex-grow: 1;
     flex-basis: 100%;
 }
@@ -1532,42 +1521,36 @@ td {
   margin-right: 10px;
 }
 .paymentline.selected{
-  background: white;
+  background: $gray-200;
 }
 
 .pos .payment-buttons {
     box-sizing: border-box;
-    margin: 16px;
     padding-left: 0;
     flex-grow: 5;
 }
-.payment-screen .partner-button {
-    margin-bottom: 10px;
-}
 .payment-screen .payment-buttons .button {
-    background: #e2e2e2;
-    line-height: 73px;
+    background: #fff;
     font-size: 16px;
-    padding: 0px 8px;
-    border: solid 1px rgb(200,200,200);
+    padding: map-get($spacers, 3);
+    border-bottom: solid 1px $gray-300;
     border-top-width: 0;
     cursor: pointer;
-    text-align: center;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
     position: relative;
+    max-width: 300px;
+    width: 100%;
     transition: background-color, border-color, color 150ms linear;
+    box-sizing: border-box;
 }
 .payment-screen .payment-buttons .button:hover {
-    background-color: #efefef;
+    background-color: $gray-200;
 }
 .payment-screen .payment-buttons .button:first-child {
-    border-top-left-radius: 3px;
-    border-top-right-radius: 3px;
     border-top-width: 1px;
 }
-.payment-screen .payment-buttons .button:last-child {
-    border-bottom-left-radius: 3px;
-    border-bottom-right-radius: 3px;
-}
 .payment-screen .payment-buttons .button.highlight:not(:first-child) {
     margin-top: -1px;
     border-top: solid 1px;
@@ -1577,28 +1560,8 @@ td {
     border-color: black;
     color: white;
 }
-.payment-screen .payment-buttons .button.highlight .fa {
-    border-color: rgba(0, 0, 0, 0.109804);
-    background: rgba(0, 0, 0, 0.0980392);
-}
 .payment-screen .payment-buttons .button .fa {
-    position: absolute;
-    left: 11px;
-    top: 50%;
-    width: 48px;
-    height: 48px;
-    line-height: 48px;
-    margin-top: -25px;
-    vertical-align: middle;
-    border-radius: 26px;
-    border: 1px solid rgba(0,0,0,0.2);
-    border-image-source: initial;
-    border-image-slice: initial;
-    border-image-width: initial;
-    border-image-outset: initial;
-    border-image-repeat: initial;
-    background: rgba(255,255,255,0.4);
-    font-size: 20px;
+    margin-right: map-get($spacers, 2);
     transition: all 150ms linear;
 }
 .payment-screen .paymentlines-empty .total {
@@ -1645,24 +1608,86 @@ td {
     font-size: 17px;
     padding-top: 12px;
     padding-bottom: 12px;
-    color: #5c5c5cd1;
+    color: $gray-500;
 }
 
 .payment-status-container .amount.highlight {
     font-weight: bold;
-    color: #6EC89B;
+    color: $primary;
 }
 
 .payment-status-container .label {
     padding-right: 7px;
 }
 
+@media screen and (max-width: 992px) {
+    .payment-screen .main-content {
+        grid-template-columns: 300px 1fr;
+        grid-template-rows: 1fr auto;
+    } 
+    .screen .center-content {
+        border-bottom: none;
+    }
+    .screen .right-content {
+        grid-column: span 2;
+    }
+    .pos .payment-buttons {
+        display: flex;
+        flex-wrap: wrap;
+        background: $gray-300;
+        padding: 10px;
+        gap: 10px;
+    }
+    .pos .payment-buttons > div {
+        flex-grow: 1;
+        flex-basis: 25%;
+        border: 1px solid $gray-300;
+    }
+    .pos .payment-buttons .button {
+        max-width: inherit;
+        text-align: center;
+    }
+    .pos .paymentlines-container {
+        min-height: auto;
+    }
+    .payment-status-container {
+        flex-direction: column-reverse;
+    }
+    .payment-status-container > div:first-child {
+        margin-top: map-get($spacers, 2);
+    }
+}
+
 @media screen and (max-width: 768px) {
-      .pos .paymentlines-container {
-          min-height: 0px;
-          border-bottom: none;
-          padding-bottom: 3px;
-      }
+    .payment-screen .main-content {
+        grid-template-columns: 1fr;
+        grid-template-rows: 1fr 1fr;
+    } 
+    .payment-screen .center-content {
+        grid-template-rows: 1fr;
+    }
+    .payment-screen .left-content,
+    .payment-screen .right-content {
+        justify-content: flex-start;
+        overflow: initial;
+    }
+    .screen .right-content {
+        grid-column: span 1;
+    }
+    .payment-screen .paymentlines-empty .message {
+        padding-bottom: map-get($spacers, 3);
+    }
+    .pos .payment-numpad .numpad button:nth-child(16) img {
+        max-width: 48px;
+    }
+    .pos .paymentlines-container {
+        position: sticky;
+        top: 0;
+        background: #fff;
+        border-bottom: 1px solid $gray-300;
+        min-height: inherit;
+        padding-bottom: 3px;
+    }
       .pos .paymentlines {
         margin-top: 0px;
         margin-bottom: 0px;
@@ -1670,16 +1695,40 @@ td {
       .payment-status-container {
           font-size: 22px;
       }
+      
+}
+
+@media screen and (max-width: 576px) {
+    .pos .payment-buttons {
+        flex-direction: column;
+    }
 }
 
 /* c) The receipt screen */
 
+.pos .receipt-screen .screen-content {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: auto 1fr auto;
+}
+
+.pos .receipt-screen .left-content {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    max-width: inherit;
+}
+
+.pos .receipt-screen .top-content {
+    grid-column: span 2;
+}
+
 .pos .receipt-screen .centered-content .button {
     line-height: 40px;
     padding: 3px 13px;
     font-size: 20px;
     text-align: center;
-    background: rgb(230, 230, 230);
+    background: $gray-200;
     margin: 16px;
     margin-bottom: 0px;
     border-radius: 3px;
@@ -1769,7 +1818,7 @@ td {
 .pos .scale-screen .buy-product{
     text-align: center;
     font-size: 32px;
-    background: rgb(110,200,155);
+    background: $primary;
     color: white;
     border-radius: 3px;
     padding: 16px;
@@ -1837,7 +1886,7 @@ td {
 }
 .pos .partnerlist-screen .partner-list th,
 .pos .partnerlist-screen .partner-list td {
-    padding: 12px 8px;
+    padding: 12px;
 }
 
 .pos .partnerlist-screen .fa.fa.fa-phone,
@@ -1851,7 +1900,7 @@ td {
 }
 
 .pos .partnerlist-screen tr div.company-field {
-    color: #888c8f;
+    opacity: .75;
 }
 
 .pos .partnerlist-screen tr.highlight div.company-field {
@@ -1859,10 +1908,13 @@ td {
 }
 
 .pos .partnerlist-screen tr.highlight div.unselect-tag {
-    font-size: large;
-    color:#555555;
-    font-weight: bold;
-    padding-top: 5px;
+    display: inline-block;
+    color: #fff;
+    padding: 3px 6px;
+    font-size: small;
+    border-radius: 2px;
+    margin-top: 12px;
+    background: rgba(255,255,255,.25);
 }
 
 .pos .partnerlist-screen .partner-list th.partner-line-last-column-placeholder,
@@ -1872,17 +1924,14 @@ td {
 
 .pos .partnerlist-screen .partner-list tr{
     transition: all 150ms linear;
-    background: rgb(230,230,230);
-}
-.pos .partnerlist-screen tr.partner-line:hover {
-    cursor: pointer;
+    background: $gray-200;
 }
 .pos .partnerlist-screen .partner-list thead > tr,
 .pos .partnerlist-screen .partner-list tr:nth-child(even) {
-    background: rgb(247,247,247,0.1);
+    background: rgba(247,247,247,0.1);
 }
 .pos .partnerlist-screen .partner-list tr.highlight{
-    background: rgb(110,200,155);
+    background: $primary;
     color: white;
 }
 .pos .partnerlist-screen .partner-list tr.highlight:active {
@@ -1891,24 +1940,30 @@ td {
 }
 .pos .partnerlist-screen tr.partner-line:hover {
     cursor: pointer;
-    background: rgb(207, 238, 222);
+    background: $primary;
+    color: #fff;
 }
 .pos .partnerlist-screen tr.partner-line:active {
     background-color: black;
     color: white;
 }
 .pos .edit-partner-button:hover {
-    background: #c7c7c7;
+    background: $gray-200;
 }
 .pos .partner-line {
     vertical-align: text-top;
 }
+.pos .partner-line-email .fa {
+    width: 30px;
+    opacity: .75;
+}
 .pos .edit-partner-button {
     margin-top: 6px;
     color: black;
+    font-weight: bold;
 }
 .pos .partner-list tr.partner-line.highlight{
-    background: rgb(110,200,155);
+    background: $primary;
     color: white;
 }
 .pos .partnerlist-screen .partner-details{
@@ -1996,7 +2051,7 @@ td {
     margin-bottom: 4px;
     background: white;
     font-family: "Lato","Lucida Grande", Helvetica, Verdana, Arial;
-    color: #555555;
+    color: $gray-700;
     width: 340px;
     font-size: 14px;
     box-sizing: border-box;
@@ -2070,20 +2125,25 @@ td {
     -webkit-overflow-scrolling: touch !important;
 }
 
-.pos .order{
+.pos .order {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
     background: white;
-    padding-bottom: 8px;
-    padding-top: 8px;
     font-size: 16px;
     text-align: left;
     max-width: 500px;
     -webkit-transform: translate3d(0,0,0);
 }
+.pos .order .orderlines {
+    flex-grow: 1;
+    overflow: auto;
+}
 
 .pos .order .order-empty {
     text-align: center;
     margin: 48px;
-    color: #DDD;
+    color: $gray-200;
 }
 .pos .order .order-empty .fa {
     font-size: 64px;
@@ -2093,19 +2153,14 @@ td {
 }
 
 .pos .order .summary{
+    position: sticky;
+    bottom: 0;
     width:100%;
     text-align:right;
     font-weight: bold;
-    margin-top:20px;
-    margin-bottom:10px;
-}
-.pos .order .summary .line{
-    float: right;
-    margin-right:15px;
-    margin-left: 15px;
-    padding-top:5px;
-    border-top: solid 2px;
-    border-color:#777;
+    padding: map-get($spacers, 2) map-get($spacers, 3);
+    border-top: 1px solid $gray-200;
+    box-sizing: border-box;
 }
 .pos .order .summary .total {
     font-size: 22px;
@@ -2113,7 +2168,6 @@ td {
 .pos .order .summary .line .subentry{
     font-size: 16px;
     font-weight: normal;
-    text-align: center;
 }
 .pos .order .summary .line.empty{
     text-align: right;
@@ -2125,7 +2179,7 @@ td {
     position: absolute;
     left: 20px;
     padding: 10px;
-    color: #6EC89B;
+    color: $primary;
     background: rgba(110, 200, 155, 0.17);
     border-radius: 3px;
 }
@@ -2145,10 +2199,7 @@ td {
 .pos .order .orderline{
     width:100%;
     margin:0px;
-    padding-top:3px;
-    padding-bottom:10px;
-    padding-left:15px;
-    padding-right:15px;
+    padding: 7px 15px;
     cursor: pointer;
     -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
@@ -2170,7 +2221,7 @@ td {
 }
 
 .pos .order .orderline.selected{
-    background: rgba(140,143,183,0.2);
+    background: rgba($primary, 0.2);
     -webkit-transition: background 250ms ease-in-out;
        -moz-transition: background 250ms ease-in-out;
             transition: background 250ms ease-in-out;
@@ -2190,18 +2241,18 @@ td {
     float:right;
 }
 .pos .order .orderline .info-list{
-    color: #888;
+    color: $gray-700;
     margin-left:10px;
 }
 .pos .order .orderline .info-list em{
-    color: #777;
+    color: $gray-700;
     font-weight: bold;
     font-style:normal;
 }
 
 .pos .order .orderline .to-refund-highlight {
     font-weight: bold;
-    color: #6ec89b;
+    color: $primary;
 }
 
 .pos .order .orderline .refund-note {
@@ -2232,7 +2283,7 @@ td {
     font-size: 64px;
     color: #43996E;
     text-shadow: 0px 2px white, 0px 2px 2px rgba(0, 0, 0, 0.27);
-    border-bottom: dashed 1px rgb(215,215,215);
+    border-bottom: solid 1px $gray-300;
 }
 .pos .splitbill-screen .order {
     background: white;
@@ -2252,7 +2303,7 @@ td {
     width: 100%;
 }
 .splitbill-screen .order .orderline.selected{
-    background: rgb(110,200,155);
+    background: $primary;
     color: white;
     -webkit-transition: background 250ms ease-in-out;
        -moz-transition: background 250ms ease-in-out;
@@ -2270,27 +2321,15 @@ td {
     font-size: 24px;
     vertical-align: top;
 }
-.paymentmethods {
-    margin: 16px;
-    display: flex;
-    flex-wrap: wrap;
-}
 .paymentmethods .button {
-    background: #e2e2e2;
-    line-height: 74px;
+    background: #fff;
     font-size: 16px;
-    border: solid 1px rgb(202, 202, 202);
+    border-bottom: solid 1px $gray-300;
     border-top-width: 0px;
     cursor: pointer;
 }
 .paymentmethods .button:first-child {
     border-top-width: 1px;
-    border-top-left-radius: 3px;
-    border-top-right-radius: 3px;
-}
-.paymentmethods .button:last-child {
-    border-bottom-left-radius: 3px;
-    border-bottom-right-radius: 3px;
 }
 .paymentmethods .button:active {
     background: black;
@@ -2298,21 +2337,18 @@ td {
     color: white;
 }
 .paymentmethod .button.active {
-    background: #6EC89B;
+    background: $primary;
     color: white;
-    border-color: #6EC89B;
+    border-color: $primary;
 }
 .paymentmethod {
     display: flex;
-    padding-left: 30px;
-    padding-right: 30px;
     flex-grow: 1;
     flex-basis: 100%;
 }
 .paymentmethod .payment-name {
     flex-grow: 1;
-    margin-left: 10px;
-    margin-right: 10px;
+    padding: map-get($spacers, 3);
 }
 .paymentmethod .payment-amount {
     margin-left: 10px;
@@ -2323,7 +2359,7 @@ td {
   margin-right: 10px;
 }
 .paymentmethod.selected{
-  background: white;
+  background: $gray-200;
 }
 
 @media screen and (max-width: 768px) {
@@ -2331,10 +2367,6 @@ td {
         margin-top: 0px;
         margin-bottom: 0px;
     }
-    .paymentmethods .button {
-        border: solid 1px rgb(202, 202, 202);
-        border-radius: 3px;
-    }
     .paymentmethod {
         flex-basis: 30%;
     }
@@ -2513,8 +2545,7 @@ td {
     text-align:center;
     font-size:20px;
     font-weight:bold;
-    background-color: #F0EEEE;
-    border-radius: 3px;
+    background-color: #fff;
     box-shadow: 0px 10px 20px rgba(0,0,0,0.4);
     z-index:1200;
     font-family: 'Lato';
@@ -2572,7 +2603,6 @@ td {
     height: 40px;
     line-height:40px;
     text-align:center;
-    border-radius: 2px;
     margin-top:10px;
     margin-right:10px;
 
@@ -2580,12 +2610,17 @@ td {
     font-weight: bold;
 
     cursor: pointer;
-
-    border: solid 1px rgba(60,60,60,0.1);
-
-    background: rgba(0,0,0,0.05);
+    border: 1px solid $gray-200;
+    color: $primary;
 }
 
+.pos .popup-textarea textarea {
+    width: 100%;
+    box-sizing: border-box;
+}
+.pos .popup-textarea .popup-textarea-wrap {
+    padding: map-get($spacers, 2);
+}
 .pos .popup .button.dont-show-again {
     width: 130px;
 }
@@ -2654,11 +2689,14 @@ td {
 .pos .popup input:focus,
 .pos .popup-input.active {
     outline: none;
-    box-shadow: 0px 0px 0px 3px #6EC89B;
+    box-shadow: 0px 0px 0px 3px $primary;
 }
-.pos .popup.popup-error {
+.pos .popup.popup-error,
+.pos .popup.popup-error .button {
     background-color: #F3BBBB;
     color: rgb(168, 89, 89);
+}
+.pos .popup.popup-error {
     box-shadow: 0px 10px 20px rgba(92,51,51,0.4);
 }
 .pos .popup.popup-error .title {
@@ -2686,7 +2724,7 @@ td {
     background: rgb(247,247,247);
 }
 .pos .popup.popup-selection .selection-item.selected {
-    background: #6EC89B;
+    background: $primary;
 }
 .pos .popup.popup-number {
     width: 300px;
@@ -2772,7 +2810,7 @@ td {
     height: 4px;
 }
 .pos *::-webkit-scrollbar-track{
-    background: rgb(224,224,224);
+    background: $gray-200;
     border-left: solid 1px rgb(200,200,200);
 }
 .pos *::-webkit-scrollbar-thumb{
@@ -2786,7 +2824,7 @@ td {
     height: 40px;
 }
 .pos.big-scrollbars *::-webkit-scrollbar-track{
-    background: rgb(224,224,224);
+    background: $gray-200;
     border-left: none;
 }
 .pos.big-scrollbars *::-webkit-scrollbar-thumb{
@@ -2885,7 +2923,7 @@ td {
 }
 
 .page-controls > div:hover {
-    color: rgb(110,200,155);
+    color: $primary;
 }
 
 .page-controls .previous {
@@ -3047,7 +3085,7 @@ td {
 
 .pos .orders .header-row{
     display: flex;
-    background: #868686;
+    background: $gray-700;
     color: white;
 }
 
@@ -3058,7 +3096,7 @@ td {
     }
 
     .pos .orders .order-row:nth-child(odd) {
-        background: #DDD;
+        background: $gray-200;
     }
 
     .pos .orders .order-row:nth-child(even) {
@@ -3073,9 +3111,33 @@ td {
     }
 }
 
+@media screen and (max-width: 640px) {
+    .ticket-screen .screen-full-width {
+        flex-direction: column;
+        height: auto;
+        min-height: 100%;
+    }
+    .ticket-screen .controls {
+        position: sticky;
+        top: 0;
+        background: $gray-300;
+    }
+    .ticket-screen .controls button.search {
+        margin: 0;
+    }
+    .ticket-screen .order,
+    .ticket-screen .leftpane {
+        max-width: inherit;
+    }
+
+    .ticket-screen .rightpane {
+        width: auto;
+    }
+}
+
 .pos .orders .order-row:hover, .pos .orders .order-row.highlight {
     color: white;
-    background-color:  rgb(110,200,155);
+    background-color:  $primary;
 }
 
 .pos .orders .col {
@@ -3122,7 +3184,7 @@ td {
 .ticket-screen .empty-order-list {
     text-align: center;
     margin: 48px;
-    color: #adadad;
+    color: $gray-500;
 }
 
 .ticket-screen .empty-order-list h1 {
@@ -3137,7 +3199,7 @@ td {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin: 0px 10px;
+    padding: 0px 10px;
     flex: 0 0 80px;
 }
 
@@ -3151,8 +3213,8 @@ td {
 }
 
 .ticket-screen .controls button.highlight {
-    background: #6EC89B;
-    border: solid 1px #64AF8A;
+    background: $primary;
+    border-color: $primary;
     color: white;
 }
 
@@ -3206,18 +3268,22 @@ td {
     color: #4f5b66;
 }
 
-.ticket-screen .pos-search-bar .search ul {
-    background: white;
+.ticket-screen .pos-search-bar .search .fields {
     position: absolute;
     top: calc(100% + 5px);
     right: 2px;
     left: 2px;
     box-shadow: 1px 1px 3px grey;
+    overflow: auto;
+}
+.ticket-screen .pos-search-bar .search ul {
+    background: white;
     font-size: small;
+    display: inline-block;
+    min-width: 100%;
 }
 
 .ticket-screen .pos-search-bar .search li {
-    color: rgb(1,160,157);
     margin: 0.2em 0;
     padding-top: 0.2em;
     padding-bottom: 0.2em;
@@ -3225,6 +3291,10 @@ td {
     text-align: left;
 }
 
+.ticket-screen .pos-search-bar .search li .term {
+    color: $primary;
+}
+
 .ticket-screen .pos-search-bar .search li:hover {
     background: #DDD;
 }
@@ -3275,7 +3345,7 @@ td {
     box-shadow: 1px 1px 5px grey;
     padding: 0.5em 0;
     background: white;
-    color: #555555;
+    color: $gray-700;
 }
 
 .ticket-screen .pos-search-bar .filter ul.options li {
@@ -3321,11 +3391,11 @@ td {
 }
 
 .ticket-button.highlight {
-    background: rgb(104,69,95);
+    background: rgba(0, 0, 0, .08);
 }
 
 .ticket-button:hover {
-    background: rgb(104,69,95);
+    background: rgba(0, 0, 0, .08);
     cursor: pointer;
 }
 
@@ -3339,7 +3409,7 @@ td {
 }
 
 [badge]:after {
-    background: rgb(1,160,157);
+    background: $o-navbar-badge-bg;
     border-radius: 10rem;
     color: #fff;
     content: attr(badge);
@@ -3367,7 +3437,7 @@ td {
 }
 
 .cash-move-button:hover {
-    background: rgb(104,69,95);
+    background: rgba(0, 0, 0, .08);
     cursor: pointer;
 }
 
@@ -3378,41 +3448,46 @@ td {
     align-items: center;
 }
 
-.pos .pos-topheader .pos-search-bar,
+.pos .products-widget .search-bar-container {
+    position: sticky;
+    right: 0;
+}
+
+.pos .rightpane-header .pos-search-bar,
 .pos .partnerlist-screen .pos-search-bar {
     display: flex;
     align-items: center;
-    padding: 2px 10px;
-    background-color: white;
-    border-radius: 5px;
+    padding: 0px 10px;
+    background-color: $gray-100;
+    height: 100%;
     font-size: 16px;
     transition: all linear 150ms;
 }
 
-.pos .pos-topheader .pos-search-bar:focus-within,
+.pos .rightpane-header .pos-search-bar:focus-within,
 .pos .partnerlist-screen .pos-search-bar:focus-within {
-    box-shadow: 0px 0px 0px 2px rgb(153, 153, 255) inset;
-    color: rgb(153, 153, 255);
+    background: $gray-200;
 }
 
-.pos .pos-topheader .pos-search-bar input,
+.pos .rightpane-header .pos-search-bar input,
 .pos .partnerlist-screen .pos-search-bar input {
     flex-grow: 1;
     padding: 0 5px;
-    height: 30px;
+    height: 100%;
+    background: none;
     border: none !important;
     outline: none !important;
     font-family: "Lato","Lucida Grande", Helvetica, Verdana, Arial;
     color: #63717f;
 }
 
-.pos .pos-topheader .pos-search-bar i,
+.pos .rightpane-header .pos-search-bar i,
 .pos .partnerlist-screen .pos-search-bar i {
     cursor: pointer;
     transition: color linear 150ms;
 }
 
-.pos .pos-topheader .pos-search-bar i:active,
+.pos .rightpane-header .pos-search-bar i:active,
 .pos .partnerlist-screen .pos-search-bar i:active {
     color: purple;
 }
@@ -3432,10 +3507,24 @@ td {
 
 .pos .search-bar-container.sb-product {
     width: 75%;
-    max-width: 500px;
+    max-width: 250px;
     justify-content: flex-start;
 }
 
+.pos .search-bar-container.sb-product .icon {
+    height: 100%;
+    border-radius: 0;
+    color: $primary;
+    margin: 0;
+    padding: 0 map-get($spacers, 3);
+    background-color: #fff;
+}
+
+.pos .search-bar-container.sb-product .icon:hover {
+    background: #fff;
+    color: darken($primary, 5%);
+}
+
 .pos .sb-product .pos-search-bar{
     flex-grow: 1;
 }
@@ -3452,17 +3541,18 @@ td {
 }
 
 .pos .sb-product .icon:hover {
-    background: rgb(104,69,95);
+    background: rgba(0, 0, 0, .08);
 }
 
 .pos .sb-product .icon:active {
-    background: rgb(104,69,95, 0.7);
+    background: rgba(104,69,95, 0.7);
 }
 
 @media screen and (max-width: 768px) {
     .pos .search-bar-container.sb-product {
-        width: 90%;
         max-width: none;
+        width: auto;
+        border-left: 1px solid $gray-200;
     }
 
     .pos .sb-partner .pos-search-bar {
@@ -3510,7 +3600,7 @@ td {
     text-align: center;
     border-radius: 3px;
     cursor: pointer;
-    background: rgb(230, 230, 230);
+    background: $gray-200;
 }
 
 .receipt-screen .default-view .actions .send-email {
@@ -3530,7 +3620,7 @@ td {
     flex: 1;
     padding-left: 1rem;
     border: none;
-    color: #555555;
+    color: $gray-700;
 }
 
 .receipt-screen .default-view .actions .send-email input:focus {
@@ -3541,12 +3631,16 @@ td {
     padding: 1rem 40px;
     margin: 2px;
     border: none;
-    background: rgb(230, 230, 230);
+    background: $gray-200;
+    color: $gray-500;
+}
+.receipt-screen .default-view .actions .send-email button.send:not(.highlight) {
+    cursor: not-allowed;
 }
 
 .receipt-screen .default-view .actions .send-email button.send.highlight {
     color: white;
-    background-color: #6EC89B;
+    background-color: $primary;
 }
 
 .receipt-screen .notice {
@@ -3559,7 +3653,7 @@ td {
 }
 
 .receipt-screen .notice .successful {
-    color: #6EC89B;
+    color: $primary;
 }
 
 .receipt-screen .notice .send-mail-info {
@@ -3568,6 +3662,10 @@ td {
     font-style: italic;
 }
 
+.receipt-screen .button.validation {
+    grid-column: span 2;
+}
+
 @media screen and (max-width: 768px) {
     .receipt-screen .default-view {
         flex-direction: column;
@@ -3604,7 +3702,7 @@ td {
 }
 
 .pos .pos-topheader .status-buttons > div:hover {
-    background: rgb(104,69,95);
+    background: rgba(0, 0, 0, .08);
 }
 
 @media screen and (max-width: 768px) {
@@ -3645,7 +3743,7 @@ td {
 }
 
 .cash-move .input-amount .input-type.highlight {
-    background: #6EC89B !important;
+    background: $primary !important;
     border: solid 1px #64AF8A !important;
     color: white !important;
 }
@@ -3657,15 +3755,21 @@ td {
 }
 
 .cash-move .input-amount input {
-    width: 200px;
+    width: 100%;
     min-height: auto;
     text-align: right;
     padding-right: 30px;
 }
 
-.cash-move .input-amount .input-field span.currency {
+.cash-move .input-amount .input-field {
     position: relative;
-    left: -20px;
+    flex-grow: 1;
+}
+
+.cash-move .input-amount .input-field span.currency {
+    position: absolute;
+    right: 10px;
+    top: 10px;
 }
 
 .cash-move textarea {
diff --git a/addons/point_of_sale/static/src/scss/pos_variables_extra.scss b/addons/point_of_sale/static/src/scss/pos_variables_extra.scss
new file mode 100644
index 00000000000..4b7857cd489
--- /dev/null
+++ b/addons/point_of_sale/static/src/scss/pos_variables_extra.scss
@@ -0,0 +1,33 @@
+// This file duplicates variables from web_enterprise/static/src/legacy/scss/primary_variables.scss
+// to force the colors to use those of Enterprise on Community.
+
+$o-gray-100: #f6f7fa !default;
+$o-gray-200: #E0E2E6 !default;
+$o-gray-300: #C9CCD2 !default;
+$o-gray-400: #9DA1AA !default;
+$o-gray-500: #80848F !default;
+$o-gray-600: #626774 !default;
+$o-gray-700: #4A4F59 !default;
+$o-gray-800: #353840 !default;
+$o-gray-900: #212529 !default;
+
+$o-enterprise-color: #714B67 !default;
+$o-enterprise-primary-color: #017e84 !default;
+$o-enterprise-primary-color-light: scale-color($o-enterprise-primary-color, $lightness: 6%) !default;
+
+$o-brand-odoo: $o-enterprise-color !default;
+$o-brand-primary: $o-enterprise-primary-color !default;
+$o-brand-secondary: #8f8f8f !default;
+$o-brand-lightsecondary: $o-gray-100 !default;
+
+$o-list-group-header-color: $o-gray-900 !default;
+$o-list-footer-color: $o-gray-900 !default;
+$o-list-footer-bg-color: white !default;
+
+$o-btn-secondary-bg: white !default;
+$o-btn-secondary-hover-bg: $o-gray-100 !default;
+$o-btn-secondary-hover-border: $o-gray-200 !default;
+
+// Duplicate variable from web_enterprise/static/src/webclient/navbar/navbar.variables.scss
+$o-navbar-badge-bg: $o-enterprise-primary-color-light !default;
+
diff --git a/addons/point_of_sale/static/src/xml/Chrome.xml b/addons/point_of_sale/static/src/xml/Chrome.xml
index 69003fcc4cf..8f5bbb2a220 100644
--- a/addons/point_of_sale/static/src/xml/Chrome.xml
+++ b/addons/point_of_sale/static/src/xml/Chrome.xml
@@ -6,17 +6,14 @@
             <div class="pos-receipt-print"></div>
             <div class="pos-topheader" t-att-class="{ oe_hidden: state.uiState !== 'READY' }">
                 <div t-if="tempScreen.isShown" class="block-top-header" />
-                <div class="pos-branding" t-if= "!env.isMobile">
-                    <img class="pos-logo" t-on-click="() => this.trigger('toggle-debug-widget')"
+                <div class="pos-branding">
+                    <img t-if="!env.isMobile" class="pos-logo" t-on-click="() => this.trigger('toggle-debug-widget')"
                          src="/point_of_sale/static/src/img/logo.png" alt="Logo" />
                     <CashMoveButton t-if="showCashMoveButton()" />
                     <TicketButton isTicketScreenShown="isTicketScreenShown" />
                 </div>
                 <div class="pos-rightheader">
-                    <CashMoveButton t-if="showCashMoveButton() and env.isMobile and !state.mobileSearchBarIsShown" />
-                    <TicketButton isTicketScreenShown="isTicketScreenShown" t-if="env.isMobile and !state.mobileSearchBarIsShown" />
-                    <div class="search-bar-portal search-bar-container sb-product" />
-                    <div class="status-buttons" t-if="state.uiState === 'READY'" t-att-class="{ oe_hidden: state.mobileSearchBarIsShown }">
+                    <div class="status-buttons" t-if="state.uiState === 'READY'">
                         <CashierName />
                         <SaleDetailsButton t-if="env.proxy.printer" isHeaderButton="true"/>
                         <ProxyStatus t-if="env.pos.config.use_proxy" />
diff --git a/addons/point_of_sale/static/src/xml/Misc/SearchBar.xml b/addons/point_of_sale/static/src/xml/Misc/SearchBar.xml
index a7dbec7f1db..50c8e882742 100644
--- a/addons/point_of_sale/static/src/xml/Misc/SearchBar.xml
+++ b/addons/point_of_sale/static/src/xml/Misc/SearchBar.xml
@@ -7,20 +7,22 @@
                 <span class="search-icon" t-if="!env.isMobile"><i class="fa fa-search"></i></span>
                 <input class="radius-left" t-ref="autofocus" t-att-class="{ 'radius-right': !props.config.filter.show }"
                     t-model="state.searchInput" t-on-keydown="onSearchInputKeydown" t-on-keyup="onSearchInputKeyup" type="text" t-att-placeholder="props.placeholder" />
-                <ul t-if="state.showSearchFields and state.searchInput" class="fields">
-                    <t t-foreach="searchFieldsList" t-as="fieldName" t-key="fieldName">
-                        <li t-att-class="{ highlight: fieldName == searchFieldsList[state.selectedSearchFieldId] }"
-                            t-on-click="() => this.trigger('click-search-field', fieldName)">
-                            <span class="field">
-                                <t t-esc="props.config.searchFields.get(fieldName)"></t>
-                            </span>
-                            <span>: </span>
-                            <span class="term">
-                                <t t-esc="state.searchInput"></t>
-                            </span>
-                        </li>
-                    </t>
-                </ul>
+                <div t-if="state.showSearchFields and state.searchInput" class="fields">
+                    <ul>
+                        <t t-foreach="searchFieldsList" t-as="fieldName" t-key="fieldName">
+                            <li t-att-class="{ highlight: fieldName == searchFieldsList[state.selectedSearchFieldId] }"
+                                t-on-click="() => this.trigger('click-search-field', fieldName)">
+                                <span class="field">
+                                    <t t-esc="props.config.searchFields.get(fieldName)"></t>
+                                </span>
+                                <span>: </span>
+                                <span class="term">
+                                    <t t-esc="state.searchInput"></t>
+                                </span>
+                            </li>
+                        </t>
+                    </ul>
+                </div>
             </div>
             <div t-if="props.config.filter.show" class="filter radius-right"
                 t-on-click.stop="() => { state.showFilterOptions = !state.showFilterOptions }">
diff --git a/addons/point_of_sale/static/src/xml/Popups/EditListPopup.xml b/addons/point_of_sale/static/src/xml/Popups/EditListPopup.xml
index 2a349777686..40bd3fefb15 100644
--- a/addons/point_of_sale/static/src/xml/Popups/EditListPopup.xml
+++ b/addons/point_of_sale/static/src/xml/Popups/EditListPopup.xml
@@ -13,7 +13,7 @@
                     </t>
                 </main>
                 <footer class="footer">
-                    <div class="button confirm" t-on-click="confirm">
+                    <div class="button confirm highlight" t-on-click="confirm">
                         Ok
                     </div>
                     <div class="button cancel" t-on-click="cancel">
diff --git a/addons/point_of_sale/static/src/xml/Popups/NumberPopup.xml b/addons/point_of_sale/static/src/xml/Popups/NumberPopup.xml
index 4c9eeafb815..1dee146d165 100644
--- a/addons/point_of_sale/static/src/xml/Popups/NumberPopup.xml
+++ b/addons/point_of_sale/static/src/xml/Popups/NumberPopup.xml
@@ -51,7 +51,7 @@
                         <div class="button cancel" t-on-mousedown.prevent="cancel">
                             <t t-esc="props.cancelText" />
                         </div>
-                        <div class="button confirm" t-on-mousedown.prevent="confirm">
+                        <div class="button confirm highlight" t-on-mousedown.prevent="confirm">
                             <t t-esc="props.confirmText" />
                         </div>
                     </footer>
diff --git a/addons/point_of_sale/static/src/xml/Popups/TextAreaPopup.xml b/addons/point_of_sale/static/src/xml/Popups/TextAreaPopup.xml
index 2e2c67a3212..9508208eed8 100644
--- a/addons/point_of_sale/static/src/xml/Popups/TextAreaPopup.xml
+++ b/addons/point_of_sale/static/src/xml/Popups/TextAreaPopup.xml
@@ -7,9 +7,11 @@
                     <header class="title drag-handle">
                         <t t-esc="props.title" />
                     </header>
-                    <textarea t-model="state.inputValue" t-ref="input"></textarea>
+                    <div class="popup-textarea-wrap">
+                        <textarea t-model="state.inputValue" t-ref="input"></textarea>
+                    </div>
                     <footer class="footer">
-                        <div class="button confirm" t-on-click="confirm">
+                        <div class="button confirm highlight" t-on-click="confirm">
                             <t t-esc="props.confirmText" />
                         </div>
                         <div class="button cancel" t-on-click="cancel">
diff --git a/addons/point_of_sale/static/src/xml/Popups/TextInputPopup.xml b/addons/point_of_sale/static/src/xml/Popups/TextInputPopup.xml
index 3cfb2c21364..de38d55d5ba 100644
--- a/addons/point_of_sale/static/src/xml/Popups/TextInputPopup.xml
+++ b/addons/point_of_sale/static/src/xml/Popups/TextInputPopup.xml
@@ -13,7 +13,7 @@
                     <input type="text" t-model="state.inputValue" t-ref="input" />
                 </div>
                 <div class="footer">
-                    <div class="button confirm" t-on-click="confirm">
+                    <div class="button confirm highlight" t-on-click="confirm">
                         <t t-esc="props.confirmText" />
                     </div>
                     <div class="button cancel" t-on-click="cancel">
diff --git a/addons/point_of_sale/static/src/xml/Screens/PartnerListScreen/PartnerLine.xml b/addons/point_of_sale/static/src/xml/Screens/PartnerListScreen/PartnerLine.xml
index ceba642818e..6601dde9d75 100644
--- a/addons/point_of_sale/static/src/xml/Screens/PartnerListScreen/PartnerLine.xml
+++ b/addons/point_of_sale/static/src/xml/Screens/PartnerListScreen/PartnerLine.xml
@@ -21,13 +21,13 @@
             </td>
             <td class="partner-line-email" t-if="!env.isMobile">
                 <div t-if="props.partner.phone">
-                    <i class="fa fa-phone"/><t t-esc="props.partner.phone"/>
+                    <i class="fa fa-phone fa-fw"/><t t-esc="props.partner.phone"/>
                 </div>
                 <div t-if="props.partner.mobile">
-                    <i class="fa fa-mobile fa-lg"/><t t-esc="props.partner.mobile"/>
+                    <i class="fa fa-mobile fa-lg fa-fw"/><t t-esc="props.partner.mobile"/>
                 </div>
                 <div t-if="props.partner.email" class="email-field">
-                    <i class="fa fa-paper-plane-o"/><t t-esc="props.partner.email" />
+                    <i class="fa fa-paper-plane-o fa-fw"/><t t-esc="props.partner.email" />
                 </div>
             </td>
             <td t-if="env.isMobile">
diff --git a/addons/point_of_sale/static/src/xml/Screens/PartnerListScreen/PartnerListScreen.xml b/addons/point_of_sale/static/src/xml/Screens/PartnerListScreen/PartnerListScreen.xml
index cbd7adab535..ae6f5933dc8 100644
--- a/addons/point_of_sale/static/src/xml/Screens/PartnerListScreen/PartnerListScreen.xml
+++ b/addons/point_of_sale/static/src/xml/Screens/PartnerListScreen/PartnerListScreen.xml
@@ -11,7 +11,7 @@
                             <span> Save</span>
                         </t>
                     </div>
-                    <div t-if="!state.detailIsShown" class="button new-customer" role="img" aria-label="Add a customer"
+                    <div t-if="!state.detailIsShown" class="button new-customer highlight" role="img" aria-label="Add a customer"
                             t-on-click="createPartner"
                             title="Add a customer">
                         <i t-if="env.isMobile" class="fa fa-plus"/>
diff --git a/addons/point_of_sale/static/src/xml/Screens/PaymentScreen/PaymentScreen.xml b/addons/point_of_sale/static/src/xml/Screens/PaymentScreen/PaymentScreen.xml
index c1f3973726b..07f3a046dc8 100644
--- a/addons/point_of_sale/static/src/xml/Screens/PaymentScreen/PaymentScreen.xml
+++ b/addons/point_of_sale/static/src/xml/Screens/PaymentScreen/PaymentScreen.xml
@@ -12,11 +12,6 @@
                             <span class="back_text">Back</span>
                         </div>
                         <div class="top-content-center"><h1>Payment</h1></div>
-                        <div class="button next" t-att-class="{ highlight: currentOrder.is_paid() and currentOrder._isValidEmptyOrder() }"
-                            t-on-click="() => this.trigger('validate-order')">
-                            <span class="next_text">Validate</span>
-                            <i class="fa fa-angle-double-right fa-fw"></i>
-                        </div>
                     </div>
                 </t>
                 <div class="main-content">
@@ -27,8 +22,8 @@
                             </section>
                         </t>
                         <div class="paymentmethods-container">
-                            <PaymentScreenPaymentLines paymentLines="paymentLines" />
                             <div class="paymentmethods">
+                                <p class="title-category">Payment method</p>
                                 <t t-foreach="payment_methods_from_config" t-as="paymentMethod"
                                    t-key="paymentMethod.id">
                                     <div class="button paymentmethod"
@@ -39,9 +34,17 @@
                                     </div>
                                 </t>
                             </div>
+                            <PaymentScreenPaymentLines paymentLines="paymentLines" />
+                        </div>
+                        <div t-if="!env.isMobile" class="button next validation" t-att-class="{ highlight: currentOrder.is_paid() and currentOrder._isValidEmptyOrder() }"
+                            t-on-click="() => this.trigger('validate-order')">
+                            <div class="pay-circle">
+                                <i class="fa fa-chevron-right" role="img" aria-label="Pay" title="Pay" />
+                            </div>
+                            <span class="next_text">Validate</span>
                         </div>
                     </div>
-                    <div class="right-content">
+                    <div class="center-content">
                         <t t-if="!env.isMobile">
                             <section class="paymentlines-container">
                                 <PaymentScreenStatus order="currentOrder" />
@@ -52,42 +55,43 @@
                             <section class="payment-numpad">
                                 <PaymentScreenNumpad />
                             </section>
-
-                            <div class="payment-buttons">
-                                <div class="partner-button">
-                                    <div class="button" t-att-class="{ highlight: currentOrder.get_partner() }" t-on-click="selectPartner">
-                                        <i class="fa fa-user" role="img" title="Customer" />
-                                        <t t-set="partner" t-value="currentOrder.get_partner()" />
-                                        <span>
-                                            <t t-if="partner">
-                                                <t t-esc="partner.name" />
-                                            </t>
-                                            <t t-if="!partner">
-                                                Customer
-                                            </t>
-                                        </span>
-                                    </div>
+                        </div>
+                    </div>
+                    <div class="right-content">
+                        <div class="payment-buttons">
+                            <div class="partner-button">
+                                <div class="button" t-att-class="{ highlight: currentOrder.get_partner() }" t-on-click="selectPartner">
+                                    <i class="fa fa-user" role="img" title="Customer" />
+                                    <t t-set="partner" t-value="currentOrder.get_partner()" />
+                                    <span>
+                                        <t t-if="partner">
+                                            <t t-esc="partner.name" />
+                                        </t>
+                                        <t t-if="!partner">
+                                            Customer
+                                        </t>
+                                    </span>
                                 </div>
-                                <div class="payment-controls">
-                                    <div class="button js_invoice"
-                                        t-att-class="{ highlight: currentOrder.is_to_invoice() }"
-                                        t-on-click="toggleIsToInvoice">
-                                        <i class="fa fa-file-text-o" /> Invoice
-                                    </div>
-                                    <div t-if="env.pos.config.tip_product_id" class="button js_tip"
-                                        t-att-class="{ highlight: currentOrder.get_tip() }"
-                                        t-on-click="addTip">
-                                        <i class="fa fa-heart" /> Tip <t t-if="currentOrder.get_tip() != 0">(<t t-esc="env.pos.format_currency(currentOrder.get_tip())"/>)</t>
-                                    </div>
-                                    <div t-if="env.pos.config.iface_cashdrawer" class="button js_cashdrawer"
-                                        t-on-click="openCashbox">
-                                        <i class="fa fa-archive" /> Open Cashbox
-                                    </div>
-                                    <div t-if="env.pos.config.ship_later" class="button"
-                                         t-att-class="{ highlight: currentOrder.is_to_ship() }"
-                                         t-on-click="toggleIsToShip">
-                                        <i class="fa fa-clock-o" /> Ship Later
-                                    </div>
+                            </div>
+                            <div class="payment-controls">
+                                <div class="button js_invoice"
+                                    t-att-class="{ highlight: currentOrder.is_to_invoice() }"
+                                    t-on-click="toggleIsToInvoice">
+                                    <i class="fa fa-file-text-o" /> Invoice
+                                </div>
+                                <div t-if="env.pos.config.tip_product_id" class="button js_tip"
+                                    t-att-class="{ highlight: currentOrder.get_tip() }"
+                                    t-on-click="addTip">
+                                    <i class="fa fa-heart" /> Tip <t t-if="currentOrder.get_tip() != 0">(<t t-esc="env.pos.format_currency(currentOrder.get_tip())"/>)</t>
+                                </div>
+                                <div t-if="env.pos.config.iface_cashdrawer" class="button js_cashdrawer"
+                                    t-on-click="openCashbox">
+                                    <i class="fa fa-archive" /> Open Cashbox
+                                </div>
+                                <div t-if="env.pos.config.ship_later" class="button"
+                                        t-att-class="{ highlight: currentOrder.is_to_ship() }"
+                                        t-on-click="toggleIsToShip">
+                                    <i class="fa fa-clock-o" /> Ship Later
                                 </div>
                             </div>
                         </div>
diff --git a/addons/point_of_sale/static/src/xml/Screens/PaymentScreen/PaymentScreenNumpad.xml b/addons/point_of_sale/static/src/xml/Screens/PaymentScreen/PaymentScreenNumpad.xml
index d988ab5f600..86696708835 100644
--- a/addons/point_of_sale/static/src/xml/Screens/PaymentScreen/PaymentScreenNumpad.xml
+++ b/addons/point_of_sale/static/src/xml/Screens/PaymentScreen/PaymentScreenNumpad.xml
@@ -7,17 +7,14 @@
             <PSNumpadInputButton value="'2'" />
             <PSNumpadInputButton value="'3'" />
             <PSNumpadInputButton value="'+10'" changeClassTo="'mode-button'" />
-            <br />
             <PSNumpadInputButton value="'4'" />
             <PSNumpadInputButton value="'5'" />
             <PSNumpadInputButton value="'6'" />
             <PSNumpadInputButton value="'+20'" changeClassTo="'mode-button'" />
-            <br />
             <PSNumpadInputButton value="'7'" />
             <PSNumpadInputButton value="'8'" />
             <PSNumpadInputButton value="'9'" />
             <PSNumpadInputButton value="'+50'" changeClassTo="'mode-button'" />
-            <br />
             <PSNumpadInputButton value="'-'" text="'+/-'" />
             <PSNumpadInputButton value="'0'" />
             <PSNumpadInputButton value="decimalPoint" />
diff --git a/addons/point_of_sale/static/src/xml/Screens/PaymentScreen/PaymentScreenPaymentLines.xml b/addons/point_of_sale/static/src/xml/Screens/PaymentScreen/PaymentScreenPaymentLines.xml
index 477fdfe7d34..d6efbba1b3b 100644
--- a/addons/point_of_sale/static/src/xml/Screens/PaymentScreen/PaymentScreenPaymentLines.xml
+++ b/addons/point_of_sale/static/src/xml/Screens/PaymentScreen/PaymentScreenPaymentLines.xml
@@ -3,6 +3,7 @@
 
     <t t-name="PaymentScreenPaymentLines" owl="1">
             <div class="paymentlines">
+                <p class="title-category">Summary</p>
                 <t t-foreach="props.paymentLines" t-as="line" t-key="line.cid">
                     <t t-if="line.selected">
                         <div class="paymentline selected"
diff --git a/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ActionpadWidget.xml b/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ActionpadWidget.xml
index 0930fe7eab5..9b44dfd3bd6 100644
--- a/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ActionpadWidget.xml
+++ b/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ActionpadWidget.xml
@@ -13,7 +13,7 @@
                     Customer
                 </t>
             </button>
-            <button class="button pay" t-on-click="() => this.trigger(props.actionToTrigger or 'click-pay')">
+            <button class="button pay validation" t-on-click="() => this.trigger(props.actionToTrigger or 'click-pay')">
                 <div class="pay-circle" t-att-class="{ 'highlight': props.isActionButtonHighlighted }">
                     <i class="fa fa-chevron-right" role="img" aria-label="Pay" title="Pay" />
                 </div>
diff --git a/addons/point_of_sale/static/src/xml/Screens/ProductScreen/NumpadWidget.xml b/addons/point_of_sale/static/src/xml/Screens/ProductScreen/NumpadWidget.xml
index a7aef6c9d24..4024700f583 100644
--- a/addons/point_of_sale/static/src/xml/Screens/ProductScreen/NumpadWidget.xml
+++ b/addons/point_of_sale/static/src/xml/Screens/ProductScreen/NumpadWidget.xml
@@ -8,7 +8,6 @@
             <button class="input-button number-char" t-on-click="() => this.sendInput('3')">3</button>
             <button class="mode-button" t-att-class="{'selected-mode': props.activeMode === 'quantity'}"
                     t-on-click="() => this.changeMode('quantity')">Qty</button>
-            <br />
             <button class="input-button number-char" t-on-click="() => this.sendInput('4')">4</button>
             <button class="input-button number-char" t-on-click="() => this.sendInput('5')">5</button>
             <button class="input-button number-char" t-on-click="() => this.sendInput('6')">6</button>
@@ -18,7 +17,6 @@
                     }"
                     t-att-disabled="!hasManualDiscount"
                     t-on-click="() => this.changeMode('discount')">% Disc</button>
-            <br />
             <button class="input-button number-char" t-on-click="() => this.sendInput('7')">7</button>
             <button class="input-button number-char" t-on-click="() => this.sendInput('8')">8</button>
             <button class="input-button number-char" t-on-click="() => this.sendInput('9')">9</button>
@@ -27,7 +25,6 @@
                     'disabled-mode': !hasPriceControlRights
                 }" t-att-disabled="!hasPriceControlRights"
                     t-on-click="() => this.changeMode('price')">Price</button>
-            <br />
             <button class="input-button numpad-minus" t-att-class="{ 'disabled-mode': props.disableSign }" t-on-click="() => this.sendInput('-')">+/-</button>
             <button class="input-button number-char" t-on-click="() => this.sendInput('0')">0</button>
             <button class="input-button number-char" t-on-click="() => this.sendInput(decimalSeparator)">
diff --git a/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductItem.xml b/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductItem.xml
index f54aa578d93..75c3d041cc6 100644
--- a/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductItem.xml
+++ b/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductItem.xml
@@ -7,17 +7,16 @@
                  t-att-data-product-id="props.product.id"
                  t-attf-aria-labelledby="article_product_{{props.product.id}}">
             <div class="product-img">
-                <i role="img" aria-label="Info" title="Info" class="product-info-button fa fa-info-circle"
-                    t-on-click.stop="onProductInfoClick"
-                />
                 <img t-att-src="imageUrl" t-att-alt="props.product.display_name" />
+            </div>
+            <div class="product-content">
+                <div class="product-name" t-attf-id="article_product_{{props.product.id}}">
+                    <t t-esc="props.product.display_name" />
+                </div>
                 <span class="price-tag">
                     <t t-esc="price" />
                 </span>
             </div>
-            <div class="product-name" t-attf-id="article_product_{{props.product.id}}">
-                <t t-esc="props.product.display_name" />
-            </div>
         </article>
     </t>
 
diff --git a/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductsWidgetControlPanel.xml b/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductsWidgetControlPanel.xml
index df467a8fb34..4e81df60c33 100644
--- a/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductsWidgetControlPanel.xml
+++ b/addons/point_of_sale/static/src/xml/Screens/ProductScreen/ProductsWidgetControlPanel.xml
@@ -4,10 +4,7 @@
     <t t-name="ProductsWidgetControlPanel" owl="1">
         <div class="products-widget-control">
             <t t-if="!props.hasNoCategories">
-                <div class="rightpane-header" t-att-class="{
-                    'green-border-bottom': !displayCategImages,
-                    'grey-border-bottom': displayCategImages,
-                }">
+                <div class="rightpane-header">
                     <!-- Breadcrumbs -->
                     <div class="breadcrumbs">
                         <span class="breadcrumb">
@@ -17,8 +14,7 @@
                         </span>
                         <t t-foreach="props.breadcrumbs" t-as="category" t-key="category.id">
                             <span class="breadcrumb">
-                                <img src="/point_of_sale/static/src/img/bc-arrow-big.png" class="breadcrumb-arrow"
-                                    alt="Slash" />
+                                <i class="breadcrumb-arrow fa fa-caret-right" aria-hidden="true"/>
                                 <span class="breadcrumb-button"
                                     t-on-click="() => this.trigger('switch-category', category.id)">
                                     <t t-esc="category.name"></t>
@@ -35,6 +31,18 @@
                             </span>
                         </t>
                     </div>
+                    <div class="search-bar-container sb-product">
+                        <span t-if="env.isMobile" class="oe_status oe_icon icon" t-on-click="_toggleMobileSearchbar">
+                            <i t-attf-class="fa {{props.mobileSearchBarIsShown ? 'fa-arrow-left' : 'fa-search'}}"/>
+                        </span>
+                        <t t-if="!env.isMobile || props.mobileSearchBarIsShown">
+                            <div class="pos-search-bar">
+                                <i class="fa fa-search" t-on-click="_onPressEnterKey"/>
+                                <input t-ref="search-word-input-product" placeholder="Search Products..." type="text" autofocus="autofocus" t-on-keyup="updateSearch" />
+                                <i class="fa fa-times search-clear-partner" t-on-click="_clearSearch"/>
+                            </div>
+                        </t>
+                    </div>
                 </div>
                 <t t-if="props.subcategories.length > 0 and displayCategImages">
                     <div class="categories">
@@ -48,23 +56,6 @@
                     </div>
                 </t>
             </t>
-            <t t-portal="'.pos .pos-topheader .search-bar-container.sb-product'">
-                <span t-if="env.isMobile" class="oe_status oe_icon icon" t-on-click="_toggleMobileSearchbar">
-                    <i t-attf-class="fa {{props.mobileSearchBarIsShown ? 'fa-arrow-left' : 'fa-search'}}"/>
-                </span>
-                <t t-if="!env.isMobile || props.mobileSearchBarIsShown">
-                    <div class="pos-search-bar">
-                        <i class="fa fa-search" t-on-click="_onPressEnterKey"/>
-                        <input t-ref="search-word-input-product" placeholder="Search Products..." type="text" autofocus="autofocus" t-on-keyup="updateSearch" />
-                        <i class="fa fa-times search-clear-partner" t-on-click="_clearSearch"/>
-                    </div>
-                </t>
-            </t>
-            <t t-portal="'.pos .search-database-button'">
-                <div class="button highlight" t-on-click="_onPressEnterKey">
-                    <i class="fa fa-search"/> Search database
-                </div>
-            </t>
         </div>
     </t>
 
diff --git a/addons/point_of_sale/static/src/xml/Screens/ReceiptScreen/ReceiptScreen.xml b/addons/point_of_sale/static/src/xml/Screens/ReceiptScreen/ReceiptScreen.xml
index 740e181a5c2..c1021e5d9fa 100644
--- a/addons/point_of_sale/static/src/xml/Screens/ReceiptScreen/ReceiptScreen.xml
+++ b/addons/point_of_sale/static/src/xml/Screens/ReceiptScreen/ReceiptScreen.xml
@@ -10,10 +10,6 @@
                             <t t-esc="orderAmountPlusTip" />
                         </h1>
                     </div>
-                    <div class="button next" t-att-class="{ highlight: !locked }"
-                        t-on-click="orderDone">
-                        New Order <i class="fa fa-angle-double-right"></i>
-                    </div>
                 </div>
                 <div class="default-view">
                     <div class="actions">
@@ -44,6 +40,13 @@
                         <OrderReceipt order="currentOrder"/>
                     </div>
                 </div>
+                <div class="button next validation" t-att-class="{ highlight: !locked }"
+                    t-on-click="orderDone">
+                    <div class="pay-circle">
+                        <i class="fa fa-chevron-right" role="img" aria-label="Pay" title="Pay" />
+                    </div>
+                    New Order
+                </div>
             </div>
         </div>
     </t>
diff --git a/addons/pos_loyalty/static/src/css/Loyalty.scss b/addons/pos_loyalty/static/src/css/Loyalty.scss
index ab6ab1a5549..9a57e39eb82 100644
--- a/addons/pos_loyalty/static/src/css/Loyalty.scss
+++ b/addons/pos_loyalty/static/src/css/Loyalty.scss
@@ -70,8 +70,7 @@
         font-weight: normal;
         font-size: 80%;
         text-align: right;
-        margin-right: 15px;
-        margin-left: 15px;
+        padding: 0 1rem .5rem;
         
         .title {
             padding-top: 0.8em;
@@ -86,7 +85,6 @@
 
     .summary {
         .loyalty-points {
-            margin-left: 20px;
             float: left;
             padding: 10px;
             max-width: 216px;
@@ -96,6 +94,10 @@
             border-radius: 3px;
         }
 
+        .loyalty-points-title {
+            font-size: small;
+        }
+
         .loyalty-points-spent {
             color: #C86E6E;
             background: rgba(200, 110, 110, 0.17);
diff --git a/addons/pos_restaurant/__manifest__.py b/addons/pos_restaurant/__manifest__.py
index fc9928995a1..5a075470505 100644
--- a/addons/pos_restaurant/__manifest__.py
+++ b/addons/pos_restaurant/__manifest__.py
@@ -32,7 +32,7 @@ This module adds several features to the Point of Sale that are specific to rest
         'point_of_sale.assets': [
             'pos_restaurant/static/lib/**/*.js',
             'pos_restaurant/static/src/js/**/*.js',
-            ('after', 'point_of_sale/static/src/css/pos.css', 'pos_restaurant/static/src/css/restaurant.css'),
+            ('after', 'point_of_sale/static/src/scss/pos.scss', 'pos_restaurant/static/src/scss/restaurant.scss'),
         ],
         'web.assets_backend': [
             'point_of_sale/static/src/scss/pos_dashboard.scss',
diff --git a/addons/pos_restaurant/static/src/css/restaurant.css b/addons/pos_restaurant/static/src/scss/restaurant.scss
similarity index 98%
rename from addons/pos_restaurant/static/src/css/restaurant.css
rename to addons/pos_restaurant/static/src/scss/restaurant.scss
index 0eea59fd128..6e4cf62e452 100644
--- a/addons/pos_restaurant/static/src/css/restaurant.css
+++ b/addons/pos_restaurant/static/src/scss/restaurant.scss
@@ -23,7 +23,7 @@
 }
 .floor-selector .button {
     cursor: pointer;
-    border-left: dashed 1px rgb(196,196,196);
+    border-left: solid 1px $gray-400;
     -webkit-flex: 1;
     flex: 1;
 }
@@ -31,7 +31,7 @@
     border-left: none;
 }
 .floor-selector .button.active {
-    background: #6EC89B;
+    background: $o-navbar-badge-bg;
     color: white;
 }
 
@@ -286,7 +286,7 @@
 .pos .order-button.floor-button {
     display: flex;
     align-items: center;
-    background: #6EC89B;
+    background: $o-navbar-badge-bg;
     font-weight: bold;
     font-size: 16px;
     padding-left: 16px;
@@ -345,7 +345,7 @@
     margin: 16px;
 }
 .splitbill-screen.screen .pay-button .button {
-    background: #e2e2e2;
+    background: $gray-200;
     line-height: 74px;
     font-size: 16px;
     border: solid 1px rgb(202, 202, 202);
diff --git a/addons/pos_restaurant/static/src/xml/Chrome.xml b/addons/pos_restaurant/static/src/xml/Chrome.xml
index 93a350b0f6b..b87b12905f9 100644
--- a/addons/pos_restaurant/static/src/xml/Chrome.xml
+++ b/addons/pos_restaurant/static/src/xml/Chrome.xml
@@ -2,7 +2,7 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="Chrome" t-inherit="point_of_sale.Chrome" t-inherit-mode="extension" owl="1">
-        <xpath expr="//div[hasclass('search-bar-container')]" position="before">
+        <xpath expr="//div[hasclass('status-buttons')]" position="before">
             <div class="back-to-floor-portal"/>
         </xpath>
     </t>