create form changes

Author: nirmalkc

components/core/CreateShape.js

@@ -296,19 +296,20 @@ const CreateShape = (props) => {
                     <Container fluid>
                         <Row lg={2} md={1} sm={1} xs={1}>
                             <Col>
-                                <ShapeForm 
+                                <ShapePreview 
                                     shapeInformation={shapeInformation} 
                                     handleChange={handleChange} 
-                                    handleSubmit={handleSubmit} 
-                                    validated={validated} 
                                 />
                             </Col>
                             <Col>
-                                <ShapePreview 
+                                <ShapeForm 
                                     shapeInformation={shapeInformation} 
                                     handleChange={handleChange} 
+                                    handleSubmit={handleSubmit} 
+                                    validated={validated} 
                                 />
                             </Col>
+                            
                         </Row>
                     </Container>
                 </Modal.Body>

components/utils/ShapeForm.js

@@ -22,8 +22,15 @@ const ShapeForm = (props) => {
                     required
                 />
                 <Form.Control.Feedback type="invalid">Name required!</Form.Control.Feedback>
+                <Form.Check
+                    name="private"
+                    label="Make it Private"
+                    id="private"
+                    checked={props.shapeInformation.private}
+                    onChange={(e) => props.handleChange(e)}
+                    className="mt-1"
+                />
             </Form.Group>
-
             <Form.Group>
                 <Form.Label>Type</Form.Label>
                 <Form.Control 
@@ -40,24 +47,16 @@ const ShapeForm = (props) => {
 
             <Form.Group>
                 <Form.Label>Color</Form.Label>
-                <ColorPicker 
-                    type="color" 
-                    name="backgroundColor"
-                    value={props.shapeInformation.backgroundColor}
-                    onChange={props.handleChange}
-                    className="form-control-color"
-                />
+                <div>
+                    <ColorPicker 
+                        type="color" 
+                        name="backgroundColor"
+                        value={props.shapeInformation.backgroundColor}
+                        onChange={props.handleChange}
+                        className="form-control-color"
+                    />
+                </div>
             </Form.Group>
-
-            <Form.Group>
-                <Form.Check
-                    name="private"
-                    label="Make it Private"
-                    checked={props.shapeInformation.private}
-                    onChange={(e) => props.handleChange(e)}
-                />
-            </Form.Group>
-
             <Form.Group>
                 <Form.Label>What's it about?</Form.Label>
                 <Form.Control 

components/utils/ShapePreview.js

@@ -73,7 +73,7 @@ const ShapePreview = (props) => {
     return(
         <>
             <Playground>
-                <Box height="300px" width="300px" onClick={(e) => props.handleChange(e)}>
+                <Box height="360px" width="360px" onClick={(e) => props.handleChange(e)}>
                     { props.shapeInformation.showShadow && <Shadow backgroundColor={props.shapeInformation.backgroundColor} id="shapeShadow" /> }
                     <Component formula={props.shapeInformation.formula} backgroundColor={props.shapeInformation.backgroundColor} id="clippedShape" />
                     {vertices}

styles/global.css

@@ -41,7 +41,7 @@
   /* Font Sizes */
   --fs-xs: 0.6rem;
   --fs-sm: 0.8rem;
-  --fs-rg: 0.96rem;
+  --fs-rg: 0.90rem;
   --fs-md: 1.4rem;
   --fs-lg: 2rem;
   --fs-xl: 3rem;
@@ -329,6 +329,12 @@ code {
   color: var(--color-neutral-90);
   margin-bottom: 0.26rem;
 }
+.form-control {
+  font-size: var(--fs-rg);
+}
+.form-check-label {
+  font-size: var(--fs-rg);
+}
 .form-control-color {
   width: 5rem;
   height: 3rem;