varianter · yelodevopsi · Oct 10, 2023 · Oct 9, 2023 · Oct 9, 2023 · Oct 9, 2023
diff --git a/frontend/package.json b/frontend/package.json
@@ -18,12 +18,15 @@
     "@types/node": "20.5.9",
     "@types/react": "18.2.21",
     "@types/react-dom": "18.2.7",
+    "autoprefixer": "^10.4.16",
     "eslint": "8.48.0",
     "eslint-config-next": "^13.5.2",
     "next": "^13.5.2",
+    "postcss": "^8.4.31",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-query": "^3.39.3",
+    "tailwindcss": "^3.3.3",
     "typescript": "5.2.2"
   },
   "devDependencies": {

diff --git a/frontend/postcss.config.js b/frontend/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/frontend/public/fonts/Graphik-Bold-Web.woff2 b/frontend/public/fonts/Graphik-Bold-Web.woff2
diff --git a/frontend/public/fonts/Graphik-Medium-Web.woff2 b/frontend/public/fonts/Graphik-Medium-Web.woff2
diff --git a/frontend/public/fonts/Graphik-Regular-Web.woff2 b/frontend/public/fonts/Graphik-Regular-Web.woff2
diff --git a/frontend/public/fonts/Graphik-Semibold-Web.woff2 b/frontend/public/fonts/Graphik-Semibold-Web.woff2
diff --git a/frontend/public/fonts/recoleta-medium.woff b/frontend/public/fonts/recoleta-medium.woff
diff --git a/frontend/public/fonts/recoleta-regular.woff b/frontend/public/fonts/recoleta-regular.woff
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
@@ -1,18 +1,102 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 @font-face {
-  font-family: "Graphik-Medium";
-  src: url("https://anima-uploads.s3.amazonaws.com/projects/632da9fa4f45dc45af16fa8d/fonts/graphik-medium.otf")
-    format("opentype");
+  font-family: "Recoleta-Regular";
+  src: url(../../public/fonts/recoleta-regular.woff) format("truetype");
+}
+
+@font-face {
+  font-family: "Recoleta-Medium";
+  src: url(../../public/fonts/recoleta-medium.woff) format("truetype");
 }
 
 @font-face {
   font-family: "Graphik-Regular";
-  src: url("https://anima-uploads.s3.amazonaws.com/projects/632da9fa4f45dc45af16fa8d/fonts/graphik-regular.otf")
-    format("opentype");
+  src: url(../../public/fonts/Graphik-Regular-Web.woff2) format("truetype");
+}
+
+@font-face {
+  font-family: "Graphik-Medium";
+  src: url(../../public/fonts/Graphik-Medium-Web.woff2) format("truetype");
 }
 
-/* TODO: Fix CSP or remove completely */
 @font-face {
-  font-family: "Arial-Bold";
-  src: url("https://anima-uploads.s3.amazonaws.com/projects/622cf300b3519bff6181cd8f/fonts/fontsfree-net-arial-bold.ttf")
-    format("truetype");
-}
+  font-family: "Graphik-Semibold";
+  src: url(../../public/fonts/Graphik-Semibold-Web.woff2) format("truetype");
+}
+
+@font-face {
+  font-family: "Graphik-Bold";
+  src: url(../../public/fonts/Graphik-Bold-Web.woff2) format("truetype");
+}
+
+@layer components {
+}
+
+@layer utilities {
+  body {
+    background-color: #ffffff;
+  }
+
+  h1 {
+    font-size: 2rem;
+    font-family: "Recoletta-Regular";
+    line-height: 2.5rem;
+  }
+
+  h2 {
+    font-size: 1.625rem;
+    font-family: "Graphik-Regular";
+    line-height: 2.5rem;
+  }
+
+  h3 {
+    font-size: 1.25rem;
+    font-family: "Graphik-Regular";
+    line-height: 2.5rem;
+  }
+
+  .body {
+    font-size: 0.9rem;
+    font-family: "Graphik-Regular";
+    line-height: 1rem;
+  }
+
+  .body-bold {
+    font-size: 0.9rem;
+    font-family: "Graphik-SemiBold";
+    line-height: 1rem;
+  }
+
+  .body-small {
+    font-size: 0.75rem;
+    font-family: "Graphik-Regular";
+    line-height: 1rem;
+  }
+
+  .body-small-bold {
+    font-size: 0.75rem;
+    font-family: "Graphik-Medium";
+    line-height: 1rem;
+  }
+
+  .detail {
+    font-size: 0.625rem;
+    font-family: "Graphik-Regular";
+    line-height: 1rem;
+  }
+
+  .body-large {
+    font-size: 1rem;
+    font-family: "Graphik-Regular";
+    line-height: 1.25rem;
+  }
+
+  .body-large-bold {
+    font-size: 1rem;
+    font-family: "Graphik-Medium";
+    line-height: 1.25rem;
+  }
+}
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
@@ -1,19 +1,24 @@
-import Head from 'next/head';
-import AppProviders from '../components/AppProviders';
-
-export default function RootLayout({ children }: { children: React.ReactNode }) {
-    return (
-        <html>
-            <Head>
-                <title>Vibes Frontend</title>
-                <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
-            </Head>
-            <body>
-                <AppProviders> {children}</AppProviders>
-            </body>
-        </html>
-    );
+import "./globals.css";
+import Head from "next/head";
+import AppProviders from "../components/AppProviders";
 
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html>
+      <Head>
+        <title>Vibes Frontend</title>
+        <meta
+          name="viewport"
+          content="minimum-scale=1, initial-scale=1, width=device-width"
+        />
+      </Head>
+      <body>
+        <AppProviders> {children}</AppProviders>
+      </body>
+    </html>
+  );
 }
-
-
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
@@ -0,0 +1,22 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./src/**/*.{js,jsx,ts,tsx}"],
+  theme: {
+    colors: {
+      black: "#000000",
+      white: "#FFFFFF",
+      primary_default: "#423D89",
+      primary_l3: "#ECECF3",
+      secondary_default: "#F076A6",
+    },
+    extend: {},
+    screens: {
+      xs: "640px",
+      sm: "768px",
+      md: "1024px",
+      lg: "1280px",
+      xl: "1400px",
+    },
+  },
+  plugins: [],
+};