From b20b829f2402fcce8541849442164dccf03181a3 Mon Sep 17 00:00:00 2001
From: liliana <liliana.sanfilippo@uni-bielefeld.de>
Date: Thu, 15 Aug 2024 11:45:46 +0200
Subject: [PATCH] collapsible design

---
 src/App/App.css                |  9 +++++++++
 src/components/Collapsible.tsx | 10 +++++-----
 src/contents/wiki.tsx          |  2 +-
 3 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/App/App.css b/src/App/App.css
index f146a3ed..b313edd5 100644
--- a/src/App/App.css
+++ b/src/App/App.css
@@ -3224,3 +3224,12 @@ a{
   width: 100vw !important;
 }
 
+.collapsible-hr{
+  border-width: 2px !important;
+}
+
+.collapsible-a{
+  margin-top: 1rem !important;
+  margin-bottom: 1rem;
+  margin-left: 1rem !important;
+}
\ No newline at end of file
diff --git a/src/components/Collapsible.tsx b/src/components/Collapsible.tsx
index 25bf71bd..0fcd4146 100644
--- a/src/components/Collapsible.tsx
+++ b/src/components/Collapsible.tsx
@@ -14,13 +14,13 @@ interface IProps {
     const handleFilterOpening = () => {
       setIsOpen((prev) => !prev);
     };
-  
+
     return (
       <>
         <div className="collapse-card">
           <div>
-            <div className="p-3 border-bottom d-flex justify-content-between">
-              <h6 className="font-weight-bold">{title}</h6>
+            <div className="d-flex justify-content-between">
+              <h6 className="font-weight-bold collapsible-a">{title}</h6>
               <button type="button" className="btn" onClick={handleFilterOpening}>
                 {!isOpen ? (
                 <img className='updown' src="https://static.igem.wiki/teams/5247/design/icons/angle-small-down.png" />
@@ -31,8 +31,8 @@ interface IProps {
             </div>
           </div>
   
-          <div className="border-bottom">
-            <div>{isOpen && <div className="p-3">{children}</div>}</div>
+          <div className="">
+            <div>{isOpen && <div className="p-3"> <hr className='collapsible-hr'/> {children}</div>}</div>
           </div>
         </div>
       </>
diff --git a/src/contents/wiki.tsx b/src/contents/wiki.tsx
index aaa97b11..f6f52412 100644
--- a/src/contents/wiki.tsx
+++ b/src/contents/wiki.tsx
@@ -314,7 +314,7 @@ function Troubleshooting(){
       <p>preprocessorOptions: &#123;</p>
         <p>css: &#123;</p>
           <p>  //javascriptEnabled: true, // Enable JavaScript in CSS (useful for certain CSS preprocessor plugins)</p>
-       <p> &#125; &#125; &#125;,</p>
+       <p> &#125; &#125; &#125;,</p>  
         </Code>
         </Collapsible>
       </div>
-- 
GitLab