refactored transaction details

1 files changed, 37 insertions, 4 deletions

diff --git a/packages/taler-wallet-webextension/src/components/styled/index.tsx b/packages/taler-wallet-webextension/src/components/styled/index.tsx
index 434e3350a..7d8118392 100644
--- a/packages/taler-wallet-webextension/src/components/styled/index.tsx
+++ b/packages/taler-wallet-webextension/src/components/styled/index.tsx
@@ -4,7 +4,7 @@ import type * as Linaria from '@linaria/core';
 
 import { styled } from '@linaria/react';
 
-export const PaymentStatus = styled.span<{color:string}>`
+export const PaymentStatus = styled.span<{ color: string }>`
   padding: 5px;
   border-radius: 5px;
   color: white;
@@ -136,20 +136,53 @@ export const Centered = styled.div`
 `
 export const Row = styled.div`
   display: flex;
-  border: 1px solid gray;
-  border-radius: 0.5em;
   margin: 0.5em 0;
   justify-content: space-between;
   padding: 0.5em;
 `
 
+export const Column = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin: 0em 1em;
+  justify-content: space-between;
+`
+
+export const RowBorderGray = styled(Row)`
+  border: 1px solid gray;
+  border-radius: 0.5em;
+`
+
+export const HistoryRow = styled(RowBorderGray)`
+  & > ${Column}:last-of-type {
+    margin-left: auto;
+    align-self: center;
+  }
+`
+
+export const ListOfProducts = styled.div`
+  & > div > a > img {
+    max-width: 100%;
+    display: inline-block;
+
+    width: 32px;
+    height: 32px;
+  }
+  & > div > div {
+    margin-right: auto;
+    margin-left: 1em;
+  }
+`
+
 export const LightText = styled.div`
   color: gray;
 `
 
 export const SmallText = styled.div`
   font-size: small; 
-  margin-top: 0.5em;
+`
+export const ExtraLargeText = styled.div`
+  font-size: x-large; 
 `
 
 export const SmallTextLight = styled(SmallText)`