Merge pull request #16 from browserstack/new_demo_app_fixes

New App Minor Fixes

Author: kalyandoc

client/package-lock.json

@@ -4,12 +4,12 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>browserstack-demo</title>
-    <meta name="description" content="Browserstack Self Heal Demo Project" />
+    <meta name="description" content="Browserstack Demo Project" />
     <meta name="author" content="cia-dev" />
 
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <meta property="og:title" content="Browserstack Self Heal Demo" />
-    <meta property="og:description" content="Browserstack Self Heal Demo Project" />
+    <meta property="og:title" content="Browserstack Demo" />
+    <meta property="og:description" content="Browserstack Demo Project" />
     <meta property="og:type" content="website" />
     <meta property="og:image" content="/favicon.svg" />
 

client/package.json

@@ -0,0 +1 @@
+/*    /index.html   200

index.html

@@ -91,7 +91,7 @@ const ShoppingCartPage = () => {
                   <div className="text-blue-600 font-bold text-lg">${item.price} x {item.quantity}</div>
                   <div className="flex items-center gap-2 mt-2">
                     <button className="px-2 py-1 bg-gray-200 rounded" onClick={() => decrementFromCart(item.id)}>-</button>
-                    <span className="px-2">{item.quantity}</span>
+                    <span className="px-2" id="item-quantity">{item.quantity}</span>
                     <button className="px-2 py-1 bg-gray-200 rounded" onClick={() => addToCart(item, 1)}>+</button>
                   </div>
                 </div>

public/_redirects

@@ -97,26 +97,6 @@ All colors MUST be HSL.
   }
 }
 
-/* Self-healing mode styles */
-.healing-highlight {
-  @apply ring-2 ring-orange-300 ring-opacity-50 animate-pulse;
-}
-
-.healing-glow {
-  box-shadow: 0 0 20px rgba(251, 146, 60, 0.3);
-}
-
-/* Smooth transitions for healing mode */
-.healing-transition {
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-@media (max-width: 1075px) {
-  .healing-demo-desktop {
-    display: none !important;
-  }
-}
-
 /* Hide username on iPad screen sizes */
 @media (min-width: 768px) and (max-width: 1080px) and (orientation: portrait),
        (min-width: 768px) and (max-width: 1080px) and (orientation: landscape) {

src/App.tsx

@@ -124,7 +124,7 @@ const Scenarios: React.FC = () => {
                         title: 'Link copied',
                         description: 'The scenario URL is ready to share.',
                         className: toastStyles,
-                        duration: 800
+                        duration: 3000
                       });
                     });
                   }
@@ -160,6 +160,7 @@ const Scenarios: React.FC = () => {
                 </div>
                 <button
                   onClick={() => setToggleState(!toggleState)}
+                  id="feature-toggle-btn"
                   className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
                     toggleState ? 'bg-blue-600' : 'bg-gray-200'
                   }`}
@@ -202,6 +203,7 @@ const Scenarios: React.FC = () => {
                 {[25, 50, 75, 100].map((value) => (
                   <button
                     key={value}
+                    id={`progress-btn-${value}`}
                     onClick={() => setProgressValue(value)}
                     className="flex-1 py-2 px-2 text-sm rounded-lg font-medium transition-all bg-gray-100 text-gray-700 hover:bg-gray-200"
                   >