mirror of
https://github.com/vercel/commerce.git
synced 2025-03-14 22:42:33 +00:00
Refactor styling a bit to include opacity transition
This commit is contained in:
parent
71fce97316
commit
caaf5ac0a0
@ -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;
|
||||
|
@ -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
|
||||
|
@ -1 +1 @@
|
||||
export { default } from './Featurebar'
|
||||
export { default } from './FeatureBar'
|
||||
|
@ -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> */}
|
||||
|
@ -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'
|
||||
|
Loading…
x
Reference in New Issue
Block a user