From 450d70961aacd1a5d7bcfe41cefe719ba0315a7c Mon Sep 17 00:00:00 2001
From: Tilman Vatteroth <git@tilmanvatteroth.de>
Date: Tue, 6 Jun 2023 22:07:28 +0200
Subject: [PATCH] refactor(toc): rename css classes

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
---
 .../renderers/document/document-markdown-renderer.tsx       | 6 +++---
 .../render-page/renderers/document/document-toc-sidebar.tsx | 3 ++-
 .../renderers/document/markdown-document.module.scss        | 6 +++---
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/render-page/renderers/document/document-markdown-renderer.tsx b/frontend/src/components/render-page/renderers/document/document-markdown-renderer.tsx
index b8e1b6f90..7733859cd 100644
--- a/frontend/src/components/render-page/renderers/document/document-markdown-renderer.tsx
+++ b/frontend/src/components/render-page/renderers/document/document-markdown-renderer.tsx
@@ -71,14 +71,14 @@ export const DocumentMarkdownRenderer: React.FC<DocumentMarkdownRendererProps> =
 
   return (
     <div
-      className={`${styles['markdown-document']} vh-100`}
+      className={`${styles.document} vh-100`}
       ref={internalDocumentRenderPaneRef}
       onScroll={onUserScroll}
       data-scroll-element={true}
       onMouseEnter={onMakeScrollSource}
       onTouchStart={onMakeScrollSource}>
-      <div className={styles['markdown-document-side']} />
-      <div className={styles['markdown-document-content']}>
+      <div className={styles.side} />
+      <div className={styles.content}>
         <div ref={rendererRef} className={`position-relative`}>
           <div
             {...cypressId('markdown-body')}
diff --git a/frontend/src/components/render-page/renderers/document/document-toc-sidebar.tsx b/frontend/src/components/render-page/renderers/document/document-toc-sidebar.tsx
index 34254d8e6..8907947dd 100644
--- a/frontend/src/components/render-page/renderers/document/document-toc-sidebar.tsx
+++ b/frontend/src/components/render-page/renderers/document/document-toc-sidebar.tsx
@@ -19,8 +19,9 @@ export interface DocumentTocSidebarProps {
 export const DocumentTocSidebar: React.FC<DocumentTocSidebarProps> = ({ width, baseUrl }) => {
   const [tocAst, setTocAst] = useState<TocAst>()
   useExtensionEventEmitterHandler(TableOfContentsMarkdownExtension.EVENT_NAME, setTocAst)
+
   return (
-    <div className={styles['markdown-document-side']}>
+    <div className={styles.side}>
       <ShowIf condition={!!tocAst}>
         <WidthBasedTableOfContents tocAst={tocAst as TocAst} baseUrl={baseUrl} width={width} />
       </ShowIf>
diff --git a/frontend/src/components/render-page/renderers/document/markdown-document.module.scss b/frontend/src/components/render-page/renderers/document/markdown-document.module.scss
index 69eddadbc..c8c180630 100644
--- a/frontend/src/components/render-page/renderers/document/markdown-document.module.scss
+++ b/frontend/src/components/render-page/renderers/document/markdown-document.module.scss
@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-.markdown-document {
+.document {
   width: 100%;
   height: 100%;
   margin: 0;
@@ -12,14 +12,14 @@
   display: flex;
   flex-direction: row;
 
-  .markdown-document-side {
+  .side {
     position: sticky;
     top: 0;
     bottom: 0;
     flex: 1 0 0;
   }
 
-  .markdown-document-content {
+  .content {
     padding-left: 10px;
     padding-right: 10px;
     flex: 0 0 900px;