empayre/fleet
14
0
Fork 0
mirror of https://github.com/empayre/fleet.git synced 2024-11-06 00:45:19 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

404 500 Pages: 2 CTA buttons (#1846)

Browse Source
This commit is contained in:
RachelElysia 2021-08-31 06:51:29 -07:00 committed by GitHub
parent d1a0ea3881
commit 6b437b8526
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 100 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/images/github-mark-white-24x24@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 859 B

BIN
assets/images/logo-slack-24x24@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

1
changes/1846-404-500-cta-buttons Normal file
View File

@ -0,0 +1 @@
404 and 500 page now include CTA buttons for Osquery community slack and to file an issue

31
frontend/pages/Fleet404/Fleet404.jsx
View File

@ -3,8 +3,12 @@ import { Link } from "react-router";
import PATHS from "router/paths";
import Button from "components/buttons/Button";
import fleetLogoText from "../../../assets/images/fleet-logo-text-white.svg";
import backgroundImg from "../../../assets/images/404.svg";
import githubLogo from "../../../assets/images/github-mark-white-24x24@2x.png";
import slackLogo from "../../../assets/images/logo-slack-24x24@2x.png";
const baseClass = "fleet-404";
@ -34,7 +38,32 @@ class Fleet404 extends Component {
The page you are looking for has either moved, or doesn't
exist.
</p>
<a href="https://fleetdm.com/support">Get help</a>
<div className={`${baseClass}__button-wrapper`}>
<a
href="https://osquery.slack.com/join/shared_invite/zt-h29zm0gk-s2DBtGUTW4CFel0f0IjTEw#/"
target="_blank"
rel="noopener noreferrer"
>
<Button
type="button"
variant="unstyled"
className={`${baseClass}__slack-btn`}
>
<img src={slackLogo} alt="Slack icon" />
Get help on Slack
</Button>
</a>
<a
href="https://github.com/fleetdm/fleet/issues/new?assignees=&labels=bug%2C%3Areproduce&template=bug-report.md&title="
target="_blank"
rel="noopener noreferrer"
>
<Button type="button">
<img src={githubLogo} alt="Github icon" />
File an issue
</Button>
</a>
</div>
</main>
</div>
);

21
frontend/pages/Fleet404/_styles.scss
View File

@ -7,12 +7,29 @@
a {
color: $core-vibrant-blue;
text-decoration: none;
}
&:hover {
text-decoration: underline;
button {
margin: $pad-medium;
width: 197px;
font-size: $small;
img {
width: 24px;
height: 24px;
margin-right: $pad-medium;
}
}
&__button-wrapper {
margin-bottom: $pad-large;
}
&__slack-btn {
border: 1px solid $ui-fleet-black-25;
height: 41px;
}
.primary-header {
position: absolute;
top: 0;

37
frontend/pages/Fleet500/Fleet500.jsx
View File

@ -8,8 +8,12 @@ import { Link } from "react-router";
import PATHS from "router/paths";
import Button from "components/buttons/Button";
import fleetLogoText from "../../../assets/images/fleet-logo-text-white.svg";
import backgroundImg from "../../../assets/images/500.svg";
import githubLogo from "../../../assets/images/github-mark-white-24x24@2x.png";
import slackLogo from "../../../assets/images/logo-slack-24x24@2x.png";
const baseClass = "fleet-500";
@ -94,13 +98,32 @@ class Fleet500 extends Component {
</h1>
<p>Please file an issue if you believe this is a bug.</p>
{renderError()}
<a
href="https://github.com/fleetdm/fleet/issues"
target="_blank"
rel="noopener noreferrer"
>
File an issue
</a>
<div className={`${baseClass}__button-wrapper`}>
<a
href="https://osquery.slack.com/join/shared_invite/zt-h29zm0gk-s2DBtGUTW4CFel0f0IjTEw#/"
target="_blank"
rel="noopener noreferrer"
>
<Button
type="button"
variant="unstyled"
className={`${baseClass}__slack-btn`}
>
<img src={slackLogo} alt="Slack icon" />
Get help on Slack
</Button>
</a>
<a
href="https://github.com/fleetdm/fleet/issues/new?assignees=&labels=bug%2C%3Areproduce&template=bug-report.md&title="
target="_blank"
rel="noopener noreferrer"
>
<Button type="button">
<img src={githubLogo} alt="Github icon" />
File an issue
</Button>
</a>
</div>
</main>
</div>
);

22
frontend/pages/Fleet500/_styles.scss
View File

@ -8,12 +8,30 @@
text-decoration: none;
display: block;
margin-top: $pad-medium;
}
&:hover {
text-decoration: underline;
button {
margin: $pad-medium;
width: 197px;
font-size: $small;
img {
width: 24px;
height: 24px;
margin-right: $pad-medium;
}
}
&__button-wrapper {
display: inline-flex;
margin-bottom: $pad-large;
}
&__slack-btn {
border: 1px solid $ui-fleet-black-25;
height: 41px;
}
.primary-header {
position: absolute;
top: 0;