refactor: remove calendar icon from publication date

- Remove calendar icon (faCalendar) from publication date display
- Display only the formatted date text
- Remove icon-specific CSS styling (gap, svg styles)
- Cleaner, more minimal date display in top-right corner
This commit is contained in:
Gigi
2025-10-09 15:57:38 +01:00
parent 24c0889e9f
commit 2105dfe3f6
2 changed files with 3 additions and 16 deletions

View File

@@ -1,6 +1,6 @@
import React from 'react' import React from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faHighlighter, faClock, faCalendar } from '@fortawesome/free-solid-svg-icons' import { faHighlighter, faClock } from '@fortawesome/free-solid-svg-icons'
import { format } from 'date-fns' import { format } from 'date-fns'
interface ReaderHeaderProps { interface ReaderHeaderProps {
@@ -29,8 +29,7 @@ const ReaderHeader: React.FC<ReaderHeaderProps> = ({
<img src={image} alt={title || 'Article image'} /> <img src={image} alt={title || 'Article image'} />
{formattedDate && ( {formattedDate && (
<div className="publish-date-topright"> <div className="publish-date-topright">
<FontAwesomeIcon icon={faCalendar} /> {formattedDate}
<span>{formattedDate}</span>
</div> </div>
)} )}
{title && ( {title && (
@@ -63,8 +62,7 @@ const ReaderHeader: React.FC<ReaderHeaderProps> = ({
<div className="reader-header"> <div className="reader-header">
{formattedDate && ( {formattedDate && (
<div className="publish-date-topright"> <div className="publish-date-topright">
<FontAwesomeIcon icon={faCalendar} /> {formattedDate}
<span>{formattedDate}</span>
</div> </div>
)} )}
<h2 className="reader-title">{title}</h2> <h2 className="reader-title">{title}</h2>

View File

@@ -543,24 +543,13 @@ body {
position: absolute; position: absolute;
top: 1rem; top: 1rem;
right: 1rem; right: 1rem;
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.813rem; font-size: 0.813rem;
color: #fff; color: #fff;
padding: 0.4rem 0.75rem; padding: 0.4rem 0.75rem;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 6px;
z-index: 10; z-index: 10;
} }
.publish-date-topright svg {
font-size: 0.75rem;
opacity: 0.9;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}
.reading-time { .reading-time {
display: flex; display: flex;
align-items: center; align-items: center;