From 0cef1f71e178321b69f82df1b065b414ab9c0920 Mon Sep 17 00:00:00 2001
From: mgabdev <>
Date: Thu, 14 May 2020 17:47:33 -0400
Subject: [PATCH] Updating safe-area-inset css for effected elements

---
 .../components/bundle_column_error.js         |  4 +--
 .../gabsocial/components/error_boundary.js    |  4 +--
 .../components/floating_action_button.js      | 20 ++++++++------
 .../gabsocial/components/footer_bar.js        |  2 +-
 app/javascript/gabsocial/components/list.js   |  7 +++--
 .../components/logged_out_navigation_bar.js   | 14 +++++-----
 .../gabsocial/components/navigation_bar.js    |  6 ++---
 .../components/profile_navigation_bar.js      | 10 +++----
 .../gabsocial/components/sidebar_xs.js        |  7 +++--
 app/javascript/styles/global.css              | 27 +++++++++++++++++--
 10 files changed, 67 insertions(+), 34 deletions(-)

diff --git a/app/javascript/gabsocial/components/bundle_column_error.js b/app/javascript/gabsocial/components/bundle_column_error.js
index 2f58dc5d..d3bb8619 100644
--- a/app/javascript/gabsocial/components/bundle_column_error.js
+++ b/app/javascript/gabsocial/components/bundle_column_error.js
@@ -36,8 +36,8 @@ class BundleColumnError extends PureComponent {
 
     return (
       <div className={[_s.default, _s.heightMin100VH, _s.width100PC, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
-        <div className={[_s.default, _s.height53PX, _s.bgBrand, _s.alignItemsCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')} >
-          <div className={[_s.default, _s.flexRow, _s.width1255PX].join(' ')}>
+        <div className={[_s.default, _s.heightMin53PX, _s.bgBrand, _s.alignItemsCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')} >
+          <div className={[_s.default, _s.flexRow, _s.saveAreaInsetPT, _s.saveAreaInsetPL, _s.saveAreaInsetPR, _s.width1255PX].join(' ')}>
 
             <div className={[_s.default, _s.flexRow].join(' ')}>
 
diff --git a/app/javascript/gabsocial/components/error_boundary.js b/app/javascript/gabsocial/components/error_boundary.js
index c9765515..506cfc51 100644
--- a/app/javascript/gabsocial/components/error_boundary.js
+++ b/app/javascript/gabsocial/components/error_boundary.js
@@ -64,8 +64,8 @@ export default class ErrorBoundary extends PureComponent {
 
     return (
       <div className={[_s.default, _s.heightMin100VH, _s.width100PC, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
-        <div className={[_s.default, _s.height53PX, _s.bgBrand, _s.alignItemsCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')} >
-          <div className={[_s.default, _s.flexRow, _s.width1255PX].join(' ')}>
+        <div className={[_s.default, _s.heightMin53PX, _s.bgBrand, _s.alignItemsCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')} >
+          <div className={[_s.default, _s.flexRow, _s.saveAreaInsetPT, _s.saveAreaInsetPL, _s.saveAreaInsetPR, _s.width1255PX].join(' ')}>
 
             <div className={[_s.default, _s.flexRow].join(' ')}>
 
diff --git a/app/javascript/gabsocial/components/floating_action_button.js b/app/javascript/gabsocial/components/floating_action_button.js
index 052e6080..ffd3d2b0 100644
--- a/app/javascript/gabsocial/components/floating_action_button.js
+++ b/app/javascript/gabsocial/components/floating_action_button.js
@@ -33,14 +33,18 @@ class FloatingActionButton extends PureComponent {
     const message = intl.formatMessage(messages.gab)
 
     return (
-      <Button
-        onClick={onOpenCompose}
-        className={[_s.posFixed, _s.z4, _s.py15, _s.mb15, _s.mr15, _s.bottom55PX, _s.height60PX, _s.width60PX, _s.right0, _s.justifyContentCenter, _s.alignItemsCenter].join(' ')}
-        title={message}
-        aria-label={message}
-        icon='pencil'
-        iconSize='20px'
-      />
+      <div
+        className={[_s.posFixed, _s.z4, _s.mb15, _s.mr15, _s.bottom55PX, _s.right0].join(' ')}
+      >
+        <Button
+          onClick={onOpenCompose}
+          className={[_s.py15, _s.height60PX, _s.saveAreaInsetMR, _s.saveAreaInsetMB, _s.width60PX, _s.justifyContentCenter, _s.alignItemsCenter].join(' ')}
+          title={message}
+          aria-label={message}
+          icon='pencil'
+          iconSize='20px'
+        />
+      </div>
     )
   }
   
diff --git a/app/javascript/gabsocial/components/footer_bar.js b/app/javascript/gabsocial/components/footer_bar.js
index ebf87388..1390ddd3 100644
--- a/app/javascript/gabsocial/components/footer_bar.js
+++ b/app/javascript/gabsocial/components/footer_bar.js
@@ -52,7 +52,7 @@ class FooterBar extends PureComponent {
     return (
       <div className={[_s.default, _s.z4, _s.heightMin58PX, _s.width100PC].join(' ')}>
         <div className={[_s.default, _s.posFixed, _s.left0, _s.right0, _s.bottom0, _s.heightMin58PX, _s.width100PC, _s.bgPrimary, _s.borderTop1PX, _s.borderColorSecondary].join(' ')}>
-          <div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.height100PC, _s.heightMin58PX, _s.footerChin, _s.justifyContentSpaceAround].join(' ')}>
+          <div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.height100PC, _s.heightMin58PX, _s.saveAreaInsetPB, _s.justifyContentSpaceAround].join(' ')}>
             {
               buttons.map((props) => {
                 const classes = CX({
diff --git a/app/javascript/gabsocial/components/list.js b/app/javascript/gabsocial/components/list.js
index a1585c27..1c3b5c47 100644
--- a/app/javascript/gabsocial/components/list.js
+++ b/app/javascript/gabsocial/components/list.js
@@ -3,6 +3,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes'
 import Block from './block'
 import ScrollableList from './scrollable_list'
 import ListItem from './list_item'
+import Dummy from './dummy'
 
 export default class List extends ImmutablePureComponent {
 
@@ -32,9 +33,11 @@ export default class List extends ImmutablePureComponent {
       onLoadMore
     } = this.props
 
+    const Wrapper = !!scrollKey ? ScrollableList : Dummy
+
     return (
       <Block>
-        <ScrollableList
+        <Wrapper
           onLoadMore={onLoadMore}
           hasMore={hasMore}
           scrollKey={scrollKey}
@@ -50,7 +53,7 @@ export default class List extends ImmutablePureComponent {
               />
             ))
           }
-        </ScrollableList>
+        </Wrapper>
       </Block>
     )
   }
diff --git a/app/javascript/gabsocial/components/logged_out_navigation_bar.js b/app/javascript/gabsocial/components/logged_out_navigation_bar.js
index 2df276e9..aa6ebf5c 100644
--- a/app/javascript/gabsocial/components/logged_out_navigation_bar.js
+++ b/app/javascript/gabsocial/components/logged_out_navigation_bar.js
@@ -9,21 +9,21 @@ export default class LoggedOutNavigationBar extends PureComponent {
     title: PropTypes.string,
     showBackBtn: PropTypes.bool,
   }
-
+   
   render() {
     return (
       <ResponsiveClassesComponent
-        classNames={[_s.default, _s.z4, _s.height53PX, _s.width100PC].join(' ')}
-        classNamesXS={[_s.default, _s.z4, _s.height98PX, _s.width100PC].join(' ')}
+        classNames={[_s.default, _s.z4, _s.heightMin53PX, _s.width100PC].join(' ')}
+        classNamesXS={[_s.default, _s.z4, _s.heightMin98PX, _s.width100PC].join(' ')}
       >
         <ResponsiveClassesComponent
-          classNames={[_s.default, _s.height53PX, _s.flexRow, _s.flexWrap, _s.bgNavigation, _s.alignItemsCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')}
-          classNamesXS={[_s.default, _s.height98PX, _s.flexRow, _s.flexWrap, _s.bgNavigation, _s.alignItemsCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')}
+          classNames={[_s.default, _s.heightMin53PX, _s.flexRow, _s.flexWrap, _s.bgNavigation, _s.alignItemsCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')}
+          classNamesXS={[_s.default, _s.heightMin98PX, _s.flexRow, _s.flexWrap, _s.bgNavigation, _s.alignItemsCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')}
         >
 
           <ResponsiveClassesComponent
-            classNames={[_s.default, _s.flexRow, _s.width330PX].join(' ')}
-            classNamesXS={[_s.default, _s.flexRow, _s.width100PC].join(' ')}
+            classNames={[_s.default, _s.flexRow, _s.saveAreaInsetPT, _s.saveAreaInsetPL, _s.saveAreaInsetPR,  _s.width330PX].join(' ')}
+            classNamesXS={[_s.default, _s.flexRow, _s.saveAreaInsetPT, _s.saveAreaInsetPL, _s.saveAreaInsetPR, _s.width100PC].join(' ')}
           >
 
             <Button
diff --git a/app/javascript/gabsocial/components/navigation_bar.js b/app/javascript/gabsocial/components/navigation_bar.js
index 32cb7940..b46c6ad4 100644
--- a/app/javascript/gabsocial/components/navigation_bar.js
+++ b/app/javascript/gabsocial/components/navigation_bar.js
@@ -54,10 +54,10 @@ class NavigationBar extends ImmutablePureComponent {
 
 
     return (
-      <div className={[_s.default, _s.z4, _s.height53PX, _s.width100PC].join(' ')}>
-        <div className={[_s.default, _s.height53PX, _s.bgNavigation, _s.alignItemsCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')} >
+      <div className={[_s.default, _s.z4, _s.heightMin53PX, _s.width100PC].join(' ')}>
+        <div className={[_s.default, _s.heightMin53PX, _s.bgNavigation, _s.alignItemsCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')} >
 
-          <div className={[_s.default, _s.flexRow, _s.width1255PX].join(' ')}>
+          <div className={[_s.default, _s.saveAreaInsetPT, _s.saveAreaInsetPL, _s.saveAreaInsetPR, _s.flexRow, _s.width1255PX].join(' ')}>
 
             { /** Default */}
             <Responsive min={BREAKPOINT_EXTRA_SMALL}>
diff --git a/app/javascript/gabsocial/components/profile_navigation_bar.js b/app/javascript/gabsocial/components/profile_navigation_bar.js
index 2a28b9ab..50ba3db3 100644
--- a/app/javascript/gabsocial/components/profile_navigation_bar.js
+++ b/app/javascript/gabsocial/components/profile_navigation_bar.js
@@ -12,18 +12,18 @@ export default class ProfileNavigationBar extends PureComponent {
     const { title } = this.props
 
     return (
-      <div className={[_s.default, _s.z4, _s.height53PX, _s.width100PC].join(' ')}>
-        <div className={[_s.default, _s.height53PX, _s.bgNavigation, _s.alignItemsCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')} >
+      <div className={[_s.default, _s.z4, _s.heightMin53PX, _s.width100PC].join(' ')}>
+        <div className={[_s.default, _s.heightMin53PX, _s.bgNavigation, _s.alignItemsCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')} >
 
-          <div className={[_s.default, _s.flexRow, _s.width100PC].join(' ')}>
+          <div className={[_s.default, _s.flexRow, _s.saveAreaInsetPT, _s.saveAreaInsetPL, _s.saveAreaInsetPR, _s.width100PC].join(' ')}>
 
             <BackButton
-              className={[_s.height53PX, _s.pl10, _s.pr10].join(' ')}
+              className={[_s.heightMin53PX, _s.pl10, _s.pr10].join(' ')}
               iconSize='18px'
               iconClassName={[_s.mr5, _s.fillNavigation].join(' ')}
             />
 
-            <div className={[_s.default, _s.height53PX, _s.justifyContentCenter, _s.mrAuto].join(' ')}>
+            <div className={[_s.default, _s.heightMin53PX, _s.justifyContentCenter, _s.mrAuto].join(' ')}>
               <Heading size='h1'>
                 <span className={[_s.textOverflowEllipsis, _s.colorNavigation].join(' ')}>
                   {title}
diff --git a/app/javascript/gabsocial/components/sidebar_xs.js b/app/javascript/gabsocial/components/sidebar_xs.js
index 04592483..641a4426 100644
--- a/app/javascript/gabsocial/components/sidebar_xs.js
+++ b/app/javascript/gabsocial/components/sidebar_xs.js
@@ -211,7 +211,7 @@ class SidebarXS extends ImmutablePureComponent {
     return (
       <div className={containerClasses}>
         <div className={[_s.default, _s.posFixed, _s.top0, _s.left0, _s.right0, _s.bgBlackOpaque, _s.bottom0].join(' ')} role='button' onClick={this.handleSidebarClose} />
-        <div className={[_s.defaut, _s.posFixed, _s.left0, _s.top0, _s.bottom0, _s.bgPrimary, _s.width330PX, _s.borderRight1PX, _s.borderColorSecondary, _s.maxWidth80PC].join(' ')}>
+        <div className={[_s.defaut, _s.posFixed, _s.left0, _s.top0, _s.bottom0, _s.bgPrimary, _s.saveAreaInsetPL, _s.minWidth330PX, _s.borderRight1PX, _s.borderColorSecondary, _s.maxWidth80PC].join(' ')}>
 
           <div className={[_s.default, _s.flexRow, _s.px15, _s.height53PX, _s.width100PC, _s.borderBottom1PX, _s.borderColorSecondary, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
             <Heading size='h2'>Account Info</Heading>
@@ -270,7 +270,10 @@ class SidebarXS extends ImmutablePureComponent {
             </div>
 
             <div className={[_s.default, _s.mb15, _s.boxShadowNone].join(' ')}>
-              <List items={mainItems} />
+              <List
+                items={mainItems}
+                size='large'
+              />
             </div>
 
           </div>
diff --git a/app/javascript/styles/global.css b/app/javascript/styles/global.css
index e9e8a586..4fbc8b87 100644
--- a/app/javascript/styles/global.css
+++ b/app/javascript/styles/global.css
@@ -464,8 +464,10 @@ body {
 
 .heightMin100VH { min-height: 100vh; }
 .heightMin50VH { min-height: 50vh; }
+.heightMin98PX { min-height: 98px; }
 .heightMin80PX { min-height: 80px; }
 .heightMin58PX { min-height: 58px; }
+.heightMin53PX { min-height: 53px; }
 .heightMin50PX { min-height: 50px; }
 .heightMin28PX { min-height: 28px; }
 
@@ -496,6 +498,8 @@ body {
 .maxWidth180PX { max-width: 180px; }
 .maxWidth100PC42PX { max-width: calc(100% - 42px); }
 
+.minWidth330PX { min-width: 330px; }
+
 .width100PC { width: 100%; }
 .width50PC { width: 50%; }
 .width25PC { width: 25%; }
@@ -917,11 +921,30 @@ body {
   -ms-overflow-style: none;
 }
 
-.footerChin {
-  padding-bottom: 0;
+.saveAreaInsetPB {
   padding-bottom: env(safe-area-inset-bottom, 0);
 }
 
+.saveAreaInsetPT {
+  padding-top: env(safe-area-inset-top, 0);
+}
+
+.saveAreaInsetPL {
+  padding-left: env(safe-area-inset-left, 0);
+}
+
+.saveAreaInsetPR {
+  padding-right: env(safe-area-inset-right, 0);
+}
+
+.saveAreaInsetMR {
+  margin-right: env(safe-area-inset-right, 0);
+}
+
+.saveAreaInsetMB {
+  margin-bottom: env(safe-area-inset-bottom, 0);
+}
+
 .bgNavigation {
   background-color: var(--navigation_background);
 }