style: remove bg-light from all .version spans for consistent gray background; test: add E2E for version style

Author: rogeriopradoj

dev/index.html

@@ -99,7 +99,7 @@ <h2 id="calc" class="text-center mb-4">Calcule sua versão</h2>
         </div>
 
         <p class="text-center mb-4">
-          <span id="result-version" class="version bg-light rounded p-2">v0.0.0</span>
+          <span id="result-version" class="version rounded p-2">v0.0.0</span>
         </p>
       </div>
     </div>
@@ -171,7 +171,7 @@ <h4 class="modal-title text-center w-100">
             Como nosso Léo nasceu em <span id="leo-birthday" data-leo-birthday="2015-10-22">22/10/2015</span>,
             <br><br>
             <span>👉</span>
-            <span id="leo-version" class="version bg-light rounded p-2">v0.1.2</span>
+            <span id="leo-version" class="version rounded p-2">v0.1.2</span>
             <span>👈</span>
           </p>
         </div>

dev/index_en.html

@@ -99,7 +99,7 @@ <h2 id="calc" class="text-center mb-4">Calculate your version</h2>
         </div>
 
         <p class="text-center mb-4">
-          <span id="result-version" class="version bg-light rounded p-2">v0.0.0</span>
+          <span id="result-version" class="version rounded p-2">v0.0.0</span>
         </p>
       </div>
     </div>
@@ -171,7 +171,7 @@ <h4 class="modal-title text-center w-100">
             Since our Leo was born on <span id="leo-birthday" data-leo-birthday="2015-10-22">10/22/2015</span>,
             <br><br>
             <span>👉</span>
-            <span id="leo-version" class="version bg-light rounded p-2">v0.1.2</span>
+            <span id="leo-version" class="version rounded p-2">v0.1.2</span>
             <span>👈</span>
           </p>
         </div>

test/e2e/version-style.spec.js

@@ -0,0 +1,17 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Version span style', () => {
+  test('result-version should have gray background', async ({ page, baseURL }) => {
+    await page.goto(baseURL + '/');
+    const resultVersion = await page.locator('#result-version');
+    const bgColor = await resultVersion.evaluate(el => getComputedStyle(el).backgroundColor);
+    expect(bgColor).toBe('rgb(238, 238, 238)'); // #eee
+  });
+
+  test('leo-version should have gray background', async ({ page, baseURL }) => {
+    await page.goto(baseURL + '/');
+    const leoVersion = await page.locator('#leo-version');
+    const bgColor = await leoVersion.evaluate(el => getComputedStyle(el).backgroundColor);
+    expect(bgColor).toBe('rgb(238, 238, 238)'); // #eee
+  });
+});