Skip to content

Commit

Permalink
Implementation of a dark colour mode for main page customisation
Browse files Browse the repository at this point in the history
  • Loading branch information
@dafengzhen
dafengzhen committed Mar 26, 2024
1 parent 70132cb commit e14cd2d
Show file tree
Hide file tree
Showing 35 changed files with 480 additions and 265 deletions.
2 changes: 1 addition & 1 deletion web/app/[locale]/admin/admin.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ export default function Admin({
<div className="col">
<div className="card rounded-2">
<div className="card-header bg-transparent border-bottom-0">
<div className="fw-bold">
<div className="fw-bold text-body-secondary">
{t('common.userRegistrationStatisticsForTheLast15Days')}
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions web/app/[locale]/admin/my-admin.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,13 +59,13 @@ export default function MyAdmin({
<div className="flex-grow-1 d-flex flex-column justify-content-around">
<div className="text-break">
<Link
className="text-break link-dark link-underline-opacity-0 link-underline-opacity-100-hover link-offset-2"
className="text-break link-body-emphasis link-underline-opacity-0 link-underline-opacity-100-hover link-offset-2"
href={id ? `/users/${id}` : '/users'}
>
{alias}
</Link>
</div>
{id && <div>{`ID. ${id}`}</div>}
{id && <div className="text-body-secondary">{`ID. ${id}`}</div>}
</div>
</>
)}
Expand Down
1 change: 1 addition & 0 deletions web/app/[locale]/admin/navbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,7 @@ export default function Navbar({
: styles.itemHover,
{
'link-info': selectedMenu?.id === item.id,
'link-body-emphasis': selectedMenu?.id !== item.id,
},
)}
>
Expand Down
4 changes: 2 additions & 2 deletions web/app/[locale]/admin/section-groups/create.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,8 +96,8 @@ export default function Create() {
className="btn btn-success"
>
{createSectionGroupActionMutation.isPending
? t('common.updating')
: t('common.update')}
? t('common.creating')
: t('common.create')}
</button>
<AccessDeniedAlert />
</div>
Expand Down
3 changes: 2 additions & 1 deletion web/app/[locale]/admin/submenu-navbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export default function SubmenuNavbar() {
styles.boxMarginLeft,
)}
>
<div className="d-flex flex-column gap-4">
<div className="d-flex flex-column gap-4 btn-primary">
<MyAdmin hidden={true} />

{(selectedMenu?.submenus ?? []).map((item, index) => {
Expand All @@ -51,6 +51,7 @@ export default function SubmenuNavbar() {
: styles.itemHover,
{
'link-info': selectedSubmenu?.id === item.id,
'link-body-emphasis': selectedSubmenu?.id !== item.id,
},
)}
>
Expand Down
6 changes: 3 additions & 3 deletions web/app/[locale]/footer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,14 @@ export default async function Footer({ locale }: { locale: string }) {
return (
<footer className="p-4 mt-4">
<aside>
<p className="text-center">
<p className="text-center text-body-secondary">
{t.rich('common.footerFormText', {
name: (chunks) => (
<Link
href="https://www.youdeyiwu.com"
target="_blank"
rel="noreferrer"
className="link-offset-2 link-dark link-underline-opacity-25 link-underline-opacity-100-hover"
className="link-offset-2 text-body-secondary link-underline-opacity-25 link-underline-opacity-100-hover"
>
{chunks}
</Link>
Expand All @@ -24,7 +24,7 @@ export default async function Footer({ locale }: { locale: string }) {
href="https://github.com/dafengzhen/youdeyiwu"
target="_blank"
rel="noreferrer"
className="link-offset-2 link-dark link-underline-opacity-25 link-underline-opacity-100-hover"
className="link-offset-2 text-body-secondary link-underline-opacity-25 link-underline-opacity-100-hover"
>
{chunks}
</Link>
Expand Down
5 changes: 4 additions & 1 deletion web/app/[locale]/home/load-more.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,10 @@ export default function LoadMore({
<button
onClick={onCLickLoadMore}
type="button"
className={clsx('btn btn-sm btn-hover rounded-pill', className)}
className={clsx(
'btn btn-sm btn-hover text-body-secondary rounded-pill',
className,
)}
title="Load more"
>
{isLoading ? t('common.loading') : t('common.loadMore')}
Expand Down
15 changes: 9 additions & 6 deletions web/app/[locale]/home/posts.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,8 +115,8 @@ export default function Posts({
const avatar = user?.avatar;

return (
<div key={item.id} className="card border-0 shadow-sm shadow-hover">
<div className="card-header bg-transparent border-bottom-0 fw-bold">
<div key={item.id} className="card yw-card shadow-sm shadow-hover">
<div className="card-header yw-card-header fw-bold">
<div className="d-flex align-items-center gap-4 justify-content-between">
<Link
className="link-body-emphasis link-offset-2 link-underline-opacity-0 link-underline-opacity-100-hover"
Expand All @@ -127,7 +127,7 @@ export default function Posts({
</Link>

{item.reviewState !== 'APPROVED' && (
<div className="badge rounded-pill text-bg-dark text-capitalize">
<div className="badge rounded-pill text-bg-secondary text-capitalize">
{convertToCamelCase(item.reviewState)}
</div>
)}
Expand All @@ -136,7 +136,7 @@ export default function Posts({
<div className="card-body d-flex flex-column gap-3 py-2">
{item.overview && (
<Link
className="line-clamp-3 link-dark text-decoration-none"
className="line-clamp-3 card-text text-reset text-decoration-none"
href={`/posts/${item.id}`}
scroll={false}
>
Expand All @@ -162,12 +162,15 @@ export default function Posts({
</div>
<div className="d-flex flex-column justify-content-around flex-shrink-0 small">
<Link
className="fw-medium text-truncate link-dark link-underline-opacity-0 link-underline-opacity-100-hover link-offset-2"
className="fw-medium text-truncate link-body-emphasis link-underline-opacity-0 link-underline-opacity-100-hover link-offset-2"
href={user ? `/users/${user.id}` : '/users'}
>
{getUserAlias(user)}
</Link>
<time dateTime={item.createdOn} className="fw-normal">
<time
dateTime={item.createdOn}
className="fw-normal text-body-secondary"
>
{item.createdOnText}
</time>
</div>
Expand Down
104 changes: 50 additions & 54 deletions web/app/[locale]/home/related-actions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,73 +11,69 @@ export default function RelatedActions({
const t = useTranslations();

return (
<div className="card border-0 shadow-sm">
<div className="card-header bg-transparent border-bottom-0 fw-bold">
<div className="card yw-card shadow-sm shadow-hover">
<div className="card-header yw-card-header fw-bold">
{t('common.relatedActions')}
</div>
<div className="card-body p-0">
<div className="card border-0">
<div className="card-body py-2">
<div className="d-flex flex-column gap-2">
<div className="card-body">
<div className="d-flex flex-column gap-2">
<Link
href="/posts/new"
className="btn rounded-2 btn-primary w-100 d-flex justify-content-center"
>
<div
className="text-start flex-shrink-0 text-truncate"
style={{ width: 140 }}
>
<i className="bi bi-pen me-2"></i>
{t('common.createArticle')}
</div>
</Link>

{editPostId && (
<Link
href={`/posts/${editPostId}/edit`}
className="btn rounded-2 btn-primary w-100 d-flex justify-content-center"
>
<div
className="text-start flex-shrink-0 text-truncate"
style={{ width: 140 }}
>
<i className="bi bi-pencil-square me-2"></i>
{t('common.editArticle')}
</div>
</Link>
)}

{!isLogin && (
<>
<Link
href="/posts/new"
href="/login"
className="btn rounded-2 btn-primary w-100 d-flex justify-content-center"
>
<div
className="text-start flex-shrink-0 text-truncate"
style={{ width: 140 }}
>
<i className="bi bi-pen me-2"></i>
{t('common.createArticle')}
<i className="bi bi-person me-2"></i>
{t('common.loginNow')}
</div>
</Link>

{editPostId && (
<Link
href={`/posts/${editPostId}/edit`}
className="btn rounded-2 btn-primary w-100 d-flex justify-content-center"
<Link
href="/register"
className="btn rounded-2 btn-primary w-100 d-flex justify-content-center"
>
<div
className="text-start flex-shrink-0 text-truncate"
style={{ width: 140 }}
>
<div
className="text-start flex-shrink-0 text-truncate"
style={{ width: 140 }}
>
<i className="bi bi-pencil-square me-2"></i>
{t('common.editArticle')}
</div>
</Link>
)}

{!isLogin && (
<>
<Link
href="/login"
className="btn rounded-2 btn-primary w-100 d-flex justify-content-center"
>
<div
className="text-start flex-shrink-0 text-truncate"
style={{ width: 140 }}
>
<i className="bi bi-person me-2"></i>
{t('common.loginNow')}
</div>
</Link>

<Link
href="/register"
className="btn rounded-2 btn-primary w-100 d-flex justify-content-center"
>
<div
className="text-start flex-shrink-0 text-truncate"
style={{ width: 140 }}
>
<i className="bi bi-person-add me-2"></i>
{t('common.quickRegister')}
</div>
</Link>
</>
)}
</div>
</div>
<i className="bi bi-person-add me-2"></i>
{t('common.quickRegister')}
</div>
</Link>
</>
)}
</div>
</div>
</div>
Expand Down
22 changes: 12 additions & 10 deletions web/app/[locale]/home/related-posts.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@ export default function RelatedPosts({
return (
<>
{randomData.length > 0 && (
<div className="card border-0 shadow-sm shadow-hover">
<div className="card-header bg-transparent border-bottom-0 fw-bold">
<div className="card yw-card shadow-sm shadow-hover">
<div className="card-header yw-card-header fw-bold">
{t('common.relatedArticles')}
</div>
<div className="card-body p-0">
Expand All @@ -24,15 +24,17 @@ export default function RelatedPosts({
key={item.id}
className="card border-0 cursor-pointer card-hover"
>
<Link
className="link-body-emphasis text-decoration-none"
href={`/posts/${item.id}`}
scroll={false}
>
<div className="card-body py-2">
<div className="line-clamp-2">{item.name}</div>
<div className="card-body py-2">
<div className="line-clamp-2">
<Link
className="link-body-emphasis text-decoration-none"
href={`/posts/${item.id}`}
scroll={false}
>
{item.name}
</Link>
</div>
</Link>
</div>
</div>
);
})}
Expand Down
38 changes: 20 additions & 18 deletions web/app/[locale]/home/section-groups.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,8 @@ export default function SectionGroups({
}

return (
<div className="card border-0 shadow-sm shadow-hover">
<div className="card-header bg-transparent border-bottom-0 fw-bold">
<div className="card yw-card shadow-sm shadow-hover">
<div className="card-header yw-card-header fw-bold">
{t('common.categories')}
</div>
<div className="card-body p-0">
Expand All @@ -45,24 +45,26 @@ export default function SectionGroups({
key={item.id}
className="card border-0 cursor-pointer card-hover"
>
<Link
onClick={(event) => onClickLink(item, event)}
className={clsx(
'text-decoration-none',
item.id === currentSectionGroupId
? 'link-primary'
: 'link-body-emphasis',
)}
href={`/?sgid=${item.id}`}
scroll={false}
>
<div className="card-body py-2">
<div className="d-flex align-items-center gap-2">
<i className="bi bi-journals fs-5"></i>
<div className="line-clamp-2">{item.name}</div>
<div className="card-body py-2">
<div className="d-flex align-items-center gap-2">
<i className="bi bi-journals"></i>
<div className="line-clamp-2">
<Link
onClick={(event) => onClickLink(item, event)}
className={clsx(
'text-decoration-none',
item.id === currentSectionGroupId
? 'link-primary'
: 'link-body-emphasis',
)}
href={`/?sgid=${item.id}`}
scroll={false}
>
{item.name}
</Link>
</div>
</div>
</Link>
</div>
</div>
);
})}
Expand Down
Loading

0 comments on commit e14cd2d

Please sign in to comment.