handle sae area with android edge2edge

.eslintrc

@@ -70,7 +70,6 @@
     "ANALYTICS_EVENTS": true,
     "NotificationsManager": true,
     "AnalyticsManager": true,
-    "parseDeeplinkData": true,
-    "applySafeAreaStyles": true
+    "parseDeeplinkData": true
   }
 }

widget/index.html

@@ -52,7 +52,6 @@
     <script src="./js/utils/handleCPSync.js"></script>
     <script src="./js/utils/resizeImage.js"></script>
     <script src="./js/utils/parseDeeplinkData.js"></script>
-    <script src="./js/utils/safeAreaStyle.js"></script>
     <script src="./js/notificationManager.js"></script>
     <script src="./js/pages/customer/CustomerView.js"></script>
     <script src="./js/pages/employee/EmployeeView.js"></script>

widget/style/style.css

@@ -26,10 +26,7 @@ object {
 #home {
     height: 100vh;
     overflow: scroll;
-}
-
-body.has-safe-area #home {
-    height: calc(100vh - var(--bf-safe-area-inset-bottom)) !important;
+    padding-bottom: calc(16px + var(--bf-safe-area-inset-bottom)) !important;
 }
 
 #home .listView-container > .empty_state {
@@ -50,6 +47,9 @@ body.has-safe-area #home {
 .rewardListContainer .listView-items {
     margin-bottom: 14px;
 }
+#transactionCustomerList .listView-items {
+    padding-bottom: calc(16px + var(--bf-safe-area-inset-bottom)) !important;
+}
 #friendlyId {
     padding-bottom: 1rem;
 }
@@ -67,10 +67,6 @@ body.has-safe-area #home {
     overflow: scroll;
 }
 
-body.has-safe-area #transactionCustomerList, body.has-safe-area #transactionEmployeeList {
-    height: calc(90vh - var(--bf-safe-area-inset-bottom)) !important;
-}
-
 
 .skeleton-sentences {
     padding: 20px 0;
@@ -91,6 +87,10 @@ body.has-safe-area #transactionCustomerList, body.has-safe-area #transactionEmpl
     margin-top: -50px;
 }
 
+#transactionEmployeeList {
+    padding-bottom: calc(4px + var(--bf-safe-area-inset-bottom)) !important;
+}
+
 #transactionEmployeeList > .empty_state::after, #transactionCustomerList > .empty_state::after {
     font-size: 14px !important;
     font-weight: 400 !important;
@@ -254,21 +254,17 @@ body.has-safe-area #transactionCustomerList, body.has-safe-area #transactionEmpl
 }
 
 #availableRewardList {
-    padding-bottom: 80px;
     position: relative;
     top: -9px;
-}
-
-html[safe-area="true"] body.has-safe-area #availableRewardList {
-    padding-bottom: calc(80px + var(--bf-safe-area-inset-bottom)) !important;
+    padding-bottom: 24px;
 }
 
 #availableRewardList.empty-state img {
     width: 175px;
 }
 
 #confirmTransactionBtn {
-    width: 187.5px;
+    width: calc(100% - 32px);
     height: 40px;
     gap: 0;
     border-radius: 4px;
@@ -341,6 +337,7 @@ html[safe-area="true"] body.has-safe-area #availableRewardList {
     z-index: 1;
 }
 
-html[safe-area="true"] body.has-safe-area .btn-container {
+body .btn-container {
     padding-bottom: calc(1rem + var(--bf-safe-area-inset-bottom)) !important;
+    background-color: var(--bf-theme-background) !important;
 }

widget/widget.js

@@ -1,6 +1,5 @@
 const initApp = async () => {
   buildfire.appearance.titlebar.show();
-  applySafeAreaStyles();
   try {
     const { settingData } = await Settings.get();
     widgetAppState.settings = settingData;