Merge pull request #302 from cloudflare/wrong-bg

various small ui tweaks/improvements

frontend/src/components/HtmlContent/HtmlContent.scss

@@ -0,0 +1,53 @@
+// Important: The rules present in this file apply to dynamic content
+// defined by the client (set using dangerouslySetInnerHTML)
+// (thus wee cannot rely on Tailwind for such content)
+
+.inner-html-content {
+	:global(a) {
+		text-decoration: none;
+		color: var(--wildebeest-vibrant-color-400);
+		&.mention {
+			color: var(--wildebeest-vibrant-color-200);
+		}
+		&.hashtag {
+			color: var(--wildebeest-vibrant-color-200);
+		}
+	}
+
+	:global(p) {
+		margin-bottom: theme('spacing.4');
+	}
+
+	:global(.invisible) {
+		font-size: 0;
+		line-height: 0;
+		display: inline-block;
+		width: 0;
+		height: 0;
+	}
+
+	:global(.ellipsis) {
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		overflow: hidden;
+		text-decoration: none;
+		display: inline-block;
+		vertical-align: middle;
+		max-width: 50%;
+
+		&:global(::after) {
+			content: '…';
+		}
+
+		@screen sm {
+			& {
+				display: inline;
+			}
+		}
+	}
+
+	:global(.status-link) {
+		color: var(--wildebeest-vibrant-color-200);
+		text-decoration: none;
+	}
+}

frontend/src/components/HtmlContent/HtmlContent.tsx

@@ -0,0 +1,10 @@
+import { component$, useStylesScoped$ } from '@builder.io/qwik'
+import styles from './HtmlContent.scss?inline'
+
+export const HtmlContent = component$<{
+	html: string
+}>(({ html }) => {
+	useStylesScoped$(styles)
+
+	return <div class="leading-normal inner-html-content" dangerouslySetInnerHTML={html} />
+})

frontend/src/components/Status/index.tsx

@@ -1,19 +1,18 @@
-import { component$, $, useStyles$ } from '@builder.io/qwik'
+import { component$, $ } from '@builder.io/qwik'
 import { Link, useNavigate } from '@builder.io/qwik-city'
 import { formatTimeAgo } from '~/utils/dateTime'
 import type { Account, MastodonStatus } from '~/types'
-import styles from '../../utils/innerHtmlContent.scss?inline'
 import { MediaGallery } from '../MediaGallery.tsx'
 import { useAccountUrl } from '~/utils/useAccountUrl'
 import { getDisplayNameElement } from '~/utils/getDisplayNameElement'
 import { StatusAccountCard } from '../StatusAccountCard/StatusAccountCard'
