4
0
forked from crowetic/commerce

Improve styling of featurebar/searchbar

This commit is contained in:
paco 2020-10-08 13:16:30 -06:00
parent 791e8cf18f
commit 8983f51e2c
No known key found for this signature in database
GPG Key ID: CD243AF4E535B475
5 changed files with 47 additions and 47 deletions

View File

@ -10,14 +10,14 @@ interface Props {
const Featurebar: FC<Props> = ({ title, description, className }) => { const Featurebar: FC<Props> = ({ title, description, className }) => {
const rootClassName = cn( const rootClassName = cn(
'hidden py-4 px-6 bg-black text-white md:flex flex-row justify-center items-center;', 'hidden py-2 px-6 bg-gray-100 text-sm text-gray-600 md:flex flex-row justify-center items-center font-medium',
className className
) )
return ( return (
<div className={rootClassName}> <div className={rootClassName}>
<span className="text-white font-medium">{title}</span> <span>{title}</span>
<span className={s.separator} /> <span className={s.separator} />
<span className="text-white font-medium">{description}</span> <span>{description}</span>
</div> </div>
) )
} }

View File

@ -1,10 +1,3 @@
.root {
}
.container {
@apply flex justify-between items-center flex-row px-6 h-20 relative;
}
.link { .link {
@apply group text-gray-500 inline-flex items-center text-base leading-6 font-medium hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 cursor-pointer; @apply group text-gray-500 inline-flex items-center text-base leading-6 font-medium hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 cursor-pointer;
} }

View File

@ -10,25 +10,40 @@ interface Props {
} }
const Navbar: FC<Props> = ({ className }) => { const Navbar: FC<Props> = ({ className }) => {
const rootClassName = cn(s.root, className) const rootClassName = className
return ( return (
<div className={rootClassName}> <div className={rootClassName}>
<Container> <Container>
<div className={s.container}> <div className="flex justify-between align-center flex-row px-6 py-4 md:py-6 relative">
<Link href="/"> <div className="flex flex-1 items-center">
<span className="flex-0 cursor-pointer"> <Link href="/">
<Logo /> <a className="cursor-pointer">
</span> <Logo />
</Link> </a>
<div className="flex flex-row h-full content-center flex-1 ml-10"> </Link>
<nav className="hidden flex-row items-center px-6 lg:flex space-x-4"> <nav className="space-x-4 ml-6 hidden md:block">
<a className={s.link}>All</a> <Link href="/">
<a className={s.link}>Clothes</a> <a className={s.link}>All</a>
<a className={s.link}>Accesories</a> </Link>
<Link href="/">
<a className={s.link}>Clothes</a>
</Link>
<Link href="/">
<a className={s.link}>Accessories</a>
</Link>
</nav> </nav>
</div>
<div className="md:flex flex-1 justify-center hidden">
<Searchbar /> <Searchbar />
</div> </div>
<UserNav />
<div className="flex flex-initial md:flex-1 justify-end">
<UserNav />
</div>
</div>
<div className="block flex pb-4 md:hidden px-6">
<Searchbar />
</div> </div>
</Container> </Container>
</div> </div>

View File

@ -1,13 +1,5 @@
.root {
@apply px-4 items-center hidden md:flex;
}
.container {
@apply relative rounded-lg flex flex-row text-sm items-center bg-accent-1;
}
.input { .input {
@apply bg-transparent px-3 py-2 appearance-none w-full transition duration-150 ease-in-out rounded-lg text-accent-1 placeholder-accent-4; @apply bg-transparent px-3 py-2 appearance-none w-full transition duration-150 ease-in-out rounded-lg text-gray-600 placeholder-accent-4;
min-width: 300px; min-width: 300px;
} }

View File

@ -8,22 +8,22 @@ interface Props {
} }
const Searchbar: FC<Props> = ({ className }) => { const Searchbar: FC<Props> = ({ className }) => {
const rootClassName = cn(s.root, className)
return ( return (
<div className={rootClassName}> <div
<div className="flex-1 flex justify-between px-2"> className={cn(
<div className={s.container}> 'relative rounded-lg text-sm bg-accent-1 text-gray-600 w-full',
<input className={s.input} placeholder="Search for products..." /> className
<div className={s.iconContainer}> )}
<svg className={s.icon} fill="currentColor" viewBox="0 0 20 20"> >
<path <input className={s.input} placeholder="Search for products..." />
fillRule="evenodd" <div className={s.iconContainer}>
clipRule="evenodd" <svg className={s.icon} fill="currentColor" viewBox="0 0 20 20">
d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" <path
/> fillRule="evenodd"
</svg> clipRule="evenodd"
</div> d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
</div> />
</svg>
</div> </div>
</div> </div>
) )