11import React from "react" ;
2- import styled , { css } from "styled-components" ;
2+ import styled from "styled-components" ;
33
44import PaperclipIcon from "svgs/icons/paperclip.svg" ;
55import PolicyIcon from "svgs/icons/policy.svg" ;
66
77import { getIpfsUrl } from "utils/getIpfsUrl" ;
88import { isUndefined } from "utils/index" ;
99
10- import { landscapeStyle } from "styles/landscapeStyle" ;
1110import { responsiveSize } from "styles/responsiveSize" ;
1211
1312import { InternalLink } from "components/InternalLink" ;
1413
15- const ShadeArea = styled . div `
14+ const Container = styled . div `
1615 display: flex;
17- flex-direction: column;
18- justify-content: center;
19- width: 100%;
16+ align-items: center;
17+ flex-direction: row;
18+ flex-wrap: wrap;
19+ gap: 8px 16px;
2020 padding: ${ responsiveSize ( 16 , 20 ) } ${ responsiveSize ( 16 , 32 ) } ;
21- margin-top: 16px;
2221 background-color: ${ ( { theme } ) => theme . mediumBlue } ;
23-
24- ${ landscapeStyle (
25- ( ) => css `
26- flex-direction: row;
27- justify-content: space-between;
28- `
29- ) } ;
3022` ;
3123
3224const StyledP = styled . p `
3325 font-size: 14px;
34- margin-top: 0;
35- margin-bottom: 16px;
26+ margin: 0;
3627 color: ${ ( { theme } ) => theme . primaryBlue } ;
37- ${ landscapeStyle (
38- ( ) => css `
39- margin-bottom: 0;
40- `
41- ) } ;
4228` ;
4329
4430const StyledPolicyIcon = styled ( PolicyIcon ) `
@@ -51,13 +37,6 @@ const StyledPaperclipIcon = styled(PaperclipIcon)`
5137 fill: ${ ( { theme } ) => theme . primaryBlue } ;
5238` ;
5339
54- const LinkContainer = styled . div `
55- display: flex;
56- gap: ${ responsiveSize ( 16 , 24 ) } ;
57- flex-wrap: wrap;
58- align-items: center;
59- ` ;
60-
6140const StyledInternalLink = styled ( InternalLink ) `
6241 display: flex;
6342 gap: 4px;
@@ -82,28 +61,26 @@ interface IPolicies {
8261
8362export const Policies : React . FC < IPolicies > = ( { disputePolicyURI, courtId, attachment } ) => {
8463 return (
85- < ShadeArea >
86- < StyledP > Make sure you read and understand the Policies</ StyledP >
87- < LinkContainer >
88- { ! isUndefined ( attachment ) && ! isUndefined ( attachment . uri ) ? (
89- < StyledInternalLink to = { `attachment/?url=${ getIpfsUrl ( attachment . uri ) } ` } >
90- < StyledPaperclipIcon />
91- { attachment . label ?? "Attachment" }
92- </ StyledInternalLink >
93- ) : null }
94- { isUndefined ( disputePolicyURI ) ? null : (
95- < StyledInternalLink to = { `policy/attachment/?url=${ getIpfsUrl ( disputePolicyURI ) } ` } >
96- < StyledPolicyIcon />
97- Dispute Policy
98- </ StyledInternalLink >
99- ) }
100- { isUndefined ( courtId ) ? null : (
101- < StyledInternalLink to = { `/courts/${ courtId } /policy?section=description` } >
102- < StyledPolicyIcon />
103- Court Policy
104- </ StyledInternalLink >
105- ) }
106- </ LinkContainer >
107- </ ShadeArea >
64+ < Container >
65+ < StyledP > Policy documents:</ StyledP >
66+ { ! isUndefined ( attachment ) && ! isUndefined ( attachment . uri ) ? (
67+ < StyledInternalLink to = { `attachment/?url=${ getIpfsUrl ( attachment . uri ) } ` } >
68+ < StyledPaperclipIcon />
69+ { attachment . label ?? "Attachment" }
70+ </ StyledInternalLink >
71+ ) : null }
72+ { isUndefined ( disputePolicyURI ) ? null : (
73+ < StyledInternalLink to = { `policy/attachment/?url=${ getIpfsUrl ( disputePolicyURI ) } ` } >
74+ < StyledPolicyIcon />
75+ Dispute Policy
76+ </ StyledInternalLink >
77+ ) }
78+ { isUndefined ( courtId ) ? null : (
79+ < StyledInternalLink to = { `/courts/${ courtId } /policy?section=description` } >
80+ < StyledPolicyIcon />
81+ Court Policy
82+ </ StyledInternalLink >
83+ ) }
84+ </ Container >
10885 ) ;
10986} ;
0 commit comments