Skip to content
This repository was archived by the owner on Apr 28, 2020. It is now read-only.

Commit 50a51af

Browse files
deansheatherdeansheather
committed
Add styling to config page
1 parent e2d6d1c commit 50a51af

File tree

11 files changed

+293
-72
lines changed

11 files changed

+293
-72
lines changed

‎extension/logo.svg

Lines changed: 31 additions & 0 deletions
Loading

‎extension/manifest.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,11 +28,11 @@
2828
"storage",
2929
"tabs"
3030
],
31+
"options_page": "out/config.html",
3132
"icons": {
3233
"128": "logo128.png"
3334
},
3435
"browser_action": {
35-
"default_title": "Sail",
36-
"default_popup": "out/popup.html"
36+
"default_title": "Sail"
3737
}
3838
}

‎extension/package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@
1010
"copy-webpack-plugin": "^5.0.2",
1111
"css-loader": "^2.1.1",
1212
"happypack": "^5.0.1",
13-
"node-sass": "^4.11.0",
13+
"mini-css-extract-plugin": "^0.8.0",
14+
"node-sass": "^4.12.0",
1415
"sass-loader": "^7.1.0",
1516
"ts-loader": "^5.3.3",
1617
"typescript": "^3.4.4",

‎extension/src/background.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -178,3 +178,9 @@ chrome.runtime.onMessage.addListener((data: ExtensionMessage, sender, sendRespon
178178
return true;
179179
}
180180
});
181+
182+
// Open the config page when the browser action is clicked.
183+
chrome.browserAction.onClicked.addListener(() => {
184+
const url = chrome.runtime.getURL("/out/config.html");
185+
chrome.tabs.create({ url });
186+
});

‎extension/src/common.scss

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
$bg-color: #fff;
2+
$bg-color-header: #f4f7fc;
3+
$bg-color-status: #c4d5ff;
4+
$bg-color-status-error: #ef9a9a;
5+
$bg-color-status-darker: #b1c0e6;
6+
$bg-color-input: #f4f7fc;
7+
$text-color: #677693;
8+
$text-color-darker: #000a44;
9+
$text-color-brand: #4569fc;
10+
$text-color-status: #486cff;
11+
$text-color-status-error: #8b1515;
12+
13+
$font-family: "aktiv grotesk", -apple-system, roboto, serif;
14+
15+
* {
16+
box-sizing: border-box;
17+
}
18+
19+
h1, h2, h3 {
20+
color: $text-color-darker;
21+
font-weight: bold;
22+
}
23+
24+
input[type=text] {
25+
padding: 6px 9px;
26+
border: solid $text-color-darker 1px;
27+
border-radius: 3px;
28+
background-color: $bg-color-input;
29+
outline: 0;
30+
}
31+
32+
button {
33+
padding: 7px 10px;
34+
border: none;
35+
border-radius: 3px;
36+
background-color: $bg-color-status;
37+
color: $text-color-status;
38+
font-weight: 600;
39+
outline: 0;
40+
cursor: pointer;
41+
42+
&:hover {
43+
background-color: $bg-color-status-darker;
44+
}
45+
}

‎extension/src/config.html

Lines changed: 39 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -3,44 +3,60 @@
33
<head>
44
<meta charset="UTF-8">
55
<title>Sail Extension</title>
6+
<link rel="stylesheet" href="./config.css">
67
</head>
8+
79
<body>
810
<header>
9-
<h1>Sail</h1>
11+
<div class="content">
12+
<div class="logo">
13+
<a target="_blank" href="https://sail.dev/">
14+
<img src="/logo.svg" alt="Sail Logo">
15+
</a>
16+
</div>
17+
18+
<div class="right">
19+
<a target="_blank" href="https://sail.dev/docs/introduction/">Docs</a>
20+
<a target="_blank" href="https://coder.com/">Enterprise</a>
21+
<a target="_blank" href="https://github.com/cdr/sail">Repo</a>
22+
</div>
23+
</div>
1024
</header>
1125

12-
<section id="sail-available">
13-
<p id="sail-available-status">Fetching Sail URL...</p>
26+
<section id="sail-status" class="status-container content">
27+
<div class="status content">
28+
<h3 id="sail-available-status">Fetching Sail URL...</h3>
29+
</div>
1430
</section>
1531

16-
<section id="approved-hosts">
17-
<h3>Approved Hosts</h3>
32+
<section class="content" style="margin-top: 40px;">
33+
<h2>Approved Hosts</h2>
1834
<p>
1935
Approved hosts can start Sail without requiring you to
2036
approve it via a popup. Without this, any website could
21-
launch Sail and launch a malicious repository.
22-
</p>
23-
<p>
24-
For more information, please refer to
25-
<a href="https://github.com/cdr/sail/issues/237" target="_blank">cdr/sail#237</a>
37+
launch Sail and launch a malicious repository. For more
38+
information, please refer to
39+
<a href="https://github.com/cdr/sail/issues/237" target="_blank">cdr/sail#237</a>.
2640
</p>
2741

