From ae1a3de1596f600ea210097144667457304bb37c Mon Sep 17 00:00:00 2001
From: asif <md.asif5@tcs.com>
Date: Fri, 22 Nov 2024 15:03:08 +0530
Subject: [PATCH] changed some styles

---
 package-lock.json          | 1 -
 src/App.jsx                | 2 +-
 src/components/FormBox.jsx | 2 +-
 src/components/Header.jsx  | 2 +-
 src/pages/Home.jsx         | 6 +++---
 5 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index a922a97..1510e09 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1912,7 +1912,6 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
       "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
-      "license": "MIT",
       "engines": {
         "node": ">=6"
       }
diff --git a/src/App.jsx b/src/App.jsx
index 5c67cac..998b89e 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -5,7 +5,7 @@ import Footer from "./components/Footer"
 function App() {
   return <div className="flex flex-col min-h-screen">
     <Header />
-    <main className="flex transition-color-mode p-12 flex-grow bg-surface dark:bg-surface-dark">
+    <main className="flex transition-color-mode md:p-7 2xl:p-12 flex-grow bg-surface dark:bg-surface-dark">
       <Outlet />
     </main>
     <Footer />
diff --git a/src/components/FormBox.jsx b/src/components/FormBox.jsx
index 59a873d..1405774 100644
--- a/src/components/FormBox.jsx
+++ b/src/components/FormBox.jsx
@@ -4,7 +4,7 @@ import clsx from 'clsx';
 function FormBox({title, children, alt = false}) {
   return (
     <div className={clsx(alt ? 'bg-secondary-variant dark:bg-secondary-variant-dark border-secondary-variant dark:border-secondary-variant-dark' : 'bg-surface-variant dark:bg-surface-variant-dark', 'transition-color-mode font-body border-secondary dark:border-secondary-dark border-2 p-4 rounded-3xl relative h-full')}>
-        <label className={clsx( alt && 'bg-surface dark:bg-surface-dark border-3 border-secondary-variant dark:border-secondary-variant-dark', 'font-body absolute left-11 -top-4 bg-secondary dark:bg-secondary-dark text-primary dark:text-primary-dark font-medium py-1 px-4 rounded-full')}>{title}</label>
+        <span className={clsx( alt && 'bg-surface dark:bg-surface-dark border-3 border-secondary-variant dark:border-secondary-variant-dark', 'font-body absolute left-11 -top-4 bg-secondary dark:bg-secondary-dark text-primary dark:text-primary-dark font-medium py-1 px-6 rounded-full')}>{title}</span>
       {children}
     </div>
   );
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index d82aff9..6529eb0 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -42,7 +42,7 @@ function Header() {
       ];
     
     return (
-        <div className="transition-color-mode px-12 bg-secondary dark:bg-secondary-dark text-primary dark:text-primary-dark">
+        <div className="transition-color-mode px-7 2xl-px-12 bg-secondary dark:bg-secondary-dark text-primary dark:text-primary-dark">
             <AppTitle />
             <BannerInfo info={userInfo} />
             <Separator />
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index e289ffe..7edc3a6 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -15,7 +15,7 @@ function Home() {
           <FormBox title={t('holidayList')} alt={true}>
             <ul className="list-inside list-disc px-4">
               {holidayList.map((holiday, index) => (
-                <li key={index} className="font-body py-2 text-surface dark:text-surface-dark text-lg/loose">{t(holiday.date)} - {t(holiday.name)}</li>
+                <li key={index} className="font-body 2xl:py-2 text-surface dark:text-surface-dark text-lg/loose">{t(holiday.date)} - {t(holiday.name)}</li>
               ))}
             </ul>
           </FormBox>
@@ -25,7 +25,7 @@ function Home() {
             <ul className="list-inside list-disc px-4">
               {
                 Object.keys(userInformation).map((key, index) => (
-                  <li key={index} className="font-body py-2 text-surface-dark dark:text-surface text-lg/loose">{t(key)}: {t(userInformation[key])}</li>
+                  <li key={index} className="font-body 2xl:py-2 text-surface-dark dark:text-surface text-lg/loose">{t(key)}: {t(userInformation[key])}</li>
                 ))
               }
             </ul>
@@ -37,7 +37,7 @@ function Home() {
           <FormBox title={t('notifications')}>
             <ul className="list-inside list-disc px-4">
               {homePageNotifications.map((notification, index) => (
-                <li key={index} className="font-body py-2 text-surface-dark dark:text-surface text-lg/relaxed">{t(notification)}</li>
+                <li key={index} className="font-body py-1 2xl:py-2 text-surface-dark dark:text-surface text-lg/relaxed">{t(notification)}</li>
               ))}
             </ul>
           </FormBox>