4
0
forked from crowetic/commerce

Decrese size

This commit is contained in:
Belen Curcio 2020-10-24 19:35:16 -03:00
parent 7d48c22c23
commit 6b4d32a7d3
4 changed files with 47 additions and 18 deletions

View File

@ -98,3 +98,37 @@ body {
a {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.fadeIn {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}
@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

View File

@ -1,6 +1,6 @@
import React, { FC } from 'react'
import { Switch } from '@headlessui/react'
import { HiSun, HiMoon } from 'react-icons/hi'
import { Moon, Sun } from '@components/icon'
interface Props {
className?: string
checked: boolean
@ -35,7 +35,7 @@ const Toggle: FC<Props> = ({ className, checked, onChange }) => {
: 'opacity-100 ease-in duration-150'
} absolute inset-0 h-full w-full flex items-center justify-center transition-opacity`}
>
<HiSun className="h-3 w-3 text-gray-400" />
<Sun className="h-3 w-3 text-gray-400" />
</span>
<span
className={`${
@ -44,7 +44,7 @@ const Toggle: FC<Props> = ({ className, checked, onChange }) => {
: 'opacity-0 ease-out duration-150'
} opacity-0 ease-out duration-150 absolute inset-0 h-full w-full flex items-center justify-center transition-opacity`}
>
<HiMoon className="h-3 w-3 text-yellow-400" />
<Moon className="h-3 w-3 text-yellow-400" />
</span>
</span>
</span>

View File

@ -22,10 +22,7 @@
"@headlessui/react": "^0.2.0",
"@react-aria/overlays": "^3.4.0",
"@tailwindcss/ui": "^0.6.2",
"animate.css": "^4.1.1",
"bowser": "^2.11.0",
"bunyan": "^1.8.14",
"bunyan-prettystream": "^0.1.3",
"classnames": "^2.2.6",
"cookie": "^0.4.1",
"js-cookie": "^2.2.1",
@ -35,16 +32,12 @@
"next": "^9.5.6-canary.14",
"next-seo": "^4.11.0",
"next-themes": "^0.0.4",
"nextjs-progressbar": "^0.0.6",
"postcss-import": "^13.0.0",
"postcss-nesting": "^7.0.1",
"react": "^16.14.0",
"react-aria": "^3.0.0",
"react-dom": "^16.14.0",
"react-icons": "^3.11.0",
"react-merge-refs": "^1.1.0",
"react-swipeable-views": "^0.13.9",
"react-swipeable-views-utils": "^0.14.0-alpha.0",
"react-ticker": "^1.2.2",
"swr": "^0.3.3",
"tailwindcss": "^1.9"
@ -69,7 +62,9 @@
"postcss-flexbugs-fixes": "^4.2.1",
"postcss-preset-env": "^6.7.0",
"prettier": "^2.1.2",
"typescript": "^4.0.3"
"typescript": "^4.0.3",
"bunyan": "^1.8.14",
"bunyan-prettystream": "^0.1.3"
},
"resolutions": {
"webpack": "^5.0.0-beta.30"

View File

@ -111,12 +111,12 @@ export default function Search({
</ul>
</div>
<div className="col-span-8">
<div className="mb-12 animate__animated animate__fadeIn">
<div className="mb-12 transition ease-in duration-75">
{data ? (
<>
<span
className={cn('animate__animated', {
animate__fadeIn: data.found,
className={cn('animated', {
fadeIn: data.found,
hidden: !data.found,
})}
>
@ -124,8 +124,8 @@ export default function Search({
<strong>{q}</strong>"
</span>
<span
className={cn('animate__animated', {
animate__fadeIn: !data.found,
className={cn('animated', {
fadeIn: !data.found,
hidden: data.found,
})}
>
@ -145,7 +145,7 @@ export default function Search({
<ProductCard
variant="simple"
key={node.path}
className="animate__animated animate__fadeIn"
className="animated fadeIn"
product={node}
imgWidth={480}
imgHeight={480}
@ -157,7 +157,7 @@ export default function Search({
{rangeMap(12, (i) => (
<Skeleton
key={i}
className="w-full animate__animated animate__fadeIn"
className="w-full animated fadeIn"
height={325}
/>
))}