Dreamview: update sidebar and layer-menu icons (#3350)

modules/dreamview/frontend/dist/assets/map_data

-/apollo/modules/map/data
\ No newline at end of file

modules/dreamview/frontend/src/components/SideBar/Menu.js

@@ -5,12 +5,14 @@ import classNames from "classnames";
 import RadioItem from 'components/common/RadioItem';
 
 import menuData from 'store/config/MenuData';
-import perceptionIcon from "assets/images/menu/Perception.png";
-import predictionIcon from "assets/images/menu/Prediction.png";
-import routingIcon from "assets/images/menu/Routing.png";
-import decisionIcon from "assets/images/menu/Decision.png";
-import planningIcon from "assets/images/menu/Planning.png";
-import cameraIcon from "assets/images/menu/PointOfView.png";
+import perceptionIcon from "assets/images/menu/perception.png";
+import predictionIcon from "assets/images/menu/prediction.png";
+import routingIcon from "assets/images/menu/routing.png";
+import decisionIcon from "assets/images/menu/decision.png";
+import planningIcon from "assets/images/menu/planning.png";
+import cameraIcon from "assets/images/menu/point_of_view.png";
+import positionIcon from "assets/images/menu/position.png";
+import mapIcon from "assets/images/menu/map.png";
 
 import { POINT_CLOUD_WS } from "store/websocket";
 
@@ -20,7 +22,9 @@ const MenuIconMapping = {
         routing: routingIcon,
         decision: decisionIcon,
         planning: planningIcon,
-        camera: cameraIcon
+        camera: cameraIcon,
+        position: positionIcon,
+        map: mapIcon,
 };
 
 const MenuIdOptionMapping = {
@@ -144,7 +148,7 @@ export default class Menu extends React.Component {
             });
 
         return (
-            <div className="nav-side-menu" id="layer-menu">
+            <div className="tool-view-menu" id="layer-menu">
                 {subMenu}
             </div>
         );

modules/dreamview/frontend/src/components/SideBar/POI.js

@@ -26,7 +26,7 @@ export default class POI extends React.Component {
             });
 
         return (
-            <div className="nav-side-menu" id="poi-list">
+            <div className="tool-view-menu" id="poi-list">
                 <div className="card">
                     <div className="card-header"><span>Point of Interest</span></div>
                     <div className="card-content-row">{entries}</div>

modules/dreamview/frontend/src/styles/main.scss

@@ -304,7 +304,7 @@ body {
         flex: 1 1 auto;
 
         border-right: 3px solid #000000;
-        padding: 25px 10px 25px 20px;
+        padding: 15px 10px 25px 20px;
         background: #1D2226;
 
         @include small-screen {
@@ -432,7 +432,7 @@ body {
         }
     }
 
-    .nav-side-menu {
+    .tool-view-menu {
         display: flex;
         flex-flow: row nowrap;
         align-items: stretch;
@@ -464,8 +464,8 @@ body {
                 transform: translate(-30%, 25%);
 
                 @include small-screen {
-                    width: 15px;
-                    height: 15px;
+                    width: 20px;
+                    height: 20px;
                     transform: translate(-50%, 10%);
                 }
             }
@@ -563,9 +563,14 @@ body {
         }
 
         .icon {
-            width: 30px;
-            height: 30px;
+            width: 40px;
+            height: 40px;
             margin: auto;
+
+            @include small-screen {
+                width: 30px;
+                height: 30px;
+            }
         }
 
         .label {