alpha version tag

CHANGELOG.md

@@ -27,6 +27,7 @@ Unreleased
 - Search monitors and geostories by title [OEMC-94](https://vizzuality.atlassian.net/browse/OEMC-94?atlOrigin=eyJpIjoiMGVlYmJhNmM5ODU4NDRiNWEzNTIyNWRjODdjNDg4MWUiLCJwIjoiaiJ9)
 - 404 - error management [OEMC-81](https://vizzuality.atlassian.net/browse/OEMC-81?atlOrigin=eyJpIjoiNWZkNTYwMjVkZGVjNDAwZGE2YWI3ZDgwMzgzOTRjMjEiLCJwIjoiaiJ9)
 - Sorting items in landing page [OEMC-24](https://vizzuality.atlassian.net/browse/OEMC-24?atlOrigin=eyJpIjoiZTlmNGE1Njk3MTRlNDNjMmExY2I3YmE1ZjUzMTBkYjIiLCJwIjoiaiJ9)
+- Alpha version tag added to site [OEMC-127](https://vizzuality.atlassian.net/browse/OEMC-127?atlOrigin=eyJpIjoiYzBiNGI0NDcwOGUzNGYzMzgzM2I1NWVhMWE0NjFkZjciLCJwIjoiaiJ9)
 
 ### Changed
 

e2e/global.spec.ts

@@ -0,0 +1,16 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('"Alpha version" should be visible from every page ', () => {
+  test('Alpha version in hub', async ({ page }) => {
+    await page.goto('/', { waitUntil: 'load' });
+    const alphaVersion = page.getByTestId('alpha-site');
+    await expect(alphaVersion).toBeVisible();
+    await expect(alphaVersion).toHaveText('Alpha version');
+  });
+  test('Alpha version in map', async ({ page }) => {
+    await page.goto('/map', { waitUntil: 'load' });
+    const alphaVersion = page.getByTestId('alpha-site');
+    await expect(alphaVersion).toBeVisible();
+    await expect(alphaVersion).toHaveText('Alpha version');
+  });
+});

src/app/layout.tsx

@@ -50,16 +50,22 @@ export default function RootLayout({ children }: { children: ReactNode }) {
           <div className="flex h-full flex-col">
             <div className="h-[70px] w-full items-center border-b border-b-secondary-900 bg-brand-500/80">
               <div className="m-auto flex h-full max-w-[1200px] items-center justify-between">
-                <div className="mx-2 items-center space-x-4">
+                <div className="mx-2 flex items-center space-x-4">
                   <Link href="/">
                     <Image
                       alt="Open-earth-monitor"
                       src="/images/OEM-logo.svg"
                       width={147}
                       height={40}
-                      className="inline-block"
+                      className="block"
                     />
                   </Link>
+                  <div
+                    data-testid="alpha-site"
+                    className="rounded-sm border border-alert px-[6px] py-1 font-inter text-xs text-alert"
+                  >
+                    Alpha version
+                  </div>
                 </div>
                 <MainMenu />
               </div>

tailwind.config.js

@@ -48,6 +48,7 @@ module.exports = {
 
           foreground: 'hsl(var(--secondary-foreground))',
         },
+        alert: 'hsl(167, 85%, 52%)',
         monitors: {
           blue: 'hsla(209, 94%, 87%, 1)',
           green: 'hsla(133, 97%, 85%, 1)',