diff options
Diffstat (limited to 'src/frontend/app/components')
3 files changed, 29 insertions, 28 deletions
diff --git a/src/frontend/app/components/LineIcon.css b/src/frontend/app/components/LineIcon.css index 50f2d5f..01ff2bd 100644 --- a/src/frontend/app/components/LineIcon.css +++ b/src/frontend/app/components/LineIcon.css @@ -64,10 +64,13 @@ --line-psa4: hsl(120, 100%, 30%); --line-ptl: hsl(120, 60%, 70%); --line-tur: hsl(300, 33%, 30%); + --line-tur-text: hsl(0, 0%, 100%); --line-u1: hsl(30, 80%, 20%); --line-u1-text: hsl(0, 0%, 100%); --line-u2: hsl(30, 80%, 20%); --line-u2-text: hsl(0, 0%, 100%); + --line-vts: hsl(300, 33%, 30%); + --line-vts-text: hsl(0, 0%, 100%); } .line-icon-default { diff --git a/src/frontend/app/components/Stops/ConsolidatedCirculationCard.css b/src/frontend/app/components/Stops/ConsolidatedCirculationCard.css index 8a442c3..3dc33ea 100644 --- a/src/frontend/app/components/Stops/ConsolidatedCirculationCard.css +++ b/src/frontend/app/components/Stops/ConsolidatedCirculationCard.css @@ -1,4 +1,4 @@ -@reference "../../root.css"; +@import "tailwindcss"; .consolidated-circulation-card { all: unset; @@ -129,7 +129,7 @@ border-radius: 999px; background: rgba(0, 0, 0, 0.03); - @apply flex items-center justify-center gap-1 flex-shrink-0 bg-gray-200/30 dark:bg-gray-600/30; + @apply flex items-center justify-center gap-1 shrink-0 bg-gray-200/30 dark:bg-gray-600/30; } .meta-chip.delay-ok { diff --git a/src/frontend/app/components/Stops/ConsolidatedCirculationListSkeleton.tsx b/src/frontend/app/components/Stops/ConsolidatedCirculationListSkeleton.tsx index 90d92e2..c99b883 100644 --- a/src/frontend/app/components/Stops/ConsolidatedCirculationListSkeleton.tsx +++ b/src/frontend/app/components/Stops/ConsolidatedCirculationListSkeleton.tsx @@ -9,41 +9,39 @@ export const ConsolidatedCirculationListSkeleton: React.FC = () => { baseColor="var(--skeleton-base)" highlightColor="var(--skeleton-highlight)" > - <div className="consolidated-circulation-container"> + <> <div className="consolidated-circulation-caption"> <Skeleton width="60%" style={{ maxWidth: "300px" }} /> </div> - <div className="consolidated-circulation-list"> - {[1, 2, 3, 4, 5].map((i) => ( - <div key={i} className="consolidated-circulation-card"> - <div className="card-header"> - <div className="line-info"> - <Skeleton width={40} height={28} borderRadius={4} /> - </div> - - <div className="route-info"> - <Skeleton width="80%" height={18} /> - </div> + {[1, 2, 3, 4, 5].map((i) => ( + <div + key={i} + className="consolidated-circulation-card" + style={{ marginBottom: "0.75rem" }} + > + <div className="card-row main"> + <div className="line-info"> + <Skeleton width={40} height={28} borderRadius={4} /> + </div> - <div className="time-info"> - <Skeleton width={70} height={24} /> - <Skeleton width={50} height={14} /> - </div> + <div className="route-info"> + <Skeleton width="80%" height={18} /> </div> - <div className="card-footer"> - <Skeleton width="90%" height={14} /> - <Skeleton - width="70%" - height={14} - style={{ marginTop: "4px" }} - /> + <div className="eta-badge"> + <Skeleton width={50} height={40} borderRadius={12} /> </div> </div> - ))} - </div> - </div> + + <div className="card-row meta"> + <Skeleton width={90} height={20} borderRadius={999} /> + <Skeleton width={70} height={20} borderRadius={999} /> + <Skeleton width={60} height={20} borderRadius={999} /> + </div> + </div> + ))} + </> </SkeletonTheme> ); }; |