4
0
forked from crowetic/commerce

Design Tweaks

This commit is contained in:
Belen Curcio 2020-10-13 14:34:24 -03:00
parent f5f8b1570e
commit 6978b4d4bb
12 changed files with 20 additions and 16 deletions

View File

@ -2,8 +2,9 @@
:root { :root {
--bg-primary: white; --bg-primary: white;
--bg-primary-hover: rgba(0, 0, 0, 0.075);
--bg-primary-accent: #ddd;
--bg-secondary: black; --bg-secondary: black;
--bg-primary-accent: rgba(0, 0, 0, 0.075);
--text-primary: black; --text-primary: black;
--text-secondary: white; --text-secondary: white;
@ -14,7 +15,8 @@
[data-theme='dark'] { [data-theme='dark'] {
--bg-primary: black; --bg-primary: black;
--bg-secondary: white; --bg-secondary: white;
--bg-primary-accent: rgba(255, 255, 255, 0.075); --bg-primary-hover: rgba(255, 255, 255, 0.075);
--bg-primary-accent: #111;
--text-primary: white; --text-primary: white;
--text-secondary: black; --text-secondary: black;

View File

@ -1,6 +1,6 @@
.quantity { .quantity {
appearance: textfield; appearance: textfield;
@apply w-8 border-gray-300 border mx-3 rounded text-center text-sm; @apply w-8 border-gray-300 border mx-3 rounded text-center text-sm text-black;
} }
.quantity::-webkit-outer-spin-button, .quantity::-webkit-outer-spin-button,

View File

@ -56,8 +56,8 @@ const CartItem = ({
return ( return (
<li className="flex flex-row space-x-6 py-6"> <li className="flex flex-row space-x-6 py-6">
<div className="h-12 w-12 bg-violet"></div> <div className="h-12 w-12 bg-violet"></div>
<div className="flex-1 flex flex-col justify-between"> <div className="flex-1 flex flex-col justify-between text-primary">
<span>{item.name}</span> <span className="font-bold mb-3">{item.name}</span>
<div className="flex items-center"> <div className="flex items-center">
<button type="button" onClick={() => increaseQuantity(-1)}> <button type="button" onClick={() => increaseQuantity(-1)}>
<Minus width={18} height={18} /> <Minus width={18} height={18} />
@ -76,7 +76,7 @@ const CartItem = ({
</button> </button>
</div> </div>
</div> </div>
<div className="flex flex-col justify-between space-y-2"> <div className="flex flex-col justify-between space-y-2 text-primary">
<span>{price}</span> <span>{price}</span>
<button <button
className="flex justify-end" className="flex justify-end"

View File

@ -38,7 +38,7 @@ const CartSidebarView: FC = () => {
return ( return (
<div <div
className={cn('h-full flex flex-col', { className={cn('h-full flex flex-col', {
'bg-black text-white': isEmpty, 'bg-white text-black': isEmpty,
'bg-red text-white': error, 'bg-red text-white': error,
'bg-green text-white': success, 'bg-green text-white': success,
})} })}

View File

@ -3,7 +3,7 @@ const Minus = ({ ...props }) => {
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" {...props}> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" {...props}>
<path <path
d="M5 12H19" d="M5 12H19"
stroke="black" stroke="currentColor"
stroke-width="1.5" stroke-width="1.5"
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"

View File

@ -3,14 +3,14 @@ const Plus = ({ ...props }) => {
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" {...props}> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" {...props}>
<path <path
d="M12 5V19" d="M12 5V19"
stroke="black" stroke="currentColor"
stroke-width="1.5" stroke-width="1.5"
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"
/> />
<path <path
d="M5 12H19" d="M5 12H19"
stroke="black" stroke="currentColor"
stroke-width="1.5" stroke-width="1.5"
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"

View File

@ -9,7 +9,7 @@
} }
.root:hover { .root:hover {
@apply transform scale-110 bg-primary-accent; @apply transform scale-110 bg-primary-hover;
} }
.colorViolet { .colorViolet {

View File

@ -9,7 +9,7 @@ interface Props {
} }
const Hero: FC<Props> = ({ headline, description, className }) => { const Hero: FC<Props> = ({ headline, description, className }) => {
const rootClassName = cn('bg-black py-12 px-4 md:px-6', className) const rootClassName = cn('bg-black py-12', className)
return ( return (
<div className={rootClassName}> <div className={rootClassName}>
<Container> <Container>

View File

@ -6,12 +6,12 @@ const Logo = () => (
fill="none" fill="none"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<rect width="32" height="32" rx="16" fill="black" /> <rect width="32" height="32" rx="16" fill="var(--bg-secondary)" />
<path <path
fillRule="evenodd" fillRule="evenodd"
clipRule="evenodd" clipRule="evenodd"
d="M17.6482 10.1305L15.8785 7.02583L7.02979 22.5499H10.5278L17.6482 10.1305ZM19.8798 14.0457L18.11 17.1983L19.394 19.4511H16.8453L15.1056 22.5499H24.7272L19.8798 14.0457Z" d="M17.6482 10.1305L15.8785 7.02583L7.02979 22.5499H10.5278L17.6482 10.1305ZM19.8798 14.0457L18.11 17.1983L19.394 19.4511H16.8453L15.1056 22.5499H24.7272L19.8798 14.0457Z"
fill="white" fill="var(--bg-primary)"
/> />
</svg> </svg>
) )

View File

@ -1,5 +1,5 @@
.root { .root {
@apply grid grid-cols-12 w-full gap-6 px-3 py-6 border-b border-primary-accent; @apply grid grid-cols-12 w-full gap-6 px-3 py-6 border-b border-primary-hover;
&:nth-child(3n + 1) { &:nth-child(3n + 1) {
& .productBg { & .productBg {

View File

@ -24,7 +24,7 @@ const WishlistCard: FC<Props> = ({ className, data }) => {
<p className="mb-4"> <p className="mb-4">
Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake. Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake.
</p> </p>
<button className="py-1 px-3 border border-secondary rounded-md shadow-sm"> <button className="py-1 px-3 border border-secondary rounded-md shadow-sm hover:bg-primary-hover">
Add to cart Add to cart
</button> </button>
</div> </div>

View File

@ -17,6 +17,7 @@ module.exports = {
'accent-1': '#FAFAFA', 'accent-1': '#FAFAFA',
'accent-2': '#F1F3F5', 'accent-2': '#F1F3F5',
'accent-4': '#888', 'accent-4': '#888',
'accent-8': '#111111',
violet: '#7928CA', violet: '#7928CA',
pink: '#FF0080', pink: '#FF0080',
cyan: '#50E3C2', cyan: '#50E3C2',
@ -26,6 +27,7 @@ module.exports = {
primary: 'var(--bg-primary)', primary: 'var(--bg-primary)',
secondary: 'var(--bg-secondary)', secondary: 'var(--bg-secondary)',
'primary-accent': 'var(--bg-primary-accent)', 'primary-accent': 'var(--bg-primary-accent)',
'primary-hover': 'var(--bg-primary-accent)',
}, },
textColor: { textColor: {
base: 'var(--text-primary)', base: 'var(--text-primary)',