Refactor styling a bit to include opacity transition

This commit is contained in:
Martin Bavio 2020-10-30 20:32:10 -03:00
parent 71fce97316
commit caaf5ac0a0
5 changed files with 15 additions and 14 deletions

View File

@ -1,5 +1,5 @@
.root {
@apply text-center p-6 bg-primary text-sm flex-row justify-center items-center font-medium fixed bottom-0 w-full z-30;
@apply text-center p-6 bg-primary text-sm flex-row justify-center items-center font-medium fixed bottom-0 w-full z-30 transition-all duration-300 ease-out;
@screen md {
@apply flex text-left;

View File

@ -1,9 +1,7 @@
import cn from 'classnames'
import { FC } from 'react'
import styles from './FeatureBar.module.css'
import s from './Featurebar.module.css'
interface Props {
interface FeatureBarProps {
className?: string
title: string
description?: string
@ -11,7 +9,7 @@ interface Props {
action?: React.ReactNode
}
const Featurebar: FC<Props> = ({
const FeatureBar: React.FC<FeatureBarProps> = ({
title,
description,
className,
@ -19,9 +17,11 @@ const Featurebar: FC<Props> = ({
hide,
}) => {
const rootClassName = cn(
s.root,
styles.root,
{
'transition-transform transform duration-500 ease-out translate-y-full': hide,
transform: true,
'translate-y-0 opacity-100': !hide,
'translate-y-full opacity-0': hide,
},
className
)
@ -36,4 +36,4 @@ const Featurebar: FC<Props> = ({
)
}
export default Featurebar
export default FeatureBar

View File

@ -1 +1 @@
export { default } from './Featurebar'
export { default } from './FeatureBar'

View File

@ -6,7 +6,7 @@ import { CommerceProvider } from '@bigcommerce/storefront-data-hooks'
import { useAcceptCookies } from '@lib/hooks/useAcceptCookies'
import { CartSidebarView } from '@components/cart'
import { Container, Sidebar, Button, Modal, Toast } from '@components/ui'
import { Navbar, Featurebar, Footer } from '@components/core'
import { Navbar, FeatureBar, Footer } from '@components/core'
import { LoginView, SignUpView, ForgotPassword } from '@components/auth'
import { useUI } from '@components/ui/context'
import { usePreventScroll } from '@react-aria/overlays'
@ -54,7 +54,7 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
}
}, [handleScroll])
const handleAcceptCookies = () => {}
console.log(acceptedCookies)
return (
<CommerceProvider locale={locale}>
@ -80,7 +80,7 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
{modalView === 'SIGNUP_VIEW' && <SignUpView />}
{modalView === 'FORGOT_VIEW' && <ForgotPassword />}
</Modal>
<Featurebar
<FeatureBar
title="This site uses cookies to improve your experience. By clicking, you agree to our Privacy Policy."
hide={acceptedCookies}
action={
@ -89,6 +89,7 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
</Button>
}
/>
{/* <Toast open={displayToast} onClose={closeModal}>
{toastText}
</Toast> */}

View File

@ -1,5 +1,5 @@
export { default as Avatar } from './Avatar'
export { default as Featurebar } from './Featurebar'
export { default as FeatureBar } from './FeatureBar'
export { default as Footer } from './Footer'
export { default as Layout } from './Layout'
export { default as Navbar } from './Navbar'