From 5244aff586df93de2b9973de9c9046e4ad6163bd Mon Sep 17 00:00:00 2001
From: Navan Chauhan <navanchauhan@gmail.com>
Date: Sun, 27 Apr 2025 21:30:56 -0600
Subject: improve styling

---
 client/src/SubmitBidPage.jsx | 76 ++++++++++++++++++++++++++++++--------------
 1 file changed, 53 insertions(+), 23 deletions(-)

(limited to 'client/src/SubmitBidPage.jsx')

diff --git a/client/src/SubmitBidPage.jsx b/client/src/SubmitBidPage.jsx
index 94a0c32..7737c20 100644
--- a/client/src/SubmitBidPage.jsx
+++ b/client/src/SubmitBidPage.jsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useContext } from 'react';
-import { Form, InputNumber, DatePicker, Button, Message, Typography, Card, Select } from '@arco-design/web-react';
+import { Form, InputNumber, DatePicker, Button, Message, Typography, Card } from '@arco-design/web-react';
 import '@arco-design/web-react/dist/css/arco.css';
 import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc';
@@ -27,18 +27,15 @@ function SubmitBidPage() {
     const updateTime = () => {
       const now = dayjs();
       const localFormatted = now.format('dddd, MMMM D, h:mm A');
-
       const marketTz = MARKET_TIMEZONES[selectedMarket] || 'America/New_York';
       const marketTime = now.tz(marketTz);
       const marketFormatted = marketTime.format('dddd, MMMM D, h:mm A');
-
       setLocalNow(localFormatted);
       setMarketNow(marketFormatted);
     };
 
     updateTime();
     const interval = setInterval(updateTime, 1000);
-
     return () => clearInterval(interval);
   }, [selectedMarket]);
 
@@ -56,14 +53,12 @@ function SubmitBidPage() {
         quantity: values.quantity,
         price: values.price,
         market: selectedMarket,
-        user_id: 1 // Hardcoded user id for now
+        user_id: 1
       };
 
       const res = await fetch(`${API_BASE_URL}/bids/`, {
         method: 'POST',
-        headers: {
-          'Content-Type': 'application/json'
-        },
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(payload)
       });
 
@@ -83,24 +78,37 @@ function SubmitBidPage() {
   };
 
   return (
-    <div style={{ padding: 20, backgroundColor: 'var(--color-fill-2)' }}>
-      <Typography.Title heading={4}>Submit New Bid</Typography.Title>
-      <Card style={{ marginTop: 16 }}>
-        <Typography.Paragraph>
-          <strong>Current Local Time:</strong> {localNow}
-        </Typography.Paragraph>
-        <Typography.Paragraph>
-          <strong>Current {MARKET_FULL_NAMES[selectedMarket]} Time:</strong> {marketNow}
-        </Typography.Paragraph>
+    <div style={{ padding: 20, backgroundColor: 'var(--color-fill-2)', minHeight: 'calc(100vh - 150px)', animation: 'fadeSlideIn 0.6s ease' }}>
+      <Typography.Title heading={3} style={{ textAlign: 'center', marginBottom: 20 }}>
+        Submit New Bid
+      </Typography.Title>
+
+      <Card
+        style={{
+          marginTop: 16,
+          borderRadius: 16,
+          boxShadow: '0 8px 24px rgba(0,0,0,0.08)',
+          background: 'linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(245,245,245,0.95) 100%)',
+          backdropFilter: 'blur(8px)',
+          overflow: 'hidden',
+          padding: 32
+        }}
+      >
+        <div style={{ marginBottom: 32, padding: 16, border: '1px solid var(--color-border)', borderRadius: 8, background: 'var(--color-fill-1)' }}>
+          <Typography.Paragraph style={{ marginBottom: 8 }}>
+            <strong>Current Local Time:</strong> {localNow}
+          </Typography.Paragraph>
+          <Typography.Paragraph>
+            <strong>Current {MARKET_FULL_NAMES[selectedMarket]} Time:</strong> {marketNow}
+          </Typography.Paragraph>
+        </div>
 
         <Form
           form={form}
           layout="vertical"
           onSubmit={handleSubmit}
-          initialValues={{
-            quantity: 0,
-            price: 0
-          }}
+          initialValues={{ quantity: 0, price: 0 }}
+          style={{ maxWidth: 600, margin: '0 auto' }}
         >
           <Form.Item
             label="Bid Date and Hour"
@@ -117,7 +125,6 @@ function SubmitBidPage() {
               style={{ width: '100%' }}
               format="YYYY-MM-DD HH:00"
               placeholder="Select date and hour"
-              disabledMinutes={() => Array.from({ length: 60 }, (_, i) => i !== 0)}
               timezone={MARKET_TIMEZONES[selectedMarket]}
             />
           </Form.Item>
@@ -145,12 +152,35 @@ function SubmitBidPage() {
           </Form.Item>
 
           <Form.Item>
-            <Button type="primary" htmlType="submit" loading={loading}>
+            <Button
+              type="primary"
+              htmlType="submit"
+              loading={loading}
+              style={{
+                width: '100%',
+                transition: 'transform 0.2s ease',
+              }}
+              onMouseEnter={(e) => (e.currentTarget.style.transform = 'scale(1.02)')}
+              onMouseLeave={(e) => (e.currentTarget.style.transform = 'scale(1)')}
+            >
               Submit Bid
             </Button>
           </Form.Item>
         </Form>
       </Card>
+
+      <style>{`
+        @keyframes fadeSlideIn {
+          0% {
+            opacity: 0;
+            transform: translateY(20px);
+          }
+          100% {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+      `}</style>
     </div>
   );
 }
-- 
cgit v1.2.3