Merge pull request #32 from DHTMLX/contact-support-button

[update] move ContactSupport styles to CSS Module

Author: tatyanalab

src/css/custom.css

@@ -219,23 +219,4 @@ p {
   border: 1px solid rgb(215, 212, 212);
   max-width: 100%;
   padding: 2px;
-}
-
-/* styles for Contact Support component */
-
-.contact-support-link-wrapper{
-  display: flex;
-  flex-direction: column;
-  justify-content: start;
-  align-items: start;
-  gap: 0.5rem;
-  margin: 1rem;
-}
-
-.contact-support-link{
-  font-size: var(--ifm-h4-font-size);
-  font-weight: var(--ifm-heading-font-weight);
-  text-align: center;
-}
-
-/* end for Contact Support component */
+}

src/theme/TOCItems/index.js

@@ -1,16 +1,17 @@
 import TOCItems from '@theme-original/TOCItems';
+import styles from './styles.module.css';
 
 export default function TOCItemsWrapper(props) {
   return (
     <>
       <TOCItems {...props} />
-      <div className="contact-support-link-wrapper">
+      <div className={styles.contactSupportLinkWrapper}>
         Need more help?
-        <a 
-          href="https://dhtmlx.com/docs/technical-support.shtml" 
-          target="_blank" 
-          rel="noopener noreferrer" 
-          className="contact-support-link pagination-nav__link"
+        <a
+          href="https://dhtmlx.com/docs/technical-support.shtml"
+          target="_blank"
+          rel="noopener noreferrer"
+          className={`${styles.contactSupportLink} pagination-nav__link`}
         >
           Contact Support
         </a>

src/theme/TOCItems/styles.module.css

@@ -0,0 +1,14 @@
+.contactSupportLinkWrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+  align-items: start;
+  gap: 0.5rem;
+  margin: 1rem;
+}
+
+.contactSupportLink {
+  font-size: var(--ifm-h4-font-size);
+  font-weight: var(--ifm-heading-font-weight);
+  text-align: center;
+}