Correctly apply CSS for recent RSS feed changes (#604)

* Button: Extend HTMLButton prop types
* Use className prop instad of styles
* Move style prop into scss file
This commit is contained in:
Christian Paul 2023-01-13 14:44:07 +01:00 committed by GitHub
parent 1e8a112a28
commit 46467ac810
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 14 additions and 6 deletions

1
changelog.d/604.bugfix Normal file
View File

@ -0,0 +1 @@
Correctly apply CSS for recent RSS feed changes.

View File

@ -1,3 +1,7 @@
.icon {
width: 48px;
}
.serviceCard {
display: grid !important;
grid-template-columns: 0.6fr 1fr 1fr;

View File

@ -4,7 +4,7 @@ import style from "./ServiceCard.module.scss";
export const ServiceCard: FunctionComponent<{serviceName: string, iconUrl: string, onConfigure: () => void}> = ({ serviceName, iconUrl, onConfigure }) => {
return <div className={`card ${style.serviceCard}`}>
<img style="width: 48px;" src={iconUrl} />
<img className={style.icon} src={iconUrl} />
<div>
<span>{serviceName}</span>
<button onClick={onConfigure}>Configure</button>

View File

@ -1,10 +1,14 @@
import { FunctionComponent, h } from "preact";
import style from "./Button.module.scss";
export const Button: FunctionComponent = (props: { [key: string]: unknown, intent?: string}) => {
interface ButtonProps extends h.JSX.HTMLAttributes<HTMLButtonElement> {
intent?: string;
}
export const Button: FunctionComponent = (props: ButtonProps) => {
let className = style.button;
if (props.intent === "remove") {
className += ` ${ style.remove}`;
className += ` ${style.remove}`;
}
return <button type="button" className={className} {...props} />;
}

View File

@ -16,12 +16,11 @@ const FeedRecentResults: FunctionComponent<{item: FeedResponseItem}> = ({ item }
<h3>Recent feed results</h3>
{!item.secrets.lastResults.length && <span>There have been no recent updates for this feed.</span>}
<ul>
{item.secrets.lastResults.map(item => <li styles={styles.resultListItem} key={item.timestamp}>
{item.secrets.lastResults.map(item => <li className={styles.resultListItem} key={item.timestamp}>
{new Date(item.timestamp).toLocaleString()}:
{item.ok && `✅ Successful fetch`}
{!item.ok && `⚠️ ${item.error}`}
</li>
)}
</li>)}
</ul>
</>;
}