chore: minor style fixes to suspense demo

reduxjs · Apr 24, 2022 · 9a8f729 · 9a8f729
1 parent ffa9f08
commit 9a8f729
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 3 deletions.
diff --git a/examples/query/react/suspense/src/PokemonPlaceholder.tsx b/examples/query/react/suspense/src/PokemonPlaceholder.tsx
@@ -21,18 +21,18 @@ export function PokemonPlaceholder({
 
   let content: React.ReactNode = isError ? (
     <>
-      <h3>An error has occurred while loading {name}</h3>
+      <h3 className='alert__heading'>An error has occurred while loading {name}</h3>
       <div>{error?.message}</div>
       {onRetry && (
-        <button type="button" className="btn" onClick={onRetry}>
+        <button type="button" className="btn alert__btn" onClick={onRetry}>
           retry
         </button>
       )}
       {children}
     </>
   ) : (
     <>
-      <h3>Loading pokemon {name}</h3>
+      <h3 className='alert__heading'>Loading pokemon {name}</h3>
       <br />
       (Suspense fallback)
       {children}

diff --git a/examples/query/react/suspense/src/styles.css b/examples/query/react/suspense/src/styles.css
@@ -11,6 +11,18 @@
   --primary: #6c3eb7;
 }
 
+hr {
+  box-sizing: border-box;
+  height: 2px;
+  border: none;
+  border-top: 2px solid var(--primary);
+}
+
+
+input[type="range"] {
+  max-width: 100px;
+}
+
 body {
   margin: 0;
 }
@@ -134,6 +146,15 @@ h3 {
   background: var(--danger-bg);
 }
 
+.alert__heading {
+  color: inherit;
+}
+
+.alert__btn {
+  color: inherit !important;
+  border-color: currentColor;
+}
+
 .alert--info {
   color: var(--info);
   background-color: var(--info-bg);