feat: switched dropdown menu to a ToggleButton in ShapeForm for consistency

Author: williamzhu17

components/core/CreateShape.js

@@ -55,12 +55,13 @@ const CreateShape = (props) => {
     });
 
     // Changes shapeInformation when something in ShapeForm or ShapePreview is altered
-    function handleChange(event, data, number) {
+    const handleChange = (event, data, number) => {
+        
+        // console.log(event, data);
+        
         const name = event.target.name || event.type;
         const value = event.target.type === "checkbox" ? event.target.checked : event.target.value;
 
-        console.log(event, data);
-
         // If Clip-Path formula value is changed, it makes sure that the parentheses stay there and also alters the verticeCoordinates value
         if (name === "name") {
             setShapeInformation({
@@ -191,7 +192,7 @@ const CreateShape = (props) => {
     // Called when there is a change in the textbox for formula in the form
     // Adjusts verticeCoordinates, vertices, and edges accordingly
     // Ensures that the parentheses remain
-    function handleFormulaChange(formula, edgeVerticeNumber, clipPathType) {
+    const handleFormulaChange = (formula, edgeVerticeNumber, clipPathType) => {
         let newVerticeCoordinates = [];
 
         if (clipPathType === "polygon") {
@@ -219,7 +220,7 @@ const CreateShape = (props) => {
     }
 
     // Returns an array that has a new verticeCoordinate
-    function addNewVerticeCoordinates(x ,y, number) {
+    const addNewVerticeCoordinates = (x ,y, number) => {
         const xPercentage = Math.round((x / 280.0) * 100.0);
         const yPercentage = Math.round((y / 280.0) * 100.0);
 
@@ -233,7 +234,7 @@ const CreateShape = (props) => {
     }
 
     // Returns a generated formula string from a verticeCoordinate array
-    function generateNewFormula(newVerticeCoordinates) {
+    const generateNewFormula = (newVerticeCoordinates) => {
 
         let newFormula = shapeInformation.clipPathType + "(";
 

components/utils/DraggableVertice.js

@@ -30,11 +30,11 @@ const DraggableVertice = (props) => {
     const show = props.focusNumber === props.number;
     const target = useRef(null);
 
-    function handleDrag(e, data) {
+    const handleDrag = (e, data) => {
         props.handleChange(e, data, props.number);
     }
 
-    function handleDelete(e) {
+    const handleDelete = (e) => {
         props.handleChange(e, null, props.number);
         props.setFocusNumber(-1);
     }

components/utils/ShapeForm.js

@@ -5,6 +5,8 @@ import styled from "styled-components";
 
 // Bootstrap
 import Form from "react-bootstrap/Form";
+import ToggleButton from "react-bootstrap/ToggleButton";
+import ToggleButtonGroup from "react-bootstrap/ToggleButtonGroup";
 
 const ColorPicker = styled.input`
     border-color: lightgray;
@@ -30,20 +32,29 @@ const ShapeForm = (props) => {
 
             <Form.Group>
                 <Form.Label>Type</Form.Label>
-                <Form.Control 
-                    as="select" 
-                    name="clipPathType" 
-                    value={props.shapeInformation.clipPathType} 
-                    onChange={props.handleChange}
-                >
-                    <option value="polygon">Polygon</option>
-                    <option value="circle">Circle</option>
-                    <option value="ellipse">Ellipse</option>
-                </Form.Control>
+                <div>
+                    <ToggleButtonGroup 
+                        type="radio" 
+                        name="clipPathType"
+                        value={props.shapeInformation.clipPathType}
+                        size="sm"
+                    >
+                        <ToggleButton value="polygon" variant="outline-dark" onChange={props.handleChange}>
+                            Polygon
+                        </ToggleButton>
+                        <ToggleButton value="circle" variant="outline-dark" onChange={props.handleChange}>
+                            Circle
+                        </ToggleButton>
+                        <ToggleButton value="ellipse" variant="outline-dark" onChange={props.handleChange}>
+                            Ellipse
+                        </ToggleButton>
+                    </ToggleButtonGroup>
+                </div>
             </Form.Group>
 
             <Form.Group>
                 <Form.Label>Color picker</Form.Label>
+                <br />
                 <ColorPicker 
                     type="color" 
                     name="backgroundColor"