Skip to content

Commit 1e2bfc9

Browse files
Ross MoodyRoss Moody
Ross Moody
authored and
Ross Moody
committed
WebTorrent styling
1 parent 0e1ce21 commit 1e2bfc9

File tree

6 files changed

+115
-90
lines changed

6 files changed

+115
-90
lines changed

‎components/brave_webtorrent/extension/components/torrentFileList.tsx

+10-13
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
import * as React from 'react'
66
import { Table } from 'brave-ui/components'
77
import { Cell, Row } from 'brave-ui/components/dataTables/table/index'
8-
import { Heading } from 'brave-ui/old'
8+
import { LoaderIcon } from 'brave-ui/components/icons'
99

1010
// Constants
1111
import { File, TorrentObj } from '../constants/webtorrentState'
@@ -20,8 +20,8 @@ export default class TorrentFileList extends React.PureComponent<Props, {}> {
2020
const { torrent } = this.props
2121
if (!torrent || !torrent.files) {
2222
return (
23-
<div>
24-
Click "Start Torrent" to load the torrent file list
23+
<div className='torrentSubhead'>
24+
<p>Click "Start Torrent" to begin your download. WebTorrent can be disabled from the extensions panel in Settings.</p>
2525
</div>
2626
)
2727
}
@@ -83,17 +83,14 @@ export default class TorrentFileList extends React.PureComponent<Props, {}> {
8383

8484
return (
8585
<div>
86-
<Heading
87-
text='Files'
88-
level={3}
89-
/>
90-
<Table
91-
header={header}
92-
rows={rows}
93-
>
94-
'Loading the torrent file list...'
86+
<Table header={header} rows={rows}>
87+
<div className='loadingContainer'>
88+
<div className='__icon'><LoaderIcon /></div>
89+
Loading the torrent file list
90+
</div>
91+
9592
</Table>
96-
</div>
93+
</div>
9794
)
9895
}
9996
}

‎components/brave_webtorrent/extension/components/torrentStatus.tsx

+8-6
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,7 @@
44

55
import * as React from 'react'
66
import * as prettierBytes from 'prettier-bytes'
7-
import { Column, Grid } from 'brave-ui/components'
8-
import { Heading } from 'brave-ui/old'
7+
import { Column, Grid, Heading } from 'brave-ui/components'
98

109
// Constants
1110
import { TorrentObj } from '../constants/webtorrentState'
@@ -79,16 +78,19 @@ export default class TorrentStatus extends React.PureComponent<Props, {}> {
7978
const minutesStr = (hours || minutes) ? minutes + 'm' : ''
8079
const secondsStr = seconds + 's'
8180

82-
return (<Column size={2}> {hoursStr} {minutesStr} {secondsStr} remaining </Column>)
81+
return (
82+
<div className='__column'>
83+
{hoursStr} {minutesStr} {secondsStr} remaining
84+
</div>)
8385
}
8486

