Merge pull request #156 from ChtiJS/refacto/stylesCite

fix(ui): changes styles on cite, code, em and strong

src/components/cite.module.scss

@@ -0,0 +1,7 @@
+/* cite.module.scss */
+
+.root {
+    color: var(--primary);
+    text-decoration: underline;
+  }
+

src/components/cite.tsx

@@ -1,17 +1,15 @@
+import React from 'react';
+import styles from './cite.module.scss';
+
+
 const Cite = ({
   children,
   ...props
 }: {
   children: React.ReactNode;
 } & React.HTMLAttributes<HTMLElement>) => (
-  <cite className="root" {...props}>
+  <cite className={styles.root} {...props}>
     {children}
-    <style jsx>{`
-      .root {
-        color: var(--primary);
-        text-decoration: underline;
-      }
-    `}</style>
   </cite>
 );
 

src/components/code.module.scss

@@ -0,0 +1,7 @@
+/* code.module.scss */
+
+.root {
+    text-decoration: none;
+    font-family: monospace;
+  }
+

src/components/code.tsx

@@ -1,17 +1,14 @@
+import React from 'react';
+import styles from './code.module.scss';
+
 const Code = ({
   children,
   ...props
 }: {
   children: React.ReactNode;
 } & React.HTMLAttributes<HTMLElement>) => (
-  <code className="root" {...props}>
+  <code className={styles.root} {...props}>
     {children}
-    <style jsx>{`
-      .root {
-        text-decoration: none;
-        font-family: monospace;
-      }
-    `}</style>
   </code>
 );
 

src/components/em.module.scss

@@ -0,0 +1,7 @@
+/* em.module.scss */
+
+.root {
+    text-decoration: none;
+    font-style: italic;
+  }
+

src/components/em.tsx

@@ -1,17 +1,14 @@
+import React from 'react';
+import styles from './em.module.scss';
+
 const Emphasis = ({
   children,
   ...props
 }: {
   children: React.ReactNode;
 } & React.HTMLAttributes<HTMLElement>) => (
-  <em className="root" {...props}>
+  <em className={styles.root} {...props}>
     {children}
-    <style jsx>{`
-      .root {
-        text-decoration: none;
-        font-style: italic;
-      }
-    `}</style>
   </em>
 );
 

src/components/strong.module.scss

@@ -0,0 +1,7 @@
+/* strong.module.scss */
+
+.root {
+    color: var(--quinary);
+    font-weight: bold;
+  }
+

src/components/strong.tsx

@@ -1,17 +1,14 @@
+import React from 'react';
+import styles from './strong.module.scss';
+
 const Strong = ({
   children,
   ...props
 }: {
   children: React.ReactNode;
 } & React.HTMLAttributes<HTMLElement>) => (
-  <strong className="root" {...props}>
+  <strong className={styles.root} {...props}>
     {children}
-    <style jsx>{`
-      .root {
-        color: var(--quinary);
-        font-weight: bold;
-      }
-    `}</style>
   </strong>
 );