apply styling to prebid-secure-signals

Author: eiman-eltigani-ttd

web-integrations/javascript-sdk/client-side/Dockerfile

@@ -6,6 +6,9 @@ RUN apk add --no-cache gettext
 # Copy static files from client-side directory
 COPY web-integrations/javascript-sdk/client-side/html /usr/share/nginx/html/
 
+# Copy shared styles folder
+COPY web-integrations/styles /usr/share/nginx/html/styles/
+
 # Copy config and entrypoint
 COPY web-integrations/javascript-sdk/client-side/default.conf /etc/nginx/conf.d/default.conf
 COPY web-integrations/javascript-sdk/client-side/entrypoint.sh /entrypoint.sh

web-integrations/javascript-sdk/client-side/html/index.html

@@ -90,9 +90,6 @@ <h1>Client-Side ${IDENTITY_NAME} Integration Example using JavaScript SDK</h1>
             >Client-Side Integration Guide for JavaScript
           </a>
           to implement ${IDENTITY_NAME} integration and generate ${IDENTITY_NAME} tokens.
-          <strong>Note:</strong> This is a <em>test-only</em> integration environment—not for production
-          use. It does not perform real user authentication or generate production-level tokens. Do not
-          use real user data on this page.
         </p>
         <h2>${IDENTITY_NAME} Integration Status</h2>
         <table id="uid2_state">

web-integrations/javascript-sdk/client-side/html/stylesheets/app.css

@@ -1,31 +1,5 @@
-/* Two-Column Layout with Sidebar - Modern Design */
-:root {
-  --primary-orange: #FF6B35;
-  --primary-dark: #2D3748;
-  --accent-teal: #0D9488;
-  --accent-yellow: #FBBF24;
-  --text-dark: #1A202C;
-  --text-gray: #718096;
-  --border-color: #E2E8F0;
-  --bg-light: #F7FAFC;
-  --bg-white: #FFFFFF;
-  --sidebar-bg: #FFF7ED;
-  --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
-  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-  
-  /* Button Colors */
-  --button-navy: rgba(2, 10, 64, 1);
-  --button-navy-hover: rgba(2, 10, 64, 0.9);
-  
-  /* Link Colors */
-  --link-color: #0459fd;
-  --link-hover: #0347cc;
-  
-  /* Tooltip Colors */
-  --tooltip-bg: #1F2937;
-  --tooltip-trigger: #3B82F6;
-  --tooltip-trigger-hover: #2563EB;
-}
+/* Import centralized color variables */
+@import url('../styles/colors.css');
 
 * {
   box-sizing: border-box;
@@ -143,14 +117,13 @@ p {
 
 a {
   color: var(--link-color);
-  text-decoration: none;
-  font-weight: 600;
-  border-bottom: 2px solid transparent;
-  transition: border-color 0.2s ease;
+  text-decoration: underline;
+  font-weight: 500;
+  transition: opacity 0.2s ease;
 }
 
 a:hover {
-  border-bottom-color: var(--link-color);
+  opacity: 0.8;
 }
 
 /* State Table */

web-integrations/prebid-secure-signals/client-side/Dockerfile

@@ -9,6 +9,9 @@ COPY web-integrations/prebid-secure-signals/client-side/ads.css /usr/share/nginx
 COPY web-integrations/prebid-secure-signals/client-side/ads.js /usr/share/nginx/html/
 COPY web-integrations/prebid-secure-signals/prebid.js /usr/share/nginx/html/
 
+# Copy shared styles folder
+COPY web-integrations/styles /usr/share/nginx/html/styles/
+
 # Copy config and HTML template
 COPY web-integrations/prebid-secure-signals/client-side/default.conf /etc/nginx/conf.d/default.conf
 COPY web-integrations/prebid-secure-signals/client-side/index.html /usr/share/nginx/html/index.template.html

web-integrations/prebid-secure-signals/client-side/ads.css

@@ -3,14 +3,15 @@
     /* this element's width controls the effective height */
     /* of the video container's padding-bottom */
     max-width: 640px;
-    margin: 10px 0;
+    margin: 2rem 0;
 }
 
 #video-container {
     position: relative;
     /* forces the container to match a 16x9 aspect ratio */
     /* replace with 75% for a 4:3 aspect ratio, if needed */
     padding-bottom: 56.25%;
+    background: #000;
 }
 
 #video-element {