Skip to content

Commit eff59f0

Browse files
ryanknittel-fdxryanknittel-fdx
authored
Update styles for scopes, policies and terms in InstallScreen component (#79)
1 parent 75d0125 commit eff59f0

5 files changed

Lines changed: 53 additions & 47 deletions

File tree

‎.changeset/beige-onions-chew.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"examples-site": patch
3+
"bigcommerce-design-patterns": patch
4+
---
5+
6+
Update styles for scopes, policies and terms in InstallScreen component

‎packages/examples-site/src/pages/InstallScreenPage/AppExample.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -111,18 +111,18 @@ const InstallScreenApp: FunctionComponent = () => {
111111
policiesAndTerms: (
112112
<>
113113
By clicking install you agree to the <strong>BigCommerce</strong>{" "}
114-
<Link href="#" target="_blank">
114+
<Link href="#" target="_blank" style={{ fontSize: "inherit" }}>
115115
Terms of Service
116116
</Link>{" "}
117117
and <strong>{app.name}</strong>{" "}
118118
{app.privacyPolicyURL ? (
119-
<Link href={app.privacyPolicyURL} target="_blank">
119+
<Link href={app.privacyPolicyURL} target="_blank" style={{ fontSize: "inherit" }}>
120120
privacy policy
121121
</Link>
122122
) : null}
123123
{app.privacyPolicyURL && app.termsOfServiceURL ? " and " : null}
124124
{app.termsOfServiceURL ? (
125-
<Link href={app.termsOfServiceURL} target="_blank">
125+
<Link href={app.termsOfServiceURL} target="_blank" style={{ fontSize: "inherit" }}>
126126
terms of service
127127
</Link>
128128
) : null}

‎packages/examples-site/src/pages/InstallScreenPage/ChannelExample.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -228,18 +228,18 @@ const InstallScreenChannel: FunctionComponent = () => {
228228
policiesAndTerms: (
229229
<>
230230
By clicking install you agree to the <strong>BigCommerce</strong>{" "}
231-
<Link href="#" target="_blank">
231+
<Link href="#" target="_blank" style={{ fontSize: "inherit" }}>
232232
Terms of Service
233233
</Link>{" "}
234234
and <strong>{app.name}</strong>{" "}
235235
{app.privacyPolicyURL ? (
236-
<Link href={app.privacyPolicyURL} target="_blank">
236+
<Link href={app.privacyPolicyURL} target="_blank" style={{ fontSize: "inherit" }}>
237237
privacy policy
238238
</Link>
239239
) : null}
240240
{app.privacyPolicyURL && app.termsOfServiceURL ? " and " : null}
241241
{app.termsOfServiceURL ? (
242-
<Link href={app.termsOfServiceURL} target="_blank">
242+
<Link href={app.termsOfServiceURL} target="_blank" style={{ fontSize: "inherit" }}>
243243
terms of service
244244
</Link>
245245
) : null}

‎packages/patterns/src/components/InstallScreen/InstallScreen.tsx‎

Lines changed: 37 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -448,48 +448,18 @@ export const InstallScreen: FunctionComponent<InstallScreenProps> = ({
448448
onChange={handleAcknowledgmentChange}
449449
></Checkbox>
450450
) : null}
451-
<Text>{copy.policiesAndTerms}</Text>
451+
<Small color="secondary60">{copy.policiesAndTerms}</Small>
452452
</Flex>
453-
<Form fullWidth onSubmit={onSubmit}>
454-
<FormGroup>
455-
<Grid
456-
gridColumns={{ mobile: "1fr 1fr", desktop: "1fr" }}
457-
gridGap="1rem"
458-
>
459-
<GridItem display={{ mobile: "grid", desktop: "none" }}>
460-
<Button
461-
type="button"
462-
variant="secondary"
463-
onClick={cancelButtonHandler}
464-
>
465-
{copy.cancel}
466-
</Button>
467-
</GridItem>
468-
<Button
469-
type="button"
470-
variant="primary"
471-
marginBottom={{ mobile: "none", desktop: "medium" }}
472-
onClick={onInstallButtonClick}
473-
isLoading={isLoading}
474-
disabled={disableInstallButton || (app.requireAcknowledgment && !acknowledged)}
475-
>
476-
{copy.install}
477-
</Button>
478-
</Grid>
479-
</FormGroup>
480-
</Form>
481-
</StyledMovingBlock>
482-
{/* Scopes */}
483-
<GridItem>
453+
{/* Scopes */}
484454
{app.scopesAllowed && app.scopesAllowed.length > 0 ? (
485455
<Box marginBottom="medium">
486-
<Text marginBottom="small">{copy.scopesAllowed}</Text>
456+
<Small color="secondary60" marginBottom="small">{copy.scopesAllowed}</Small>
487457
<StyledScopes>
488458
{app.scopesAllowed.map(
489459
(permission: string, index: number) => (
490460
<li key={index}>
491461
<Flex
492-
alignItems={{ mobile: "start" }}
462+
alignItems={{ mobile: "center" }}
493463
flexDirection={{ mobile: "row" }}
494464
>
495465
<CheckIcon color="success" aria-hidden="true" />
@@ -504,14 +474,14 @@ export const InstallScreen: FunctionComponent<InstallScreenProps> = ({
504474
</Box>
505475
) : null}
506476
{app.scopesDenied && app.scopesDenied.length > 0 ? (
507-
<Box>
508-
<Text marginBottom="small">{copy.scopesDenied}</Text>
477+
<Box marginBottom="medium">
478+
<Small color="secondary60" marginBottom="xSmall">{copy.scopesDenied}</Small>
509479
<StyledScopes>
510480
{app.scopesDenied.map(
511481
(denial: string, index: number) => (
512482
<li key={index}>
513483
<Flex
514-
alignItems={{ mobile: "start" }}
484+
alignItems={{ mobile: "center" }}
515485
flexDirection={{ mobile: "row" }}
516486
>
517487
<CloseIcon color="danger" aria-hidden="true" />
@@ -523,7 +493,36 @@ export const InstallScreen: FunctionComponent<InstallScreenProps> = ({
523493
</StyledScopes>
524494
</Box>
525495
) : null}
526-
</GridItem>
496+
{/* Cancel & install buttons */}
497+
<Form marginTop="xLarge" fullWidth onSubmit={onSubmit}>
498+
<FormGroup>
499+
<Grid
500+
gridColumns={{ mobile: "1fr 1fr", desktop: "1fr" }}
501+
gridGap="1rem"
502+
>
503+
<GridItem display={{ mobile: "grid", desktop: "none" }}>
504+
<Button
505+
type="button"
506+
variant="secondary"
507+
onClick={cancelButtonHandler}
508+
>
509+
{copy.cancel}
510+
</Button>
511+
</GridItem>
512+
<Button
513+
type="button"
514+
variant="primary"
515+
marginBottom={{ mobile: "none", desktop: "medium" }}
516+
onClick={onInstallButtonClick}
517+
isLoading={isLoading}
518+
disabled={disableInstallButton || (app.requireAcknowledgment && !acknowledged)}
519+
>
520+
{copy.install}
521+
</Button>
522+
</Grid>
523+
</FormGroup>
524+
</Form>
525+
</StyledMovingBlock>
527526
</Grid>
528527
</Box>
529528
{/* Mobile toggle */}

‎packages/patterns/src/components/InstallScreen/styled.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1+
import { Box, GridItem, Link } from "@bigcommerce/big-design";
12
import { theme as defaultTheme } from "@bigcommerce/big-design-theme";
23
import styled from "styled-components";
3-
import { Box, GridItem, Link } from "@bigcommerce/big-design";
44

55
export const StyledBackLink = styled(Link)`
66
color: ${({ theme }) => theme.colors.secondary70};
@@ -46,14 +46,15 @@ export const StyledMovingBlock = styled(GridItem)`
4646

4747
StyledMovingBlock.defaultProps = { theme: defaultTheme };
4848

49-
5049
export const StyledScopes = styled.ul`
5150
list-style-type: none;
5251
padding: 0;
5352
margin: 0;
5453
5554
& > li {
5655
margin-bottom: ${({ theme }) => theme.spacing.xxSmall};
56+
font-size: ${({ theme }) => theme.typography.fontSize.small};
57+
color: ${({ theme }) => theme.colors.secondary60};
5758
}
5859
`;
5960

@@ -100,4 +101,4 @@ export const StyledPanelViewport = styled(Box)`
100101
}
101102
`;
102103

103-
StyledPanelViewport.defaultProps = { theme: defaultTheme };
104+
StyledPanelViewport.defaultProps = { theme: defaultTheme };

0 commit comments

Comments
 (0)