Merge pull request #150 from ChtiJS/refacto/stylesToot

refactor(tootList):change styles on tootList and blockquote
ChtiJS · Dec 8, 2023 · ec3b36b · ec3b36b
2 parents be77bf8 + c53de1b
commit ec3b36b
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 43 deletions.
diff --git a/src/components/blockquote.module.scss b/src/components/blockquote.module.scss
@@ -0,0 +1,8 @@
+.root {
+    font-family: var(--writingFont);
+    font-size: var(--greatFontSize);
+    line-height: var(--greatLineHeight);
+    margin: 0 0 var(--vRythm) 0;
+    padding: 0 0 0 var(--gutter);
+    border-left: var(--border) solid var(--green2);
+  }
diff --git a/src/components/blockquote.tsx b/src/components/blockquote.tsx
@@ -1,21 +1,13 @@
+import styles from './blockquote.module.scss';
+
 const Blockquote = ({
   children,
   ...props
 }: {
   children: React.ReactNode;
 } & React.BlockquoteHTMLAttributes<HTMLElement>) => (
-  <blockquote className="root" {...props}>
+  <blockquote className={styles.root} {...props}>
     {children}
-    <style jsx>{`
-      .root {
-        font-family: var(--writingFont);
-        font-size: var(--greatFontSize);
-        line-height: var(--greatLineHeight);
-        margin: 0 0 var(--vRythm) 0;
-        padding: 0 0 0 var(--gutter);
-        border-left: var(--border) solid var(--green2);
-      }
-    `}</style>
   </blockquote>
 );
 

diff --git a/src/components/tootList.module.scss b/src/components/tootList.module.scss
@@ -0,0 +1,31 @@
+.root {
+    margin: 0 0 var(--vRythm) 0;
+}
+
+.toot :global(a) {
+color: #205370;
+}
+
+.toot :global(p) {
+margin-left: 2%;
+}
+
+.toot :global(a):hover {
+color: #14171a;
+}
+
+.tootList {
+margin-top: var(--vRythm);
+display: flex;
+flex-direction: row;
+gap: var(--gutter);
+}
+
+.toot {
+border-style: solid;
+border-color: var(--grey);
+border-width: var(--borderSize);
+border-radius: var(--borderRadius);
+width: var(--block);
+padding: calc(var(--vRythm) / 2) calc(var(--gutter) / 2);
+}
diff --git a/src/components/tootList.tsx b/src/components/tootList.tsx
@@ -1,4 +1,5 @@
 import Heading2 from './h2';
+import styles from './tootList.module.scss';
 import { renderMarkdown } from '../utils/markdown';
 import Paragraph from './p';
 import Anchor from './a';
@@ -12,11 +13,11 @@ export type Toots = {
 }[];
 
 const TootList = ({ toots }: { toots: Toots }) => (
-  <aside className="root">
+  <aside className={styles.root}>
         <Heading2>Derniers messages Mastodon&nbsp;:</Heading2>
-        <div className="tootList">
+        <div className={styles.tootList}>
           {toots.map((toot) => (
-            <div key={toot.id} className="toot">
+            <div key={toot.id} className={styles.toot}>
               {renderMarkdown({ index: 0 }, toot.text)}
               <Paragraph>
                 Publié le{" "}
@@ -27,35 +28,6 @@ const TootList = ({ toots }: { toots: Toots }) => (
             </div>
           ))}
         </div>
-    <style jsx>{`
-      .root {
-        margin: 0 0 var(--vRythm) 0;
-      }
-      .toot :global(a) {
-        color: #205370;
-      }
-      .toot :global(p) {
-        margin-left: 2%;
-      }
-      .toot :global(a):hover {
-        color: #14171a;
-      }
-
-      .tootList {
-        margin-top: var(--vRythm);
-        display: flex;
-        flex-direction: row;
-        gap: var(--gutter);
-      }
-      .toot {
-        border-style: solid;
-        border-color: var(--grey);
-        border-size: var(--borderSize);
-        border-radius: var(--borderRadius);
-        width: var(--block);
-        padding: calc(var(--vRythm) / 2) calc(var(--gutter) / 2);
-      }
-    `}</style>
   </aside>
 );