diff --git a/src/App/App.css b/src/App/App.css index f146a3ed55b2d5618d34214cced536f669a1aa28..b313edd5ca2c87acb07c3a8d013461bb68a13c95 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 25bf71bd52acf1dc686fdd3593e415867490fa48..0fcd4146d5c06744129afc65f5edf84123c208a8 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 aaa97b119b2ae53ecc7dc172d21371bdf7c361c4..f6f524127c9bf9b0ade00f7613e75a7babd3587a 100644 --- a/src/contents/wiki.tsx +++ b/src/contents/wiki.tsx @@ -314,7 +314,7 @@ function Troubleshooting(){ <p>preprocessorOptions: {</p> <p>css: {</p> <p> //javascriptEnabled: true, // Enable JavaScript in CSS (useful for certain CSS preprocessor plugins)</p> - <p> } } },</p> + <p> } } },</p> </Code> </Collapsible> </div>