From 46467ac8102ea5fd305a913cd45e0a2d3929deab Mon Sep 17 00:00:00 2001
From: Christian Paul <christianp@matrix.org>
Date: Fri, 13 Jan 2023 14:44:07 +0100
Subject: [PATCH] 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
---
 changelog.d/604.bugfix                    | 1 +
 web/components/ServiceCard.module.scss    | 4 ++++
 web/components/ServiceCard.tsx            | 2 +-
 web/components/elements/Button.tsx        | 8 ++++++--
 web/components/roomConfig/FeedsConfig.tsx | 5 ++---
 5 files changed, 14 insertions(+), 6 deletions(-)
 create mode 100644 changelog.d/604.bugfix

diff --git a/changelog.d/604.bugfix b/changelog.d/604.bugfix
new file mode 100644
index 00000000..07983231
--- /dev/null
+++ b/changelog.d/604.bugfix
@@ -0,0 +1 @@
+Correctly apply CSS for recent RSS feed changes.
diff --git a/web/components/ServiceCard.module.scss b/web/components/ServiceCard.module.scss
index 3e6bfd4c..ee17923e 100644
--- a/web/components/ServiceCard.module.scss
+++ b/web/components/ServiceCard.module.scss
@@ -1,3 +1,7 @@
+.icon {
+    width: 48px;
+}
+
 .serviceCard {
     display: grid !important;
     grid-template-columns: 0.6fr 1fr 1fr;
diff --git a/web/components/ServiceCard.tsx b/web/components/ServiceCard.tsx
index 9154e4a1..b24534bc 100644
--- a/web/components/ServiceCard.tsx
+++ b/web/components/ServiceCard.tsx
@@ -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>
diff --git a/web/components/elements/Button.tsx b/web/components/elements/Button.tsx
index f0f6e2f0..6f0c8738 100644
--- a/web/components/elements/Button.tsx
+++ b/web/components/elements/Button.tsx
@@ -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} />;
 } 
\ No newline at end of file
diff --git a/web/components/roomConfig/FeedsConfig.tsx b/web/components/roomConfig/FeedsConfig.tsx
index 1f0b183e..b2feaee2 100644
--- a/web/components/roomConfig/FeedsConfig.tsx
+++ b/web/components/roomConfig/FeedsConfig.tsx
@@ -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>
     </>;
 }