User setup added
This commit is contained in:
Sidharth Prabhu
@@ -97,7 +97,7 @@ const ItemCard: React.FC<ItemCardProps> = ({ item, isLast, variant = 'list' }) =
|
||||
) : (
|
||||
<div className="list-placeholder">🍲</div>
|
||||
)}
|
||||
{item.isPopular && <span className="bestseller-badge">Bestseller</span>}
|
||||
{item.isPopular && item.stock !== 0 && <span className="bestseller-badge">Bestseller</span>}
|
||||
{item.stock === 0 && <span className="soldout-badge">Sold Out</span>}
|
||||
</div>
|
||||
|
||||
|
||||
@@ -267,3 +267,328 @@ main::-webkit-scrollbar {
|
||||
.veg-nonveg-indicator.non-veg .dot {
|
||||
background-color: #ef4444;
|
||||
}
|
||||
|
||||
/* DESKTOP SCREEN OPTIMIZATIONS */
|
||||
@media (min-width: 769px) {
|
||||
body {
|
||||
display: block;
|
||||
background-color: var(--surface);
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 100% !important;
|
||||
width: 100% !important;
|
||||
margin: 0 !important;
|
||||
height: auto !important;
|
||||
min-height: 100vh !important;
|
||||
border-radius: 0 !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
background-color: var(--surface) !important;
|
||||
}
|
||||
|
||||
main {
|
||||
overflow-y: visible !important;
|
||||
}
|
||||
|
||||
/* Home Screen layout adjustments */
|
||||
.welcome-section {
|
||||
display: flex !important;
|
||||
justify-content: space-between !important;
|
||||
align-items: center !important;
|
||||
padding: 32px 60px 16px !important;
|
||||
}
|
||||
|
||||
.search-bar-container {
|
||||
padding: 16px 60px 24px !important;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
max-width: 550px !important;
|
||||
}
|
||||
|
||||
/* Grid listings on desktop - Full Width */
|
||||
.categories-grid {
|
||||
grid-template-columns: repeat(10, 1fr) !important;
|
||||
gap: 20px !important;
|
||||
padding: 0 60px 24px !important;
|
||||
}
|
||||
|
||||
.category-image-wrapper {
|
||||
max-width: 90px !important;
|
||||
max-height: 90px !important;
|
||||
}
|
||||
|
||||
.stalls-carousel {
|
||||
display: grid !important;
|
||||
grid-template-columns: repeat(4, 1fr) !important;
|
||||
gap: 24px !important;
|
||||
padding: 16px 60px 24px !important;
|
||||
overflow-x: visible !important;
|
||||
}
|
||||
|
||||
.stall-card {
|
||||
min-width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
height: 200px !important;
|
||||
}
|
||||
|
||||
.popular-carousel {
|
||||
display: grid !important;
|
||||
grid-template-columns: repeat(5, 1fr) !important;
|
||||
gap: 24px !important;
|
||||
padding: 16px 60px 24px !important;
|
||||
overflow-x: visible !important;
|
||||
}
|
||||
|
||||
/* Multi-column items listing */
|
||||
.recommended-section .items-list,
|
||||
.search-results-section .items-list,
|
||||
.stall-items-section .items-list {
|
||||
display: grid !important;
|
||||
grid-template-columns: repeat(3, 1fr) !important;
|
||||
gap: 24px !important;
|
||||
padding: 16px 60px 24px !important;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
padding: 24px 60px 12px !important;
|
||||
}
|
||||
|
||||
/* Floating Pill Bottom Navigation Bar */
|
||||
.bottom-nav {
|
||||
position: fixed !important;
|
||||
bottom: 24px !important;
|
||||
left: 50% !important;
|
||||
transform: translateX(-50%) !important;
|
||||
width: 500px !important;
|
||||
border-radius: 100px !important;
|
||||
box-shadow: 0 10px 40px rgba(44, 58, 42, 0.15) !important;
|
||||
border: 1px solid var(--border) !important;
|
||||
height: 64px !important;
|
||||
padding-bottom: 0 !important;
|
||||
z-index: 1001 !important;
|
||||
background: var(--surface) !important;
|
||||
}
|
||||
|
||||
/* Redesigned Item Detail Page for Desktop */
|
||||
.item-detail-page {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
padding: 0 !important;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.item-detail-page .detail-header-overlay {
|
||||
position: static !important;
|
||||
width: 100% !important;
|
||||
border-bottom: 1px solid var(--border) !important;
|
||||
}
|
||||
|
||||
.item-detail-page main {
|
||||
display: flex !important;
|
||||
flex-direction: row !important;
|
||||
gap: 40px !important;
|
||||
padding: 40px 60px !important;
|
||||
align-items: flex-start !important;
|
||||
}
|
||||
|
||||
.item-detail-page .item-hero {
|
||||
flex: 1 !important;
|
||||
height: 480px !important;
|
||||
border-radius: 20px !important;
|
||||
box-shadow: 0 10px 30px rgba(44, 58, 42, 0.08) !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.item-detail-page .item-hero-image {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
object-fit: cover !important;
|
||||
}
|
||||
|
||||
.item-detail-page .item-details-content {
|
||||
flex: 1.2 !important;
|
||||
margin-top: 0 !important;
|
||||
padding: 0 !important;
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
.item-detail-page .item-name-large {
|
||||
font-size: 2.2rem !important;
|
||||
font-weight: 850 !important;
|
||||
color: var(--text-dark) !important;
|
||||
}
|
||||
|
||||
.item-detail-page .item-subtitle {
|
||||
font-size: 1rem !important;
|
||||
color: var(--primary) !important;
|
||||
font-weight: 700 !important;
|
||||
}
|
||||
|
||||
.item-detail-page .item-long-description {
|
||||
font-size: 0.95rem !important;
|
||||
line-height: 1.6 !important;
|
||||
color: var(--text-mid) !important;
|
||||
margin-bottom: 24px !important;
|
||||
}
|
||||
|
||||
.item-detail-page .item-extra-info {
|
||||
background: var(--primary-light) !important;
|
||||
border-radius: 16px !important;
|
||||
padding: 20px !important;
|
||||
border: 1px solid var(--border) !important;
|
||||
margin-bottom: 24px !important;
|
||||
}
|
||||
|
||||
.item-detail-page .item-footer {
|
||||
position: static !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: space-between !important;
|
||||
background: var(--surface) !important;
|
||||
border: 1px solid var(--border) !important;
|
||||
border-radius: 20px !important;
|
||||
padding: 20px 24px !important;
|
||||
box-shadow: var(--shadow) !important;
|
||||
margin-top: 24px !important;
|
||||
}
|
||||
|
||||
.item-detail-page .footer-price-info {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
}
|
||||
|
||||
.item-detail-page .total-label {
|
||||
font-size: 0.8rem !important;
|
||||
text-transform: uppercase !important;
|
||||
letter-spacing: 0.5px !important;
|
||||
}
|
||||
|
||||
.item-detail-page .total-value {
|
||||
font-size: 1.8rem !important;
|
||||
font-weight: 850 !important;
|
||||
color: var(--primary) !important;
|
||||
}
|
||||
|
||||
.item-detail-page .primary-action-button {
|
||||
height: 48px !important;
|
||||
padding: 0 32px !important;
|
||||
font-size: 0.95rem !important;
|
||||
border-radius: 100px !important;
|
||||
width: auto !important;
|
||||
min-width: 160px !important;
|
||||
}
|
||||
|
||||
/* Stall Detail Page Split Flow */
|
||||
.stall-detail-page main.detail-content {
|
||||
display: flex !important;
|
||||
gap: 40px !important;
|
||||
padding: 24px 60px !important;
|
||||
align-items: flex-start !important;
|
||||
}
|
||||
|
||||
.stall-main-card {
|
||||
flex: 1 !important;
|
||||
max-width: 320px !important;
|
||||
margin: 0 !important;
|
||||
position: sticky !important;
|
||||
top: 24px !important;
|
||||
background: var(--surface) !important;
|
||||
padding: 24px !important;
|
||||
border-radius: 20px !important;
|
||||
border: 1px solid var(--border) !important;
|
||||
box-shadow: var(--shadow) !important;
|
||||
z-index: 100 !important;
|
||||
}
|
||||
|
||||
.stall-items-section {
|
||||
flex: 2.2 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.stall-items-section .section-title {
|
||||
padding: 0 0 16px 0 !important;
|
||||
}
|
||||
|
||||
.stall-items-section .items-list {
|
||||
display: grid !important;
|
||||
grid-template-columns: repeat(2, 1fr) !important;
|
||||
gap: 20px !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
/* Cart split flow */
|
||||
.cart-page main {
|
||||
display: flex !important;
|
||||
gap: 40px !important;
|
||||
padding: 24px 60px !important;
|
||||
align-items: flex-start !important;
|
||||
}
|
||||
|
||||
.cart-items-section {
|
||||
flex: 1.6 !important;
|
||||
}
|
||||
|
||||
.bill-details {
|
||||
flex: 1 !important;
|
||||
margin-top: 0 !important;
|
||||
background: var(--surface) !important;
|
||||
padding: 24px !important;
|
||||
border-radius: 16px !important;
|
||||
border: 1px solid var(--border) !important;
|
||||
box-shadow: var(--shadow) !important;
|
||||
}
|
||||
|
||||
.cart-footer {
|
||||
padding: 20px 60px !important;
|
||||
border-top: 1px solid var(--border) !important;
|
||||
}
|
||||
|
||||
/* Checkout split flow */
|
||||
.checkout-page main {
|
||||
display: flex !important;
|
||||
gap: 40px !important;
|
||||
padding: 24px 60px !important;
|
||||
align-items: flex-start !important;
|
||||
}
|
||||
|
||||
.checkout-section {
|
||||
flex: 1.6 !important;
|
||||
margin-bottom: 0 !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.checkout-summary-container-desktop {
|
||||
flex: 1 !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
gap: 24px !important;
|
||||
}
|
||||
|
||||
.checkout-page .order-summary-mini,
|
||||
.checkout-page .insufficient-warning-premium {
|
||||
margin: 0 !important;
|
||||
background: var(--surface) !important;
|
||||
padding: 24px !important;
|
||||
border-radius: 16px !important;
|
||||
border: 1px solid var(--border) !important;
|
||||
box-shadow: var(--shadow) !important;
|
||||
}
|
||||
|
||||
/* Handle footer buttons in desktop splits */
|
||||
.checkout-footer {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.desktop-checkout-action {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Hide desktop checkout actions on mobile */
|
||||
.desktop-checkout-action {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -336,52 +336,64 @@ const CheckoutScreen: React.FC = () => {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="order-summary-mini">
|
||||
<div className="summary-row">
|
||||
<span>{paymentMethod === 'RAZORPAY' ? 'Amount payable' : 'Tokens to be deducted'}</span>
|
||||
<span className="summary-price ritz-text">
|
||||
{paymentMethod === 'RAZORPAY' ? '₹' : '🅡'}{totalPrice.toLocaleString()}
|
||||
</span>
|
||||
<div className="checkout-summary-container-desktop">
|
||||
<div className="order-summary-mini">
|
||||
<div className="summary-row">
|
||||
<span>{paymentMethod === 'RAZORPAY' ? 'Amount payable' : 'Tokens to be deducted'}</span>
|
||||
<span className="summary-price ritz-text">
|
||||
{paymentMethod === 'RAZORPAY' ? '₹' : '🅡'}{totalPrice.toLocaleString()}
|
||||
</span>
|
||||
</div>
|
||||
<p className="tax-info">Inclusive of applicable item prices · No extra platform fee</p>
|
||||
</div>
|
||||
|
||||
{statusMessage && (
|
||||
<motion.div
|
||||
className="insufficient-warning-premium"
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
style={{ margin: '0 16px 12px' }}
|
||||
>
|
||||
<div className="warning-icon-wrapper">
|
||||
<AlertCircle size={18} />
|
||||
</div>
|
||||
<div className="warning-content">
|
||||
<p className="warning-instruction" style={{ margin: 0 }}>{statusMessage}</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{isInsufficient && paymentMethod === 'RITZ_TOKEN' && (
|
||||
<motion.div
|
||||
className="insufficient-warning-premium"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
>
|
||||
<div className="warning-icon-wrapper token-warning-visual">
|
||||
<img src={tokenImage} alt="" className="token-image-mini" />
|
||||
<div className="warning-icon-overlay">
|
||||
<AlertCircle size={16} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="warning-content">
|
||||
<div className="shortfall-amount">
|
||||
Short by <span className="highlight">🅡{(totalPrice - currentBalance).toLocaleString()}</span>
|
||||
</div>
|
||||
<p className="warning-instruction">Top up tokens, or pay online with Razorpay instead.</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
<div className="desktop-checkout-action">
|
||||
<button
|
||||
className="place-order-button ritz-order-btn"
|
||||
onClick={handlePlaceOrder}
|
||||
disabled={isProcessing || cart.length === 0 || (paymentMethod === 'RITZ_TOKEN' && isInsufficient)}
|
||||
>
|
||||
{payLabel()}
|
||||
</button>
|
||||
</div>
|
||||
<p className="tax-info">Inclusive of applicable item prices · No extra platform fee</p>
|
||||
</div>
|
||||
|
||||
{statusMessage && (
|
||||
<motion.div
|
||||
className="insufficient-warning-premium"
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
style={{ margin: '0 16px 12px' }}
|
||||
>
|
||||
<div className="warning-icon-wrapper">
|
||||
<AlertCircle size={18} />
|
||||
</div>
|
||||
<div className="warning-content">
|
||||
<p className="warning-instruction" style={{ margin: 0 }}>{statusMessage}</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{isInsufficient && paymentMethod === 'RITZ_TOKEN' && (
|
||||
<motion.div
|
||||
className="insufficient-warning-premium"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
>
|
||||
<div className="warning-icon-wrapper token-warning-visual">
|
||||
<img src={tokenImage} alt="" className="token-image-mini" />
|
||||
<div className="warning-icon-overlay">
|
||||
<AlertCircle size={16} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="warning-content">
|
||||
<div className="shortfall-amount">
|
||||
Short by <span className="highlight">🅡{(totalPrice - currentBalance).toLocaleString()}</span>
|
||||
</div>
|
||||
<p className="warning-instruction">Top up tokens, or pay online with Razorpay instead.</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</main>
|
||||
|
||||
<div className="checkout-footer">
|
||||
|
||||
@@ -7,16 +7,23 @@
|
||||
position: relative;
|
||||
height: 220px;
|
||||
width: 100%;
|
||||
z-index: 1 !important;
|
||||
}
|
||||
|
||||
.detail-header.sticky {
|
||||
height: auto;
|
||||
padding: 12px 16px;
|
||||
background: var(--surface);
|
||||
z-index: 100;
|
||||
z-index: 100 !important;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.detail-content {
|
||||
position: relative;
|
||||
z-index: 50 !important;
|
||||
margin-top: -40px !important;
|
||||
}
|
||||
|
||||
.stall-detail-page .add-to-cart-container {
|
||||
position: absolute;
|
||||
bottom: -12px;
|
||||
@@ -77,13 +84,13 @@
|
||||
}
|
||||
|
||||
.stall-main-card {
|
||||
margin: -40px 16px 20px;
|
||||
background: var(--surface);
|
||||
margin: 0 16px 20px;
|
||||
background: var(--surface) !important;
|
||||
border-radius: 24px;
|
||||
padding: 24px;
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
box-shadow: var(--shadow);
|
||||
z-index: 5;
|
||||
z-index: 100 !important;
|
||||
}
|
||||
|
||||
.stall-header-info {
|
||||
|
||||
Reference in New Issue
Block a user