More Redocly style & key warning fixes:

- Fix unique key warnings on Dev Tools and Docs pages
- Fix active code tab colors in light mode
- Fix dev tools padding
- Fix dev tools cards in light mode
- Fix tx sender sidebar in light mode
- Fix domain verifier example code in light mode

content/@theme/styles.css

@@ -231,6 +231,7 @@ ul.nav.navbar-nav {
   --code-block-controls-background-color: #E0E0E1;
   --code-block-controls-border: none;
   --code-block-border-color: #E0E0E1;
+  --md-tabs-active-tab-background-color: #C1C1C2;
   
   --code-block-tokens-function-color: #B23C00;
   --code-block-tokens-operator-color: #000;

content/docs.page.tsx

@@ -286,7 +286,7 @@ export default function Docs() {
           <h4 className="pb-4">{translate('Use Cases')}</h4>
           <div className="card-grid card-grid-3xN use-cases">
             {useCases.map(useCase => (
-              <UseCasesCard useCase={useCase} />
+              <UseCasesCard useCase={useCase} key={useCase.id} />
             ))}
           </div>
         </section>
@@ -306,7 +306,7 @@ export default function Docs() {
             <div className="col">
               <div className="card-grid card-grid-2xN video-grid">
                 {getStartedVideos.map(video => (
-                  <VideoCard url={video.url} title={translate(video.title)} src={video.src} />
+                  <VideoCard url={video.url} title={translate(video.title)} src={video.src} key={video.url} />
                 ))}
               </div>
               <div className="align-button-on-bottom">
@@ -360,7 +360,7 @@ export default function Docs() {
           <h4 className="pb-4">{translate('Intermediate Learning Sources')}</h4>
           <div className="card-grid card-grid-3xN">
             {intermediateVideos.map(video => (
-              <VideoCard url={video.url} title={translate(video.title)} src={video.src} />
+              <VideoCard url={video.url} title={translate(video.title)} src={video.src} key={video.url} />
             ))}
           </div>
         </section>
@@ -385,6 +385,7 @@ export default function Docs() {
                     link={card.link}
                     title={translate(card.title)}
                     description={translate(card.description)}
+                    key={card.link}
                   />
                 ))}
               </div>

content/resources/dev-tools/index.page.tsx

@@ -122,7 +122,7 @@ export default function DevTools() {
   const { translate } = useTranslate();
 
   return (
-    <div className="page-dev-tools">
+    <article className="page-dev-tools pt-3 p-md-3">
       <div>
         <section className="py-20">
           <div className="mx-auto text-lg-left">
@@ -225,6 +225,7 @@ export default function DevTools() {
                       href={card.href}
                       target="_blank"
                       id={card.id}
+                      key={card.id}
                     >
                       {
                         card.img && (
@@ -254,6 +255,7 @@ export default function DevTools() {
                       href={card.href}
                       target="_blank"
                       id={card.id}
+                      key={card.id}
                     >
                       {
                         card.img && (
@@ -303,6 +305,6 @@ export default function DevTools() {
           </div>
         </section>
       </div>
-    </div>
+    </article>
   );
 }

content/top-nav.yaml

@@ -36,7 +36,7 @@
       items:
         - page: ./concepts/index.md
         - page: ./tutorials/index.md
-        - page: ./references/index.md # TODO: waiting on file to be added
+        - page: ./references/index.md
         - page: ./infrastructure/index.md
     - group: Use Cases
       items:

styles/light/_light-theme.scss

@@ -496,9 +496,10 @@ a.osano-cm-link {
 }
 
 // Layout elements -------------------------------------------------------------
-main .card,
+article .card,
 .landing .card,
-.cta-card {
+.cta-card,
+aside .card {
   color: $light-fg;
   background-color: $light-standout-bg;
   box-shadow: $light-box-shadow;
@@ -613,8 +614,8 @@ code {
 }
 
 // Code blocks
-pre code {
-  color: $gray-050;
+pre code, pre {
+  background-color: $gray-200;
 }
 
 // Code tabs