From 6f78f2e97f73883c4bff4c0e2c2e36189aac9904 Mon Sep 17 00:00:00 2001
From: madhead <siarhei.krukau@gmail.com>
Date: Thu, 26 Oct 2023 02:40:55 +0200
Subject: [PATCH] WIP

---
 mini-app/src/common/transaction/Transaction.less | 10 ++++++----
 mini-app/src/common/transaction/Transaction.tsx  |  2 +-
 mini-app/src/history/HistoryApp.tsx              |  7 +++++--
 mini-app/src/history/history.less                |  2 +-
 mini-app/src/i18n/en.json                        |  3 +++
 5 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/mini-app/src/common/transaction/Transaction.less b/mini-app/src/common/transaction/Transaction.less
index a10d917d..b1d208b2 100644
--- a/mini-app/src/common/transaction/Transaction.less
+++ b/mini-app/src/common/transaction/Transaction.less
@@ -12,7 +12,8 @@
       flex-direction: column;
 
       color: var(--tg-theme-hint-color);
-      text-align: center;
+      text-align: justify;
+      text-justify: auto;
       min-width: 40px;
       margin-inline-end: 8px;
 
@@ -55,8 +56,9 @@
     }
 
     & > .title {
-      font-size: 16pt;
-      line-height: 36pt;
+      display: flex;
+      flex-direction: column-reverse;
+      font-size: 18pt;
       color: var(--tg-theme-text-color);
       flex-grow: 1;
       padding-inline: 8px 8px;
@@ -84,7 +86,7 @@
         text-transform: uppercase;
       }
 
-      & > .amount {
+      & > .quantity {
         font-size: 24pt;
         line-height: 24pt;
       }
diff --git a/mini-app/src/common/transaction/Transaction.tsx b/mini-app/src/common/transaction/Transaction.tsx
index 3bff5ab2..168810a3 100644
--- a/mini-app/src/common/transaction/Transaction.tsx
+++ b/mini-app/src/common/transaction/Transaction.tsx
@@ -88,7 +88,7 @@ function Amount({ amount, currency }: { amount: string; currency: string }) {
   return (
     <div className="amount">
       <div className="currency">{currency}</div>
-      <div className="amount">{formatAmount(amount)}</div>
+      <div className="quantity">{formatAmount(amount)}</div>
     </div>
   );
 }
diff --git a/mini-app/src/history/HistoryApp.tsx b/mini-app/src/history/HistoryApp.tsx
index c8a482f4..24fe7a83 100644
--- a/mini-app/src/history/HistoryApp.tsx
+++ b/mini-app/src/history/HistoryApp.tsx
@@ -6,6 +6,7 @@ import AppWrapper from "../common/AppWrapper";
 import TransactionCard, {
   Transaction,
 } from "../common/transaction/Transaction";
+import { useTranslation } from "react-i18next";
 
 type Member = {
   id: number;
@@ -47,12 +48,14 @@ function HistoryApp() {
     loadTransactions();
   }, []);
 
+  const { t } = useTranslation();
+
   return (
-    <>
+    <div className="history">
       {transactions.map((transaction) => (
         <TransactionCard key={transaction.id} {...transaction} />
       ))}
-    </>
+    </div>
   );
 }
 
diff --git a/mini-app/src/history/history.less b/mini-app/src/history/history.less
index dda34f87..4dfa238d 100644
--- a/mini-app/src/history/history.less
+++ b/mini-app/src/history/history.less
@@ -10,7 +10,7 @@ body {
 #root {
   min-height: 100vh;
   box-sizing: border-box;
-  padding: 24px;
+  padding: 0 16px;
   display: flex;
   flex-direction: column;
 }
diff --git a/mini-app/src/i18n/en.json b/mini-app/src/i18n/en.json
index b129a48c..b81bbd65 100644
--- a/mini-app/src/i18n/en.json
+++ b/mini-app/src/i18n/en.json
@@ -3,5 +3,8 @@
         "outsideOfTelegram": "This app must be executed inside a Telegram client",
         "expired": "Authorisation token expired. Restart the app.",
         "unauthorized": "You are not authorized to use this app"
+    },
+    "history": {
+        "title": "Transactions history"
     }
 }