Update icons in stop and route page

bengawalk · Aug 11, 2024 · f3ac237 · f3ac237
1 parent 1a8aa18
commit f3ac237
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 8 deletions.
diff --git a/src/index.scss b/src/index.scss
@@ -31,6 +31,10 @@ body {
   height: 100vh;
 }
 
+.flex-gap {
+  flex-grow: 1;
+}
+
 #page-back {
   position: fixed;
   top: 28px;
@@ -381,8 +385,8 @@ body {
 
 .bus-item-icon {
   margin-right: 8px;
-  width: 16px;
-  height: 16px;
+  width: 32px;
+  height: 32px;
 }
 
 .bus-item-trips {

diff --git a/src/route/index.jsx b/src/route/index.jsx
@@ -5,8 +5,8 @@ import { MAPBOX_TOKEN, MAX_HISTORY_LENGTH, ROUTES, SEARCH_RESULT_TYPES } from ".
 import {Icon} from "@iconify/react/dist/iconify.js";
 import mapboxgl from "mapbox-gl";
 
-import IconBusNumber from "../assets/icon_bus_number.svg";
-import IconBusStop from "../assets/icon_bus_stop.svg";
+import IconBusNumber from "../assets/icon-bus-route-new.svg";
+import IconBusStop from "../assets/icon-bus-stop-new.svg";
 import IconGreenCircle from "../assets/icon_green_circle.svg";
 import IconLocation from "../assets/icon_location.svg";
 import { getRouteDetailsApi } from "../utils/api.js";
@@ -214,12 +214,13 @@ class RoutePage extends React.PureComponent {
               <BottomTray
                 headerContent={(
                   <div id="page-heading">
+                    <img src={IconBusNumber} alt="" id="header-icon" />
                     <p>
-                      <img src={IconBusNumber} alt="" id="header-icon" />
                       <span className="bus_number">
                         {routeDetails.route_short_name}
                       </span>
                     </p>
+                    <div className="flex-gap" />
                     <button className="search-result-favourite" onClick={this.toggleFavourite}>
                       {
                         isFavourited ? (

diff --git a/src/stop/bus-stop-route-item.jsx b/src/stop/bus-stop-route-item.jsx
@@ -1,7 +1,7 @@
 import React from "react";
 import _ from "lodash";
 import { Link } from "react-router-dom";
-import IconBusNumber from "../assets/icon_bus_number.svg";
+import IconBusNumber from "../assets/icon-bus-route-new.svg";
 import {ROUTES, SEARCH_RESULT_TYPES} from "../utils/constants.js";
 
 const BusStopRouteItem = ({ info }) => {

diff --git a/src/stop/index.jsx b/src/stop/index.jsx
@@ -5,7 +5,7 @@ import {Icon} from "@iconify/react/dist/iconify.js";
 import mapboxgl from "mapbox-gl";
 import { MAPBOX_TOKEN, MAX_HISTORY_LENGTH, SEARCH_RESULT_TYPES } from "../utils/constants.js";
 
-import IconBusStop from "../assets/icon_bus_stop.svg";
+import IconBusStop from "../assets/icon-bus-stop-new.svg";
 import BusStopRouteItem from "./bus-stop-route-item.jsx";
 import { getStopDetailsApi } from "../utils/api.js";
 import BottomTray from "../components/bottom_tray.jsx";
@@ -144,10 +144,11 @@ class StopPage extends React.PureComponent {
               <BottomTray
                 headerContent={(
                   <div id="page-heading">
+                    <img src={IconBusStop} alt="" id="header-icon" />
                     <p>
-                      <img src={IconBusStop} alt="" id="header-icon" />
                       { stopDetails.stop_name }
                     </p>
+                    <div className="flex-gap" />
                     <button className="search-result-favourite" onClick={this.toggleFavourite}>
                       {
                         isFavourited ? (