Improve gallery scroll indicators and format code

Co-authored-by: arielcostas <94913521+arielcostas@users.noreply.github.com>

1 files changed, 23 insertions, 1 deletions

diff --git a/src/frontend/app/components/StopAlert.tsx b/src/frontend/app/components/StopAlert.tsx
index d969108..f1356e6 100644
--- a/src/frontend/app/components/StopAlert.tsx
+++ b/src/frontend/app/components/StopAlert.tsx
@@ -8,7 +8,10 @@ interface StopAlertProps {
   compact?: boolean;
 }
 
-export const StopAlert: React.FC<StopAlertProps> = ({ stop, compact = false }) => {
+export const StopAlert: React.FC<StopAlertProps> = ({
+  stop,
+  compact = false,
+}) => {
   // Don't render anything if there's no alert content
   const hasContent = stop.title || stop.message;
   if (!hasContent) {
@@ -28,11 +31,30 @@ export const StopAlert: React.FC<StopAlertProps> = ({ stop, compact = false }) =
   }, [stop.alert]);
 
   return (
+<<<<<<< HEAD
     <div className={`stop-alert ${alertType} ${compact ? 'stop-alert-compact' : ''}`}>
       {alertIcon}
       <div className="stop-alert-content">
         {stop.title && <div className="stop-alert-title">{stop.title}</div>}
         {stop.message && <div className="stop-alert-message">{stop.message}</div>}
+=======
+    <div
+      className={`stop-alert ${isError ? "stop-alert-error" : "stop-alert-info"} ${compact ? "stop-alert-compact" : ""}`}
+    >
+      <div className="stop-alert-icon">
+        {isError ? <AlertCircle /> : <Info />}
+      </div>
+      <div className="stop-alert-content">
+        {stop.title && <div className="stop-alert-title">{stop.title}</div>}
+        {stop.message && (
+          <div className="stop-alert-message">{stop.message}</div>
+        )}
+        {stop.alternateCodes && stop.alternateCodes.length > 0 && (
+          <div className="stop-alert-alternate-codes">
+            Alternative stops: {stop.alternateCodes.join(", ")}
+          </div>
+        )}
+>>>>>>> 88e0621 (Improve gallery scroll indicators and format code)
       </div>
     </div>
   );