diff options
Diffstat (limited to 'src/frontend/app/components/Stops')
| -rw-r--r-- | src/frontend/app/components/Stops/ConsolidatedCirculationCard.css | 4 | ||||
| -rw-r--r-- | src/frontend/app/components/Stops/ConsolidatedCirculationListSkeleton.tsx | 50 |
2 files changed, 26 insertions, 28 deletions
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> ); }; |