Merge pull request #42 from TryShape/Add-a-Landing-Page-#10

Add a landing page #10

Author: atapas

components/core/ExportShape.js

@@ -208,14 +208,14 @@ const ExportShape = ({ show, setShow, shape }) => {
                       <Form.Group>
                         <Form.Label>Export As</Form.Label>
                         <div>
-                          <ToggleButtonGroup type="radio" name="options" defaultValue={1} variant="outline-dark" size="sm" defaultValue={exportData.type}>
-                            <ToggleButton id="tbg-radio-1" value={'png'} variant="outline-dark" onClick={() => setExportType('png')}>
+                          <ToggleButtonGroup type="radio" name="options" defaultValue={1} variant="outline-info" size="sm" defaultValue={exportData.type}>
+                            <ToggleButton id="tbg-radio-1" value={'png'} variant="outline-info" onClick={() => setExportType('png')}>
                                 PNG
                             </ToggleButton>
-                            <ToggleButton id="tbg-radio-2" value={'jpeg'} variant="outline-dark" onClick={() => setExportType('jpeg')}>
+                            <ToggleButton id="tbg-radio-2" value={'jpeg'} variant="outline-info" onClick={() => setExportType('jpeg')}>
                                 JPEG
                             </ToggleButton>
-                            <ToggleButton id="tbg-radio-3" value={'svg'} variant="outline-dark" onClick={() => setExportType('svg')}>
+                            <ToggleButton id="tbg-radio-3" value={'svg'} variant="outline-info" onClick={() => setExportType('svg')}>
                                 SVG
                             </ToggleButton>
                           </ToggleButtonGroup>

components/utils/NoShapeFound.js

@@ -1,9 +1,55 @@
 import React from 'react';
 
+// Bootstrap
+import Button from "react-bootstrap/Button";
+import ImgFeelingSad from '../../public/sorry-feeling.svg';
+
+// Styled Component
+import styled from "styled-components";
+
+// icons
+import { FiPlus } from 'react-icons/fi';
+
+const PageWrapper = styled.div`
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    position: absolute;
+    align-items: center;
+    width: 40%;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+
+    .title {
+        margin-top: 1rem;
+        font-size: var(--fs-lg);
+        font-weight: var(--fw-bold);
+    }
+
+    .desc {
+        margin: 1rem 0 2rem 0;
+    }
+
+    img {
+        max-width: 300px;
+    }
+
+`;
+
 const NoShapeFound = () => {
 
     return(
-        <h1>No Shape Found!</h1>
+        <PageWrapper>
+            <img src={ImgFeelingSad} width="360"/>
+            <h2 className="title">Whooops!</h2>
+            <p className="desc">We couldn't find the shape you are looking for. Why dont you start creating a shape of your own choice? or try to refine your search. </p>
+            <Button variant='secondary'>
+                <FiPlus />
+                Create Shape
+            </Button>
+        </PageWrapper>
     )
 };
 

components/utils/ShapeForm.js

@@ -46,13 +46,13 @@ const ShapeForm = (props) => {
                         value={props.shapeInformation.clipPathType}
                         size="sm"
                     >
-                        <ToggleButton value="polygon" variant="outline-dark" onChange={props.handleChange}>
+                        <ToggleButton value="polygon" variant="outline-info" onChange={props.handleChange}>
                             Polygon
                         </ToggleButton>
-                        <ToggleButton value="circle" variant="outline-dark" onChange={props.handleChange}>
+                        <ToggleButton value="circle" variant="outline-info" onChange={props.handleChange}>
                             Circle
                         </ToggleButton>
-                        <ToggleButton value="ellipse" variant="outline-dark" onChange={props.handleChange}>
+                        <ToggleButton value="ellipse" variant="outline-info" onChange={props.handleChange}>
                             Ellipse
                         </ToggleButton>
                     </ToggleButtonGroup>

components/utils/ShapeList.js

@@ -138,7 +138,7 @@ const ShapeCreditsThumb = styled.img`
   border-radius: 50%;
   height: 32px;
   width: 32px;
-  margin-right: 0.4rem;
+  margin-right: 0.7rem;
 `;
 
 const Playground = styled.div`

public/sorry-feeling.svg

@@ -317,7 +317,7 @@ code {
   padding: 0.6rem;
   width: 3.6rem;
   height: 3.6rem;
-  border-width: 0.3rem;
+  border-width: 0.13rem;
 }
 
 /* Dropdown Menu */