From 907ccfa1003674f5ec490789f376dda569c6068e Mon Sep 17 00:00:00 2001
From: "luisa.bellitto" <luisa.bellitto@bluehands.de>
Date: Wed, 11 Jun 2025 16:47:38 +0200
Subject: [PATCH] add fonts and colors

---
 code/frontend/src/App.tsx    |  2 ++
 code/frontend/src/Footer.css |  7 +----
 code/frontend/src/Footer.tsx |  2 +-
 code/frontend/src/colors.css |  9 ++++++
 code/frontend/src/fonts.css  | 60 ++++++++++++++++++++++++++++++++++++
 code/frontend/src/header.css | 13 ++------
 6 files changed, 75 insertions(+), 18 deletions(-)
 create mode 100644 code/frontend/src/colors.css
 create mode 100644 code/frontend/src/fonts.css

diff --git a/code/frontend/src/App.tsx b/code/frontend/src/App.tsx
index 9508f53..3ef872b 100644
--- a/code/frontend/src/App.tsx
+++ b/code/frontend/src/App.tsx
@@ -1,6 +1,8 @@
 import React, { use } from 'react';
 import logo from './logo.svg';
 import './App.css';
+import './colors.css';
+import './fonts.css';
 import { useState, useEffect } from 'react';
 import LoginAndSignUpPage from './LoginAndSignUpPage';
 
diff --git a/code/frontend/src/Footer.css b/code/frontend/src/Footer.css
index 509daa8..3ae264b 100644
--- a/code/frontend/src/Footer.css
+++ b/code/frontend/src/Footer.css
@@ -1,8 +1,3 @@
-:root {
-  --Rotkehlchen-gray: #e7ecf2;
-  --Rotkehlchen-brown1: #a28d7a;
-  --Rotkehlchen-orange-default: #e79a0e;
-}
 
 /*mobile style first*/
 .footer {
@@ -29,7 +24,7 @@
   align-items: center;
   gap: 0.5rem;            /*Gap between icon and logo */
   text-decoration: none;  /*prevents constant underline*/
-  color: black;         
+  color: black;     
   font-weight: 500;
 }
 
diff --git a/code/frontend/src/Footer.tsx b/code/frontend/src/Footer.tsx
index 04c872e..555923a 100644
--- a/code/frontend/src/Footer.tsx
+++ b/code/frontend/src/Footer.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import "./Footer.css";
+import "./footer.css";
 
 function Footer() {
 
diff --git a/code/frontend/src/colors.css b/code/frontend/src/colors.css
new file mode 100644
index 0000000..e26274e
--- /dev/null
+++ b/code/frontend/src/colors.css
@@ -0,0 +1,9 @@
+:root {
+    --Rotkehlchen-gray: #e7ecf2;
+    --Rotkehlchen-brown-light: #a28d7a;
+    --Rotkehlchen-brown-middle: #7F6D6D;
+    --Rotkehlchen-brown-dark: #4C4141;
+    --Rotkehlchen-yellow: #FED640;
+    --Rotkehlchen-yellow-hover: #EAC22A;
+    --Rotkehlchen-orange-default: #e79a0e;
+  }
\ No newline at end of file
diff --git a/code/frontend/src/fonts.css b/code/frontend/src/fonts.css
new file mode 100644
index 0000000..3d5577b
--- /dev/null
+++ b/code/frontend/src/fonts.css
@@ -0,0 +1,60 @@
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 400;
+  src: url(../public/assets/fonts/Inter/static/Inter_24pt-Medium.ttf);
+  unicode-range: U+00-52F, U+1E00-1FFF, U+2200-22FF;
+}
+.title-h1 {
+  font-family: "Inter";
+  font-size: 2.5rem;
+  line-height: 130%;
+  letter-spacing: 3.2px;
+}
+
+.base-header-title {
+  font-family: "Lora";
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 40px;
+}
+
+@media (width >= 768px) {
+  .title-h1 {
+    font-size: 4rem;
+  }
+}
+
+h1 {
+  font-family: "Inter";
+}
+@font-face {
+  font-family: "Lora";
+  font-style: normal;
+  src: url(../public/assets/fonts/Lora/Lora-VariableFont_wght.ttf);
+}
+.body-l,
+.body-m {
+  font-family: "Lora";
+}
+.body-l {
+  font-size: 1.5rem;
+  line-height: 110%;
+  letter-spacing: 1.2px;
+}
+.body-m {
+  font-size: 1rem;
+  line-height: 100%;
+  letter-spacing: 0.8px;
+}
+.footer-link {
+  font-family: "Lora";
+  font-size: 1rem;
+  line-height: 100%;
+  letter-spacing: 0.8px;
+}
+
+p {
+  font-family: "Lora";
+}
diff --git a/code/frontend/src/header.css b/code/frontend/src/header.css
index 323028f..159bb51 100644
--- a/code/frontend/src/header.css
+++ b/code/frontend/src/header.css
@@ -1,9 +1,3 @@
-:root {
-  --Rotkehlchen-gray: #e7ecf2;
-  --Rotkehlchen-brown1: #a28d7a;
-  --Rotkehlchen-orange-default: #e79a0e;
-}
-
 .base-header {
   width: 100vw;
   display: flex;
@@ -11,7 +5,7 @@
   justify-content: space-between;
   align-items: center;
   flex-shrink: 0;
-  border-bottom: 3px solid var(--Rotkehlchen-brown1);
+  border-bottom: 3px solid var(--Rotkehlchen-brown-light);
   background: var(--Rotkehlchen-gray);
   position: fixed;
   top: 0;
@@ -24,12 +18,9 @@
   flex-direction: column;
   justify-content: center;
   flex-shrink: 0;
+
   color: var(--Rotkehlchen-orange-default);
   text-align: center;
-  font-size: 24px;
-  font-style: normal;
-  font-weight: 700;
-  line-height: 40px;
 }
 
 .base-header-icon {