MediaAttachmentGrid: remove css modules

src/timelines/MediaAttachmentGrid.tsx

@@ -10,8 +10,6 @@ import {
   createSignal,
   onCleanup,
 } from "solid-js";
-import { css } from "solid-styled";
-import tootStyle from "./toot.module.css";
 import MediaViewer from "./MediaViewer";
 import { render } from "solid-js/web";
 import {
@@ -21,6 +19,8 @@ import {
 import { useStore } from "@nanostores/solid";
 import { $settings } from "../settings/stores";
 import { averageColorHex } from "../platform/blurhash";
+import "./MediaAttachmentGrid.css";
+import cardStyle from "../material/cards.module.css";
 
 type ElementSize = { width: number; height: number };
 
@@ -114,13 +114,6 @@ const MediaAttachmentGrid: Component<{
       itemMaxSize(),
     );
 
-    // I don't know why mastodon does not return this
-    // and the condition for it to return this.
-    // Anyway, It is useless now.
-    // My hope is the FastAverageColor, but
-    // we may need better tool to manage the performance impact
-    // before using this. See #37.
-    // TODO: use fast average color to extract accent color
     const accentColor =
       item.meta?.colors?.accent ??
       (item.blurhash ? averageColorHex(item.blurhash) : undefined);
@@ -134,16 +127,11 @@ const MediaAttachmentGrid: Component<{
       accentColor ? { "--media-color-accent": accentColor } : {},
     );
   };
-
-  css`
-    .attachments {
-      column-count: ${columnCount().toString()};
-    }
-  `;
   return (
     <section
       ref={setRootRef}
-      class={[tootStyle.tootAttachmentGrp, "attachments"].join(" ")}
+      class={`MediaAttachmentGrid ${cardStyle.cardNoPad}`}
+      style={{ "column-count": columnCount() }}
       onClick={(e) => {
         if (e.target !== e.currentTarget) {
           e.stopImmediatePropagation();