diff --git a/components/button/index.module.scss b/components/button/index.module.scss index 4ce4c5f..e44dc07 100644 --- a/components/button/index.module.scss +++ b/components/button/index.module.scss @@ -15,6 +15,14 @@ &:active { outline: none; } + + &:hover { + transform: translate3d(0, -2px, 0); + } + + &:active { + transform: translate3d(0, 0, 0); + } } .primary { diff --git a/components/drag-and-drop/index.module.scss b/components/drag-and-drop/index.module.scss index 0c0953b..949baf1 100644 --- a/components/drag-and-drop/index.module.scss +++ b/components/drag-and-drop/index.module.scss @@ -215,7 +215,7 @@ } :global(.dark-mode) .imageInfo { - border-top: 1px solid $darker-grey; + border-top: 1px solid $dark-grey; } .imageOptionsWrapper { @@ -225,7 +225,7 @@ } :global(.dark-mode) .imageOptionsWrapper { - border-top: 1px solid $darker-grey; + border-top: 1px solid $dark-grey; } .imageOptions { @@ -342,7 +342,7 @@ } :global(.dark-mode) .imageFooter { - border-top: 1px solid $darker-grey; + border-top: 1px solid $dark-grey; } .spaceBetween { diff --git a/components/drag-and-drop/index.tsx b/components/drag-and-drop/index.tsx index 6d8f0df..da06b10 100644 --- a/components/drag-and-drop/index.tsx +++ b/components/drag-and-drop/index.tsx @@ -53,7 +53,7 @@ const DragAndDrop = ({ onFile, onGenerate, onError }: DragAndDropProps) => { const [zipData, setZipData] = useState() const [isModalOpen, setIsModalOpen] = useState(false) const [copied, setCopied] = useState(false) - const PWADisabled = !isPngOrSvg || (!isSvg && !is512px) + const PWADisabled = !isSvg && !is512px let sizesCount = 16 if (isSvg) { sizesCount += 1 @@ -245,19 +245,19 @@ const DragAndDrop = ({ onFile, onGenerate, onError }: DragAndDropProps) => {
{isSquare ? : } - + Square image
{isPngOrSvg ? : } - + PNG or SVG
{isSvg || is310px ? : } - + 310px or higher
@@ -269,7 +269,7 @@ const DragAndDrop = ({ onFile, onGenerate, onError }: DragAndDropProps) => {
setPwa(!pwa)}> - + PWA compatible @@ -280,7 +280,7 @@ const DragAndDrop = ({ onFile, onGenerate, onError }: DragAndDropProps) => {
setDarkMode(!darkMode)}> - + Dark Mode version diff --git a/components/svgs/svg-checkbox.module.scss b/components/svgs/svg-checkbox.module.scss new file mode 100644 index 0000000..025bbe0 --- /dev/null +++ b/components/svgs/svg-checkbox.module.scss @@ -0,0 +1,47 @@ +@import '../../styles/variables.scss'; + +.unchecked { + fill: #f7f7f8; + stroke: #ccc; + transition: all 100ms ease-in-out; + + &.disabled { + fill: #ececec; + stroke: #ccc; + } +} + +:global(.dark-mode) .unchecked { + fill: $dark-grey; + stroke: $grey-dark; + + &.disabled { + fill: $dark-black; + stroke: $dark-grey; + } +} + +.checkBg { + opacity: 0; + fill: $link; + transition: all 100ms ease-in-out; + transform: scale(0); + transform-origin: center; +} + +.checkBgChecked { + opacity: 1; + transform: scale(1); +} + +.checkMark { + stroke: #f7f7f8; + stroke-dasharray: 12; + stroke-dashoffset: 12; + transition: all 150ms 100ms ease-in-out; +} + +.checkMarkChecked { + stroke: #fff; + stroke-dashoffset: 0; +} diff --git a/components/svgs/svg-checkbox.tsx b/components/svgs/svg-checkbox.tsx index 90ea396..2236e1a 100644 --- a/components/svgs/svg-checkbox.tsx +++ b/components/svgs/svg-checkbox.tsx @@ -1,6 +1,8 @@ import React from 'react' import classnames from 'classnames' +import styles from './svg-checkbox.module.scss' + type SvgCheckboxProps = { checked: boolean disabled?: boolean @@ -14,50 +16,19 @@ const SvgCheckbox: React.FC - ) } diff --git a/components/tool-title/index.tsx b/components/tool-title/index.tsx index eb6794e..d88e123 100644 --- a/components/tool-title/index.tsx +++ b/components/tool-title/index.tsx @@ -7,10 +7,10 @@ import styles from './index.module.scss' const ToolTitle = () => (
- + Favycon - + APP
diff --git a/components/typography/index.module.scss b/components/typography/index.module.scss index 36acc38..1374a6c 100644 --- a/components/typography/index.module.scss +++ b/components/typography/index.module.scss @@ -75,6 +75,10 @@ font-weight: 700; } +.extraBold { + font-weight: 800; +} + .black { color: $black; transition: color 0.2s ease; diff --git a/components/typography/index.tsx b/components/typography/index.tsx index 5ce51e7..e35f338 100644 --- a/components/typography/index.tsx +++ b/components/typography/index.tsx @@ -16,7 +16,7 @@ type TypographyProps = { | 'superscript' | 'title' | 'largeTitle' - weight: 'regular' | 'medium' | 'semiBold' | 'bold' + weight: 'regular' | 'medium' | 'semiBold' | 'bold' | 'extraBold' color: 'black' | 'gray' | 'white' | 'green' tag?: string muted?: boolean diff --git a/public/favicon.svg b/public/favicon.svg index 610bdf9..6246e52 100644 --- a/public/favicon.svg +++ b/public/favicon.svg @@ -1,29 +1,29 @@ - - - - - - + + + + + + diff --git a/public/fonts/Manrope/Manrope-Bold.woff b/public/fonts/Manrope/Manrope-Bold.woff deleted file mode 100644 index 75e3a44..0000000 Binary files a/public/fonts/Manrope/Manrope-Bold.woff and /dev/null differ diff --git a/public/fonts/Manrope/Manrope-Bold.woff2 b/public/fonts/Manrope/Manrope-Bold.woff2 deleted file mode 100644 index 97f295a..0000000 Binary files a/public/fonts/Manrope/Manrope-Bold.woff2 and /dev/null differ diff --git a/public/fonts/Manrope/Manrope-Medium.woff b/public/fonts/Manrope/Manrope-Medium.woff deleted file mode 100644 index a2b2b9e..0000000 Binary files a/public/fonts/Manrope/Manrope-Medium.woff and /dev/null differ diff --git a/public/fonts/Manrope/Manrope-Medium.woff2 b/public/fonts/Manrope/Manrope-Medium.woff2 deleted file mode 100644 index e23deaa..0000000 Binary files a/public/fonts/Manrope/Manrope-Medium.woff2 and /dev/null differ diff --git a/public/fonts/Manrope/Manrope-Regular.woff b/public/fonts/Manrope/Manrope-Regular.woff deleted file mode 100644 index e828391..0000000 Binary files a/public/fonts/Manrope/Manrope-Regular.woff and /dev/null differ diff --git a/public/fonts/Manrope/Manrope-Regular.woff2 b/public/fonts/Manrope/Manrope-Regular.woff2 deleted file mode 100644 index d630760..0000000 Binary files a/public/fonts/Manrope/Manrope-Regular.woff2 and /dev/null differ diff --git a/public/fonts/Manrope/Manrope-SemiBold.woff b/public/fonts/Manrope/Manrope-SemiBold.woff deleted file mode 100644 index 43ba21d..0000000 Binary files a/public/fonts/Manrope/Manrope-SemiBold.woff and /dev/null differ diff --git a/public/fonts/Manrope/Manrope-SemiBold.woff2 b/public/fonts/Manrope/Manrope-SemiBold.woff2 deleted file mode 100644 index 63fec32..0000000 Binary files a/public/fonts/Manrope/Manrope-SemiBold.woff2 and /dev/null differ diff --git a/styles/font.scss b/styles/font.scss index 24796e6..fb5c30a 100644 --- a/styles/font.scss +++ b/styles/font.scss @@ -1,36 +1,51 @@ @font-face { font-family: 'Manrope'; - src: url('/fonts/Manrope/Manrope-Regular.woff2') format('woff2'), - url('/fonts/Manrope/Manrope-Regular.woff') format('woff'); font-style: normal; font-weight: 400; font-display: swap; + src: url(https://fonts.gstatic.com/s/manrope/v1/xn7gYHE41ni1AdIRggexSvfedN4.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, + U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Manrope'; - src: url('/fonts/Manrope/Manrope-Medium.woff2') format('woff2'), - url('/fonts/Manrope/Manrope-Medium.woff') format('woff'); font-style: normal; font-weight: 500; font-display: swap; + src: url(https://fonts.gstatic.com/s/manrope/v1/xn7gYHE41ni1AdIRggexSvfedN4.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, + U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Manrope'; - src: url('/fonts/Manrope/Manrope-SemiBold.woff2') format('woff2'), - url('/fonts/Manrope/Manrope-SemiBold.woff') format('woff'); font-style: normal; font-weight: 600; font-display: swap; + src: url(https://fonts.gstatic.com/s/manrope/v1/xn7gYHE41ni1AdIRggexSvfedN4.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, + U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Manrope'; - src: url('/fonts/Manrope/Manrope-Bold.woff2') format('woff2'), url('/fonts/Manrope/Manrope-Bold.woff') format('woff'); font-style: normal; font-weight: 700; font-display: swap; + src: url(https://fonts.gstatic.com/s/manrope/v1/xn7gYHE41ni1AdIRggexSvfedN4.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, + U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + +@font-face { + font-family: 'Manrope'; + font-style: normal; + font-weight: 800; + font-display: swap; + src: url(https://fonts.gstatic.com/s/manrope/v1/xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk59E9_C-b_Tfc7AGrY.woff) format('woff'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, + U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face {