bento-grids v1

в целом все хорошо, немного доправить и переходить к light theme

src/pages/Balance.tsx

@@ -32,6 +32,7 @@ export default function Balance() {
   const [promocodeSuccess, setPromocodeSuccess] =
     useState<{ message: string; amount: number } | null>(null)
   const [transactionsPage, setTransactionsPage] = useState(1)
+  const [isHistoryOpen, setIsHistoryOpen] = useState(false)
 
   const { data: transactions, isLoading } = useQuery<PaginatedResponse<Transaction>>({
     queryKey: ['transactions', transactionsPage],
@@ -201,88 +202,104 @@ export default function Balance() {
         </div>
       )}
 
-      {/* Transaction History */}
-      <div className="bento-card">
-        <h2 className="text-lg font-semibold text-dark-100 mb-4">{t('balance.transactionHistory')}</h2>
+      <div className="bento-card overflow-hidden">
+        <button
+          onClick={() => setIsHistoryOpen(!isHistoryOpen)}
+          className="w-full flex items-center justify-between text-left"
+        >
+          <h2 className="text-lg font-semibold text-dark-100">{t('balance.transactionHistory')}</h2>
+          <svg
+            className={`w-5 h-5 text-dark-400 transition-transform duration-200 ${isHistoryOpen ? 'rotate-180' : ''}`}
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            strokeWidth={2}
+          >
+            <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+          </svg>
+        </button>
 
-        {isLoading ? (
-          <div className="flex items-center justify-center py-12">
-            <div className="w-8 h-8 border-2 border-accent-500 border-t-transparent rounded-full animate-spin" />
-          </div>
-        ) : transactions?.items && transactions.items.length > 0 ? (
-          <div className="space-y-3">
-            {transactions.items.map((tx) => {
-              // API returns negative values for debits, positive for credits
-              const isPositive = tx.amount_rubles >= 0
-              const displayAmount = Math.abs(tx.amount_rubles)
-              const sign = isPositive ? '+' : '-'
-              const colorClass = isPositive ? 'text-success-400' : 'text-error-400'
-
-              return (
-              <div
-                key={tx.id}
-                className="flex items-center justify-between p-4 rounded-xl bg-dark-800/30 border border-dark-700/30"
-              >
-                <div className="flex-1">
-                  <div className="flex items-center gap-3 mb-1">
-                    <span className={getTypeBadge(tx.type)}>
-                      {getTypeLabel(tx.type)}
-                    </span>
-                    <span className="text-xs text-dark-500">
-                      {new Date(tx.created_at).toLocaleDateString()}
-                    </span>
-                  </div>
-                  {tx.description && (
-                    <div className="text-sm text-dark-400">{tx.description}</div>
-                  )}
-                </div>
-                <div className={`text-lg font-semibold ${colorClass}`}>
-                  {sign}{formatAmount(displayAmount)} {currencySymbol}
-                </div>
+        {isHistoryOpen && (
+          <div className="mt-4">
+            {isLoading ? (
+              <div className="flex items-center justify-center py-12">
+                <div className="w-8 h-8 border-2 border-accent-500 border-t-transparent rounded-full animate-spin" />
               </div>
-              )
-            })}
-          </div>
-        ) : (
-          <div className="text-center py-12">
-            <div className="w-16 h-16 mx-auto mb-4 rounded-2xl bg-dark-800 flex items-center justify-center">
-              <svg className="w-8 h-8 text-dark-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
-                <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z" />
-              </svg>
-            </div>
-            <div className="text-dark-400">{t('balance.noTransactions')}</div>
-          </div>
-        )}
+            ) : transactions?.items && transactions.items.length > 0 ? (
+              <div className="space-y-3">
+                {transactions.items.map((tx) => {
+                  const isPositive = tx.amount_rubles >= 0
+                  const displayAmount = Math.abs(tx.amount_rubles)
+                  const sign = isPositive ? '+' : '-'
+                  const colorClass = isPositive ? 'text-success-400' : 'text-error-400'
 
-        {transactions && transactions.pages > 1 && (
-          <div className="mt-4 flex items-center gap-3 flex-wrap text-sm text-dark-500">
-            <button
-              type="button"
-              onClick={() => setTransactionsPage((prev) => Math.max(1, prev - 1))}
-              disabled={transactions.page <= 1}
-              className={`btn-secondary text-xs sm:text-sm flex-1 sm:flex-none min-w-[120px] ${
-                transactions.page <= 1 ? 'opacity-50 cursor-not-allowed' : ''
-              }`}
-            >
-              {t('common.back')}
-            </button>
-            <div className="flex-1 text-center">
-              {t('balance.page', { current: transactions.page, total: transactions.pages })}
-            </div>
-            <button
-              type="button"
-              onClick={() =>
-                setTransactionsPage((prev) =>
-                  transactions.pages ? Math.min(transactions.pages, prev + 1) : prev + 1
-                )
-              }
-              disabled={transactions.page >= transactions.pages}
-              className={`btn-secondary text-xs sm:text-sm flex-1 sm:flex-none min-w-[120px] ${
-                transactions.page >= transactions.pages ? 'opacity-50 cursor-not-allowed' : ''
-              }`}
-            >
-              {t('common.next')}
-            </button>
+                  return (
+                    <div
+                      key={tx.id}
+                      className="flex items-center justify-between p-4 rounded-xl bg-dark-800/30 border border-dark-700/30"
+                    >
+                      <div className="flex-1">
+                        <div className="flex items-center gap-3 mb-1">
+                          <span className={getTypeBadge(tx.type)}>
+                            {getTypeLabel(tx.type)}
+                          </span>
+                          <span className="text-xs text-dark-500">
+                            {new Date(tx.created_at).toLocaleDateString()}
+                          </span>
+                        </div>
+                        {tx.description && (
+                          <div className="text-sm text-dark-400">{tx.description}</div>
+                        )}
+                      </div>
+                      <div className={`text-lg font-semibold ${colorClass}`}>
+                        {sign}{formatAmount(displayAmount)} {currencySymbol}
+                      </div>
+                    </div>
+                  )
+                })}
+              </div>
+            ) : (
+              <div className="text-center py-12">
+                <div className="w-16 h-16 mx-auto mb-4 rounded-2xl bg-dark-800 flex items-center justify-center">
+                  <svg className="w-8 h-8 text-dark-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z" />
+                  </svg>
+                </div>
+                <div className="text-dark-400">{t('balance.noTransactions')}</div>
+              </div>
+            )}
+
+            {transactions && transactions.pages > 1 && (
+              <div className="mt-4 flex items-center gap-3 flex-wrap text-sm text-dark-500">
+                <button
+                  type="button"
+                  onClick={() => setTransactionsPage((prev) => Math.max(1, prev - 1))}
+                  disabled={transactions.page <= 1}
+                  className={`btn-secondary text-xs sm:text-sm flex-1 sm:flex-none min-w-[120px] ${
+                    transactions.page <= 1 ? 'opacity-50 cursor-not-allowed' : ''
+                  }`}
+                >
+                  {t('common.back')}
+                </button>
+                <div className="flex-1 text-center">
+                  {t('balance.page', { current: transactions.page, total: transactions.pages })}
+                </div>
+                <button
+                  type="button"
+                  onClick={() =>
+                    setTransactionsPage((prev) =>
+                      transactions.pages ? Math.min(transactions.pages, prev + 1) : prev + 1
+                    )
+                  }
+                  disabled={transactions.page >= transactions.pages}
+                  className={`btn-secondary text-xs sm:text-sm flex-1 sm:flex-none min-w-[120px] ${
+                    transactions.page >= transactions.pages ? 'opacity-50 cursor-not-allowed' : ''
+                  }`}
+                >
+                  {t('common.next')}
+                </button>
+              </div>
+            )}
           </div>
         )}
       </div>