28-
<table>
42+
<table class="hosts-table">
43+
<thead>
44+
<th>Host</th>
45+
<th>Actions</th>
46+
</thead>
47+
2948
<tbody id="approved-hosts-entries">
3049
<tr>
3150
<td>Loading entries...</td>
3251
</tr>
3352

3453
<!--
3554
<tr>
36-
<td>
37-
<input type="checkbox" class="host-checkbox">
38-
</td>
3955
<td>
4056
.host.com
4157
</td>
4258
<td>
43-
<button class="host-remove-btn">
59+
<button class="host-remove-btn" data-host=".host.com">
4460
Remove
4561
</button>
4662
</td>
@@ -49,16 +65,16 @@ <h3>Approved Hosts</h3>
4965
</tbody>
5066
</table>
5167

52-
<div>
53-
<h4>Add an approved host:</h4>
54-
<p>
55-
If you prepend your host with a period (<code>.</code>),
56-
Sail will match all subdomains on that host as well as
57-
the host itself.
58-
</p>
59-
68+
<div style="margin-top: 40px;">
69+
<h3 style="margin-bottom: 8px;">Add an approved host:</h3>
6070
<input id="approved-hosts-add-input" type="text" pattern="^(\.?[^\.]+)+$">
6171
<button id="approved-hosts-add">Add</button>
72+
73+
<p>
74+
If you prepend your host with a period, Sail
75+
will match all subdomains on that host as well
76+
as the host itself.
77+
</p>
6278
</div>
6379
</section>
6480

‎extension/src/config.scss

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
@import "./common.scss";
2+
3+
body {
4+
margin: 0 auto;
5+
font-family: $font-family;
6+
background-color: $bg-color;
7+
color: $text-color;
8+
line-height: 1.5;
9+
font-size: 16px;
10+
}
11+
12+
.content {
13+
max-width: calc(1110px + 2rem);
14+
width: 100%;
15+
padding-left: 1rem;
16+
padding-right: 1rem;
17+
margin: 0 auto;
18+
}
19+
20+
header {
21+
height: 64px;
22+
background-color: $bg-color-header;
23+
24+
25+
> .content {
26+
height: 64px;
27+
display: flex;
28+
flex-direction: row;
29+
align-items: center;
30+
}
31+
32+
.logo {
33+
font-size: 24px;
34+
font-weight: 900;
35+
cursor: pointer;
36+
37+
img {
38+
height: 48px;
39+
margin-bottom: -6px;
40+
}
41+
}
42+
43+
.right {
44+
margin-left: auto;
45+
padding-top: 20px;
46+
padding-bottom: 20px;
47+
margin-top: 0;
48+
margin-bottom: 0;
49+
50+
> a {
51+
font-weight: 700;
52+
font-size: 16px;
53+
line-height: 21px;
54+
position: relative;
55+
transition: 150ms color ease;
56+
color: $text-color-darker;
57+
text-decoration: none;
58+
59+
&:not(:last-child) {
60+
margin-right: 44px;
61+
}
62+
63+
&:hover {
64+
color: $text-color-brand;
65+
66+
&:after {
67+
opacity: 1;
68+
}
69+
}
70+
71+
&:after {
72+
width: 50%;
73+
height: 2px;
74+
content: " ";
75+
position: absolute;
76+
background-color: currentColor;
77+
opacity: 0;
78+
pointer-events: none;
79+
transition: 150ms opacity ease;
80+
bottom: -5px;
81+
left: 25%;
82+
}
83+
}
84+
}
85+
}
86+
87+
.status-container {
88+
.status {
89+
background-color: $bg-color-status;
90+
border-radius: 3px;
91+
font-weight: 500;
92+
padding: 10px;
93+
padding-left: 16px;
94+
padding-right: 16px;
95+
margin-top: 25px;
96+
margin-bottom: 25px;
97+
98+
@media only screen and (max-width: 1110px) {
99+
border-radius: 0;
100+
}
101+
102+
> h3 {
103+
color: $text-color-status;
104+
margin: 0;
105+
}
106+
}
107+
108+
&.error .status {
109+
background-color: $bg-color-status-error;
110+
111+
> h3 {
112+
color: $text-color-status-error;
113+
}
114+
}
115+
}
116+
117+
.hosts-table {
118+
width: 100%;
119+
border-collapse: collapse;
120+
121+
thead {
122+
border-bottom: solid $text-color-darker 2px;
123+
text-align: left;
124+
font-size: 1.1em;
125+
color: $text-color-darker;
126+
}
127+
128+
tbody tr {
129+
border-bottom: solid $text-color-darker 1px;
130+
131+
> td {
132+
padding-top: 6px;
133+
padding-bottom: 6px;
134+
}
135+
}
136+
}

0 commit comments

Comments
 (0)