antoher icon for map catalogue

src/containers/LeftDialog.tsx

@@ -25,9 +25,13 @@ export const LeftDialog = ({ dialog, dialog_active, setDialogActive }: Props) =>
       Object.keys(LEFT_DIALOGS).map(item => (
         <div className={classnames('dialog', { active: dialog_active && (dialog === item) })} key={item}>
           { dialog && LEFT_DIALOGS[item] && React.createElement(LEFT_DIALOGS[item]) }
-          <div className="dialog-close-button" onClick={() => setDialogActive(false)}>
+          <div className="dialog-close-button desktop-only" onClick={() => setDialogActive(false)}>
             <Icon icon="icon-cancel-1" />
           </div>
+
+          <div className="dialog-close-button mobile-only" onClick={() => setDialogActive(false)}>
+            <Icon icon="icon-chevron-down" />
+          </div>
         </div>
       ))
     }

src/sprites/icon.svg

@@ -401,6 +401,12 @@
                 <circle cx="16" cy="11" fill="white" r="4" />
             </g>
 
+            <g id="icon-chevron-down" stroke="none">
+                <g transform="scale(2) translate(-4 -3)">
+                    <path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z" />
+                </g>
+            </g>
+
             <g id="icon-sad-1" stroke="none">
                 <path stroke="none" fill="black"/>
                 <g transform="translate(4 4)">
@@ -412,5 +418,5 @@
         </svg>
     </defs>
 
-    <use xlink:href="#icon-cluster-1" />
+    <use xlink:href="#icon-chevron-down" />
 </svg>

src/styles/dialogs.less

@@ -69,7 +69,7 @@
     border-radius: @panel_radius;
     bottom: 0;
     right: 0;
-    width: 68px;
+    width: 100%;
     height: 68px;
   }
 }

src/styles/main.less

@@ -125,6 +125,9 @@ body {
   .desktop-only { display: none; }
 }
 
+@media (min-width: @mobile_breakpoint) {
+  .mobile-only { display: none; }
+}
 
 h2 {
   font: inherit;