style collapsable box buttons

webapp/src/components/CollapsibleBox.tsx

 import React, { useState } from 'react';
 import { Col, Row } from 'react-bootstrap';
-import { GrAdd, GrSubtract  } from 'react-icons/gr';
+import { AiOutlineClose, AiOutlinePlus } from 'react-icons/ai';
 
 interface CollapsibleBoxProps {
   title: string;
@@ -12,15 +12,17 @@ const CollapsibleBox: React.FC<CollapsibleBoxProps> = ({ title, children, startC
   const [isCollapsed, setIsCollapsed] = useState(!!startCollapsed);
 
   return (
-    <div className='collapsible-box'>
+    <div className='collapsible-box p-0'>
       <Row>
         <Col>
-          <h1 className="bold-caps-16pt dark-teal">{title}</h1>
+          <h1 className="bold-caps-16pt dark-teal pt-3 ps-3">{title}</h1>
         </Col>
-        <Col align="right">
-        <button className="expand-collapse-btn" onClick={() => setIsCollapsed(!isCollapsed)}>
-            {isCollapsed ? <GrAdd/> : <GrSubtract />}
-        </button>
+        <Col className='flex-grow-0 flex-shrink-0'>
+          <div className="toggle-btn p-2" onClick={() => setIsCollapsed(!isCollapsed)}>
+              {isCollapsed ?
+                <AiOutlinePlus style={{ color: 'white', paddingBottom: "3px", marginTop: "3px", marginLeft: "3px", scale: "1.3"}} /> :
+                <AiOutlineClose style={{ color: 'white', paddingBottom: "3px", marginTop: "3px", marginLeft: "3px", scale: "1.3"}} />}
+          </div>
         </Col>
       </Row>
 

webapp/src/scss/layout/_components.scss

@@ -57,7 +57,7 @@
 
 .collapsible-box {
   margin: 1rem;
-  border: 2px solid $yellow;
+  border: 2px solid $yellow-orange;
   padding: 10px;
   width: 80rem;
   max-width: 50vw;