fix layout issue in some cards

opentripplanner · Dec 6, 2023 · 4ae839f · 4ae839f
1 parent dc005ff
commit 4ae839f
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 12 deletions.
diff --git a/lib/components/viewers/nearby/rental-station.tsx b/lib/components/viewers/nearby/rental-station.tsx
@@ -8,7 +8,7 @@ import * as mapActions from '../../../actions/map'
 import { FormattedMessage } from 'react-intl'
 import { IconWithText } from '../../util/styledIcon'
 
-import { Card, CardBody, CardHeader, CardSubheader } from './styled'
+import { Card, CardBody, CardHeader, CardSubheader, CardTitle } from './styled'
 
 import { useMap } from 'react-map-gl'
 
@@ -26,7 +26,7 @@ const RentalStation = ({ companies, place, zoomToPlace }: Props) => {
   return (
     <Card onMouseEnter={() => zoomToPlace(map, place)}>
       <CardHeader>
-        {place.name}
+        <CardTitle>{place.name}</CardTitle>
         <CardSubheader>
           {company || (
             <FormattedMessage id="components.NearbyView.bikeRentalStation" />

diff --git a/lib/components/viewers/nearby/stop.tsx b/lib/components/viewers/nearby/stop.tsx
@@ -4,7 +4,6 @@ import { format } from 'date-fns-tz'
 import { FormattedMessage, useIntl } from 'react-intl'
 import { InfoCircle } from '@styled-icons/fa-solid/InfoCircle'
 import { Place, TransitOperator } from '@opentripplanner/types'
-import { Search } from '@styled-icons/fa-solid/Search'
 import { useMap } from 'react-map-gl'
 import coreUtils from '@opentripplanner/core-utils'
 import dateFnsUSLocale from 'date-fns/locale/en-US'
@@ -18,6 +17,7 @@ import {
   Card,
   CardBody,
   CardHeader,
+  CardTitle,
   PatternRowContainer,
   StyledAlert
 } from './styled'
@@ -178,7 +178,9 @@ const Stop = ({
   return (
     <Card onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
       <CardHeader>
-        <IconWithText Icon={CustomOperatorLogo}>{stopData.name}</IconWithText>
+        <CardTitle>
+          <IconWithText Icon={CustomOperatorLogo}>{stopData.name}</IconWithText>
+        </CardTitle>
       </CardHeader>
       <CardBody>
         <div>

diff --git a/lib/components/viewers/nearby/styled.tsx b/lib/components/viewers/nearby/styled.tsx
@@ -33,16 +33,22 @@ export const Card = styled.div`
 `
 
 export const CardHeader = styled.div`
-  font-size: 22px;
   padding: 1rem 1.2rem;
-  font-weight: 600;
   display: flex;
+  flex-direction: column;
+`
+
+export const CardTitle = styled.p`
+  font-weight: 600;
+  font-size: 22px;
+  margin: 0;
 `
 
 export const CardSubheader = styled.p`
   font-size: 16px;
   font-weight: 400;
   color: #444;
+  margin: 0;
 `
 
 export const CardBody = styled.div`

diff --git a/lib/components/viewers/nearby/vehicle-parking.tsx b/lib/components/viewers/nearby/vehicle-parking.tsx
@@ -8,7 +8,7 @@ import { useMap } from 'react-map-gl'
 
 import * as mapActions from '../../../actions/map'
 
-import { Card, CardBody, CardHeader, CardSubheader } from './styled'
+import { Card, CardBody, CardHeader, CardSubheader, CardTitle } from './styled'
 
 import FromToLocationPicker from '@opentripplanner/from-to-location-picker'
 
@@ -31,7 +31,9 @@ const VehicleParking = ({ place, setLocation, zoomToPlace }: Props) => {
   return (
     <Card onMouseEnter={() => zoomToPlace(map, place)}>
       <CardHeader>
-        <IconWithText Icon={Parking}>{place.name}</IconWithText>
+        <CardTitle>
+          <IconWithText Icon={Parking}>{place.name}</IconWithText>
+        </CardTitle>
         <CardSubheader>Park and Ride</CardSubheader>
       </CardHeader>
       <CardBody>

diff --git a/lib/components/viewers/nearby/vehicle-rent.tsx b/lib/components/viewers/nearby/vehicle-rent.tsx
@@ -12,7 +12,7 @@ import React, { Suspense } from 'react'
 
 import * as mapActions from '../../../actions/map'
 
-import { Card, CardBody, CardHeader } from './styled'
+import { Card, CardBody, CardHeader, CardTitle } from './styled'
 import { IconWithText } from '../../util/styledIcon'
 
 type VehicleFormFactor =
@@ -93,8 +93,6 @@ const Vehicle = ({
   }
   const getStationIcon = () => {
     const CompanyIcon = getCompanyIcon(vehicle.network)
-    console.log(CompanyIcon)
-    console.log(vehicle.network)
     return CompanyIcon ? (
       <Suspense fallback={<span>{company}</span>}>
         <CompanyIcon height={22} style={{ marginRight: '5px' }} width={22} />
@@ -106,7 +104,9 @@ const Vehicle = ({
   return (
     <Card onMouseEnter={() => zoomToPlace(map, vehicle)}>
       <CardHeader>
-        <IconWithText Icon={getStationIcon()}>{company}</IconWithText>
+        <CardTitle>
+          <IconWithText Icon={getStationIcon()}>{company}</IconWithText>
+        </CardTitle>
       </CardHeader>
       <CardBody>
         <div>{vehicle.name}</div>