From f4b25eb2cd7c860ed25815147af26f2303b7c3f7 Mon Sep 17 00:00:00 2001
From: mgabdev <>
Date: Thu, 6 Aug 2020 23:06:23 -0500
Subject: [PATCH] Added caret to dropdown in SortBlock container
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

• Added:
- caret to dropdown in SortBlock container
---
 app/javascript/gabsocial/components/sort_block.js | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/app/javascript/gabsocial/components/sort_block.js b/app/javascript/gabsocial/components/sort_block.js
index c8aee489..dc7d0119 100644
--- a/app/javascript/gabsocial/components/sort_block.js
+++ b/app/javascript/gabsocial/components/sort_block.js
@@ -1,8 +1,9 @@
 import { Fragment } from 'react'
 import { defineMessages, injectIntl } from 'react-intl'
-import Text from '../components/text'
 import Button from '../components/button'
 import DotTextSeperator from '../components/dot_text_seperator'
+import Icon from '../components/icon'
+import Text from '../components/text'
 
 const messages = defineMessages({
   sortBy: { id: 'comment_sort.title', defaultMessage: 'Sort by' },
@@ -52,31 +53,35 @@ class SortBlock extends PureComponent {
           isText
           backgroundColor='none'
           color='secondary'
-          className={_s.ml5}
+          className={[_s.ml5, _s.flexRow, _s.alignItemsCenter].join(' ')}
           buttonRef={this.setValueBtnRef}
           onClick={this.handleOnClickValue}
         >
           <Text color='inherit' weight='medium' size='small'>
             {value}
           </Text>
+          <Icon id='caret-down' size='6px' className={[_s.fillSecondary, _s.ml5].join(' ')} />
         </Button>
 
         {
           !!subValue &&
           <Fragment>
-            <DotTextSeperator />
+            <div className={[_s.default, _s.px5].join(' ')}>
+              <DotTextSeperator />
+            </div>
 
             <Button
               isText
               backgroundColor='none'
               color='secondary'
-              className={_s.ml5}
+              className={[_s.ml5, _s.flexRow, _s.alignItemsCenter].join(' ')}
               buttonRef={this.setSubValueBtnRef}
               onClick={this.handleOnClickSubValue}
             >
               <Text color='inherit' weight='medium' size='small'>
                 {subValue}
               </Text>
+              <Icon id='caret-down' size='6px' className={[_s.fillSecondary, _s.ml5].join(' ')} />
             </Button>
           </Fragment>
         }