Uodated popover components mobile design

• Updated:
- popover components mobile design with cancel button at the bottom

• Added:
-CommentSortingOptionsPopover subtitles for options for more clarity

app/javascript/gabsocial/components/popover/popover_layout.js

@@ -1,5 +1,7 @@
 import Block from '../block'
+import Button from '../button'
 import Heading from '../heading'
+import Text from '../text'
 
 export default class PopoverLayout extends PureComponent {
 
@@ -8,12 +10,17 @@ export default class PopoverLayout extends PureComponent {
     width: PropTypes.number,
     isXS: PropTypes.bool,
     title: PropTypes.string,
+    onClose: PropTypes.func,
   }
 
   static defaultProps = {
     width: 250,
   }
 
+  handleOnClose = () => {
+    this.props.onClose()
+  }
+
   render() {
     const {
       children,
@@ -22,20 +29,35 @@ export default class PopoverLayout extends PureComponent {
       title,
     } = this.props
 
+    console.log("popoverlayout props:", this.props)
+
     if (isXS) {
       return (
-        <div className={[_s.default, _s.bgPrimary, _s.modal, _s.topRightRadiusSmall, _s.topLeftRadiusSmall].join(' ')}>
-          {
-            !!title &&
-            <div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.justifyContentCenter, _s.borderBottom1PX, _s.borderColorSecondary, _s.height53PX, _s.px15].join(' ')}>
-              <Heading size='h2'>
-                {title}
-              </Heading>
+        <div className={[_s.default, _s.modal, _s.px10, _s.pb10].join(' ')}>
+          <div className={[_s.default, _s.bgPrimary, _s.radiusSmall, _s.overflowHidden, _s.mb10].join(' ')}>
+            {
+              !!title &&
+              <div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.justifyContentCenter, _s.borderBottom1PX, _s.borderColorSecondary, _s.height53PX, _s.px15].join(' ')}>
+                <Heading size='2'>
+                  {title}
+                </Heading>
+              </div>
+            }
+            <div className={[_s.default, _s.heightMax80VH, _s.radiusSmall, _s.overflowYScroll].join(' ')}>
+              {children}
             </div>
-          }
-          <div className={[_s.default, _s.heightMax80VH, _s.topRightRadiusSmall, _s.topLeftRadiusSmall, _s.overflowYScroll].join(' ')}>
-            {children}
           </div>
+
+          <Button
+            backgroundColor='primary'
+            color='primary'
+            onClick={this.handleOnClose}
+            radiusSmall
+          >
+            <Text color='inherit' size='large' align='center'>
+              Cancel
+            </Text>
+          </Button>
         </div>
       )
     }