edited contact page and header

FrontendV2/src/components/Header.tsx

@@ -23,6 +23,7 @@ import {
   MoreVertical,
   Languages,
   Table,
+  ContactRound,
 } from "lucide-react";
 import { useUserContext } from "@/states/Context";
 import { useState } from "react";
@@ -144,7 +145,7 @@ export const Header = () => {
                   window.open(
                     "https://git.the1s.de/Matthias-Claudius-Schule/borrow-system/wiki",
                     "_blank",
-                    "noopener,noreferrer"
+                    "noopener,noreferrer",
                   )
                 }
                 children={
@@ -155,18 +156,12 @@ export const Header = () => {
                 }
               />
               <Menu.Item
-                value="source-code"
+                value="contact"
-                onSelect={() =>
+                onSelect={() => navigate("/contact", { replace: true })}
-                  window.open(
-                    "https://git.the1s.de/Matthias-Claudius-Schule/borrow-system",
-                    "_blank",
-                    "noopener,noreferrer"
-                  )
-                }
                 children={
                   <HStack gap={3}>
-                    <Code size={16} />
+                    <ContactRound size={16} />
-                    <Text as="span">{t("source-code")}</Text>
+                    <Text as="span">{t("contact")}</Text>
                   </HStack>
                 }
               />
@@ -296,17 +291,15 @@ export const Header = () => {
             </Button>
           </a>
 
-          <a
+          <Button
-            href="https://git.the1s.de/Matthias-Claudius-Schule/borrow-system"
+            variant={"outline"}
-            target="_blank"
+            onClick={() => navigate("/contact", { replace: true })}
           >
-            <Button variant="ghost">
+            <HStack gap={2}>
-              <HStack gap={2}>
+              <ContactRound size={18} />
-                <Code size={18} />
+              <Text as="span">{t("contact")}</Text>
-                <Text as="span">{t("source-code")}</Text>
+            </HStack>
-              </HStack>
+          </Button>
-            </Button>
-          </a>
 
           <Button onClick={logout} variant="outline" colorScheme="red">
             <HStack gap={2}>
@@ -318,7 +311,13 @@ export const Header = () => {
       </Flex>
 
       {/* User Info Dialoge */}
-      {userDialog && <UserDialogue setUserDialog={setUserDialog} fullname={fullname} randomColor={randomColor} />}
+      {userDialog && (
+        <UserDialogue
+          setUserDialog={setUserDialog}
+          fullname={fullname}
+          randomColor={randomColor}
+        />
+      )}
     </Stack>
   );
 };

FrontendV2/src/pages/ContactPage.tsx

@@ -1,8 +1,9 @@
-import { Field, Textarea, Button, Alert } from "@chakra-ui/react";
+import { Field, Textarea, Button, Alert, Container } from "@chakra-ui/react";
 import { useTranslation } from "react-i18next";
 import { useState } from "react";
 import { API_BASE } from "@/config/api.config";
 import Cookies from "js-cookie";
+import { Header } from "@/components/Header";
 
 interface Alert {
   type: "info" | "warning" | "success" | "error" | "neutral";
@@ -44,7 +45,8 @@ export const ContactPage = () => {
   };
 
   return (
-    <>
+    <Container className="px-6 sm:px-8 pt-10">
+      <Header />
       <Field.Root invalid={message === ""}>
         <Field.Label>
           {t("contactPage_messageLabel")}
@@ -70,6 +72,6 @@ export const ContactPage = () => {
         </Alert.Root>
       )}
       <Button onClick={sendMessage}>{t("contactPage_sendButton")}</Button>
-    </>
+    </Container>
   );
 };

FrontendV2/src/utils/i18n/locales/de/de.json

@@ -72,5 +72,14 @@
     "last-borrowed-person": "Zuletzt ausgeliehen von",
     "currently-borrowed-by": "Derzeit ausgeliehen von",
     "back": "Zurückgehen",
-    "landingpage": "Übersichtsseite"
+    "landingpage": "Übersichtsseite",
+    "contactPage_successHeadline": "Nachricht erfolgreich gesendet",
+    "contactPage_successText": "Vielen Dank, dass Sie uns kontaktiert haben. Wir werden uns so schnell wie möglich bei Ihnen melden.",
+    "contactPage_errorHeadline": "Fehler beim Senden der Nachricht",
+    "contactPage_errorText": "Beim Senden Ihrer Nachricht ist ein Fehler aufgetreten. Bitte versuchen Sie es später erneut.",
+    "contactPage_sendButton": "Nachricht senden",
+    "contactPage_messageLabel": "Nachricht",
+    "contactPage_messagePlaceholder": "Geben Sie hier Ihre Nachricht ein...",
+    "contactPage_messageErrorText": "Dieses Feld darf nicht leer sein.",
+    "contact": "Kontakt"
 }

FrontendV2/src/utils/i18n/locales/en/en.json

@@ -72,5 +72,14 @@
     "last-borrowed-person": "Last borrowed by",
     "currently-borrowed-by": "Currently borrowed by",
     "back": "Go back",
-    "landingpage": "Overview page"
+    "landingpage": "Overview page",
+    "contactPage_successHeadline": "Message sent successfully",
+    "contactPage_successText": "Thank you for contacting us. We will get back to you as soon as possible.",
+    "contactPage_errorHeadline": "Error sending message",
+    "contactPage_errorText": "An error occurred while sending your message. Please try again later.",
+    "contactPage_sendButton": "Send message",
+    "contactPage_messageLabel": "Message",
+    "contactPage_messagePlaceholder": "Enter your message here...",
+    "contactPage_messageErrorText": "This field cannot be empty.",
+    "contact": "Contact"
 }