Simplify react router demo

Author: justin808

client/app/bundles/comments/components/TestReactRouter/TestReactRouter.jsx

@@ -5,10 +5,11 @@ import BaseComponent from '../../../../libs/components/BaseComponent.jsx';
 export default class TestReactRouter extends BaseComponent {
   render() {
     return (
-      <div className="container">
-        <h1>React Router is working!</h1>
-        <p>
-          Woohoo, we can use <code>react-router</code> here!
+      <div className="rounded-[2rem] border border-slate-200 bg-white/90 p-6 shadow-[0_24px_70px_-52px_rgba(15,23,42,0.5)] sm:p-7">
+        <p className="text-xs font-semibold uppercase tracking-[0.22em] text-sky-700">Route Example</p>
+        <h1 className="mt-3 text-4xl text-slate-900">React Router is working!</h1>
+        <p className="mt-3 max-w-2xl text-sm leading-7 text-slate-600 sm:text-base">
+          This route swaps the content area without leaving the router-enabled demo shell.
         </p>
       </div>
     );

client/app/bundles/comments/layout/Layout.jsx

@@ -7,8 +7,8 @@ const routeLinkClassName = ({ isActive }) =>
   classNames(
     'inline-flex items-center rounded-full border px-4 py-2 text-sm font-semibold transition',
     isActive
-      ? 'border-amber-300 bg-amber-300 text-slate-900 shadow-lg shadow-amber-200'
-      : 'border-white/10 bg-white/5 text-slate-100 hover:border-sky-300/50 hover:bg-white/10 hover:text-white',
+      ? 'border-slate-900 bg-slate-900 text-white shadow-lg shadow-slate-200'
+      : 'border-slate-200 bg-slate-50 text-slate-700 hover:border-sky-300 hover:bg-sky-50 hover:text-sky-700',
   );
 
 /* eslint-disable react/prefer-stateless-function */
@@ -17,23 +17,23 @@ export default class Layout extends Component {
     const { children } = this.props;
 
     return (
-      <section className="space-y-8">
-        <header className="overflow-hidden rounded-[2rem] bg-slate-900 px-6 py-7 text-slate-100 shadow-[0_26px_70px_-42px_rgba(15,23,42,0.7)] sm:px-8">
+      <section className="space-y-6">
+        <header className="rounded-[2rem] border border-slate-200 bg-white/90 px-6 py-7 shadow-[0_24px_60px_-46px_rgba(15,23,42,0.35)] sm:px-8">
           <div className="max-w-3xl">
-            <p className="text-xs font-semibold uppercase tracking-[0.28em] text-sky-300">
-              Router Playground
+            <p className="text-xs font-semibold uppercase tracking-[0.28em] text-sky-700">
+              React Router Demo
             </p>
-            <h2 className="mt-3 text-3xl text-white sm:text-4xl">Switch between the three router states.</h2>
-            <p className="mt-3 max-w-2xl text-sm leading-7 text-slate-300 sm:text-base">
-              Root comments, a route transition, and a redirect all live in this same server-rendered bundle.
+            <h2 className="mt-3 text-3xl text-slate-900 sm:text-4xl">The same comments app, with routing.</h2>
+            <p className="mt-3 max-w-2xl text-sm leading-7 text-slate-600 sm:text-base">
+              Use the pills to view the comments route, a plain routed screen, and a redirect back to root.
             </p>
           </div>
 
-          <details className="mt-5 rounded-2xl border border-white/10 bg-white/5 p-4">
-            <summary className="cursor-pointer text-sm font-semibold text-white">
-              Why this section exists
+          <details className="mt-5 rounded-2xl border border-slate-200 bg-slate-50 p-4">
+            <summary className="cursor-pointer text-sm font-semibold text-slate-900">
+              What this demo proves
             </summary>
-            <ul className="mt-3 space-y-2 text-sm text-slate-300">
+            <ul className="mt-3 space-y-2 text-sm text-slate-600">
               <li>Server render first, then hydrate on the client.</li>
               <li>Keep routing and comments in the same Redux-backed flow.</li>
               <li>Verify redirects still resolve cleanly after SSR.</li>
@@ -42,13 +42,13 @@ export default class Layout extends Component {
 
           <div className="mt-6 flex flex-wrap gap-3">
             <Link end to="/" className={routeLinkClassName}>
-              Comments (Root URL)
+              Comments
             </Link>
             <Link to="/react-router" className={routeLinkClassName}>
-              Test React Router (&apos;/react-router&apos;)
+              Route
             </Link>
             <Link to="/react-router/redirect" className={routeLinkClassName}>
-              Test Redirect (url to &apos;/react-router/redirect&apos; which goes to root &apos;/&apos;)
+              Redirect
             </Link>
           </div>
         </header>

spec/system/react_router_demo_spec.rb

@@ -7,23 +7,23 @@
   context "when Root URL", page: :main do
     it "shows comments section" do
       visit root_path
-      click_link "Comments (Root URL)"
+      click_link "Comments"
       expect(page).to have_selector("h2", text: "Comments")
     end
   end
 
   context "when /react-router URL", page: :main do
     it "shows 'React Router is working!' message" do
       visit root_path
-      click_link "Test React Router ('/react-router')"
+      click_link "Route"
       expect(page).to have_selector("h1", text: "React Router is working!")
     end
   end
 
   context "when /react-router/redirect URL", page: :main do
     before do
       visit root_path
-      click_link "Test Redirect (url to '/react-router/redirect' which goes to root '/')"
+      click_link "Redirect"
     end
 
     it "shows comments section" do