From 0b4692116b7ed1a0dc61778e25dafb8a8ba01e19 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?B=C3=A1lint=20Berente?=
 <30603208+berenteb@users.noreply.github.com>
Date: Sat, 16 Dec 2023 18:10:45 +0100
Subject: [PATCH 1/2] fix: fonts sizes

---
 src/app/conferences/page.tsx | 2 +-
 src/app/contact/page.tsx     | 4 ++--
 src/app/globals.css          | 6 +++++-
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/app/conferences/page.tsx b/src/app/conferences/page.tsx
index 5e74c0c..977432a 100644
--- a/src/app/conferences/page.tsx
+++ b/src/app/conferences/page.tsx
@@ -5,7 +5,7 @@ import { FaExternalLinkAlt } from 'react-icons/fa';
 export default function Conferences() {
   return (
     <div className='flex flex-col'>
-      <p className='text-4xl font-bold mb-20 text-center'>Tekintsd meg korábbi konferenciáinkat:</p>
+      <h2 className='mb-20 text-center'>Tekintsd meg korábbi konferenciáinkat:</h2>
       <div className='flex justify-between flex-col md:flex-row gap-10'>
         <Link href='https://2023.konferencia.simonyi.bme.hu' target='blank'>
           <div className='flex flex-col justify-center items-center'>
diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index 22c387e..0f919b8 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -3,10 +3,10 @@ import Link from 'next/link';
 export default function Contact() {
   return (
     <div className='flex flex-col'>
-      <p className='text-4xl font-bold mb-20 text-center'>Vállalati és sajtómegkeresések, általános kérdések:</p>
+      <h2 className=' mb-20 text-center'>Vállalati és sajtómegkeresések, általános kérdések:</h2>
       <Link
         href='mailto:konferencia@simonyi.bme.hu'
-        className='text-3xl font-semibold text-center hover:text-brand'
+        className='text-xl sm:text-2xl md:text-3xl font-semibold text-center hover:text-brand'
         target='blank'
       >
         konferencia@simonyi.bme.hu
diff --git a/src/app/globals.css b/src/app/globals.css
index 4ead5bb..3916cdc 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -10,7 +10,11 @@ img {
 }
 
 h1 {
-  @apply text-4xl font-bold;
+  @apply text-3xl sm:text-4xl md:text-5xl font-bold;
+}
+
+h2 {
+  @apply text-2xl sm:text-3xl md:text-4xl font-bold;
 }
 
 .brand-link:hover {

From e4543606973934b2be8972de266e4d5f3b7c7ba0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?B=C3=A1lint=20Berente?=
 <30603208+berenteb@users.noreply.github.com>
Date: Sat, 16 Dec 2023 18:27:20 +0100
Subject: [PATCH 2/2] feat: custom checkbox

---
 src/components/checkbox.tsx                   | 25 +++++++++++++++++++
 .../newsletter/newsletter-modals.tsx          |  7 +++---
 2 files changed, 28 insertions(+), 4 deletions(-)
 create mode 100644 src/components/checkbox.tsx

diff --git a/src/components/checkbox.tsx b/src/components/checkbox.tsx
new file mode 100644
index 0000000..5615336
--- /dev/null
+++ b/src/components/checkbox.tsx
@@ -0,0 +1,25 @@
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { TbCheck } from 'react-icons/tb';
+
+interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label: string;
+}
+
+export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(({ label, className, ...rest }, ref) => {
+  ref = ref as React.MutableRefObject<HTMLInputElement>;
+  const id = rest.id || Math.random().toString(36);
+  return (
+    <label htmlFor={id} className={clsx('gap-3 flex cursor-pointer', className)}>
+      <input id={id} hidden type='checkbox' ref={ref} {...rest} />
+      <div
+        className={clsx('h-5 w-5 flex-shrink-0 border-white border-2 rounded-md flex items-center justify-center', {
+          'bg-white text-black': rest.checked,
+        })}
+      >
+        {rest.checked && <TbCheck />}
+      </div>
+      {label}
+    </label>
+  );
+});
diff --git a/src/components/newsletter/newsletter-modals.tsx b/src/components/newsletter/newsletter-modals.tsx
index ee2c511..bc6ee72 100644
--- a/src/components/newsletter/newsletter-modals.tsx
+++ b/src/components/newsletter/newsletter-modals.tsx
@@ -5,6 +5,7 @@ import { useState } from 'react';
 import { FaCheckCircle, FaTimes } from 'react-icons/fa';
 
 import { addToGroup } from '@/app/actions';
+import { Checkbox } from '@/components/checkbox';
 
 import { WhiteButton } from '../white-button';
 
@@ -66,16 +67,14 @@ export function NewsletterModals() {
                 hírlevelünkre!
               </p>
               <div>
-                <input
+                <Checkbox
                   className='mr-2'
                   type='checkbox'
                   id='accept'
                   checked={accepted}
+                  label='Beleegyezem, hogy a konferenciáig havonta maximum két emailt fogok kapni az alábbi email címre.'
                   onChange={(e) => setAccepted(e.target.checked)}
                 />
-                <label htmlFor='accept'>
-                  Beleegyezem, hogy a konferenciáig havonta maximum két emailt fogok kapni az alábbi email címre.
-                </label>
               </div>
 
               <input