Initial commit for stayling service unavailable.

Autofleet · Jan 3, 2024 · f200f34 · f200f34
1 parent 83a366b
commit f200f34
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 7 deletions.
diff --git a/examples/client/Locomotion/src/I18n/en.json b/examples/client/Locomotion/src/I18n/en.json
@@ -61,7 +61,7 @@
  "multi": "Stop"
  },
  "highEta": "ETA is higher than usual",
- "outOfTerritory": "Not in territory"
+ "outOfTerritory": "Service is \n unavailable"
  },
  "general": {
  "back": "Back",

diff --git a/...ocomotion/src/pages/ActiveRide/RideDrawer/RideOptions/ServiceOptions/ServiceCard/index.js b/...ocomotion/src/pages/ActiveRide/RideDrawer/RideOptions/ServiceOptions/ServiceCard/index.js
@@ -115,7 +115,6 @@ const ServiceCard = ({ service, withBorder }) => {
  selected={isSelected}
  activeOpacity={!withBorder ? 1 : 0.5}
  noBackground
- disabled={unavailable}
  onPress={() => {
  if (withBorder) {
  if (isSelected) {
@@ -131,9 +130,9 @@ const ServiceCard = ({ service, withBorder }) => {
  source={{ uri: service.iconUrl }}
  />
  </CarContainer>
- <ServiceDetails unavailable={unavailable}>
+ <ServiceDetails>
  <WrapRow>
- <Title numberOfLines={2}>
+ <Title numberOfLines={2} unavailable={unavailable} primaryColor={theme.primaryColor}>
  {service.name}
  </Title>
  <TitleContainer>
@@ -150,7 +149,7 @@ const ServiceCard = ({ service, withBorder }) => {
  )
  : <View />
  }
- <Price>
+ <Price unavailable={unavailable} primaryColor={theme.primaryColor}>
  {getUnavailableText()}
  </Price>
  </TitleContainer>

diff --git a/...comotion/src/pages/ActiveRide/RideDrawer/RideOptions/ServiceOptions/ServiceCard/styled.js b/...comotion/src/pages/ActiveRide/RideDrawer/RideOptions/ServiceOptions/ServiceCard/styled.js
@@ -23,7 +23,7 @@ ${({ selected, withBorder }) => (withBorder && selected && 'box-shadow: 0 0 4px
 
 export const CarContainer = styled.View`
 width: 20%;
-opacity: ${({ unavailable }) => (unavailable ? 0.4 : 1)};
+opacity: ${({ unavailable }) => (unavailable ? 0.56 : 1)};
 `;
 
 export const CarIcon = styled.Image`
@@ -35,7 +35,7 @@ width: 80%;
 display: flex;
 flex-direction: column;
 justify-content: center;
-opacity: ${({ unavailable }) => (unavailable ? 0.4 : 1)};
+opacity: ${({ unavailable }) => (unavailable ? 0.56 : 1)};
 `;
 
 export const Row = styled.View`
@@ -54,12 +54,15 @@ align-items: center;
 export const Title = styled.Text`
 ${FONT_SIZES.H3};
 ${FONT_WEIGHTS.MEDIUM};
+opacity: ${({ unavailable }) => (unavailable ? 0.56 : 1)};
+color: ${({ unavailable, primaryColor }) => (unavailable ? '#7F7F7F' : primaryColor)};
 margin-right: 5px;
 `;
 
 export const Price = styled.Text`
 ${FONT_SIZES.LARGE};
 ${FONT_WEIGHTS.MEDIUM};
+color: ${({ unavailable, primaryColor }) => (unavailable ? '#212229' : primaryColor)};
 text-align: right;
 `;