From e56a50c3ff61e7b499f76ec3ce95e96db9fed52b Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@live.com>
Date: Mon, 11 May 2020 23:19:47 +0200
Subject: [PATCH] feat: style dropdown arrow of html and list select.

---
 client/src/components/SelectList.js           |  3 +-
 .../src/containers/Accounts/AccountsChart.js  |  7 ++++-
 .../src/containers/Media/withMediaActions.js  | 12 +++++++
 client/src/style/objects/form.scss            | 31 +++++++++++++++++--
 4 files changed, 47 insertions(+), 6 deletions(-)
 create mode 100644 client/src/containers/Media/withMediaActions.js

diff --git a/client/src/components/SelectList.js b/client/src/components/SelectList.js
index 4da02604c..7e6acc10e 100644
--- a/client/src/components/SelectList.js
+++ b/client/src/components/SelectList.js
@@ -3,12 +3,11 @@ import {Button} from '@blueprintjs/core';
 import {Select} from '@blueprintjs/select';
 
 export default function SelectList(props) {
-  const {buttonLabel, ...rest} = props;
+  const { buttonLabel, ...rest } = props;
 
   return (
     <Select {...rest}>
       <Button
-        rightIcon="caret-down"
         fill={true}>
           { buttonLabel }
       </Button>
diff --git a/client/src/containers/Accounts/AccountsChart.js b/client/src/containers/Accounts/AccountsChart.js
index f08815061..6be4d80b0 100644
--- a/client/src/containers/Accounts/AccountsChart.js
+++ b/client/src/containers/Accounts/AccountsChart.js
@@ -27,7 +27,6 @@ import { FormattedMessage as T, FormattedHTMLMessage } from 'react-intl';
 
 
 function AccountsChart({
-
   // #withDashboard
   changePageTitle,
 
@@ -135,14 +134,17 @@ function AccountsChart({
     });
   }, [inactiveAccount, requestInactiveAccount]);
 
+  // Handle activate account click.
   const handleActivateAccount = useCallback((account) => {
     setActivateAccount(account);
   });
 
+  // Handle activate account alert cancel.
   const handleCancelActivateAccount = useCallback(() => {
     setActivateAccount(false);
   });
 
+  // Handle activate account confirm.
   const handleConfirmAccountActivate = useCallback(() => {
     requestActivateAccount(activateAccount.id).then(() => {
       setActivateAccount(false);
@@ -163,10 +165,12 @@ function AccountsChart({
     
   };
 
+  // Handle accounts bulk delete button click.,
   const handleBulkDelete = useCallback((accountsIds) => {
     setBulkDelete(accountsIds);
   }, [setBulkDelete]);
 
+  // Handle confirm accounts bulk delete.
   const handleConfirmBulkDelete = useCallback(() => {
     requestDeleteBulkAccounts(bulkDelete).then(() => {
       setBulkDelete(false);
@@ -180,6 +184,7 @@ function AccountsChart({
     });
   }, [requestDeleteBulkAccounts, bulkDelete]);
 
+  // Handle cancel accounts bulk delete.
   const handleCancelBulkDelete = useCallback(() => {
     setBulkDelete(false);
   }, []);
diff --git a/client/src/containers/Media/withMediaActions.js b/client/src/containers/Media/withMediaActions.js
new file mode 100644
index 000000000..a12a5db44
--- /dev/null
+++ b/client/src/containers/Media/withMediaActions.js
@@ -0,0 +1,12 @@
+import {connect} from 'react-redux';
+import {
+  submitMedia,
+  deleteMedia,
+} from 'store/media/media.actions';
+
+export const mapDispatchToProps = (dispatch) => ({
+  requestSubmitMedia: (form, config) => dispatch(submitMedia({ form, config })),
+  requestDeleteMedia: (ids) => dispatch(deleteMedia({ ids })),
+});
+
+export default connect(null, mapDispatchToProps);
\ No newline at end of file
diff --git a/client/src/style/objects/form.scss b/client/src/style/objects/form.scss
index a18f8f8d6..2c85f5a58 100644
--- a/client/src/style/objects/form.scss
+++ b/client/src/style/objects/form.scss
@@ -94,18 +94,43 @@ $form-check-input-indeterminate-bg-image: url("data:image/svg+xml,<svg xmlns='ht
   }
 }
 
-.bp3-datepicker-caption select{
-  
+
+.#{$ns}-html-select{
+  .bp3-icon-double-caret-vertical{
+    display: none;
+  }
+}
+.bp3-datepicker-caption select{  
   &,
   &:hover{
     border-color: transparent;
   }
 }
 
+// Dropdown arrow to html select and select list.
+.#{$ns}-html-select::after,
+.form-group--select-list .#{$ns}-button::after{
+  content: '';
+  display: inline-block;
+  width: 0;
+  height: 0;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-top: 5px solid #8d8d8d;
+  position: absolute;
+  right: 0;
+  top: 50%;
+  margin-top: -2px;
+  margin-right: 12px;
+  border-radius: 1px;
+}
+
 .form-group--select-list{
 
-  .#{$ns}-icon-caret-down{
+  .#{$ns}-button{
     color: #8D8D8D;
+    position: relative;
+    padding-right: 25px;
   }
 
   &.bp3-fill{