From 0cf52a2812dd0cfab9bfdf2dcd81fe4787f4dcb0 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Mon, 12 Jul 2021 14:47:13 -0300 Subject: styles for provider detail page --- .../.storybook/preview.js | 28 +++- .../src/components/ErrorMessage.tsx | 18 +++ .../src/components/styled/index.tsx | 36 +++++- .../src/popup/BackupPage.tsx | 25 ++-- .../src/popup/ProviderAddPage.tsx | 46 +------ .../src/popup/ProviderDetailPage.tsx | 142 +++++++++------------ 6 files changed, 155 insertions(+), 140 deletions(-) create mode 100644 packages/taler-wallet-webextension/src/components/ErrorMessage.tsx (limited to 'packages') diff --git a/packages/taler-wallet-webextension/.storybook/preview.js b/packages/taler-wallet-webextension/.storybook/preview.js index 1c07ba402..0fda6ac0e 100644 --- a/packages/taler-wallet-webextension/.storybook/preview.js +++ b/packages/taler-wallet-webextension/.storybook/preview.js @@ -52,8 +52,32 @@ export const decorators = [ (Story, { kind }) => { if (kind.startsWith('popup')) { return
- - + +
diff --git a/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx b/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx new file mode 100644 index 000000000..eaf015224 --- /dev/null +++ b/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx @@ -0,0 +1,18 @@ +import { useState } from "preact/hooks"; +import arrowDown from '../../static/img/chevron-down.svg'; +import { ErrorBox } from "./styled"; + +export function ErrorMessage({ title, description }: { title?: string; description?: string; }) { + const [showErrorDetail, setShowErrorDetail] = useState(false); + if (!title) + return null; + return +
+

{title}

+ { description && } +
+ {showErrorDetail &&

{description}

} + ; +} diff --git a/packages/taler-wallet-webextension/src/components/styled/index.tsx b/packages/taler-wallet-webextension/src/components/styled/index.tsx index ffcafd70f..434e3350a 100644 --- a/packages/taler-wallet-webextension/src/components/styled/index.tsx +++ b/packages/taler-wallet-webextension/src/components/styled/index.tsx @@ -4,6 +4,13 @@ import type * as Linaria from '@linaria/core'; import { styled } from '@linaria/react'; +export const PaymentStatus = styled.span<{color:string}>` + padding: 5px; + border-radius: 5px; + color: white; + background-color: ${p => p.color}; +` + export const PopupBox = styled.div` height: calc(320px - 34px - 16px); display: flex; @@ -11,23 +18,40 @@ export const PopupBox = styled.div` justify-content: space-between; & > section { + // this margin will send the section up when used with a header + margin-bottom: auto; overflow: auto; + + table td { + padding: 5px 10px; + } + table tr { + border-bottom: 1px solid black; + border-top: 1px solid black; + } + } + + & > header { + flex-direction: row; + justify-content: space-between; + display: flex; + margin-bottom: 5px; + + & > div { + align-self: center; + } } & > footer { padding-top: 5px; flex-direction: row; - justify-content: flex-end; + justify-content: space-between; display: flex; - & > button { + & button { margin-left: 5px; } } - & > section > h1 { - margin-top: 0.3em; - margin-bottom: 0.3em; - } ` export const Button = styled.button` diff --git a/packages/taler-wallet-webextension/src/popup/BackupPage.tsx b/packages/taler-wallet-webextension/src/popup/BackupPage.tsx index 6e60acc74..c2067ad21 100644 --- a/packages/taler-wallet-webextension/src/popup/BackupPage.tsx +++ b/packages/taler-wallet-webextension/src/popup/BackupPage.tsx @@ -20,8 +20,8 @@ import { ProviderInfo, ProviderPaymentStatus } from "@gnu-taler/taler-wallet-cor import { differenceInMonths, formatDuration, intervalToDuration } from "date-fns"; import { FunctionalComponent, Fragment, JSX, VNode, AnyComponent } from "preact"; import { - BoldLight, ButtonPrimary, ButtonSuccess, Centered, - CenteredText, CenteredTextBold, PopupBox, Row, + BoldLight, ButtonPrimary, ButtonSuccess, Centered, + CenteredText, CenteredTextBold, PopupBox, Row, SmallText, SmallTextLight } from "../components/styled"; import { useBackupStatus } from "../hooks/useBackupStatus"; @@ -47,7 +47,7 @@ export interface ViewProps { export function BackupView({ providers, onAddProvider, onSyncAll }: ViewProps): VNode { return ( - +
{providers.map((provider) => )} - {!providers.length && + {!providers.length && No backup providers configured Add provider }
{!!providers.length &&
- { - providers.length > 1 ? - Sync all backups : - Sync now - } - Add provider +
+
+ { + providers.length > 1 ? + Sync all backups : + Sync now + } + Add provider +
} ) @@ -111,7 +114,7 @@ function BackupLayout(props: TransactionLayoutProps): JSX.Element { function ExpirationText({ until }: { until: Timestamp }) { return Expires in - {daysUntil(until)} + {daysUntil(until)} } diff --git a/packages/taler-wallet-webextension/src/popup/ProviderAddPage.tsx b/packages/taler-wallet-webextension/src/popup/ProviderAddPage.tsx index 4b5da05f4..92579e36a 100644 --- a/packages/taler-wallet-webextension/src/popup/ProviderAddPage.tsx +++ b/packages/taler-wallet-webextension/src/popup/ProviderAddPage.tsx @@ -1,6 +1,9 @@ import { Amounts, BackupBackupProviderTerms, i18n } from "@gnu-taler/taler-util"; -import { Fragment, VNode } from "preact"; +import { VNode } from "preact"; import { useState } from "preact/hooks"; +import { Checkbox } from "../components/Checkbox"; +import { ErrorMessage } from "../components/ErrorMessage"; +import { Button, ButtonPrimary, Input, LightText, PopupBox, SmallTextLight } from "../components/styled/index"; import * as wxApi from "../wxApi"; interface Props { @@ -49,26 +52,6 @@ export function ProviderAddPage({ onBack }: Props): VNode { /> } -interface TermsOfServiceProps { - onCancel: () => void; - onAccept: () => void; -} - -function TermsOfService({ onCancel, onAccept }: TermsOfServiceProps) { - return
-
-
- Here we will place the complete text of terms of service -
-
-
- -
- -
-
-
-} export interface SetUrlViewProps { initialValue?: string; @@ -76,23 +59,6 @@ export interface SetUrlViewProps { onVerify: (s: string) => Promise; withError?: string; } -import arrowDown from '../../static/img/chevron-down.svg'; -import { Button, ButtonPrimary, ErrorBox, Input, LightText, PopupBox, SmallTextLight } from "../components/styled/index"; -import { Checkbox } from "../components/Checkbox"; - -function ErrorMessage({ title, description }: { title?: string, description?: string }) { - const [showErrorDetail, setShowErrorDetail] = useState(false); - if (!title) return null - return -
-

{title}

- -
- {showErrorDetail &&

{description}

} - -} export function SetUrlView({ initialValue, onCancel, onVerify, withError }: SetUrlViewProps) { const [value, setValue] = useState(initialValue || "") @@ -113,7 +79,7 @@ export function SetUrlView({ initialValue, onCancel, onVerify, withError }: SetU

-