fix #32: remove rest css modules

src/timelines/RegularToot.tsx

@@ -13,7 +13,6 @@ import { Body2 } from "~material/typography.js";
 import { useTimeSource } from "~platform/timesrc.js";
 import { resolveCustomEmoji } from "../masto/toot.js";
 import { Divider } from "@suid/material";
-import cardStyle from "~material/cards.module.css";
 import MediaAttachmentGrid from "./toots/MediaAttachmentGrid.jsx";
 import { makeAcctText, useDefaultSession } from "../masto/clients";
 import TootContent from "./toots/TootContent";
@@ -25,6 +24,7 @@ import TootAuthorGroup from "./toots/TootAuthorGroup.js";
 import "./RegularToot.css";
 import { vibrate } from "~platform/hardware.js";
 import { Transition } from "solid-transition-group";
+import "~material/cards.css";
 
 export type TootEnv = {
   boost: (value: mastodon.v1.Status) => void;
@@ -251,6 +251,7 @@ const RegularToot: Component<RegularTootProps> = (oprops) => {
       <article
         classList={{
           RegularToot: true,
+          "card": true,
           expanded: props.evaluated,
           "thread-top": props.thread === "top",
           "thread-mid": props.thread === "middle",
@@ -262,7 +263,7 @@ const RegularToot: Component<RegularTootProps> = (oprops) => {
         {...rest}
       >
         <Show when={!!status().reblog}>
-          <div class="retoot-grp">
+          <div class="retoot-grp card-gut card-pad">
             <BoostIcon />
             <Body2
               innerHTML={resolveCustomEmoji(
@@ -284,7 +285,6 @@ const RegularToot: Component<RegularTootProps> = (oprops) => {
           source={toot().content}
           emojis={toot().emojis}
           mentions={toot().mentions}
-          class={cardStyle.cardNoPad}
           sensitive={toot().sensitive}
           spoilerText={toot().spoilerText}
           reveal={reveal()}
@@ -308,7 +308,6 @@ const RegularToot: Component<RegularTootProps> = (oprops) => {
         </Show>
         {props.actionable && (
           <Divider
-            class={cardStyle.cardNoPad}
             style={{ "margin-top": "8px" }}
           />
         )}
@@ -319,7 +318,7 @@ const RegularToot: Component<RegularTootProps> = (oprops) => {
           }}
         >
           <Show when={props.actionable}>
-            <TootActionGroup value={status()} class={cardStyle.cardGutSkip} />
+            <TootActionGroup value={status()} />
           </Show>
         </Transition>
       </article>

src/timelines/TootBottomSheet.tsx

@@ -10,7 +10,6 @@ import RegularToot, {
   findElementActionable,
   TootEnvProvider,
 } from "./RegularToot";
-import cards from "~material/cards.module.css";
 import { css } from "solid-styled";
 import { createTimeSource, TimeSourceProvider } from "~platform/timesrc";
 import TootComposer from "./TootComposer";
@@ -177,7 +176,6 @@ const TootBottomSheet: Component = (props) => {
               <TootEnvProvider value={mainTootEnv}>
                 <RegularToot
                   id={`toot-${toot()!.id}`}
-                  class={cards.card}
                   style={{
                     "scroll-margin-top":
                       "calc(var(--scaffold-topbar-height) + 20px)",

src/timelines/TootComposer.tsx

@@ -1,7 +1,6 @@
 import {
   createEffect,
   createMemo,
-  createRenderEffect,
   createSignal,
   Show,
   type Accessor,
@@ -39,14 +38,13 @@ import {
   Close,
   MoreVert,
 } from "@suid/icons-material";
-import type { Account } from "../accounts/stores";
 import "./TootComposer.css";
 import BottomSheet from "~material/BottomSheet";
 import { useAppLocale } from "~platform/i18n";
 import iso639_1 from "iso-639-1";
 import ChooseTootLang from "./TootLangPicker";
 import type { mastodon } from "masto";
-import cardStyles from "~material/cards.module.css";
+import "~material/cards.css";
 import Menu, { createManagedMenuState } from "~material/Menu";
 import { useDefaultSession } from "../masto/clients";
 import { resolveCustomEmoji } from "../masto/toot";
@@ -318,7 +316,7 @@ const TootComposer: Component<{
   return (
     <div
       ref={props.ref}
-      class={/* @once */ `TootComposer ${cardStyles.card}`}
+      class={/* @once */ `TootComposer card`}
       style={containerStyle()}
       on:touchend={
         cancelEvent
@@ -328,7 +326,7 @@ const TootComposer: Component<{
       on:wheel={cancelEvent}
     >
       <Show when={active()}>
-        <Toolbar class={cardStyles.cardNoPad}>
+        <Toolbar class="card-gut">
           <IconButton
             onClick={[setActive, false]}
             aria-label="Close the composer"
@@ -341,7 +339,7 @@ const TootComposer: Component<{
             <MoreVert />
           </IconButton>
         </Toolbar>
-        <div class={cardStyles.cardNoPad}>
+        <div class="card-gut">
           <Menu {...menuState}>
             <MenuItem>
               <ListItemAvatar>
@@ -360,7 +358,7 @@ const TootComposer: Component<{
         </div>
       </Show>
 
-      <div class="reply-input">
+      <div class="reply-input card-gut card-pad">
         <Show when={props.profile}>
           <Avatar
             src={props.profile!.avatar}
@@ -406,7 +404,7 @@ const TootComposer: Component<{
       </div>
 
       <Show when={active()}>
-        <div class="options">
+        <div class="options card-pad card-gut">
           <Button
             startIcon={<Translate />}
             endIcon={<ArrowDropDown />}
@@ -430,7 +428,6 @@ const TootComposer: Component<{
         </div>
 
         <TootVisibilityPickerDialog
-          class={cardStyles.cardNoPad}
           open={permPicker()}
           onClose={() => setPermPicker(false)}
           visibility={visibility()}
@@ -438,7 +435,6 @@ const TootComposer: Component<{
         />
 
         <TootLanguagePickerDialog
-          class={cardStyles.cardNoPad}
           open={langPickerOpen()}
           onClose={() => setLangPickerOpen(false)}
           code={language()}

src/timelines/TootList.tsx

@@ -15,7 +15,6 @@ import RegularToot, {
   findRootToot,
   TootEnvProvider,
 } from "./RegularToot";
-import cardStyle from "~material/cards.module.css";
 import type { ThreadNode } from "../masto/timelines";
 import { useNavigator } from "~platform/StackedRouter";
 import { ANIM_CURVE_STD } from "~material/theme";
@@ -221,7 +220,6 @@ const TootList: Component<{
                             ? positionTootInThread(index, threadLength())
                             : undefined
                         }
-                        class={cardStyle.card}
                         evaluated={isExpanded(id)}
                         actionable={isExpanded(id)}
                         onClick={[onItemClick, status()]}

src/timelines/toots/MediaAttachmentGrid.tsx

@@ -20,7 +20,7 @@ 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";
+import "~material/cards.css";
 import { Preview } from "@suid/icons-material";
 import { IconButton } from "@suid/material";
 import Masonry from "~platform/Masonry";
@@ -153,7 +153,7 @@ const MediaAttachmentGrid: Component<{
     <Masonry
       component="section"
       ref={setRootRef}
-      class={`MediaAttachmentGrid ${cardStyle.cardNoPad}`}
+      class={`MediaAttachmentGrid card-gut`}
       classList={{
         sensitive: props.sensitive,
       }}

src/timelines/toots/PreviewCard.tsx

@@ -75,7 +75,7 @@ export function PreviewCard(props: {
   return (
     <a
       ref={root!}
-      class={"PreviewCard"}
+      class={"PreviewCard card-pad card-gut"}
       href={props.src.url}
       target="_blank"
       referrerPolicy="unsafe-url"

src/timelines/toots/TootAuthorGroup.tsx

@@ -19,7 +19,7 @@ function TootAuthorGroup(
   const { dateFn: dateFnLocale } = useAppLocale();
 
   return (
-    <div class="TootAuthorGroup" {...rest}>
+    <div class="TootAuthorGroup card-gut card-pad" {...rest}>
       <Img src={toot().account.avatar} class="avatar" />
       <div class="name-grp">
         <div class="name-primary">

src/timelines/toots/TootContent.tsx

@@ -75,7 +75,7 @@ const TootContent: Component<TootContentProps> = (oprops) => {
           }
         });
       }}
-      class={`TootContent ${props.class || ""}`}
+      class={`TootContent card-gut card-pad ${props.class || ""}`}
       {...rest}
     >
       <Show when={props.sensitive}>