Merge pull request #1 from kjannette/update-charting

Update charting
2026-02-22 17:24:02 -05:00
parent bde189d8f5 04ff0452f9
commit fb695f2f75
19 changed files with 795 additions and 828 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -6,6 +6,7 @@
 *.key
 *.env
 *secrets.js
+secrets.js
 trahn-trade-frontend/src/auth/secrets.js*

 # ============================================
--- a/trahn-trade-backend/internal/repository/price.go
+++ b/trahn-trade-backend/internal/repository/price.go
@@ -40,7 +40,7 @@ func (r *PriceRepo) GetByDay(ctx context.Context, tradingDay string) ([]models.P

 func (r *PriceRepo) GetAvailableDays(ctx context.Context) ([]string, error) {
 	rows, err := r.pool.Query(ctx,
-		`SELECT DISTINCT trading_day FROM price_history ORDER BY trading_day DESC LIMIT 30`,
+		`SELECT DISTINCT trading_day FROM price_history ORDER BY trading_day ASC LIMIT 30`,
 	)
 	if err != nil {
 		return nil, err
--- a/trahn-trade-frontend/index.html
+++ b/trahn-trade-frontend/index.html
@@ -5,8 +5,6 @@
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>TRAHN Grid Trader</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600&family=Space+Grotesk:wght@400;600;700&display=swap" rel="stylesheet">
  </head>
  <body>
    <div id="root"></div>
--- a/trahn-trade-frontend/src/App.css
+++ b/trahn-trade-frontend/src/App.css
@@ -1,9 +1,9 @@
 :root {
-    --bg-primary: #0d1117;
-    --bg-secondary: #161b22;
-    --bg-tertiary: #21262d;
-    --text-primary: #e6edf3;
-    --text-secondary: #8b949e;
+  --bg-primary: #000000;
+  --bg-secondary: #070808;
+  --bg-tertiary: #363737;
+  --text-primary: #01ff3c;
+  --text-secondary: #01ff3c;
  --text-muted: #484f58;
  --accent: #58a6ff;
  --green: #3fb950;
@@ -22,7 +22,8 @@
 }

 body {
-    font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
+  font-family: 'Ac437_Rainbow100_re_132', monospace;
+  font-size: 18px;
  background: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
@@ -35,21 +36,27 @@ body {
 }

 header {
+  display: flex;
+  flex-direction: column;
  text-align: center;
+  margin-right: auto;
+  margin-left: auto;
  margin-bottom: 2rem;
 }

-.ascii-logo {
-    font-family: 'JetBrains Mono', monospace;
-    font-size: 0.65rem;
-    line-height: 1.1;
-    color: var(--accent);
-    margin: 0;
-    display: inline-block;
+.logo {
+  margin-left: 32px;
+  font-family: 'Ac437_Rainbow100_re_132', monospace;
+  font-size: 9rem;
+  font-weight: 700;
+  color: var(--text-primary);
+  text-align: center;
+  letter-spacing: 0.25em;
+  text-shadow: 4px 12px 12px rgb(173, 1, 124);
 }

 .subtitle {
-    font-family: 'JetBrains Mono', monospace;
+  font-family: 'Ac437_Rainbow100_re_132', monospace;
  font-size: 0.875rem;
  color: var(--text-secondary);
  letter-spacing: 0.05em;
@@ -96,16 +103,18 @@ header {
 }

 .date-label {
-    display: block;
-    font-size: 1.25rem;
+  font-family: 'Ac437_Rainbow100_re_132';
  font-weight: 600;
+  font-size: 1.65rem;
+  font-weight: 600;
+  letter-spacing: 2px;
  color: var(--text-primary);
 }

 .date-status {
  display: block;
-    font-family: 'JetBrains Mono', monospace;
-    font-size: 0.75rem;
+  font-family: 'Ac437_Rainbow100_re_132', monospace;
+  font-size: 1rem;
  color: var(--text-secondary);
  margin-top: 0.25rem;
 }
@@ -121,8 +130,15 @@ header {
 }

@keyframes pulse {
-    0%, 100% { opacity: 1; }
-    50% { opacity: 0.4; }
+
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.4;
+  }
 }

 /* Chart */
@@ -145,7 +161,7 @@ header {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
-    font-family: 'JetBrains Mono', monospace;
+  font-family: 'Ac437_Rainbow100_re_132', monospace;
  font-size: 0.75rem;
  pointer-events: none;
  opacity: 0;
@@ -184,7 +200,7 @@ header {
  gap: 1rem;
  border-radius: 12px;
  color: var(--text-secondary);
-    font-family: 'JetBrains Mono', monospace;
+  font-family: 'Ac437_Rainbow100_re_132', monospace;
  z-index: 50;
 }

@@ -198,12 +214,15 @@ header {
 }

@keyframes spin {
-    to { transform: rotate(360deg); }
+  to {
+    transform: rotate(360deg);
+  }
 }

 /* Stats */
 .stats {
  display: flex;
+  font-size: 1.2rem;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
@@ -211,6 +230,7 @@ header {

 .stat {
  flex: 1;
+  font-size: 1.2rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
@@ -228,15 +248,26 @@ header {
 }

 .stat-value {
-    font-family: 'JetBrains Mono', monospace;
+  font-family: 'Ac437_Rainbow100_re_132', monospace;
  font-size: 1.25rem;
  font-weight: 600;
 }

-.stat-value.high { color: var(--green); }
-.stat-value.low { color: var(--red); }
-.stat-value.buy { color: var(--yellow); }
-.stat-value.sell { color: var(--orange); }
+.stat-value.high {
+  color: var(--green);
+}
+
+.stat-value.low {
+  color: var(--red);
+}
+
+.stat-value.buy {
+  color: var(--yellow);
+}
+
+.stat-value.sell {
+  color: var(--orange);
+}

 /* Day indicators */
 .day-indicators {
@@ -276,6 +307,7 @@ header {
 .legend-item {
  display: flex;
  align-items: center;
+  font-size: 1rem;
  gap: 0.5rem;
 }

@@ -307,7 +339,7 @@ header {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
-    font-family: 'JetBrains Mono', monospace;
+  font-family: 'Ac437_Rainbow100_re_132', monospace;
  font-size: 0.75rem;
  color: var(--text-secondary);
 }
@@ -363,7 +395,7 @@ header {

 .grid-levels-header {
  text-align: center;
-    font-size: 0.875rem;
+  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 1rem;
@@ -385,7 +417,7 @@ header {
 }

 .grid-column-header {
-    font-size: 0.75rem;
+  font-size: 1.2rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
@@ -395,18 +427,20 @@ header {
 }

 .grid-column-header.buy {
+  font-size: 1.2rem;
  color: var(--yellow);
  background: rgba(240, 192, 0, 0.1);
 }

 .grid-column-header.sell {
+  font-size: 1.2rem;
  color: var(--orange);
  background: rgba(219, 109, 40, 0.1);
 }

 .grid-level {
-    font-family: 'JetBrains Mono', monospace;
-    font-size: 0.8rem;
+  font-family: 'Ac437_Rainbow100_re_132', monospace;
+  font-size: 1.2rem;
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  min-width: 100px;
@@ -415,6 +449,7 @@ header {

 .grid-level.buy {
  color: var(--yellow);
+  font-size: 1.2rem;
  background: rgba(240, 192, 0, 0.08);
  border: 1px solid rgba(240, 192, 0, 0.2);
 }
@@ -449,7 +484,7 @@ header {
  text-align: center;
 }

-.auth-card .ascii-logo {
+.auth-card .logo {
  margin-bottom: 1.5rem;
 }

@@ -588,6 +623,10 @@ header {

 /* Logout Button */
 .logout-btn {
+  height: 40px;
+  width: 110px;
+  font-size: 1.2rem;
+  font-family: Ac437_Rainbow100_re_132;
  position: absolute;
  top: 1rem;
  right: 1rem;
@@ -596,7 +635,6 @@ header {
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-secondary);
-    font-size: 0.875rem;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
--- a/trahn-trade-frontend/src/App.jsx
+++ b/trahn-trade-frontend/src/App.jsx
@@ -8,7 +8,6 @@ import { Login } from './pages/Login';
 import { Signup } from './pages/Signup';
 import './App.css';

-// Create React Query client
 const queryClient = new QueryClient({
    defaultOptions: {
        queries: {
@@ -20,7 +19,6 @@ const queryClient = new QueryClient({
    },
 });

-// Redirect authenticated users away from auth pages
 function PublicRoute({ children }) {
    const { currentUser } = useAuth();
    
--- a/trahn-trade-frontend/src/api/tradingApi.js
+++ b/trahn-trade-frontend/src/api/tradingApi.js
@@ -1,77 +1,50 @@
-/**
- * Trading API Client
- * Communicates with backend REST API
- */
-
-const API_BASE = 'http://localhost:3001/api';
+const API_BASE = 'http://localhost:3001/v1';

 export const tradingApi = {
-    /**
-     * Get current trading day prices
-     */
+
  getCurrentPrices: async () => {
    const response = await fetch(`${API_BASE}/prices/today`);
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    return response.json();
  },

-    /**
-     * Get current trading day trades
-     */
  getCurrentTrades: async () => {
    const response = await fetch(`${API_BASE}/trades/today`);
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    return response.json();
  },

-    /**
-     * Get current grid state
-     */
  getCurrentGrid: async () => {
    const response = await fetch(`${API_BASE}/grid/current`);
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    return response.json();
  },

-    /**
-     * Get latest support/resistance levels
-     */
+
  getLatestSR: async () => {
    const response = await fetch(`${API_BASE}/support-resistance/latest`);
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    return response.json();
  },

-    /**
-     * Get available trading days
-     */
  getAvailableDays: async () => {
    const response = await fetch(`${API_BASE}/prices/days`);
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    return response.json();
  },

-    /**
-     * Get historical prices for a specific day
-     */
  getPricesByDay: async (date) => {
    const response = await fetch(`${API_BASE}/prices/day/${date}`);
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    return response.json();
  },

-    /**
-     * Get historical trades for a specific day
-     */
  getTradesByDay: async (date) => {
    const response = await fetch(`${API_BASE}/trades/day/${date}`);
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    return response.json();
  },

-    /**
-     * Get trade statistics
-     */
  getTradeStats: async () => {
    const response = await fetch(`${API_BASE}/trades/stats`);
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
--- a/trahn-trade-frontend/src/auth/firebase.js
+++ b/trahn-trade-frontend/src/auth/firebase.js
@@ -7,7 +7,6 @@ const app = initializeApp(firebaseConfig);
 export const auth = getAuth(app);
 export const db = getFirestore(app);

-// Add email to waitlist collection
 export async function addToWaitlist(email) {
    try {
        await addDoc(collection(db, 'trahn-trade-signups'), {
--- a/trahn-trade-frontend/src/components/Chart.jsx
+++ b/trahn-trade-frontend/src/components/Chart.jsx
@@ -23,7 +23,6 @@ export function Chart({ prices, trades }) {
  const [tooltip, setTooltip] = useState(null);
  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });

-    // Handle resize
  useEffect(() => {
    const updateDimensions = () => {
      if (containerRef.current) {
@@ -37,7 +36,6 @@ export function Chart({ prices, trades }) {
    return () => window.removeEventListener('resize', updateDimensions);
  }, []);

-    // Draw chart
  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas || dimensions.width === 0) return;
@@ -54,18 +52,16 @@ export function Chart({ prices, trades }) {
    const chartWidth = width - PADDING.left - PADDING.right;
    const chartHeight = height - PADDING.top - PADDING.bottom;

-        // Clear
    ctx.clearRect(0, 0, width, height);

    if (!prices || prices.length === 0) {
      ctx.fillStyle = COLORS.textMuted;
-            ctx.font = '14px JetBrains Mono, monospace';
+      ctx.font = '18px Ac437_Rainbow100_re_132, monospace';
      ctx.textAlign = 'center';
      ctx.fillText('No data for this day', width / 2, height / 2);
      return;
    }

-        // Calculate bounds
    const priceValues = prices.map(d => d.p || d.price);
    const times = prices.map(d => d.t || d.timestamp);

@@ -80,7 +76,6 @@ export function Chart({ prices, trades }) {

    const baselinePrice = priceValues[0];

-        // Coordinate converters
    const priceToY = (price) => {
      const range = maxPrice - minPrice;
      const normalized = (price - minPrice) / range;
@@ -93,7 +88,6 @@ export function Chart({ prices, trades }) {
      return PADDING.left + chartWidth * normalized;
    };

-        // Draw grid
    ctx.strokeStyle = COLORS.grid;
    ctx.lineWidth = 1;

@@ -108,7 +102,6 @@ export function Chart({ prices, trades }) {
      ctx.stroke();
    }

-        // Draw baseline
    const baselineY = priceToY(baselinePrice);
    ctx.strokeStyle = COLORS.baseline;
    ctx.setLineDash([4, 4]);
@@ -118,7 +111,6 @@ export function Chart({ prices, trades }) {
    ctx.stroke();
    ctx.setLineDash([]);

-        // Draw gradient fill
    if (prices.length >= 2) {
      ctx.beginPath();
      ctx.moveTo(timeToX(times[0]), baselineY);
@@ -139,7 +131,6 @@ export function Chart({ prices, trades }) {
      ctx.fill();
    }

-        // Draw price line
    if (prices.length >= 2) {
      ctx.beginPath();
      ctx.strokeStyle = COLORS.line;
@@ -154,9 +145,8 @@ export function Chart({ prices, trades }) {
      ctx.stroke();
    }

-        // Draw Y axis labels
    ctx.fillStyle = COLORS.text;
-        ctx.font = '11px JetBrains Mono, monospace';
+    ctx.font = '14px Ac437_Rainbow100_re_132, monospace';
    ctx.textAlign = 'left';

    for (let price = startPrice; price <= maxPrice; price += priceStep) {
@@ -164,7 +154,6 @@ export function Chart({ prices, trades }) {
      ctx.fillText(formatPrice(price), width - PADDING.right + 8, y + 4);
    }

-        // Draw X axis labels
    ctx.textAlign = 'center';
    const hourMs = 60 * 60 * 1000;
    const rangeMs = maxTime - minTime;
@@ -183,7 +172,6 @@ export function Chart({ prices, trades }) {
      current += stepMs;
    }

-        // Draw trades
    for (const trade of (trades || [])) {
      const x = timeToX(trade.t || trade.timestamp);
      const y = priceToY(trade.price);
@@ -193,26 +181,22 @@ export function Chart({ prices, trades }) {
      const color = trade.side === 'buy' ? COLORS.buy : COLORS.sell;
      const radius = 7;

-            // Glow
      ctx.beginPath();
      ctx.arc(x, y, radius + 4, 0, Math.PI * 2);
      ctx.fillStyle = color + '33';
      ctx.fill();

-            // Outer
      ctx.beginPath();
      ctx.arc(x, y, radius, 0, Math.PI * 2);
      ctx.fillStyle = color;
      ctx.fill();

-            // Inner
      ctx.beginPath();
      ctx.arc(x, y, radius - 3, 0, Math.PI * 2);
      ctx.fillStyle = COLORS.bg;
      ctx.fill();
    }

-        // Draw current price tag
    if (prices.length > 0) {
      const lastPrice = priceValues[priceValues.length - 1];
      const y = priceToY(lastPrice);
@@ -226,14 +210,13 @@ export function Chart({ prices, trades }) {
      ctx.fill();

      ctx.fillStyle = '#fff';
-            ctx.font = 'bold 11px JetBrains Mono, monospace';
+      ctx.font = 'bold 14px Ac437_Rainbow100_re_132, monospace';
      ctx.textAlign = 'left';
      ctx.fillText(formatPrice(lastPrice), x + 10, y + 4);
    }

  }, [prices, trades, dimensions]);

-    // Mouse handling for tooltip
  const handleMouseMove = (e) => {
    if (!prices || prices.length === 0) {
      setTooltip(null);
--- a/trahn-trade-frontend/src/contexts/TradingDataContext.jsx
+++ b/trahn-trade-frontend/src/contexts/TradingDataContext.jsx
@@ -62,7 +62,6 @@ function reducer(state, action) {
 export function TradingDataProvider({ children }) {
    const [state, dispatch] = useReducer(reducer, initialState);
    
-    // React Query: Poll current day data every 1 minute
    const { data: currentData, error, isLoading } = useQuery({
        queryKey: ['currentDay'],
        queryFn: async () => {
@@ -87,7 +86,6 @@ export function TradingDataProvider({ children }) {
        retryDelay: 2000,
    });
    
-    // Update context when live data changes
    useEffect(() => {
        if (currentData) {
            dispatch({ 
@@ -97,7 +95,6 @@ export function TradingDataProvider({ children }) {
        }
    }, [currentData]);
    
-    // Handle connection status
    useEffect(() => {
        if (error) {
            dispatch({ type: 'SET_CONNECTION_STATUS', status: 'error' });
--- a/trahn-trade-frontend/src/fonts/Ac437_Rainbow100_re_132.ttf
+++ b/trahn-trade-frontend/src/fonts/Ac437_Rainbow100_re_132.ttf
--- a/trahn-trade-frontend/src/fonts/Mx437_Compaq_Port3.ttf
+++ b/trahn-trade-frontend/src/fonts/Mx437_Compaq_Port3.ttf
--- a/trahn-trade-frontend/src/fonts/Px437_AMI_EGA_8x8.ttf
+++ b/trahn-trade-frontend/src/fonts/Px437_AMI_EGA_8x8.ttf
--- a/trahn-trade-frontend/src/fonts/Px437_Robotron_A7100.ttf
+++ b/trahn-trade-frontend/src/fonts/Px437_Robotron_A7100.ttf
--- a/trahn-trade-frontend/src/hooks/useChartData.js
+++ b/trahn-trade-frontend/src/hooks/useChartData.js
@@ -1,18 +1,3 @@
-/**
- * DEPRECATED - Replaced by TradingDataContext + React Query
- * 
- * This file is kept for reference but no longer used.
- * The new implementation:
- * - Uses React Query for polling
- * - Uses Context for state management
- * - Calls REST API instead of JSON files
- * 
- * See:
- * - contexts/TradingDataContext.jsx
- * - hooks/useTradingData.js
- * - api/tradingApi.js
- */
-
 export function useChartData() {
    throw new Error('useChartData is deprecated. Use useTradingData from TradingDataContext instead.');
 }
--- a/trahn-trade-frontend/src/hooks/useTradingData.js
+++ b/trahn-trade-frontend/src/hooks/useTradingData.js
@@ -1,15 +1,7 @@
-/**
- * Custom hooks for trading data management
- * Handles carousel navigation and historical day loading
- */
-
 import { useQuery } from '@tanstack/react-query';
 import { useTradingData } from '../contexts/TradingDataContext';
 import { tradingApi } from '../api/tradingApi';

-/**
- * Hook for loading historical day data (lazy load)
- */
 export function useHistoricalDay(date, enabled = false) {
    return useQuery({
        queryKey: ['historicalDay', date],
@@ -26,9 +18,6 @@ export function useHistoricalDay(date, enabled = false) {
    });
 }

-/**
- * Hook for carousel navigation
- */
 export function useCarousel() {
    const { state, dispatch } = useTradingData();
    
@@ -38,12 +27,9 @@ export function useCarousel() {
        }
        
        if (index === state.availableDays.length - 1) {
-            // Navigate to live (current) day
            dispatch({ type: 'SWITCH_TO_LIVE' });
        } else {
-            // Load historical day
            const date = state.availableDays[index];
-            // Historical data will be loaded via useHistoricalDay in Dashboard
            dispatch({ 
                type: 'LOAD_HISTORICAL_DAY', 
                prices: [], 
--- a/trahn-trade-frontend/src/index.css
+++ b/trahn-trade-frontend/src/index.css
@@ -1 +1,34 @@
-/* Reset handled in App.css */
+@font-face {
+  font-family: 'Ac437_Rainbow100_re_1323';
+  src: local('./fonts/Mx437_Compaq_Port3.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Ac437_Rainbow100_re_1323';
+  src: local('./fonts/Mx437_Compaq_Port3.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Px437_AMI_EGA_8x8';
+  src: local('Px437_AMI_EGA_8x8'), url(./fonts/Px437_AMI_EGA_8x8.ttf) format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Ac437_Rainbow100_re_132';
+  src: local('Ac437_Rainbow100_re_132'), url(./fonts/Ac437_Rainbow100_re_132.ttf) format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Ac437_Rainbow100_re_132';
+  src: local('Ac437_Rainbow100_re_132'), url(./fonts/Ac437_Rainbow100_re_132.ttf) format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
--- a/trahn-trade-frontend/src/pages/Dashboard.jsx
+++ b/trahn-trade-frontend/src/pages/Dashboard.jsx
@@ -12,11 +12,9 @@ export function Dashboard() {
    const { state, dispatch } = useTradingData();
    const carousel = useCarousel();
    
-    // Load historical day data when viewing past days
    const historicalDate = !state.isLive ? state.availableDays[state.currentDayIndex] : null;
    const { data: historicalData } = useHistoricalDay(historicalDate, !state.isLive);
    
-    // Update context with historical data when loaded
    useEffect(() => {
        if (historicalData && !state.isLive) {
            dispatch({
@@ -52,13 +50,7 @@ export function Dashboard() {
    return (
        <div className="container">
            <header>
-                <pre className="ascii-logo">{`
-   ████████╗██████╗  █████╗ ██╗  ██╗███╗   ██╗
-   ╚══██╔══╝██╔══██╗██╔══██╗██║  ██║████╗  ██║
-      ██║   ██████╔╝███████║███████║██╔██╗ ██║
-      ██║   ██╔══██╗██╔══██║██╔══██║██║╚██╗██║
-      ██║   ██║  ██║██║  ██║██║  ██║██║ ╚████║
-      ╚═╝   ╚═╝  ╚═╝╚═╝  ╚═╝╚═╝  ╚═╝╚═╝  ╚═══╝`}</pre>
+                <h1 className="logo">TRAHN</h1>
                <button className="logout-btn" onClick={logout}>Logout</button>
            </header>
            
--- a/trahn-trade-frontend/src/pages/Login.jsx
+++ b/trahn-trade-frontend/src/pages/Login.jsx
@@ -29,13 +29,7 @@ export function Login() {
    return (
        <div className="auth-container">
            <div className="auth-card">
-                <pre className="ascii-logo">{`
-   ████████╗██████╗  █████╗ ██╗  ██╗███╗   ██╗
-   ╚══██╔══╝██╔══██╗██╔══██╗██║  ██║████╗  ██║
-      ██║   ██████╔╝███████║███████║██╔██╗ ██║
-      ██║   ██╔══██╗██╔══██║██╔══██║██║╚██╗██║
-      ██║   ██║  ██║██║  ██║██║  ██║██║ ╚████║
-      ╚═╝   ╚═╝  ╚═╝╚═╝  ╚═╝╚═╝  ╚═╝╚═╝  ╚═══╝`}</pre>
+                <h1 className="logo">TRAHN</h1>
                
                <h2>Welcome Back</h2>
                
--- a/trahn-trade-frontend/src/pages/Signup.jsx
+++ b/trahn-trade-frontend/src/pages/Signup.jsx
@@ -1,16 +1,13 @@
 import { useState } from 'react';
 import { Link } from 'react-router-dom';
 import { addToWaitlist } from '../auth/firebase';
-//a comment

 export function Signup() {
    const [email, setEmail] = useState('');
    const [loading, setLoading] = useState(false);
    const [submitted, setSubmitted] = useState(false);
    const [error, setError] = useState('');
-//
-//
-// 
+
    async function handleSubmit(e) {
        e.preventDefault();
        
@@ -33,18 +30,11 @@ export function Signup() {
        }
        setLoading(false);
    }
-// some spacing 
-//more
+
    return (
        <div className="auth-container">
            <div className="auth-card">
-                <pre className="ascii-logo">{`
-   ████████╗██████╗  █████╗ ██╗  ██╗███╗   ██╗
-   ╚══██╔══╝██╔══██╗██╔══██╗██║  ██║████╗  ██║
-      ██║   ██████╔╝███████║███████║██╔██╗ ██║
-      ██║   ██╔══██╗██╔══██║██╔══██║██║╚██╗██║
-      ██║   ██║  ██║██║  ██║██║  ██║██║ ╚████║
-      ╚═╝   ╚═╝  ╚═╝╚═╝  ╚═╝╚═╝  ╚═╝╚═╝  ╚═══╝`}</pre>
+                <h1 className="logo">TRAHN</h1>
                
                {submitted ? (
                    <>