8587
return (
86-
<div>
88+
<div className='torrentSubhead'>
8789
<Heading
88-
text='Torrent Status'
90+
children='Torrent Status'
8991
level={3}
9092
/>
91-
<Grid>
93+
<Grid className='gridFix'>
9294
{renderStatus()}
9395
{renderPercentage()}
9496
{renderSpeeds()}

‎components/brave_webtorrent/extension/components/torrentViewerFooter.tsx

+6-13
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@
33
* You can obtain one at http://mozilla.org/MPL/2.0/. */
44

55
import * as React from 'react'
6-
import { Anchor, Heading, Paragraph } from 'brave-ui/old'
6+
import { Anchor} from 'brave-ui/old'
77

88
// Constants
99
import { TorrentObj } from '../constants/webtorrentState'
1010

1111
// Themes
12-
import { theme } from '../constants/theme'
12+
// import { theme } from '../constants/theme'
1313

1414
interface Props {
1515
torrent?: TorrentObj
@@ -18,7 +18,6 @@ interface Props {
1818
export default class TorrentViewerFooter extends React.PureComponent<Props, {}> {
1919
render () {
2020
const { torrent } = this.props
21-
const privacyNotice = 'When you click "Start Torrent", Brave will download pieces of the torrent file from other users and upload pieces to them in turn. This will share the fact that you\'re downloading this file: other people will know what you\'re downloading, and they may also have access to your public IP address.'
2221

2322
return (
2423
torrent ?
@@ -27,21 +26,15 @@ export default class TorrentViewerFooter extends React.PureComponent<Props, {}>
2726
href='https://webtorrent.io'
2827
text='Powered By WebTorrent'
2928
target='_blank'
29+
id='webTorrentCredit'
3030
/>
3131
)
3232
:
3333
(
34-
<div className='privacy-warning'>
35-
<Heading
36-
text='Privacy Warning:'
37-
level={4}
38-
/>
39-
<Paragraph
40-
text={privacyNotice}
41-
customStyle={theme.privacyNoticeBody}
42-
/>
34+
<div className='privacyNotice'>
35+
Privacy Warning: When you click "Start Torrent" Brave will beging downloading pieces of the torrent file from other users and uploading to them in turn. This action will share that you're downloading this file. Others may be able to see what you're downloading and/or determine your public IP address.
4336
</div>
4437
)
4538
)
4639
}
47-
}
40+
}

‎components/brave_webtorrent/extension/components/torrentViewerHeader.tsx

+28-29
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,11 @@
33
* You can obtain one at http://mozilla.org/MPL/2.0/. */
44

55
import * as React from 'react'
6-
import { Button, Column, Grid } from 'brave-ui/components'
7-
import { TitleHeading } from 'brave-ui/old'
6+
import { Button, Heading } from 'brave-ui/components'
87

98
// Constants
109
import { TorrentObj } from '../constants/webtorrentState'
1110

12-
// Themes
13-
import { theme } from '../constants/theme'
14-
1511
let clipboardCopy = require('clipboard-copy')
1612

1713
interface Props {
@@ -23,7 +19,10 @@ interface Props {
2319
onStopDownload: (tabId: number) => void
2420
}
2521

26-
export default class TorrentViewerHeader extends React.PureComponent<Props, {}> {
22+
export default class TorrentViewerHeader extends React.PureComponent<
23+
Props,
24+
{}
25+
> {
2726
onClick = () => {
2827
this.props.torrent
2928
? this.props.onStopDownload(this.props.tabId)
@@ -41,44 +40,44 @@ export default class TorrentViewerHeader extends React.PureComponent<Props, {}>
4140
}
4241
}
4342

44-
render () {
43+
render() {
4544
const { torrent } = this.props
46-
const name = typeof(this.props.name) === 'object'
47-
? this.props.name[0]
48-
: this.props.name
45+
const name =
46+
typeof this.props.name === 'object' ? this.props.name[0] : this.props.name
4947
const title = torrent
5048
? name
5149
: name
52-
? `Start Torrenting ${name}?`
53-
: 'Loading torrent information...'
54-
const mainButtonText = torrent ? 'Stop Download' : 'Start Torrent'
50+
? `${name}`
51+
: 'Loading torrent information...'
52+
const mainButtonText = torrent ? 'Stop Torrent' : 'Start Torrent'
5553
const copyButtonText = this.props.torrentId.startsWith('magnet:')
5654
? 'Copy Magnet Link'
57-
: 'Save Torrent File'
55+
: 'Save File'
5856

5957
return (
60-
<Grid>
61-
<Column size={9} customStyle={theme.headerColumnLeft}>
62-
<TitleHeading
63-
text={title}
64-
/>
65-
</Column>
66-
<Column size={3} customStyle={theme.headerColumnRight}>
67-
<div style={theme.buttonContainer}>
68-
<Button
69-
type='accent'
70-
text={mainButtonText}
58+
<div className='headerContainer'>
59+
<div className='__column'>
60+
<Heading
61+
children={title}
62+
className='__torrentTitle'
63+
/>
64+
</div>
65+
<div className='__column'>
66+
<Button
67+
type='accent'
68+
text={mainButtonText}
7169
onClick={this.onClick}
70+
className='__button'
7271
/>
7372
<Button
7473
type='accent'
7574
level='secondary'
7675
text={copyButtonText}
7776
onClick={this.onCopyClick}
77+
className='__button'
7878
/>
79-
</div>
80-
</Column>
81-
</Grid>
79+
</div>
80+
</div>
8281
)
8382
}
84-
}
83+
}

‎components/brave_webtorrent/extension/constants/theme.ts

-18
Original file line numberDiff line numberDiff line change
@@ -3,22 +3,4 @@
33
* You can obtain one at http://mozilla.org/MPL/2.0/. */
44

55
export const theme = {
6-
headerColumnLeft: {
7-
alignItems: 'center',
8-
justifyContent: 'flex-start'
9-
},
10-
headerColumnRight: {
11-
alignItems: 'center',
12-
justifyContent: 'flex-end'
13-
},
14-
privacyNoticeBody: {
15-
fontSize: '12px'
16-
},
17-
buttonContainer: {
18-
display: 'grid',
19-
height: '100%',
20-
gridTemplateColumns: '1fr 1fr',
21-
gridTemplateRows: '1fr',
22-
gridGap: '15px'
23-
}
246
}

‎components/styles/webtorrent.less

+63-11
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,72 @@
1-
/* This Source Code Form is subject to the terms of the Mozilla Public
2-
* License, v. 2.0. If a copy of the MPL was not distributed with this file,
3-
* You can obtain one at http://mozilla.org/MPL/2.0/. */
1+
// Color variables
2+
@bravePrimary: #fb542b;
3+
@silverBase: #c8c8d5;
4+
@silverDarken10: darken(@silverBase, 10%);
45

56
body {
6-
padding: 20px
7-
}
8-
9-
h3 {
10-
color: rgb(255, 80, 0);
7+
padding: 100px;
8+
font-family: Muli, sans-serif;
119
}
1210

1311
a {
1412
text-decoration: none;
15-
color: #686978;
13+
color: @bravePrimary;
1614
}
1715

18-
.mediaViewer, .torrent-viewer {
19-
font-family: Muli, sans-serif;
16+
.headerContainer {
17+
display: flex;
18+
justify-content: space-between;
19+
margin: 0 0 18px;
20+
.__column {
21+
justify-content: center;
22+
align-items: center;
23+
display: flex;
24+
.__torrentTitle {
25+
font-size: 24px;
26+
font-weight: 500;
27+
line-height: 36px;
28+
}
29+
.__button {
30+
white-space: nowrap;
31+
margin: 12px;
32+
}
33+
}
34+
}
35+
36+
.torrentSubhead {
37+
padding: 18px 0;
38+
border-top: solid 1px @silverBase;
39+
p {
40+
font-size: 18px;
41+
}
42+
h3 {
43+
font-size: 20px;
44+
margin: 24px 0;
45+
font-weight: 500;
46+
color: @bravePrimary;
47+
}
48+
}
49+
50+
.privacyNotice {
51+
padding: 18px 0;
52+
border-top: solid 1px @silverBase;
53+
color: @silverDarken10;
54+
line-height: 24px;
55+
}
56+
57+
#webTorrentCredit {
58+
color: @silverBase;
59+
}
60+
61+
.gridFix {
62+
grid-template-columns: repeat(auto-fill, 50px);
63+
}
64+
65+
.loadingContainer {
66+
display: flex;
67+
flex-direction: column;
68+
.__icon {
69+
height: 32px;
70+
margin: 0 0 18px;
71+
}
2072
}

0 commit comments

Comments
 (0)