fix CSS styling and add source code link to React sample

Author: eiman-eltigani-ttd

web-integrations/javascript-sdk/client-server/public/stylesheets/app.css

@@ -200,7 +200,12 @@ a:hover {
   margin-top: 2rem;
 }
 
-.form-inline {
+.form.top-form {
+  margin-top: 0;
+  margin-bottom: 2rem;
+}
+
+.email_prompt {
   display: flex;
   gap: 0;
   max-width: 600px;
@@ -209,7 +214,7 @@ a:hover {
   overflow: hidden;
 }
 
-.email-input {
+#email {
   flex: 1;
   padding: 0.875rem 1.25rem;
   border: 2px solid var(--border-color);
@@ -220,11 +225,11 @@ a:hover {
   transition: border-color 0.2s ease;
 }
 
-.email-input:focus {
+#email:focus {
   border-color: var(--primary-orange);
 }
 
-.email-input::placeholder {
+#email::placeholder {
   color: var(--text-gray);
 }
 
@@ -260,6 +265,11 @@ a:hover {
   border-radius: 8px;
 }
 
+/* Rounded corners for login button in form */
+#login_form .button {
+  border-radius: 0 8px 8px 0;
+}
+
 /* Tooltip Styles - Matching Self-Serve Portal */
 .tooltip-wrapper {
   display: inline-flex;
@@ -353,11 +363,11 @@ a:hover {
     padding: 1.5rem;
   }
 
-  .form-inline {
+  .email_prompt {
     flex-direction: column;
   }
 
-  .email-input {
+  #email {
     border-right: 2px solid var(--border-color);
     border-bottom: none;
   }

web-integrations/javascript-sdk/react-client-side/src/ClientSideApp.tsx

@@ -110,7 +110,7 @@ const ClientSideApp = () => {
           This example demonstrates how a content publisher can integrate {IDENTITY_NAME} using client-side token generation with React, where the SDK generates tokens directly in the browser using public credentials. For documentation, see the{' '}
           <a href={`${DOCS_BASE_URL}/guides/integration-javascript-client-side`}>
             Client-Side Integration Guide for JavaScript
-          </a>.
+          </a>. [<a href="https://github.com/IABTechLab/uid2-examples/tree/main/web-integrations/javascript-sdk/react-client-side">Source Code</a>]
         </p>
 
         {/* Generate/Clear buttons at the top for easy access */}

web-integrations/javascript-sdk/react-client-side/src/styles/app.css

@@ -213,6 +213,11 @@ a:hover {
   margin-top: 2rem;
 }
 
+.form.top-form {
+  margin-top: 0;
+  margin-bottom: 2rem;
+}
+
 .email_prompt {
   display: flex;
   gap: 0;
@@ -272,6 +277,11 @@ a:hover {
   border-radius: 8px;
 }
 
+/* Rounded corners for login button in form */
+#login_form .button {
+  border-radius: 0 8px 8px 0;
+}
+
 /* Success Message */
 .message {
   background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(34, 197, 94, 0.05) 100%);

web-integrations/server-side/public/stylesheets/app.css

@@ -207,7 +207,12 @@ a:hover {
   margin-top: 2rem;
 }
 
-.form-inline {
+.form.top-form {
+  margin-top: 0;
+  margin-bottom: 2rem;
+}
+
+.email_prompt {
   display: flex;
   gap: 0;
   max-width: 600px;
@@ -216,7 +221,7 @@ a:hover {
   overflow: hidden;
 }
 
-.email-input {
+#email {
   flex: 1;
   padding: 0.875rem 1.25rem;
   border: 2px solid var(--border-color);
@@ -227,11 +232,11 @@ a:hover {
   transition: border-color 0.2s ease;
 }
 
-.email-input:focus {
+#email:focus {
   border-color: var(--primary-orange);
 }
 
-.email-input::placeholder {
+#email::placeholder {
   color: var(--text-gray);
 }
 
@@ -267,6 +272,11 @@ a:hover {
   border-radius: 8px;
 }
 
+/* Rounded corners for login button in form */
+#login_form .button {
+  border-radius: 0 8px 8px 0;
+}
+
 /* Tooltip Styles - Matching Self-Serve Portal */
 .tooltip-wrapper {
   display: inline-flex;
@@ -345,7 +355,7 @@ a:hover {
 @media (max-width: 1024px) {
   .page-wrapper {
     flex-direction: column;
-}
+  }
 
   .sidebar {
     position: static;
@@ -360,11 +370,11 @@ a:hover {
     padding: 1.5rem;
   }
 
-  .form-inline {
+  .email_prompt {
     flex-direction: column;
   }
 
-  .email-input {
+  #email {
     border-right: 2px solid var(--border-color);
     border-bottom: none;
   }