more Icon

Author: dewanshDT

client/modules/IDE/components/CollectionList/CollectionListRow.jsx

@@ -11,6 +11,7 @@ import * as ToastActions from '../../actions/toast';
 import dates from '../../../../utils/formatDate';
 
 import DownFilledTriangleIcon from '../../../../images/down-filled-triangle.svg';
+import MoreIconSvg from '../../../../images/more.svg';
 
 const formatDateCell = (date, mobile = false) =>
   dates.format(date, { showTime: !mobile });
@@ -149,7 +150,11 @@ class CollectionListRowBase extends React.Component {
             'CollectionListRow.ToggleCollectionOptionsARIA'
           )}
         >
-          <DownFilledTriangleIcon title="Menu" />
+          {this.props.mobile ? (
+            <MoreIconSvg focusable="false" aria-hidden="true" />
+          ) : (
+            <DownFilledTriangleIcon focusable="false" aria-hidden="true" />
+          )}
         </button>
         {optionsOpen && (
           <ul className="sketch-list__action-dialogue">

client/modules/IDE/components/SketchList.jsx

@@ -23,6 +23,7 @@ import getConfig from '../../../utils/getConfig';
 import ArrowUpIcon from '../../../images/sort-arrow-up.svg';
 import ArrowDownIcon from '../../../images/sort-arrow-down.svg';
 import DownFilledTriangleIcon from '../../../images/down-filled-triangle.svg';
+import MoreIconSvg from '../../../images/more.svg';
 
 const ROOT_URL = getConfig('API_URL');
 
@@ -198,7 +199,11 @@ class SketchListRowBase extends React.Component {
           onFocus={this.onFocusComponent}
           aria-label={this.props.t('SketchList.ToggleLabelARIA')}
         >
-          <DownFilledTriangleIcon focusable="false" aria-hidden="true" />
+          {this.props.mobile ? (
+            <MoreIconSvg focusable="false" aria-hidden="true" />
+          ) : (
+            <DownFilledTriangleIcon focusable="false" aria-hidden="true" />
+          )}
         </button>
         {optionsOpen && (
           <ul className="sketch-list__action-dialogue">

client/styles/components/_sketch-list.scss

@@ -56,6 +56,11 @@
             right: 0;
             width: auto;
             margin: #{8 / $base-font-size}rem;
+
+            .sketch-list__dropdown-button {
+              transform: rotateZ(90deg) translateX(-30%);
+              transform-origin: center;
+            }
           }
         }
       }