Style fixes

Author: Jasonvdb

src/components/action-button/index.scss

@@ -21,6 +21,15 @@ a:link, a:visited, a:hover, a:active {
   .action-button-text {
     color: white;
   }
+
+  .action-button-text-sm {
+    color: white;
+    font-size: 15px;
+  }
 }
 
 
+.action-button-container-sm {
+  padding: 10px 20px
+}
+

src/components/action-button/index.tsx

@@ -4,20 +4,24 @@ import { ReactComponent as CopyIcon } from '../../icons/copy.svg';
 
 import './index.scss';
 
+export type TActionButtonSize = 'sm' | 'lg' | undefined;
+
 export default ({
 	children,
 	copyText,
 	onClick,
 	href,
 	Icon,
-	disabled
+	disabled,
+	size
 }: {
 	children: string;
 	copyText?: string;
 	onClick?: () => void;
 	href?: string;
 	Icon?: React.FunctionComponent<React.SVGProps<SVGSVGElement> & { title?: string }>;
 	disabled?: boolean;
+	size?: TActionButtonSize;
 }): JSX.Element => {
 	const [isCopied, setIsCopied] = useState(false);
 
@@ -34,10 +38,21 @@ export default ({
 		ButtonIcon = CopyIcon;
 	}
 
+	// TODO use size
+
+	let containerClass = 'action-button-container ';
+	let buttonTextClass = 'action-button-text '
+	if (size) {
+		containerClass += `action-button-container-${size}`
+		buttonTextClass += `action-button-text-${size}`;
+	}
+
 	const button = (
-		<div className={'action-button-container'} onClick={!disabled ? onClick : undefined}>
+		<div className={containerClass} onClick={!disabled ? onClick : undefined}>
 			{ButtonIcon ? <ButtonIcon className={'action-button-icon'} /> : null}
-			<span className={'action-button-text'}>{isCopied ? 'Copied!' : children}</span>
+			<span className={buttonTextClass}>
+				{isCopied ? 'Copied!' : children}
+			</span>
 		</div>
 	);
 

src/components/icon-ring/index.scss

@@ -25,7 +25,7 @@
 .icon-ring-pending {
   @extend .icon-ring;
   background: rgba(255, 210, 0, 0.16);
-  border: 2px solid #FFD200;
+  border: 2px solid #FFAE00;
   box-shadow: 0px 1px 10px rgba(255, 210, 0, 0.3), 0px 4px 116px rgba(255, 210, 0, 0.4);
 }
 

src/components/support-link/index.tsx

@@ -1,9 +1,21 @@
 import React from 'react';
-import ActionButton from '../action-button';
+import ActionButton, { TActionButtonSize } from '../action-button';
 import './index.scss';
 import { supportHref } from '../../settings';
 
 // TODO pull current order ID from store
-export default ({ children, orderId }: { children?: string; orderId?: string }): JSX.Element => {
-	return <ActionButton href={supportHref(orderId)}>{children ?? 'Contact Support'}</ActionButton>;
+export default ({
+	children,
+	orderId,
+	size
+}: {
+	children?: string;
+	orderId?: string;
+	size?: TActionButtonSize;
+}): JSX.Element => {
+	return (
+		<ActionButton href={supportHref(orderId)} size={size}>
+			{children ?? 'Contact Support'}
+		</ActionButton>
+	);
 };

src/pages/public/claim/index.tsx

@@ -180,7 +180,8 @@ function ClaimPage(): JSX.Element {
 						{channel_expiry} week
 						{channel_expiry !== 1 ? 's' : ''}
 					</span>
-					.
+					<br />
+					Order ID: {order._id}
 				</p>
 			</div>
 		</FormCard>

src/pages/public/order/index.scss

@@ -18,6 +18,10 @@
       color: white;
       font-weight: 600;
     }
+
+    a {
+      color: #FFAE00;
+    }
   }
 
   .value-group-row {

src/pages/public/order/index.tsx

@@ -149,13 +149,16 @@ function OrderPage(): JSX.Element {
 				<p className={'order-state-message'}>{headerMessage}</p>
 				<IconRing icon={icon} type={iconState} showCross={showIconCross} />
 
-				<div className={'order-state-support-button-container'}>
-					<SupportButton orderId={order._id} />
-					<span className={'order-state-support-button-spacer'} />
-					<ActionButton onClick={() => dispatch(navigate({ page: 'configure' }))}>
-						New channel
-					</ActionButton>
-				</div>
+				{showSupportButtons ? (
+					<div className={'order-state-support-button-container'}>
+						<SupportButton orderId={order._id} size={'sm'} />
+						<span className={'order-state-support-button-spacer'} />
+						<ActionButton onClick={() => dispatch(navigate({ page: 'configure' }))} size={'sm'}>
+							New channel
+						</ActionButton>
+					</div>
+				) : null}
+
 				<Divider />
 				<div className={'value-group-row'}>
 					<ValueGroup

src/settings.ts

@@ -1,6 +1,6 @@
 import bt, { btAdmin } from '@synonymdev/blocktank-client';
 
-export const supportEmail = 'suport@synonym.to';
+export const supportEmail = 'support@synonym.to';
 
 export const supportSubject = (orderId?: string): string => {
 	return `BlockTank support${orderId ? ` (Order ID ${orderId})` : ''}`;