diff --git a/src/app/trade/[assetId]/page.tsx b/src/app/trade/[assetId]/page.tsx deleted file mode 100644 index ccfeb69..0000000 --- a/src/app/trade/[assetId]/page.tsx +++ /dev/null @@ -1,210 +0,0 @@ -"use client"; - -import { Suspense, useEffect, useState } from "react"; -import { TradeAsset } from "../../../components/TradeAsset"; -import { useParams } from "next/navigation"; -import Loading from "../../../utils/loading"; -import "../../../styles/tradeAsset.css"; -import { COINGECKO_CONFIG } from "../../../config/coingecko"; -import { FaStar } from "react-icons/fa"; -import strings from "../../../i18n/trade.json"; - -interface AssetInfo { - symbol: string; - name: string; -} - -function TradeContent() { - const params = useParams(); - const [assetInfo, setAssetInfo] = useState(null); - const [isLoading, setIsLoading] = useState(true); - const [isFavorite, setIsFavorite] = useState(false); - - useEffect(() => { - const fetchAssetInfo = async () => { - try { - const response = await fetch( - `${COINGECKO_CONFIG.BASE_URL}${COINGECKO_CONFIG.ENDPOINTS.COIN_DETAILS.replace("{{id}}", params.assetId as string)}`, - ); - if (!response.ok) throw new Error("Failed to fetch asset info"); - const data = await response.json(); - setAssetInfo({ - symbol: data.symbol.toUpperCase(), - name: data.name, - }); - } catch (err) { - console.error("Failed to fetch asset info:", err); - } finally { - setIsLoading(false); - } - }; - - fetchAssetInfo(); - }, [params.assetId]); - - useEffect(() => { - const loadFavoriteStatus = () => { - try { - const favorites = JSON.parse( - localStorage.getItem("favoriteAssets") || "[]", - ); - setIsFavorite( - favorites.some((fav: { id: string }) => fav.id === params.assetId), - ); - } catch (err) { - console.error("Failed to load favorite status:", err); - } - }; - - loadFavoriteStatus(); - }, [params.assetId]); - - const handleToggleFavorite = () => { - try { - const favorites = JSON.parse( - localStorage.getItem("favoriteAssets") || "[]", - ); - let updatedFavorites; - - if (isFavorite) { - updatedFavorites = favorites.filter( - (fav: { id: string }) => fav.id !== params.assetId, - ); - } else { - const symbol = - assetInfo?.symbol || params.assetId?.toString().toUpperCase(); - const name = - assetInfo?.name || params.assetId?.toString().toUpperCase(); - - const isAlreadyFavorite = favorites.some( - (fav: { id: string }) => fav.id === params.assetId, - ); - - if (isAlreadyFavorite) { - return; - } - - updatedFavorites = [ - ...favorites, - { - id: params.assetId, - symbol, - name, - addedAt: new Date().toISOString(), - }, - ]; - } - - localStorage.setItem("favoriteAssets", JSON.stringify(updatedFavorites)); - setIsFavorite(!isFavorite); - - const storageEvent = new StorageEvent("storage", { - key: "favoriteAssets", - newValue: JSON.stringify(updatedFavorites), - oldValue: JSON.stringify(favorites), - storageArea: localStorage, - url: window.location.href, - }); - window.dispatchEvent(storageEvent); - - window.dispatchEvent(new Event("favoritesUpdated")); - } catch (err) { - console.error("Failed to save favorite status:", err); - } - }; - - if (isLoading) { - return ( -
-
-
-
-
- -
-
- -

- {strings.en.asset.loading.replace( - "{{assetId}}", - params.assetId?.toString().toUpperCase() || "", - )} -

-
-
-
- ); - } - - const assetName = assetInfo?.name || params.assetId?.toString().toUpperCase(); - const assetSymbol = - assetInfo?.symbol || params.assetId?.toString().toUpperCase(); - - return ( -
-
-
-
-
- -
-
-

- {assetName} -

-
-
💎
- - {assetSymbol} • {strings.en.asset.tradingDashboard} - - -
-
-
- -
-
- -
-
-
- ); -} - -export default function TradePage() { - return ( - -
-
-
-
- -
-
- -

- {strings.en.asset.loadingGeneric} -

-
-
- - } - > - -
- ); -} diff --git a/src/app/trade/page.tsx b/src/app/trade/page.tsx deleted file mode 100644 index 1c42f96..0000000 --- a/src/app/trade/page.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import Trade from "../../components/Trade"; - -export default function TradePage() { - return ( -
- -
- ); -} - -export const dynamic = "force-dynamic"; diff --git a/src/components/Dashboard.tsx b/src/components/Dashboard.tsx index 30d8174..74b6ce5 100644 --- a/src/components/Dashboard.tsx +++ b/src/components/Dashboard.tsx @@ -394,14 +394,6 @@ const Dashboard: React.FC = () => { ? formatPercentage(asset.change24h) : "—"} - - {assetInfo && ( -
-

{assetInfo.name}

- {assetInfo.symbol} -
- )} - - -
- {TIME_PERIODS.map((period) => ( - - ))} -
- - - - - - - - - - {chartData.map((entry, index) => ( - value} - width={chartConfig.candleWidth} - open={entry.open} - close={entry.close} - high={entry.high} - low={entry.low} - fill={colors.bullish} - stroke={colors.bearish} - /> - ))} - - - - ); -}; diff --git a/src/config/coingecko.ts b/src/config/coingecko.ts index fdfdc42..c538a71 100644 --- a/src/config/coingecko.ts +++ b/src/config/coingecko.ts @@ -21,3 +21,19 @@ export const CRYPTO_CONFIG = { CURRENCY: COINGECKO_CONFIG.PARAMS.VS_CURRENCY, ORDER_BY: COINGECKO_CONFIG.PARAMS.ORDER, } as const; + +export const BLUECHIP_COINS = [ + "bitcoin", + "ethereum", + "solana", + "cardano", + "binancecoin", + "ripple", + "chainlink", + "tron", + "monero", + "pepe", + "worldcoin", + "story", + "bittensor", +] as const; diff --git a/src/config/routes.ts b/src/config/routes.ts index a564e70..8999341 100644 --- a/src/config/routes.ts +++ b/src/config/routes.ts @@ -15,7 +15,6 @@ export const ROUTES = { HOME: "/", INFO: "/info", LOGIA: "/logia", - TRADE: "/trade", PREDICT: "/predict", DASHBOARD: "/dashboard", } as const; @@ -25,7 +24,6 @@ export type Route = (typeof ROUTES)[keyof typeof ROUTES]; export const NAV_ITEMS = [ { path: ROUTES.INFO, label: strings.en.nav.info }, { path: ROUTES.LOGIA, label: strings.en.nav.logia }, - { path: ROUTES.TRADE, label: strings.en.nav.trade }, { path: ROUTES.PREDICT, label: strings.en.nav.predict }, ] as const; diff --git a/src/config/sliderPrices.ts b/src/config/sliderPrices.ts deleted file mode 100644 index 83403d0..0000000 --- a/src/config/sliderPrices.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { COINGECKO_CONFIG } from "./coingecko"; -import { BLUECHIP_COINS } from "./trade"; - -export const SLIDER_CRYPTO_IDS = BLUECHIP_COINS.join(","); - -export const PRICE_SLIDER_CONFIG = { - CACHE: { - KEY: "simple_crypto_prices_cache", - DURATION: 5 * 60 * 1000, // 5 minutes - }, - REFRESH_INTERVAL: 60 * 1000, // 1 minute - API: { - URL: COINGECKO_CONFIG.SIMPLE_PRICE_URL(SLIDER_CRYPTO_IDS), - }, -} as const; diff --git a/src/config/trade.ts b/src/config/trade.ts deleted file mode 100644 index 1f69cd8..0000000 --- a/src/config/trade.ts +++ /dev/null @@ -1,58 +0,0 @@ -import { COINGECKO_CONFIG, CRYPTO_CONFIG } from "@/config/coingecko"; -import { CACHE_CONFIG } from "@/config/cache"; - -export interface CryptoData { - id: string; - symbol: string; - name: string; - current_price: number; - price_change_percentage_24h: number; - market_cap: number; - ath: number; - ath_date: string; - sparkline_in_7d?: { - price: number[]; - }; -} - -export interface TrendingCoin { - item: { - id: string; - }; -} - -export const BLUECHIP_COINS = [ - "bitcoin", - "ethereum", - "solana", - "cardano", - "binancecoin", - "ripple", - "chainlink", - "tron", - "monero", - "pepe", - "worldcoin", - "story", - "bittensor", -] as const; - -export const TRADE_CONFIG = { - API: { - CRYPTO_ENDPOINT: `${COINGECKO_CONFIG.BASE_URL}${COINGECKO_CONFIG.ENDPOINTS.MARKETS}?vs_currency=${CRYPTO_CONFIG.CURRENCY}&order=${CRYPTO_CONFIG.ORDER_BY}&per_page=${CRYPTO_CONFIG.TOP_CRYPTO_COUNT}&page=1&sparkline=true`, - TRENDING_ENDPOINT: `${COINGECKO_CONFIG.BASE_URL}${COINGECKO_CONFIG.ENDPOINTS.SEARCH}`, - BLUECHIP_ENDPOINT: `${COINGECKO_CONFIG.BASE_URL}${COINGECKO_CONFIG.ENDPOINTS.MARKETS}?vs_currency=${CRYPTO_CONFIG.CURRENCY}&ids=${BLUECHIP_COINS.join(",")}&sparkline=true`, - }, - CACHE: { - KEYS: CACHE_CONFIG.KEYS, - DURATION: CACHE_CONFIG.DURATION, - }, - BLUECHIP: { - COINS: BLUECHIP_COINS, - CACHE_KEY: CACHE_CONFIG.KEYS.BLUECHIP_DATA, - }, - TRENDING: { - MAX_ITEMS: 30, - ADDITIONAL_COINS_LIMIT: 50, - }, -} as const; diff --git a/src/config/tradeAsset.ts b/src/config/tradeAsset.ts deleted file mode 100644 index 2ac6907..0000000 --- a/src/config/tradeAsset.ts +++ /dev/null @@ -1,12 +0,0 @@ -export type TimePeriod = "1D" | "1W" | "1M" | "3M" | "1Y" | "ALL"; - -export const TIME_PERIOD_CONFIG = { - "1D": { days: 1, dataPoints: 24, interval: "hourly" }, - "1W": { days: 7, dataPoints: 7, interval: "daily" }, - "1M": { days: 30, dataPoints: 30, interval: "daily" }, - "3M": { days: 90, dataPoints: 90, interval: "daily" }, - "1Y": { days: 365, dataPoints: 365, interval: "daily" }, - ALL: { days: "max", dataPoints: 365 * 2, interval: "daily" }, -} as const; - -export const TIME_PERIODS: TimePeriod[] = ["1D", "1W", "1M", "3M", "1Y", "ALL"]; diff --git a/src/i18n/header.json b/src/i18n/header.json index 606e87b..0d1a4c7 100644 --- a/src/i18n/header.json +++ b/src/i18n/header.json @@ -5,7 +5,6 @@ "description": "Ancient Wisdom Meets the AI Age", "nav": { "home": "home", - "trade": "trade", "predict": "predict", "info": "info", "dashboard": "dashboard", diff --git a/src/i18n/home.json b/src/i18n/home.json index b0b80d6..98969fe 100644 --- a/src/i18n/home.json +++ b/src/i18n/home.json @@ -39,10 +39,10 @@ }, "predict": { "prefix": "", - "link": "trade", - "suffix": " and ", + "link": "predict", + "suffix": "", "secondLink": "predict", - "finalSuffix": " by leveraging intel from our AI oracle agents" + "finalSuffix": " cool stuff by leveraging intel from our AI oracle agents" } }, "text": { diff --git a/src/i18n/sliderPrices.json b/src/i18n/sliderPrices.json deleted file mode 100644 index 4c80cdd..0000000 --- a/src/i18n/sliderPrices.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "en": { - "errors": { - "cacheFailed": "failed to cache prices:", - "fetchFailed": "error fetching prices:", - "loading": "loading prices..." - } - } -} diff --git a/src/i18n/trade.json b/src/i18n/trade.json deleted file mode 100644 index b974175..0000000 --- a/src/i18n/trade.json +++ /dev/null @@ -1,49 +0,0 @@ -{ - "en": { - "error": { - "cacheError": "error accessing cached data", - "saveCacheError": "error saving data to cache", - "fetchFailed": "failed to fetch fresh data:", - "loadFavoritesFailed": "failed to load favorites:", - "saveFavoriteFailed": "failed to save favorite:", - "apiErrorGeneric": "api error", - "invalidDataGeneric": "invalid data", - "trendingDataError": "trending data error" - }, - "table": { - "headers": { - "asset": "asset", - "price": "price", - "change": "24h change", - "marketCap": "market cap", - "ath": "all time high", - "chart": "zoom in to trade" - } - }, - "formatting": { - "decimalSeparator": ".", - "percentage": "%", - "billion": "b", - "currency": "$" - }, - "chart": { - "noData": "no data" - }, - "sections": { - "bluechipAssets": "blue chip", - "trending": "trending" - }, - "asset": { - "loading": "loading {{assetId}} data...", - "loadingGeneric": "loading asset data...", - "tradingDashboard": "trading dashboard", - "favorite": { - "add": "add to favorites", - "remove": "remove from favorites" - } - }, - "messages": { - "noDataAvailable": "no data available for" - } - } -} diff --git a/src/i18n/tradeAsset.json b/src/i18n/tradeAsset.json deleted file mode 100644 index f0ae346..0000000 --- a/src/i18n/tradeAsset.json +++ /dev/null @@ -1,25 +0,0 @@ -{ - "en": { - "error": { - "apiError": "API error: {{status}} {{statusText}}", - "invalidData": "invalid data format received from api", - "historicalDataError": "failed to fetch historical data: {{error}}", - "saveFavoriteFailed": "failed to save favorite status" - }, - "aria": { - "addToFavorites": "add to favorites", - "removeFromFavorites": "remove from favorites" - }, - "timePeriods": { - "1D": "1D", - "1W": "1W", - "1M": "1M", - "3M": "3M", - "1Y": "1Y", - "ALL": "ALL" - }, - "titles": { - "tradingChart": "trading chart" - } - } -} diff --git a/src/styles/header.module.css b/src/styles/header.module.css index 492b1fd..d1806a7 100644 --- a/src/styles/header.module.css +++ b/src/styles/header.module.css @@ -60,7 +60,7 @@ display: flex; align-items: center; justify-content: center; - gap: clamp(0.5rem, 1vw, 1.5rem); + gap: clamp(1rem, 2vw, 2.5rem); flex-wrap: wrap; padding: 0.5rem; } @@ -69,7 +69,7 @@ display: inline-block; padding: clamp(0.2rem, 0.5vw, 0.4rem) clamp(0.4rem, 1vw, 0.8rem); color: var(--primary-color); - font-size: clamp(0.9rem, 1.2vw, 1rem); + font-size: clamp(1.3rem, 2vw, 1.8rem); font-weight: 700; text-decoration: none; text-align: center; diff --git a/src/styles/sliderPrice.module.css b/src/styles/sliderPrice.module.css deleted file mode 100644 index dec1500..0000000 --- a/src/styles/sliderPrice.module.css +++ /dev/null @@ -1,64 +0,0 @@ -.sliderContainer { - width: 100%; - padding: 0.5rem 0; - overflow: hidden; - background-color: var(--background-color); -} - -.priceItemsContainer { - display: flex; - gap: 1.5rem; - padding: 0 1rem; - animation: slide 40s linear infinite; - will-change: transform; /* Optimize animation performance */ - width: fit-content; -} - -.priceItemsContainer:hover { - animation-play-state: paused; -} - -.priceItem { - display: flex; - align-items: center; - gap: 0.5rem; - white-space: nowrap; - font-size: 0.875rem; - font-weight: 500; -} - -.symbol { - color: var(--text-color); - font-weight: 600; -} - -.price { - color: var(--text-color); -} - -.change { - font-weight: 500; -} - -.positive .change { - color: var(--bullish-color); -} - -.negative .change { - color: var(--bearish-color); -} - -.loading { - padding: 0.5rem; - text-align: center; - color: var(--text-color); -} - -@keyframes slide { - from { - transform: translateX(0); - } - to { - transform: translateX(-50%); - } -} diff --git a/src/styles/trade.css b/src/styles/trade.css deleted file mode 100644 index e446c55..0000000 --- a/src/styles/trade.css +++ /dev/null @@ -1,355 +0,0 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; - -@keyframes pulse { - 0%, - 100% { - box-shadow: 0 0 0 0 var(--color-glow-shadow); - } - 70% { - box-shadow: 0 0 0 10px var(--color-glow-shadow-hover); - } -} - -@keyframes pulseGreen { - 0%, - 100% { - transform: scale(1) rotate(-5deg); - } - 50% { - transform: scale(1.1) rotate(5deg); - } -} - -.dashboard-container { - padding: 10px 20px 60px 20px; - background-color: var(--background-color); - color: var(--color-primary); - width: 100%; - box-sizing: border-box; - min-height: calc(100vh - 120px); - display: flex; - flex-direction: column; -} - -.asset-section { - margin-bottom: 40px; -} - -.section-title { - font-size: 2rem; - font-weight: 800; - text-align: center; - margin: 20px 0 10px 0; - color: var(--text-color); - text-shadow: var(--text-glow); - text-transform: uppercase; - letter-spacing: 2px; -} - -.table { - width: 100%; - max-width: 1400px; - margin: 10px auto 30px auto; - padding: 20px 10px; - border-collapse: collapse; - border-spacing: 0; - table-layout: fixed; - text-align: center; - box-sizing: border-box; - flex: 1; -} - -.table th:nth-child(1) { - width: 5%; -} /* Favorite */ -.table th:nth-child(2) { - width: 17%; -} /* Asset */ -.table th:nth-child(3) { - width: 15%; -} /* Price */ -.table th:nth-child(4) { - width: 15%; -} /* Change */ -.table th:nth-child(5) { - width: 15%; -} /* Market cap */ -.table th:nth-child(6) { - width: 15%; -} /* ATH */ -.table th:nth-child(7) { - width: 18%; -} /* Chart */ - -.table-header { - padding: 10px 10px 10px; - font-size: 1rem; - color: var(--color-primary); - font-weight: 1200; - text-transform: uppercase; - width: 100%; - display: table-cell; - vertical-align: middle; -} - -.table-cell { - padding: 1px; - font-family: var(--base-font); - overflow: visible; - white-space: nowrap; - text-align: center; - vertical-align: middle; - height: 20px; - font-weight: 600; -} - -.table-row:hover { - background-color: var(--scroll-track); -} - -.table-row:hover .table-cell, -.table-row:hover .chart-container { - background-color: transparent; -} - -.chart-link { - display: block; - text-decoration: none; - color: inherit; - cursor: - url("data:image/svg+xml;utf8,🔍") - 12 12, - auto; - transition: all var(--transition-duration) var(--transition-timing); - position: relative; - z-index: 1000; -} - -.chart-link:hover { - z-index: 1001; -} - -.chart-container { - display: flex; - align-items: center; - justify-content: center; - background-color: transparent; - border-radius: 4px; - transition: all var(--transition-duration) var(--transition-timing); - overflow: visible; - padding: 0; - width: 100px; - height: 40px; - position: relative; - margin: 0 auto; - z-index: 1000; -} - -.chart-container svg { - width: 200px; - height: 50px; - display: block; - margin: 0 auto; - transform: scale(1); - transform-origin: center; - transition: transform 0.3s ease; -} - -.chart-container:hover svg { - transform: scale(1.7); -} - -.chart-container svg polyline { - stroke-width: 1.2; - stroke-opacity: 0.9; - fill: none; -} - -.chart-container svg polyline.positive { - stroke: var(--bullish-color); -} -.chart-container svg polyline.negative { - stroke: var(--bearish-color); -} - -.chart-container svg text { - font-size: 10px; - text-anchor: middle; -} - -.crypto-name-cell { - white-space: normal; - overflow: visible; - text-align: center; - padding-left: 30px; - position: relative; - min-height: 30px; - display: table-cell; - vertical-align: middle; -} - -.crypto-name-content { - display: flex; - align-items: center; - gap: 8px; - width: 100%; - position: relative; - flex-wrap: wrap; -} - -.crypto-name-content .favorite-button { - @apply p-1.5 rounded-full transition-all duration-200 flex-shrink-0; - color: var(--text-color-secondary); - background: transparent; - border: 1px solid var(--text-color-secondary); - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - font-size: 0.9em; -} - -.crypto-name-content .favorite-button:hover { - @apply transform scale-110; - color: var(--color-primary); - border-color: var(--color-primary); -} - -.crypto-name-content .favorite-button.active { - color: var(--color-primary); - border-color: var(--color-primary); - animation: pulse 2s infinite; -} - -.crypto-full-name { - flex: 1; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - line-height: 1.2; - font-size: clamp(0.8em, 1em, 1.1em); - font-weight: 600; - display: flex; - align-items: center; - transition: all var(--transition-duration) var(--transition-timing); - max-width: 100%; - gap: 4px; -} - -.crypto-full-name:hover { - white-space: normal; - overflow: visible; - position: relative; - z-index: 1; -} - -.crypto-full-name .symbol { - font-size: 0.7em; - opacity: 0.8; - margin-left: 4px; - display: inline; - vertical-align: text-bottom; - line-height: 1; - margin-top: 1px; -} - -.glowing-emoji { - display: inline-flex; - align-items: center; - justify-content: center; - font-size: 32px; - animation: pulseGreen 2s infinite; - text-shadow: - 0 0 15px var(--text-glow), - 0 0 30px var(--text-glow-hover); - transition: all var(--transition-duration) var(--transition-timing); - width: 36px; - height: 36px; - border-radius: 6px; - background: transparent; - font-family: - system-ui, - -apple-system, - sans-serif; - margin-right: 4px; -} - -.glowing-emoji.positive { - color: var(--bullish-color); -} - -.glowing-emoji.negative { - color: var(--bearish-color); -} - -.crypto-price-cell, -.crypto-change-cell, -.crypto-market-cap-cell { - text-align: center; - font-weight: 600; -} - -.crypto-price-cell, -.crypto-change-cell { - font-size: 1.1rem; -} - -.crypto-market-cap-cell { - font-size: 1em; -} - -.crypto-change-cell { - display: flex; - align-items: center; - justify-content: center; - height: 100%; - min-height: 40px; - padding: 0; - margin: 0; -} - -.crypto-change-cell .decimal-part, -.crypto-price-cell .decimal-part { - font-size: 0.8em; - opacity: 0.8; - display: inline-flex; - align-items: center; - line-height: 1; -} - -.crypto-price-cell.positive, -.crypto-change-cell.positive, -.crypto-market-cap-cell.positive { - color: var(--bullish-color); -} - -.crypto-price-cell.negative, -.crypto-change-cell.negative, -.crypto-market-cap-cell.negative { - color: var(--bearish-color); -} - -.crypto-ath-cell { - text-align: center; - padding: 0.5rem; - font-size: 0.9rem; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; -} - -.ath-date { - font-size: 0.5rem; - opacity: 0.7; - margin-top: -0.01rem; - text-align: center; - color: var(--color-text); -} - -::-webkit-scrollbar { - width: 8px; - height: 8px; -} diff --git a/src/styles/tradeAsset.css b/src/styles/tradeAsset.css deleted file mode 100644 index ceb8f6e..0000000 --- a/src/styles/tradeAsset.css +++ /dev/null @@ -1,108 +0,0 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; - -.trading-container { - padding: 40px; - background-color: var(--background-color); - color: var(--color-primary); - width: 100%; - box-sizing: border-box; - min-height: calc(100vh - 120px); - display: flex; - flex-direction: column; - align-items: center; -} - -.asset-header { - @apply w-full max-w-[1400px] mb-8; -} - -.asset-header-content { - @apply flex items-center gap-4; -} - -.asset-title { - @apply flex flex-col items-start; -} - -.asset-title h2 { - @apply text-2xl font-bold m-0; - color: var(--text-color); -} - -.asset-title .asset-symbol { - @apply text-sm; - color: var(--text-color-secondary); -} - -.favorite-button { - @apply p-3 rounded-full transition-all duration-200 flex-shrink-0; - color: var(--text-color-secondary); - background: transparent; - border: 1px solid var(--text-color-secondary); -} - -.favorite-button:hover { - @apply transform scale-110; - color: var(--color-primary); - border-color: var(--color-primary); -} - -.favorite-button.active { - color: var(--color-primary); - border-color: var(--color-primary); - animation: none; -} - -.time-period-selector { - display: flex; - gap: 12px; - justify-content: center; - margin: 40px 0; - flex-wrap: wrap; - padding: 0 20px; -} - -.time-period-selector button { - padding: 8px 16px; - border: 1px solid var(--color-primary); - background: transparent; - color: var(--color-primary); - border-radius: 4px; - cursor: pointer; - transition: all var(--transition-duration) var(--transition-timing); - font-weight: 600; - text-transform: uppercase; - font-size: 0.75rem; - letter-spacing: 0.5px; -} - -.time-period-selector button:hover { - background-color: var(--color-primary); - color: var(--background-color); - transform: translateY(-1px); - box-shadow: var(--glow-shadow-hover); -} - -.time-period-selector button.active { - background-color: var(--color-primary); - color: var(--background-color); - box-shadow: var(--base-shadow); -} - -@media (max-width: 768px) { - .trading-container { - padding: 20px; - } - - .time-period-selector { - gap: 8px; - margin: 20px 0; - } - - .time-period-selector button { - padding: 6px 12px; - font-size: 0.7rem; - } -}