From 7a1ac02c99b062b1c77b245911547cab8e1c4be1 Mon Sep 17 00:00:00 2001
From: Late Night Defender <pongpeera054@protonmail.com>
Date: Tue, 12 Dec 2023 00:18:33 +0700
Subject: [PATCH] update wheelchair icons display

---
 src/components/DestinationInfoCard.vue | 60 +++++++++++++++++---------
 1 file changed, 40 insertions(+), 20 deletions(-)

diff --git a/src/components/DestinationInfoCard.vue b/src/components/DestinationInfoCard.vue
index 7290026..150fd4c 100644
--- a/src/components/DestinationInfoCard.vue
+++ b/src/components/DestinationInfoCard.vue
@@ -199,10 +199,14 @@
 </template>
   
 <script setup>
-import findLocation from '../../icons/Material/find-location.svg';
-import clock from '../../icons/Material/clock.svg';
-import check from '../../icons/Material/check-round.svg';
-import cross from '../../icons/Material/cross.svg';
+import findLocation from '../../icons/Adwaita/find-location.svg';
+import clock from '../../icons/Adwaita/clock.svg';
+import check from '../../icons/Adwaita/check-round.svg';
+import cross from '../../icons/Adwaita/cross.svg';
+import wheelchair from '../../icons/Adwaita/wheelchair.svg'
+import wheelchairlimited from '../../icons/Adwaita/wheelchair-limited.svg'
+import nowheelchair from '../../icons/Adwaita/no-wheelchair.svg'
+
 
 // import DestinationInfoCard from '@/components/DestinationInfoCard.vue';
 // const destination = {
@@ -262,11 +266,11 @@ export default {
     wheelchairIcon() {
       switch(this.nearestStructureData.infoWheelchair) {
         case 'yes':
-          return check;
+          return wheelchair;
         case 'limited':
-          return check;
+          return wheelchairlimited;
         case 'no':
-          return cross;
+          return nowheelchair;
         default:
           return cross;
       }
@@ -276,12 +280,14 @@ export default {
     wheelchairIconClass() {
       // return this.nearestStructureData.infoWheelchair === 'limited' ? 'iconCheckLimited' : 'iconCheck';
       switch(this.nearestStructureData.infoWheelchair) {
+        case 'yes':
+          return 'iconCheck';
         case 'limited':
           return 'iconCheckLimited';
         case 'no':
           return 'iconCheckNo';
         default:
-          return 'iconCheck';
+          return 'iconCheckDefault';
       }
     },
 
@@ -289,13 +295,13 @@ export default {
     wheelchairAccessText() {
       switch(this.nearestStructureData.infoWheelchair) {
         case 'yes':
-          return 'Unrestricted Wheelchair access';
+          return 'วีลแชร์สามารถเข้าถึงได้';
         case 'limited':
-          return 'Limited Wheelchair access';
+          return 'วีลแชร์เข้าถึงได้อย่างจำกัด';
         case 'no':
-          return 'No Wheelchair access';
+          return 'วีลแชร์ไม่สามารถเข้าถึงได้';
         default:
-          return 'Wheelchair access information not available';
+          return 'ไม่มีข้อมูลว่าวีลแชร์สามารถเข้าถึงได้หรือไม่';
       }
     },
 
@@ -303,6 +309,8 @@ export default {
 
     wheelchairTextColorClass() {
     switch(this.nearestStructureData.infoWheelchair) {
+      case 'yes':
+        return 'textColorYes';
       case 'limited':
         return 'textColorLimited';
       case 'no':
@@ -532,32 +540,44 @@ export default {
   padding: 0;
 }
 
-/* .iconCheck {
-  background-color: #26a269;
-} */
+.iconCheckYes {
+  width: 30px;
+  height: 30px;
+  filter: brightness(0) saturate(100%) invert(45%) sepia(85%) saturate(380%) hue-rotate(100deg) brightness(98%) contrast(87%);
+} 
 
 .iconCheckLimited {
   width: 30px;
   height: 30px;
-  filter: invert(67%) sepia(20%) saturate(6000%) hue-rotate(2deg) brightness(100%) contrast(101%);
+  filter: brightness(0) saturate(100%) invert(59%) sepia(84%) saturate(813%) hue-rotate(5deg) brightness(99%) contrast(92%);
+}
+
+.iconCheckDefault {
+  width: 30px;
+  height: 30px;
+  filter: brightness(0) saturate(100%) invert(59%) sepia(84%) saturate(813%) hue-rotate(5deg) brightness(99%) contrast(92%);
 }
 
 .iconCheckNo {
   width: 30px;
   height: 30px;
-  filter: invert(20%) sepia(100%) saturate(7500%) hue-rotate(360deg) brightness(90%) contrast(85%);
+  filter: brightness(0) saturate(100%) invert(25%) sepia(20%) saturate(5539%) hue-rotate(326deg) brightness(86%) contrast(109%);
 }
 
 .textColorLimited {
-  filter: invert(67%) sepia(20%) saturate(6000%) hue-rotate(2deg) brightness(100%) contrast(101%);
+  filter: brightness(0) saturate(100%) invert(59%) sepia(84%) saturate(813%) hue-rotate(5deg) brightness(99%) contrast(92%);
 }
 
 .textColorNo {
-  filter: invert(20%) sepia(100%) saturate(7500%) hue-rotate(360deg) brightness(90%) contrast(85%);
+  filter: brightness(0) saturate(100%) invert(25%) sepia(20%) saturate(5539%) hue-rotate(326deg) brightness(86%) contrast(109%);
 }
 
 .textColorDefault {
-  filter: invert(55%) sepia(39%) saturate(601%) hue-rotate(73deg) brightness(97%) contrast(98%);  
+  filter: brightness(0) saturate(100%) invert(59%) sepia(84%) saturate(813%) hue-rotate(5deg) brightness(99%) contrast(92%);
+}
+
+.textColorYes {
+  filter: brightness(0) saturate(100%) invert(45%) sepia(85%) saturate(380%) hue-rotate(100deg) brightness(98%) contrast(87%);
 }
 
 </style>