+import { HtmlContent } from '../HtmlContent/HtmlContent'
 
 type Props = {
 	status: MastodonStatus
 }
 
 export default component$((props: Props) => {
-	useStyles$(styles)
 	const nav = useNavigate()
 
 	const status = props.status.reblog ?? props.status
@@ -32,15 +31,13 @@ export default component$((props: Props) => {
 				<Link class="no-underline" href={statusUrl}>
 					<div class="text-wildebeest-500 flex items-baseline">
 						<i style={{ height: '0.75rem', width: '0.75rem' }} class="fa fa-xs fa-globe w-3 h-3" />
-						<span class="ml-2 text-sm hover:underline">{formatTimeAgo(new Date(status.created_at))}</span>
+						<span class="ml-2 text-sm hover:underline min-w-max">{formatTimeAgo(new Date(status.created_at))}</span>
 					</div>
 				</Link>
 			</div>
-			<div
-				onClick$={handleContentClick}
-				class="leading-relaxed inner-html-content cursor-pointer"
-				dangerouslySetInnerHTML={status.content}
-			/>
+			<div onClick$={handleContentClick} class="cursor-pointer">
+				<HtmlContent html={status.content} />
+			</div>
 
 			<MediaGallery medias={status.media_attachments} />
 

frontend/src/routes/(frontend)/[accountId]/[statusId]/index.tsx

@@ -1,4 +1,4 @@
-import { component$, Slot, useStyles$ } from '@builder.io/qwik'
+import { component$, Slot } from '@builder.io/qwik'
 import { MastodonStatus, StatusContext } from '~/types'
 import Status from '~/components/Status'
 import { formatDateTime } from '~/utils/dateTime'
@@ -9,10 +9,10 @@ import { DocumentHead, loader$ } from '@builder.io/qwik-city'
 import { MediaGallery } from '~/components/MediaGallery.tsx'
 import { getNotFoundHtml } from '~/utils/getNotFoundHtml/getNotFoundHtml'
 import { getErrorHtml } from '~/utils/getErrorHtml/getErrorHtml'
-import styles from '../../../../utils/innerHtmlContent.scss?inline'
 import { getTextContent } from 'wildebeest/backend/src/activitypub/objects'
 import { getDocumentHead } from '~/utils/getDocumentHead'
 import { StatusAccountCard } from '~/components/StatusAccountCard/StatusAccountCard'
+import { HtmlContent } from '~/components/HtmlContent/HtmlContent'
 
 export const statusLoader = loader$<
 	{ DATABASE: D1Database },
@@ -46,15 +46,16 @@ export const statusLoader = loader$<
 })
 
 export default component$(() => {
-	useStyles$(styles)
-
 	const loaderData = statusLoader.use().value
 
 	return (
 		<>
-			<div class="bg-wildebeest-700 p-4">
-				<StatusAccountCard subText="acct" status={loaderData.status} />
-				<div class="leading-normal inner-html-content text-lg" dangerouslySetInnerHTML={loaderData.status.content} />
+			<div class="p-4">
+				<div class="mb-3">
+					<StatusAccountCard subText="acct" status={loaderData.status} />
+				</div>
+
+				<HtmlContent html={loaderData.status.content} />
 
 				<MediaGallery medias={loaderData.status.media_attachments} />
 

frontend/src/routes/(frontend)/[accountId]/index.tsx

@@ -1,6 +1,5 @@
-import { $, component$, useStyles$ } from '@builder.io/qwik'
+import { $, component$ } from '@builder.io/qwik'
 import { loader$ } from '@builder.io/qwik-city'
-import styles from '../../../utils/innerHtmlContent.scss?inline'
 import { getErrorHtml } from '~/utils/getErrorHtml/getErrorHtml'
 import type { MastodonStatus } from '~/types'
 import { StatusesPanel } from '~/components/StatusesPanel/StatusesPanel'
@@ -35,8 +34,6 @@ export const statusesLoader = loader$<
 })
 
 export default component$(() => {
-	useStyles$(styles)
-
 	const { accountId, statuses } = statusesLoader.use().value
 
 	return (

frontend/src/utils/innerHtmlContent.scss

@@ -1,53 +0,0 @@
-// Important: The rules present in this file apply to dynamic content
-// defined by the client (set using dangerouslySetInnerHTML)
-// (thus wee cannot rely on Tailwind for such content)
-
-.inner-html-content {
-  a {
-    text-decoration: none;
-    color: var(--wildebeest-vibrant-color-400);
-  }
-  a.mention {
-    color: var(--wildebeest-vibrant-color-200);
-  }
-  a.hashtag {
-    color: var(--wildebeest-vibrant-color-200);
-  }
-
-  p {
-    margin-bottom: theme('spacing.4');
-  }
-
-  .invisible {
-    font-size: 0;
-    line-height: 0;
-    display: inline-block;
-    width: 0;
-    height: 0;
-  }
-
-  .ellipsis {
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-    text-decoration: none;
-    display: inline-block;
-    vertical-align: middle;
-    max-width: 50%;
-  }
-
-  .ellipsis::after {
-    content: "…";
-  }
-
-  @screen sm {
-    .ellipsis {
-      display: inline;
-    }
-  }
-
-  .status-link {
-    color: var(--wildebeest-vibrant-color-200);
-    text-decoration: none;
-  }
-}