diff --git a/components/core/CopyShapeSource.js b/components/core/CopyShapeSource.js index 613e480..316467b 100644 --- a/components/core/CopyShapeSource.js +++ b/components/core/CopyShapeSource.js @@ -33,8 +33,43 @@ import { FiCopy } from 'react-icons/fi'; // misc utilities import { getShapeId } from "../../utils/misc"; -const CSSDisplay = styled.span` +const CSSDisplayContainer = styled.div` + position: relative; + background-color: var(--color-neutral-80); + padding: 0 0 2rem 0; + height: 240px; + overflow: hidden; +`; + +const CSSDisplay = styled.pre` white-space: pre-line; + color: #f5d67b; + max-height: 180px; + overflow: auto; + margin: 1rem 0.4rem 1rem 1rem; + padding-right: 0.4rem; +`; + +const CopyButton = styled(Button)` + position: absolute; + display: flex !important; + align-items: center; + justify-content: center; + grid-gap: 0.4rem; + color: var(--color-neutral-10) !important; + left: 0.4rem; + bottom: 0.4rem; + width: calc(100% - 0.8rem); + padding: 0.3rem 0.6rem !important; + font-size: var(--fs-sm) !important; + background-color: var(--color-brand) !important; + cursor: pointer; + + &:hover, + &:focus { + background-color: var(--color-brand-light) !important; + text-decoration: none !important; + } `; const CopyIcon = styled(FiCopy)` @@ -97,17 +132,29 @@ const CopyShapeSource = ({ show, setShow, shape }) => { + + + + +
Export As
- - setType('css')}> + + setType('css')}> Show CSS - setType('clip-path')}> + setType('clip-path')}> Show Clip-Path @@ -125,44 +172,48 @@ const CopyShapeSource = ({ show, setShow, shape }) => {
{type === 'css' && <> +

CSS Snippet

- - {getCSS(shape.formula)} - - copy(shape.formula, true)}/> + + + {getCSS(shape.formula)} + + copy(shape.formula, true)} variant="link" className="btn-icon"> + +
Copy to Clipboard
+ + } {type === 'clip-path' &&
+

Clip-Path Value

- {shape.formula} - copy(shape.formula, false)}/> + + + {shape.formula} + + copy(shape.formula, false)} variant="link" className="btn-icon"> + +
Copy to Clipboard
+ +
+ }
) } - - - - - + diff --git a/components/core/CreateShape.js b/components/core/CreateShape.js index 3edee97..ce6b158 100644 --- a/components/core/CreateShape.js +++ b/components/core/CreateShape.js @@ -334,19 +334,20 @@ const CreateShape = (props) => { - - + diff --git a/components/core/ExportShape.js b/components/core/ExportShape.js index 1daa6fa..dd9f0c1 100644 --- a/components/core/ExportShape.js +++ b/components/core/ExportShape.js @@ -148,6 +148,18 @@ const ExportShape = ({ show, setShow, shape }) => { + + + + +
@@ -170,6 +182,7 @@ const ExportShape = ({ show, setShow, shape }) => { Set a width({exportData.width}px) { Set a height({exportData.height}px) {
- - - - - + diff --git a/components/core/Landing.js b/components/core/Landing.js index f045a45..7ba37b4 100644 --- a/components/core/Landing.js +++ b/components/core/Landing.js @@ -11,13 +11,13 @@ import { Header } from '..' // Images import BannerBg from '../../public/images/bg-banner.png'; import ImgLogo from '../../public/images/img-logo.svg'; +import IconPngJpg from '../../public/images/icon-png-jpg.svg'; +import IconSvg from '../../public/images/icon-svg.svg'; +import IconCss from '../../public/images/icon-css.svg'; // icon import { AiOutlineGateway, AiOutlineFileImage, AiFillGithub, AiOutlineInstagram, AiOutlineTwitter, AiOutlineLink } from "react-icons/ai"; -import { FiInstagram, FiTwitter, FiLink, FiPenTool, FiSearch, FiMousePointer, FiGithub } from "react-icons/fi"; - -// Images -// import bannerBackgroundImage from '../../public/vercel.svg'; +import { FiLinkedin, FiTwitter, FiShare, FiShare2, FiPenTool, FiSearch, FiMail, FiGithub } from "react-icons/fi"; // link import Link from "next/link"; @@ -33,10 +33,25 @@ const LandingBanner = styled.section` align-items: center; min-height: 100vh; background-color: var(--color-brand); - background-image: url(${BannerBg}); + background: rgb(93,33,210); + background: linear-gradient(180deg, rgba(93,33,210,1) 0%, rgba(175,33,210,1) 100%); + // background-image: url(${BannerBg}); background-position: center center; background-repeat: no-repeat; background-size: cover; + + &:before { + position: absolute; + content: ""; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-image: url(${BannerBg}); + background-position: center center; + background-repeat: no-repeat; + background-size: cover; + } `; const BannerHeader = styled.div` @@ -48,7 +63,7 @@ const BannerHeader = styled.div` flex-grow: 1; justify-content: space-between; width: 100%; - padding: 0.6rem 0.8rem; + padding: 1.4rem 1.8rem; background-color: var(--color-brand); .navbar-action--primary { @@ -187,7 +202,8 @@ const SectionTitle = styled.div` const SectionFileTypes = styled.section` padding: 6rem 0; - background-color: var(--color-neutral-20); + // background-color: var(--color-neutral-20); + background-color: rgba(var(--color-brand-rgb), 0.024); `; const SectionContact = styled.section` @@ -222,8 +238,7 @@ const SocialLinks = styled.div` width: 3rem; height: 3rem; border-radius: 50%; - border: solid 1px rgba(var(--color-brand-rgb), 0.6); - background-color: transparent; + background-color: rgba(var(--color-brand-rgb), 0.06); svg { stroke: var(--color-brand); @@ -257,6 +272,17 @@ const FeatureCardItem = styled.div` border-radius: 1rem; padding: 3.2rem 2.8rem; + .icon { + display: flex; + align-items: center; + justify-content: center; + width: 8rem; + height: 8rem; + border-radius: 50%; + background-color: rgba(var(--color-neutral-10-rgb), 1); + box-shadow: 3px 16px 32px 0 rgba(var(--color-brand-rgb), 16%); + } + .card-title { margin: 2rem 0 1rem 0; font-size: var(--fs-md); @@ -271,22 +297,28 @@ const FeatureCardItem = styled.div` &:nth-child(2n) { background: rgba(var(--color-brand-secondary-rgb), 0.05); + .icon { + box-shadow: 3px 16px 32px 0 rgba(var(--color-brand-secondary-rgb), 16%); + } } &:nth-child(3n) { background: rgba(var(--color-brand-teritiary-rgb), 0.05); + .icon { + box-shadow: 3px 16px 32px 0 rgba(var(--color-brand-teritiary-rgb), 16%); + } } `; // Feature Icon Cards -const FeatureIconCards = styled.div` +const FileSupportCards = styled.div` display: grid; grid-template-columns: repeat(3, minmax(240px, 1fr)); grid-gap: 2.6rem; margin: 4rem 0 0 0; `; -const FeatureIconCardItem = styled.div` +const FileSupportCardItem = styled.div` display: flex; flex-direction: column; align-items: center; @@ -301,15 +333,14 @@ const FeatureIconCardItem = styled.div` display: flex; justify-content: center; align-items: center; - border-radius: 1rem; - background-color: var(--color-brand); + border-radius: 50%; + background-color: rgba(var(--color-brand-rgb), 1); width: 8rem; height: 8rem; - svg { - width: 4.6rem; - height: 4.6rem; - fill: var(--color-neutral-10); + img { + width: 4.2rem; + height: 4.2rem; } } @@ -327,11 +358,11 @@ const FeatureIconCardItem = styled.div` // Color Variants &:nth-child(2n) .card-icon { - background: var(--color-brand-secondary); + background: rgba(var(--color-brand-secondary-rgb), 1); } &:nth-child(3n) .card-icon { - background: var(--color-brand-teritiary); + background: rgba(var(--color-brand-teritiary-rgb), 1); } `; @@ -389,14 +420,18 @@ const Landing = ({ setOpen, user, setUser }) => {

- +
+ +

Create

Make your creative thoughts a reality with a few clicks. You can create any circular, elliptical, and polygonal shape within a minute time.

- +
+ +

Export

Export the shapes as images and CSS snippets. You can export the shapes @@ -404,7 +439,9 @@ const Landing = ({ setOpen, user, setUser }) => {

- +
+ +

Share

When you create something fabously great, do share it with the awesome developer @@ -424,47 +461,47 @@ const Landing = ({ setOpen, user, setUser }) => { TryShape supports exporting shapes as images, CSS snippets, and SVG. You can export them specifying any dimension, color, name of your choice.

- - + +
- +

SVG

Export and save your shape as the Scalable Vector Graphics(SVG) file. It gives you the power to use the SVG image straight into your application.

- - + +
- +

PNG and JPEG

PNG and JPEG types are the most used image types in web applications. Export your shapes as .png and .jpeg image files.

- - + +
- +

CSS Snippet

Don't want to image the shapes as files? No problem. You can create CSS snippets with your shapes and export that instead.

- - + + - - + + TryShape is an opensource project developed by Tapas Adhikary and friends. diff --git a/components/utils/Header.js b/components/utils/Header.js index de9402e..2d0550e 100644 --- a/components/utils/Header.js +++ b/components/utils/Header.js @@ -20,7 +20,7 @@ import FormControl from 'react-bootstrap/FormControl'; import DropdownButton from 'react-bootstrap/DropdownButton'; import Dropdown from 'react-bootstrap/Dropdown' -import { FiSearch, FiPlus } from "react-icons/fi"; +import { FiSearch, FiPlus, FiTwitter } from "react-icons/fi"; // Styled Component import styled from "styled-components"; @@ -164,6 +164,16 @@ const Header = ({ }); }; + const tweet = () => { + const link = `https://twitter.com/intent/tweet?text=Check%20this%20amazing%20app%20http://unshape.vercel.app/,%20created%20by%20@tapasadhikary%20and%20friends%0A%0A%23DEVCommunity%20%23100DaysOfCode%20%23unshape`; + if(typeof window !== 'undefined') { + window.open( + link, + '_blank' // <- This is what makes it open in a new window. + ); + } + } + return ( @@ -209,10 +219,14 @@ const Header = ({ {(user.email || user.displayName) ? ( <> + +
Sign Out
+ ) : ( diff --git a/components/utils/ShapeForm.js b/components/utils/ShapeForm.js index af24aa3..ac192c4 100644 --- a/components/utils/ShapeForm.js +++ b/components/utils/ShapeForm.js @@ -28,8 +28,15 @@ const ShapeForm = (props) => { required /> Name required! + props.handleChange(e)} + className="mt-1" + /> - Type
@@ -53,26 +60,17 @@ const ShapeForm = (props) => { - Color picker -
- - - - - props.handleChange(e)} - /> + Color +
+ +
- What's it about? + ) : ( - ) } {" "} - - diff --git a/public/icon-css.svg b/public/icon-css.svg new file mode 100644 index 0000000..379530f --- /dev/null +++ b/public/icon-css.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/icon-jpg.svg b/public/icon-jpg.svg new file mode 100644 index 0000000..9f9bc29 --- /dev/null +++ b/public/icon-jpg.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/icon-png-jpg.svg b/public/icon-png-jpg.svg new file mode 100644 index 0000000..4dd3216 --- /dev/null +++ b/public/icon-png-jpg.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/public/icon-png.svg b/public/icon-png.svg new file mode 100644 index 0000000..0e2b268 --- /dev/null +++ b/public/icon-png.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/icon-svg.svg b/public/icon-svg.svg new file mode 100644 index 0000000..c8e89bf --- /dev/null +++ b/public/icon-svg.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/styles/global.css b/styles/global.css index 854068d..8eff597 100644 --- a/styles/global.css +++ b/styles/global.css @@ -10,6 +10,7 @@ /* Primary Colors */ --color-primary-accent: #18ffff; + --color-primary-accent-rgb: 24, 255, 255; --color-primary-accent-light: #52ffff; --color-primary-accent-dark: #00ebeb; --color-primary-pink: #f50057; @@ -40,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; @@ -163,7 +164,8 @@ code { background-color: var(--color-brand-light); } -.btn-secondary:active { +.btn-secondary:active, +.btn-secondary.focus { border-color: var(--color-brand-dark) !important; background-color: var(--color-brand-dark) !important; } @@ -180,6 +182,7 @@ code { .btn-outline-info:focus { border-color: var(--color-brand); background-color: rgba(var(--color-brand-rgb), 0.1) !important; + box-shadow: 0 0 0 0.2rem rgba(var(--color-brand-rgb), 0.3); color: var(--color-brand); } @@ -189,6 +192,16 @@ code { color: var(--color-brand) !important; } +.btn-outline-info.active { + border-color: var(--color-brand-dark) !important; + background-color: var(--color-brand-dark) !important; + color: var(--color-neutral-10) !important; +} + +.btn-outline-info.active { + box-shadow: 0 0 0 0.2rem rgba(var(--color-brand-rgb), 0.3); +} + .btn-danger { padding: 0.8rem 1.4rem; border: solid 1px var(--color-primary-pink); @@ -222,7 +235,8 @@ code { box-shadow: 0 0 0 0 rgba(0,0,0,0); } -.btn-outline-secondary:active { +.btn-outline-secondary:active, +.btn-outline-secondary.focus { box-shadow: 0 0 0 0 rgba(0,0,0,0); background-color: rgba(var(--color-neutral-10-rgb), 100%) !important; color: var(--color-brand) !important; @@ -253,9 +267,17 @@ code { .btn-outline-dark:active { box-shadow: 0 0 0 0 rgba(0,0,0,0); background-color: rgba(var(--color-neutral-100-rgb), 100%) !important; - color: var(--color-brand) !important; + color: var(--color-neutral-20) !important; +} + + +/* Button Group */ +.btn-group-toggle .btn { + font-weight: var(--fw-normal); + font-size: var(--fs-sm); } + /* Button Sizes */ .btn { padding: 0.64rem 1.4rem; @@ -290,6 +312,14 @@ code { margin-right: 0; } +.btn-icon--rounded { + border-radius: 50%; + padding: 0.6rem; + width: 3.6rem; + height: 3.6rem; + border-width: 0.3rem; +} + /* Dropdown Menu */ .dropdown-menu { border-color: transparent; @@ -310,6 +340,11 @@ code { color: var(--color-brand); } +.dropdown-menu .dropdown-item:active { + background-color: var(--color-brand); + color: var(--color-neutral-10); +} + .dropdown-toggle::after { margin-left: .8em; } @@ -328,8 +363,15 @@ 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; padding: 0.1rem 0.2rem; -} \ No newline at end of file +} +