From 558beae12f6c57b12ecfe614504fa25e31cffdbf Mon Sep 17 00:00:00 2001
From: Meier Lukas <meierschlumpf@gmail.com>
Date: Thu, 10 Aug 2023 19:54:19 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Improve=20header=20experim?=
 =?UTF-8?q?ental=20note?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/locales/en/layout/header.json    |  2 +-
 src/components/layout/header/Header.tsx | 52 +++++++++++++------------
 2 files changed, 29 insertions(+), 25 deletions(-)

diff --git a/public/locales/en/layout/header.json b/public/locales/en/layout/header.json
index 5eb309964..7ef7f92f8 100644
--- a/public/locales/en/layout/header.json
+++ b/public/locales/en/layout/header.json
@@ -1,6 +1,6 @@
 {
     "experimentalNote": {
-        "label": "This is an experimental feature of Homarr. Please report any issues to the official Homarr team."
+        "label": "This is an experimental feature of Homarr. Please report any issues on <gh>GitHub</gh> or <dc>Discord</dc>."
     },
     "search": {
         "label": "Search",
diff --git a/src/components/layout/header/Header.tsx b/src/components/layout/header/Header.tsx
index 5370ba868..5db422bfa 100644
--- a/src/components/layout/header/Header.tsx
+++ b/src/components/layout/header/Header.tsx
@@ -2,7 +2,6 @@ import {
   Anchor,
   Box,
   Center,
-  Divider,
   Flex,
   Group,
   Header,
@@ -12,8 +11,7 @@ import {
 } from '@mantine/core';
 import { useMediaQuery } from '@mantine/hooks';
 import { IconAlertTriangle } from '@tabler/icons-react';
-import { useTranslation } from 'next-i18next';
-import Link from 'next/link';
+import { Trans, useTranslation } from 'next-i18next';
 
 import { Logo } from '../Common/Logo';
 import { AvatarMenu } from './AvatarMenu';
@@ -80,27 +78,33 @@ const ExperimentalHeaderNote = ({ visible = false, height = 30 }: ExperimentalHe
 
   return (
     <Box bg="red" h={height} p={3} px={6} style={{ overflow: 'hidden' }}>
-      <Group position="apart" noWrap>
-        <Flex h="100%" align="center" columnGap={7}>
-          <IconAlertTriangle color="white" size="1rem" style={{ minWidth: '1rem' }} />
-          <Text color="white" lineClamp={height === 30 ? 1 : 2}>
-            {t('experimentalNote.label')}
-          </Text>
-        </Flex>
-        <Group noWrap>
-          <Anchor
-            target="_blank"
-            href="https://github.com/ajnart/homarr/issues/new?assignees=&labels=%F0%9F%90%9B+Bug&projects=&template=bug.yml&title=[Authentication%20beta]:%20%3Ctitle%3E"
-            color="gray.4"
-          >
-            Create issue
-          </Anchor>
-          <Divider orientation="vertical" my={5} color="white" opacity={0.4} />
-          <Anchor target="_blank" href="https://discord.com/invite/aCsmEV5RgA" color="gray.4">
-            Discord
-          </Anchor>
-        </Group>
-      </Group>
+      <Flex h="100%" align="center" columnGap={7}>
+        <IconAlertTriangle color="white" size="1rem" style={{ minWidth: '1rem' }} />
+        <Text color="white" lineClamp={height === 30 ? 1 : 2}>
+          <Trans
+            t={t}
+            i18nKey="experimentalNote.label"
+            components={{
+              gh: (
+                <Anchor
+                  color="inherit"
+                  style={{ textDecoration: 'underline' }}
+                  target="_blank"
+                  href="https://github.com/ajnart/homarr/issues/new?assignees=&labels=%F0%9F%90%9B+Bug&projects=&template=bug.yml&title=[Authentication%20Beta]:%20%3Ctitle%3E&version=1.14-beta"
+                />
+              ),
+              dc: (
+                <Anchor
+                  color="inherit"
+                  style={{ textDecoration: 'underline' }}
+                  target="_blank"
+                  href="https://discord.com/invite/aCsmEV5RgA"
+                />
+              ),
+            }}
+          />
+        </Text>
+      </Flex>
     </Box>
   );
 };