md.asif5/osaka
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

changed some styles

Browse Source
This commit is contained in:
Md Asif 2024-11-22 15:03:08 +05:30
parent 6f1ec668cc
commit ae1a3de159
5 changed files with 6 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package-lock.json generated
View File

@ -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"
}

2
src/App.jsx
View File

@ -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 />

2
src/components/FormBox.jsx
View File

@ -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>
);

2
src/components/Header.jsx
View File

@ -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 />

6
src/pages/Home.jsx
View File

@ -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>