Progress

app/javascript/gabsocial/components/panel/pro_panel.js

@@ -21,6 +21,7 @@ class ProPanel extends PureComponent {
   render() {
     const { intl, isPro } = this.props
 
+    // : todo :
     // if (isPro) return null
 
     return (
@@ -31,7 +32,7 @@ class ProPanel extends PureComponent {
         <Button
           isBlock
           href={URL_GAB_PRO}
-          icon='bold'
+          icon='pro'
           iconSize='14px'
           className={[_s.justifyContentCenter, _s.alignItemsCenter].join(' ')}
         >

app/javascript/gabsocial/components/sidebar_xs.js

@@ -63,10 +63,6 @@ class SidebarXS extends ImmutablePureComponent {
     onCloseSidebar: PropTypes.func.isRequired,
   }
 
-  state = {
-    moreOpen: false,
-  }
-
   componentDidUpdate () {
     if (!me) return
 
@@ -77,27 +73,18 @@ class SidebarXS extends ImmutablePureComponent {
     }
   }
 
-  toggleMore = () => {
-    this.setState({ moreOpen: !this.state.moreOpen })
-  }
-
   handleSidebarClose = () => {
     this.props.onCloseSidebar()
-    this.setState({ moreOpen: false })
   }
 
   render () {
     const { sidebarOpen, intl, account } = this.props
-    const { moreOpen } = this.state
 
     if (!me || !account) return null
 
     const acct = account.get('acct')
     const isPro = account.get('is_pro')
 
-    const moreIcon = moreOpen ? 'minus' : 'plus'
-    const moreContainerStyle = { display: moreOpen ? 'block' : 'none' }
-
     const mainItems = [
       {
         icon: 'user',
@@ -211,7 +198,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.saveAreaInsetPL, _s.minWidth330PX, _s.borderRight1PX, _s.borderColorSecondary, _s.maxWidth80PC].join(' ')}>
+        <div className={[_s.defaut, _s.posFixed, _s.left0, _s.top0, _s.bottom0, _s.bgPrimary, _s.saveAreaInsetPT, _s.saveAreaInsetPB, _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>

app/javascript/styles/global.css

@@ -106,9 +106,16 @@
   --navigation_search: var(--solid_color_block) !important;
 }
 
+html {
+  padding-top: env(safe-area-inset-top, 0);
+  padding-right: env(safe-area-inset-right, 0);
+  padding-left: env(safe-area-inset-left, 0);
+  padding-bottom: env(safe-area-inset-bottom, 0);
+}
+
 html,
 body {
-  height: 100%;
+  min-height: 100%;
   margin: 0;
   padding: 0;
   background-color: var(--solid_color_tertiary);