forked from crowetic/commerce
Design Tweaks
This commit is contained in:
parent
f5f8b1570e
commit
6978b4d4bb
@ -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;
|
||||||
|
@ -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,
|
||||||
|
@ -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"
|
||||||
|
@ -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,
|
||||||
})}
|
})}
|
||||||
|
@ -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"
|
||||||
|
@ -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"
|
||||||
|
@ -9,7 +9,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.root:hover {
|
.root:hover {
|
||||||
@apply transform scale-110 bg-primary-accent;
|
@apply transform scale-110 bg-primary-hover;
|
||||||
}
|
}
|
||||||
|
|
||||||
.colorViolet {
|
.colorViolet {
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
)
|
)
|
||||||
|
@ -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 {
|
||||||
|
@ -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>
|
||||||
|
@ -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)',
|
||||||
|
Loading…
x
Reference in New Issue
Block a user