aplying design changes in provider details ui

2 files changed, 30 insertions, 16 deletions

diff --git a/packages/taler-wallet-webextension/src/components/styled/index.tsx b/packages/taler-wallet-webextension/src/components/styled/index.tsx
index 8afbb6c9a..7cc6d427a 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.div<{ color: string }>`
   padding: 5px;
   border-radius: 5px;
   color: white;
@@ -40,6 +40,10 @@ export const PopupBox = styled.div`
     & > div {
       align-self: center;
     }
+
+    & > h3 {
+      margin: 0px;
+    }
   }
 
   & > footer {
@@ -223,7 +227,7 @@ export const ErrorBox = styled.div`
   /* margin: 0.5em; */
   padding-left: 1em;
   padding-right: 1em;
-  width: "100%";
+  width: 100%;
   color: #721c24;
   background: #f8d7da;
 
diff --git a/packages/taler-wallet-webextension/src/popup/ProviderDetailPage.tsx b/packages/taler-wallet-webextension/src/popup/ProviderDetailPage.tsx
index 30512d227..c92137ee3 100644
--- a/packages/taler-wallet-webextension/src/popup/ProviderDetailPage.tsx
+++ b/packages/taler-wallet-webextension/src/popup/ProviderDetailPage.tsx
@@ -39,7 +39,7 @@ export function ProviderDetailPage({ pid, onBack }: Props): VNode {
   }
   return <ProviderView info={status.info}
     onSync={status.sync}
-    onDelete={() => status.remove().then(onBack) }
+    onDelete={() => status.remove().then(onBack)}
     onBack={onBack}
     onExtend={() => { null }}
   />;
@@ -54,18 +54,28 @@ export interface ViewProps {
 }
 
 export function ProviderView({ info, onDelete, onSync, onBack, onExtend }: ViewProps): VNode {
+  const lb = info?.lastSuccessfulBackupTimestamp
+  const isPaid = info.paymentStatus.type === ProviderPaymentType.Paid || info.paymentStatus.type === ProviderPaymentType.TermsChanged
   return (
     <PopupBox>
       <header>
-        <PaymentStatus color={colorByStatus(info.paymentStatus.type)}>{info.paymentStatus.type}</PaymentStatus>
+        <Error info={info} />
 
-        {info.terms && <div>{info.terms.annualFee} / year</div>}
       </header>
-      <section>
-        <Error info={info} />
+      <header>
         <h3>{info.name} <SmallTextLight>{info.syncProviderBaseUrl}</SmallTextLight></h3>
-        <p>{daysSince(info?.lastSuccessfulBackupTimestamp)} </p>
+        <PaymentStatus color={isPaid ? 'rgb(28, 184, 65)' : 'rgb(202, 60, 60)'}>{isPaid ? 'Paid': 'Unpaid' }</PaymentStatus>
+      </header>
+      <section>
+        <p><b>Last backup:</b> {lb == null || lb.t_ms == "never" ? "never" : format(lb.t_ms, 'dd MMM yyyy')} </p>
+        <ButtonPrimary onClick={onSync}><i18n.Translate>Back up</i18n.Translate></ButtonPrimary>
+        {info.terms && <Fragment>
+          <p><b>Provider fee:</b> {info.terms && info.terms.annualFee} per year</p>
+        </Fragment>
+        }
         <p>{descriptionByStatus(info.paymentStatus)}</p>
+        <ButtonPrimary disabled onClick={onExtend}><i18n.Translate>Extend</i18n.Translate></ButtonPrimary>
+
         {info.paymentStatus.type === ProviderPaymentType.TermsChanged && <div>
           <p><i18n.Translate>terms has changed, extending the service will imply accepting the new terms of service</i18n.Translate></p>
           <table>
@@ -99,9 +109,7 @@ export function ProviderView({ info, onDelete, onSync, onBack, onExtend }: ViewP
       <footer>
         <Button onClick={onBack}><i18n.Translate> &lt; back</i18n.Translate></Button>
         <div>
-          <ButtonDestructive onClick={onDelete}><i18n.Translate>remove</i18n.Translate></ButtonDestructive>
-          <ButtonPrimary disabled onClick={onExtend}><i18n.Translate>extend</i18n.Translate></ButtonPrimary>
-          <ButtonPrimary onClick={onSync}><i18n.Translate>sync now</i18n.Translate></ButtonPrimary>
+          <ButtonDestructive onClick={onDelete}><i18n.Translate>remove provider</i18n.Translate></ButtonDestructive>
         </div>
       </footer>
     </PopupBox>
@@ -171,17 +179,19 @@ function colorByStatus(status: ProviderPaymentType) {
 
 function descriptionByStatus(status: ProviderPaymentStatus) {
   switch (status.type) {
-    case ProviderPaymentType.InsufficientBalance:
-      return i18n.str`no enough balance to make the payment`
-    case ProviderPaymentType.Unpaid:
-      return i18n.str`not paid yet`
+    // return i18n.str`no enough balance to make the payment`
+    // return i18n.str`not paid yet`
     case ProviderPaymentType.Paid:
     case ProviderPaymentType.TermsChanged:
       if (status.paidUntil.t_ms === 'never') {
         return i18n.str`service paid`
       } else {
-        return i18n.str`service paid until ${format(status.paidUntil.t_ms, 'yyyy/MM/dd HH:mm:ss')}`
+        return <Fragment>
+          <b>Backup valid until:</b> {format(status.paidUntil.t_ms, 'dd MMM yyyy')}
+        </Fragment>
       }
+    case ProviderPaymentType.Unpaid:
+    case ProviderPaymentType.InsufficientBalance:
     case ProviderPaymentType.Pending:
       return ''
   }