fixed some bugs
This commit is contained in:
@jcarymuhammedow
@@ -136,7 +136,7 @@ export default function CartPage() {
|
||||
shipping_method: "standart",
|
||||
payment_type_id: paymentType.id,
|
||||
region: selectedRegion,
|
||||
note: note || undefined,
|
||||
notes: note || undefined,
|
||||
},
|
||||
{
|
||||
onSuccess: () => {
|
||||
|
||||
@@ -44,72 +44,72 @@
|
||||
}
|
||||
|
||||
:root {
|
||||
--radius: 0.625rem;
|
||||
--background: #eff3f6;
|
||||
--foreground: oklch(0.141 0.005 285.823);
|
||||
--card: oklch(1 0 0);
|
||||
--card-foreground: oklch(0.141 0.005 285.823);
|
||||
--popover: oklch(1 0 0);
|
||||
--popover-foreground: oklch(0.141 0.005 285.823);
|
||||
--primary: oklch(0.21 0.006 285.885);
|
||||
--primary-foreground: oklch(0.985 0 0);
|
||||
--secondary: oklch(0.967 0.001 286.375);
|
||||
--secondary-foreground: oklch(0.21 0.006 285.885);
|
||||
--muted: oklch(0.967 0.001 286.375);
|
||||
--muted-foreground: oklch(0.552 0.016 285.938);
|
||||
--accent: oklch(0.967 0.001 286.375);
|
||||
--accent-foreground: oklch(0.21 0.006 285.885);
|
||||
--destructive: oklch(0.577 0.245 27.325);
|
||||
--border: oklch(0.92 0.004 286.32);
|
||||
--input: oklch(0.92 0.004 286.32);
|
||||
--ring: oklch(0.705 0.015 286.067);
|
||||
--chart-1: oklch(0.646 0.222 41.116);
|
||||
--chart-2: oklch(0.6 0.118 184.704);
|
||||
--chart-3: oklch(0.398 0.07 227.392);
|
||||
--chart-4: oklch(0.828 0.189 84.429);
|
||||
--chart-5: oklch(0.769 0.188 70.08);
|
||||
--sidebar: oklch(0.985 0 0);
|
||||
--sidebar-foreground: oklch(0.141 0.005 285.823);
|
||||
--sidebar-primary: oklch(0.21 0.006 285.885);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.967 0.001 286.375);
|
||||
--sidebar-accent-foreground: oklch(0.21 0.006 285.885);
|
||||
--sidebar-border: oklch(0.92 0.004 286.32);
|
||||
--sidebar-ring: oklch(0.705 0.015 286.067);
|
||||
--radius: 1rem;
|
||||
--background: #fafafa;
|
||||
--foreground: #0a0a0a;
|
||||
--card: #ffffff;
|
||||
--card-foreground: #0a0a0a;
|
||||
--popover: #ffffff;
|
||||
--popover-foreground: #0a0a0a;
|
||||
--primary: #0a0a0a;
|
||||
--primary-foreground: #ffffff;
|
||||
--secondary: #f5f5f5;
|
||||
--secondary-foreground: #0a0a0a;
|
||||
--muted: #f5f5f5;
|
||||
--muted-foreground: #737373;
|
||||
--accent: #f5f5f5;
|
||||
--accent-foreground: #0a0a0a;
|
||||
--destructive: #ef4444;
|
||||
--border: #e5e5e5;
|
||||
--input: #e5e5e5;
|
||||
--ring: #0a0a0a;
|
||||
--chart-1: #6366f1;
|
||||
--chart-2: #8b5cf6;
|
||||
--chart-3: #ec4899;
|
||||
--chart-4: #f59e0b;
|
||||
--chart-5: #10b981;
|
||||
--sidebar: #ffffff;
|
||||
--sidebar-foreground: #0a0a0a;
|
||||
--sidebar-primary: #0a0a0a;
|
||||
--sidebar-primary-foreground: #ffffff;
|
||||
--sidebar-accent: #f5f5f5;
|
||||
--sidebar-accent-foreground: #0a0a0a;
|
||||
--sidebar-border: #e5e5e5;
|
||||
--sidebar-ring: #0a0a0a;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: oklch(0.141 0.005 285.823);
|
||||
--foreground: oklch(0.985 0 0);
|
||||
--card: oklch(0.21 0.006 285.885);
|
||||
--card-foreground: oklch(0.985 0 0);
|
||||
--popover: oklch(0.21 0.006 285.885);
|
||||
--popover-foreground: oklch(0.985 0 0);
|
||||
--primary: oklch(0.92 0.004 286.32);
|
||||
--primary-foreground: oklch(0.21 0.006 285.885);
|
||||
--secondary: oklch(0.274 0.006 286.033);
|
||||
--secondary-foreground: oklch(0.985 0 0);
|
||||
--muted: oklch(0.274 0.006 286.033);
|
||||
--muted-foreground: oklch(0.705 0.015 286.067);
|
||||
--accent: oklch(0.274 0.006 286.033);
|
||||
--accent-foreground: oklch(0.985 0 0);
|
||||
--destructive: oklch(0.704 0.191 22.216);
|
||||
--border: oklch(1 0 0 / 10%);
|
||||
--input: oklch(1 0 0 / 15%);
|
||||
--ring: oklch(0.552 0.016 285.938);
|
||||
--chart-1: oklch(0.488 0.243 264.376);
|
||||
--chart-2: oklch(0.696 0.17 162.48);
|
||||
--chart-3: oklch(0.769 0.188 70.08);
|
||||
--chart-4: oklch(0.627 0.265 303.9);
|
||||
--chart-5: oklch(0.645 0.246 16.439);
|
||||
--sidebar: oklch(0.21 0.006 285.885);
|
||||
--sidebar-foreground: oklch(0.985 0 0);
|
||||
--sidebar-primary: oklch(0.488 0.243 264.376);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.274 0.006 286.033);
|
||||
--sidebar-accent-foreground: oklch(0.985 0 0);
|
||||
--sidebar-border: oklch(1 0 0 / 10%);
|
||||
--sidebar-ring: oklch(0.552 0.016 285.938);
|
||||
--background: #0a0a0a;
|
||||
--foreground: #fafafa;
|
||||
--card: #171717;
|
||||
--card-foreground: #fafafa;
|
||||
--popover: #171717;
|
||||
--popover-foreground: #fafafa;
|
||||
--primary: #fafafa;
|
||||
--primary-foreground: #0a0a0a;
|
||||
--secondary: #262626;
|
||||
--secondary-foreground: #fafafa;
|
||||
--muted: #262626;
|
||||
--muted-foreground: #a3a3a3;
|
||||
--accent: #262626;
|
||||
--accent-foreground: #fafafa;
|
||||
--destructive: #dc2626;
|
||||
--border: #262626;
|
||||
--input: #262626;
|
||||
--ring: #fafafa;
|
||||
--chart-1: #818cf8;
|
||||
--chart-2: #a78bfa;
|
||||
--chart-3: #f472b6;
|
||||
--chart-4: #fbbf24;
|
||||
--chart-5: #34d399;
|
||||
--sidebar: #171717;
|
||||
--sidebar-foreground: #fafafa;
|
||||
--sidebar-primary: #fafafa;
|
||||
--sidebar-primary-foreground: #0a0a0a;
|
||||
--sidebar-accent: #262626;
|
||||
--sidebar-accent-foreground: #fafafa;
|
||||
--sidebar-border: #262626;
|
||||
--sidebar-ring: #fafafa;
|
||||
}
|
||||
|
||||
@layer base {
|
||||
@@ -117,13 +117,52 @@
|
||||
@apply border-border outline-ring/50;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
@apply bg-background text-foreground antialiased;
|
||||
}
|
||||
}
|
||||
|
||||
/* Toast Customization */
|
||||
[data-sonner-toast] {
|
||||
@apply rounded-2xl shadow-lg border-0;
|
||||
}
|
||||
|
||||
[data-sonner-toast] [data-description] {
|
||||
color: #000 !important;
|
||||
opacity: 0.9;
|
||||
color: #525252 !important;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
[data-sonner-toast][data-type="success"] {
|
||||
@apply bg-emerald-50 text-emerald-900;
|
||||
}
|
||||
|
||||
[data-sonner-toast][data-type="error"] {
|
||||
@apply bg-red-50 text-red-900;
|
||||
}
|
||||
|
||||
/* Scrollbar Styling */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
@apply bg-transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
@apply bg-gray-300 rounded-full;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
@apply bg-gray-400;
|
||||
}
|
||||
|
||||
.dark ::-webkit-scrollbar-thumb {
|
||||
@apply bg-gray-700;
|
||||
}
|
||||
|
||||
.dark ::-webkit-scrollbar-thumb:hover {
|
||||
@apply bg-gray-600;
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
@@ -133,47 +172,109 @@
|
||||
.bg-bg {
|
||||
background-color: var(--bg);
|
||||
}
|
||||
|
||||
/* Custom Gradient Utilities */
|
||||
.gradient-primary {
|
||||
background: linear-gradient(135deg, #0a0a0a 0%, #262626 100%);
|
||||
}
|
||||
|
||||
.gradient-card {
|
||||
background: linear-gradient(145deg, #fafafa 0%, #f5f5f5 100%);
|
||||
}
|
||||
|
||||
/* Animation Utilities */
|
||||
.animate-fade-in {
|
||||
animation: fadeIn 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.animate-scale-up {
|
||||
animation: scaleUp 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.animate-slide-up {
|
||||
animation: slideUp 0.3s ease-out;
|
||||
}
|
||||
|
||||
/* Shopping Cart Animations */
|
||||
.stroke-primary {
|
||||
stroke: #005bff;
|
||||
stroke: #0a0a0a;
|
||||
}
|
||||
|
||||
.stroke-track {
|
||||
stroke: hsla(var(--hue), 10%, 10%, 0.1);
|
||||
transition: stroke var(--trans-dur);
|
||||
stroke: rgba(10, 10, 10, 0.1);
|
||||
transition: stroke 0.3s ease;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.stroke-track {
|
||||
stroke: hsla(var(--hue), 10%, 90%, 0.1);
|
||||
stroke: rgba(250, 250, 250, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-msg {
|
||||
animation: msg 0.3s 13.7s linear forwards;
|
||||
}
|
||||
|
||||
.animate-msgLast {
|
||||
animation: msg 0.3s 14s linear reverse forwards;
|
||||
}
|
||||
|
||||
.animate-cartLines {
|
||||
animation: cartLines 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.animate-cartTop {
|
||||
animation: cartTop 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.animate-cartWheel1 {
|
||||
animation: cartWheel1 2s ease-in-out infinite;
|
||||
transform: rotate(-0.25turn);
|
||||
transform-origin: 43px 111px;
|
||||
}
|
||||
|
||||
.animate-cartWheel2 {
|
||||
animation: cartWheel2 2s ease-in-out infinite;
|
||||
transform: rotate(0.25turn);
|
||||
transform-origin: 102px 111px;
|
||||
}
|
||||
|
||||
.animate-cartWheelStroke {
|
||||
animation: cartWheelStroke 2s ease-in-out infinite;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scaleUp {
|
||||
from {
|
||||
transform: scale(0.95);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
transform: translateY(10px);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes msg {
|
||||
from {
|
||||
opacity: 1;
|
||||
@@ -188,6 +289,7 @@
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes cartLines {
|
||||
from,
|
||||
to {
|
||||
@@ -198,6 +300,7 @@
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes cartTop {
|
||||
from {
|
||||
stroke-dashoffset: -338;
|
||||
@@ -209,6 +312,7 @@
|
||||
stroke-dashoffset: 338;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes cartWheel1 {
|
||||
from {
|
||||
transform: rotate(-0.25turn);
|
||||
@@ -217,6 +321,7 @@
|
||||
transform: rotate(2.75turn);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes cartWheel2 {
|
||||
from {
|
||||
transform: rotate(0.25turn);
|
||||
@@ -225,6 +330,7 @@
|
||||
transform: rotate(3.25turn);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes cartWheelStroke {
|
||||
from,
|
||||
to {
|
||||
@@ -234,3 +340,21 @@
|
||||
stroke-dashoffset: 40.84;
|
||||
}
|
||||
}
|
||||
|
||||
/* Focus Visible Improvements */
|
||||
*:focus-visible {
|
||||
@apply outline-2 outline-offset-2 outline-gray-900;
|
||||
}
|
||||
|
||||
.dark *:focus-visible {
|
||||
@apply outline-gray-100;
|
||||
}
|
||||
|
||||
/* Selection Styling */
|
||||
::selection {
|
||||
@apply bg-gray-900 text-white;
|
||||
}
|
||||
|
||||
.dark ::selection {
|
||||
@apply bg-gray-100 text-gray-900;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user