Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-11-22 11:45:59 +01:00
Code Issues Projects Releases Wiki Activity

[PM-8771] Migrate the 404 page to Tailwind (#10116)

Browse Source 
Redesign our 404 page and update to use Tailwind components.
This commit is contained in:
Oscar Hinton 2024-07-30 12:25:24 +02:00 committed by GitHub
parent 3b54bbd168
commit 339768947b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 61 additions and 210 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
apps/web/src/404.html
View File

@ -1,52 +1,37 @@
<!doctype html>
<html lang="en">
<html lang="en" class="tw-h-full">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
href="/404/bootstrap.min.css"
rel="stylesheet"
type="text/css"
integrity="sha384-hA/ESrxp2b05ywLtD9YwM6m+pNyLRY4+ruk6dWK00SM4k6SQs0bfrITJVSf6uZyH"
/>
<link href="/404/styles.css" rel="stylesheet" type="text/css" />
<link rel="apple-touch-icon" sizes="180x180" href="/images/icons/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/images/icons/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/images/icons/favicon-16x16.png" />
<link rel="mask-icon" href="/images/icons/safari-pinned-tab.svg" color="#175DDC" />
<link rel="manifest" href="/manifest.json" />
<title>Page not found!</title>
<title>Page not found | Bitwarden Web vault</title>
<meta name="description" content="404 Page Not Found" />
<link rel="apple-touch-icon" sizes="180x180" href="images/icons/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="images/icons/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="images/icons/favicon-16x16.png" />
<link rel="mask-icon" href="images/icons/safari-pinned-tab.svg" color="#175DDC" />
<link rel="manifest" href="manifest.json" />
</head>
<body>
<div class="banner">
<div class="container inner banner">
<div class="row align-items-center">
<div class="col brand">
<i class="bwi bwi-shield"></i>&nbsp; <strong>bit</strong>warden
</div>
</div>
</div>
</div>
<div class="container inner content">
<h2>Page not found!</h2>
<p>Sorry, but the page you were looking for could not be found.</p>
<p>
<a href="/">
<img src="/images/404.png" class="img-fluid" alt="404 image" width="80%" />
</a>
<body class="tw-min-h-screen !tw-min-w-0 tw-text-center tw-bg-background-alt tw-flex tw-flex-col">
<main class="tw-max-w-3xl tw-mx-auto tw-mb-8 tw-px-2">
<img src="images/logo.svg" width="200px" class="tw-py-16" alt="Bitwarden" />
<h1 class="tw-mb-0 tw-h1">Sorry, this page isn't available.</h1>
<p class="tw-py-9 tw-mb-0">
The link you followed may be broken, or the page may have been removed. Try going back to
the previous page or see our
<a href="https://bitwarden.com/help/" target="_blank" rel="noreferrer">Help Center</a> for
more information.
</p>
<p>
You can <a href="/">return to the web vault</a>, check our
<a href="https://status.bitwarden.com/">status page</a> or
<a href="https://bitwarden.com/contact/">contact us</a>.
</p>
</div>
<div class="container footer text-muted content">© Copyright 2024 Bitwarden, Inc.</div>
<a href="/" class="tw-btn-secondary tw-inline-block">Go to your web vault</a>
</main>
<footer class="tw-mt-auto tw-h-40 tw-bg-primary-500 tw-flex tw-justify-center tw-items-center">
<i class="bwi bwi-shield tw-text-contrast tw-text-4xl"></i>
</footer>
</body>
</html>

7
apps/web/src/404/bootstrap.min.css vendored
View File

File diff suppressed because one or more lines are too long

154
apps/web/src/404/styles.css
View File

@ -1,154 +0,0 @@
@font-face {
font-family: "Open Sans";
font-style: italic;
font-weight: 300;
src: url(../fonts/Open_Sans-italic-300.woff) format("woff");
unicode-range: U+0-10FFFF;
}
@font-face {
font-family: "Open Sans";
font-style: italic;
font-weight: 400;
src: url(../fonts/Open_Sans-italic-400.woff) format("woff");
unicode-range: U+0-10FFFF;
}
@font-face {
font-family: "Open Sans";
font-style: italic;
font-weight: 600;
src: url(../fonts/Open_Sans-italic-600.woff) format("woff");
unicode-range: U+0-10FFFF;
}
@font-face {
font-family: "Open Sans";
font-style: italic;
font-weight: 700;
src: url(../fonts/Open_Sans-italic-700.woff) format("woff");
unicode-range: U+0-10FFFF;
}
@font-face {
font-family: "Open Sans";
font-style: italic;
font-weight: 800;
src: url(../fonts/Open_Sans-italic-800.woff) format("woff");
unicode-range: U+0-10FFFF;
}
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 300;
src: url(../fonts/Open_Sans-normal-300.woff) format("woff");
unicode-range: U+0-10FFFF;
}
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
src: url(../fonts/Open_Sans-normal-400.woff) format("woff");
unicode-range: U+0-10FFFF;
}
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 600;
src: url(../fonts/Open_Sans-normal-600.woff) format("woff");
unicode-range: U+0-10FFFF;
}
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
src: url(../fonts/Open_Sans-normal-700.woff) format("woff");
unicode-range: U+0-10FFFF;
}
@font-face {
font-family: "Open Sans";
font-style: normal;
font-weight: 800;
src: url(../fonts/Open_Sans-normal-800.woff) format("woff");
unicode-range: U+0-10FFFF;
}
body {
font-family: "Open Sans";
}
html,
body,
.row {
height: 100%;
-webkit-font-smoothing: antialiased;
}
h2 {
font-size: 25px;
margin-bottom: 12.5px;
font-weight: 500;
line-height: 1.1;
}
.brand {
font-size: 23px;
line-height: 25px;
color: #fff;
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.banner {
background-color: #175ddc;
height: 56px;
}
.content {
padding-top: 20px;
padding-bottom: 20px;
padding-left: 15px;
padding-right: 15px;
}
.footer {
padding: 40px 0 40px 0;
border-top: 1px solid #dee2e6;
}
/* Bitwarden icons, manually copied */
@font-face {
font-family: "bwi-font";
src:
url(../images/bwi-font.svg) format("svg"),
url(../fonts/bwi-font.ttf) format("truetype"),
url(../fonts/bwi-font.woff) format("woff"),
url(../fonts/bwi-font.woff2) format("woff2");
font-weight: normal;
font-style: normal;
font-display: block;
}
.bwi {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: "bwi-font" !important;
speak: never;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
display: inline-block;
/* Better Font Rendering */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.bwi-shield:before {
content: "\e932";
}

BIN
apps/web/src/images/404.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 87 KiB

7
apps/web/src/images/logo.svg Normal file
View File

@ -0,0 +1,7 @@
<svg viewBox="0 0 290 45" fill="#175DDC" xmlns="http://www.w3.org/2000/svg">
<title>Bitwarden</title>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M69.799 10.713c3.325 0 5.911 1.248 7.811 3.848 1.9 2.549 2.85 6.033 2.85 10.453 0 4.576-.95 8.113-2.902 10.61-1.953 2.547-4.592 3.743-7.918 3.743-3.325 0-5.858-1.144-7.758-3.536h-.528l-1.003 2.444a.976.976 0 0 1-.897.572H55.23a.94.94 0 0 1-.95-.936V1.352a.94.94 0 0 1 .95-.936h5.7a.94.94 0 0 1 .95.936v8.009c0 1.144-.105 2.964-.316 5.46h.317c1.741-2.704 4.433-4.108 7.917-4.108Zm-2.428 6.084c-1.847 0-3.273.572-4.17 1.717-.844 1.144-1.32 3.068-1.32 5.668v.832c0 2.964.423 5.097 1.32 6.345.897 1.248 2.322 1.924 4.275 1.924 1.531 0 2.85-.728 3.748-2.184.897-1.404 1.372-3.537 1.372-6.189 0-2.704-.475-4.732-1.372-6.084-.95-1.352-2.27-2.029-3.853-2.029ZM93.022 38.9h-5.7a.94.94 0 0 1-.95-.936V12.221a.94.94 0 0 1 .95-.936h5.7a.94.94 0 0 1 .95.936v25.69c.053.468-.422.988-.95.988Zm20.849-5.564c1.108 0 2.428-.208 4.011-.624a.632.632 0 0 1 .792.624v4.316a.64.64 0 0 1-.37.572c-1.794.728-4.064 1.092-6.597 1.092-3.062 0-5.278-.728-6.651-2.288-1.372-1.508-2.111-3.796-2.111-6.812V16.953h-3.008c-.37 0-.634-.26-.634-.624v-2.444c0-.052.053-.104.053-.156l4.17-2.444 2.058-5.408c.106-.26.317-.417.581-.417h3.8c.369 0 .633.26.633.625v5.252h7.548c.158 0 .317.156.317.312v4.68c0 .364-.264.624-.634.624h-7.178v13.21c0 1.04.317 1.872.897 2.34.528.572 1.373.832 2.323.832Zm35.521 5.564c-.739 0-1.319-.468-1.636-1.144l-5.595-16.797c-.369-1.196-.844-3.016-1.478-5.357h-.158l-.528 1.873-1.108 3.536-5.753 16.797c-.211.676-.845 1.092-1.584 1.092a1.628 1.628 0 0 1-1.583-1.196l-7.02-24.182c-.211-.728.369-1.508 1.214-1.508h.158c.528 0 1.003.364 1.161.884l4.117 14.717c1.003 3.849 1.689 6.657 2.006 8.53h.158c.95-3.85 1.689-6.397 2.164-7.698l5.331-15.393c.211-.624.792-1.04 1.531-1.04.686 0 1.267.416 1.478 1.04l4.961 15.29c1.214 3.9 1.953 6.396 2.217 7.696h.158c.159-1.04.792-3.952 2.006-8.633l3.958-14.509c.159-.52.634-.884 1.162-.884.791 0 1.372.728 1.161 1.508l-6.651 24.182c-.211.728-.844 1.196-1.636 1.196h-.211Zm31.352 0a.962.962 0 0 1-.95-.832l-.475-3.432h-.264c-1.372 1.716-2.745 2.964-4.223 3.692-1.425.728-3.166 1.04-5.119 1.04-2.692 0-4.751-.676-6.228-2.028-1.32-1.196-2.059-2.808-2.164-4.836-.212-2.704.95-5.305 3.166-6.813 2.27-1.456 5.437-2.34 9.712-2.34l5.173-.156v-1.768c0-2.6-.528-4.473-1.637-5.773-1.108-1.3-2.744-1.924-5.067-1.924-2.216 0-4.433.52-6.756 1.612-.58.26-1.266 0-1.53-.572s0-1.248.58-1.456c2.639-1.04 5.226-1.612 7.865-1.612 3.008 0 5.225.78 6.756 2.34 1.478 1.508 2.216 3.953 2.216 7.125v16.901c-.052.312-.527.832-1.055.832Zm-10.926-1.768c2.956 0 5.226-.832 6.862-2.444 1.689-1.612 2.533-3.952 2.533-6.813v-2.6l-4.75.208c-3.853.156-6.545.78-8.234 1.768-1.636.988-2.481 2.6-2.481 4.68 0 1.665.528 3.017 1.531 3.953 1.161.78 2.639 1.248 4.539 1.248Zm31.246-25.638c.792 0 1.584.052 2.481.156a1.176 1.176 0 0 1 1.003 1.352c-.106.624-.739.988-1.372.884-.792-.104-1.584-.208-2.375-.208-2.323 0-4.223.988-5.701 2.912-1.478 1.925-2.217 4.42-2.217 7.333v13.625c0 .676-.527 1.196-1.214 1.196-.686 0-1.213-.52-1.213-1.196V13.105c0-.572.475-1.04 1.055-1.04.581 0 1.056.416 1.056.988l.211 3.848h.158c1.109-1.976 2.323-3.38 3.589-4.16 1.214-.832 2.745-1.248 4.539-1.248Zm18.579 0c1.953 0 3.695.364 5.12 1.04 1.478.676 2.745 1.924 3.853 3.64h.158a122.343 122.343 0 0 1-.158-6.084V1.612c0-.676.528-1.196 1.214-1.196.686 0 1.214.52 1.214 1.196v36.351c0 .468-.37.832-.845.832a.852.852 0 0 1-.844-.78l-.528-3.38h-.211c-2.058 3.068-5.067 4.576-8.92 4.576-3.8 0-6.598-1.144-8.656-3.484-1.953-2.34-3.008-5.668-3.008-10.089 0-4.628.95-8.165 2.955-10.66 2.006-2.237 4.856-3.485 8.656-3.485Zm0 2.236c-3.008 0-5.225 1.04-6.756 3.12-1.478 2.029-2.216 4.993-2.216 8.945 0 7.593 3.008 11.39 9.025 11.39 3.114 0 5.331-.885 6.756-2.653 1.478-1.768 2.164-4.68 2.164-8.737v-.416c0-4.16-.686-7.124-2.164-8.893-1.372-1.872-3.642-2.756-6.809-2.756Zm31.616 25.638c-3.959 0-7.02-1.196-9.289-3.64-2.217-2.392-3.326-5.772-3.326-10.089 0-4.316 1.056-7.748 3.22-10.297 2.164-2.6 5.014-3.9 8.656-3.9 3.167 0 5.753 1.092 7.548 3.276 1.9 2.184 2.797 5.2 2.797 8.997v1.976h-19.634c.052 3.692.897 6.5 2.639 8.477 1.741 1.976 4.169 2.86 7.389 2.86 1.531 0 2.956-.104 4.117-.312.844-.156 1.847-.416 3.061-.832.686-.26 1.425.26 1.425.988 0 .416-.264.832-.686.988-1.267.52-2.481.832-3.589 1.04-1.32.364-2.745.468-4.328.468Zm-.739-25.69c-2.639 0-4.75.832-6.334 2.548-1.583 1.665-2.48 4.16-2.797 7.333h16.89c0-3.068-.686-5.564-2.059-7.28-1.372-1.717-3.272-2.6-5.7-2.6ZM288.733 38.9c-.686 0-1.214-.52-1.214-1.196V21.426c0-2.704-.58-4.68-1.689-5.877-1.214-1.196-2.955-1.872-5.383-1.872-3.273 0-5.648.78-7.126 2.444-1.478 1.613-2.322 4.265-2.322 7.853V37.6c0 .676-.528 1.196-1.214 1.196-.686 0-1.214-.52-1.214-1.196V13.105c0-.624.475-1.092 1.108-1.092.581 0 1.003.416 1.109.936l.316 2.704h.159c1.794-2.808 4.908-4.212 9.448-4.212 6.175 0 9.289 3.276 9.289 9.829V37.6c-.053.727-.633 1.3-1.267 1.3ZM90.225 0c-2.48 0-4.486 1.872-4.486 4.212v.416c0 2.289 2.058 4.213 4.486 4.213s4.486-1.924 4.486-4.213v-.364C94.711 1.872 92.653 0 90.225 0Z" />
<path
d="M32.041 24.546V5.95H18.848v33.035c2.336-1.22 4.427-2.547 6.272-3.98 4.614-3.565 6.921-7.051 6.921-10.46Zm5.654-22.314v22.314c0 1.665-.329 3.317-.986 4.953-.658 1.637-1.473 3.09-2.445 4.359-.971 1.268-2.13 2.503-3.475 3.704-1.345 1.2-2.586 2.199-3.725 2.993a46.963 46.963 0 0 1-3.563 2.251c-1.237.707-2.116 1.187-2.636 1.439-.52.251-.938.445-1.252.58-.235.117-.49.175-.765.175s-.53-.058-.766-.174c-.314-.136-.731-.33-1.252-.581-.52-.252-1.398-.732-2.635-1.439a47.003 47.003 0 0 1-3.564-2.251c-1.138-.794-2.38-1.792-3.725-2.993-1.345-1.2-2.503-2.436-3.475-3.704-.972-1.27-1.787-2.722-2.444-4.359C.329 27.863 0 26.211 0 24.546V2.232c0-.504.187-.94.56-1.308A1.823 1.823 0 0 1 1.885.372H35.81c.511 0 .953.184 1.326.552.373.368.56.804.56 1.308Z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 5.7 KiB

3
apps/web/src/main.ts
View File

@ -5,9 +5,6 @@ import "bootstrap";
import "jquery";
import "popper.js";
require("./scss/styles.scss");
require("./scss/tailwind.css");
import { AppModule } from "./app/app.module";
if (process.env.NODE_ENV === "production") {

22
apps/web/src/scss/tailwind.css
View File

@ -3,3 +3,25 @@
@tailwind utilities;
@import "../../../../libs/components/src/tw-theme.css";
/*
* Duplicated styling from Angular components.
*
* For use in non Angular pages like the 404 and connectors.
*/
@layer components {
.tw-h1 {
@apply tw-text-3xl tw-font-semibold;
}
.tw-btn {
@apply tw-font-semibold tw-py-1.5 tw-px-3 tw-rounded tw-transition tw-border tw-border-solid tw-text-center tw-no-underline hover:tw-no-underline focus:tw-outline-none;
}
.tw-btn-secondary {
@apply tw-btn;
@apply tw-bg-transparent tw-border-text-muted hover:tw-bg-text-muted hover:tw-border-text-muted hover:!tw-text-contrast disabled:tw-bg-transparent disabled:tw-border-text-muted/60 disabled:!tw-text-muted/60 disabled:tw-cursor-not-allowed;
@apply tw-text-muted !important;
}
}

10
apps/web/webpack.config.js
View File

@ -88,7 +88,7 @@ const plugins = [
new HtmlWebpackPlugin({
template: "./src/index.html",
filename: "index.html",
chunks: ["theme_head", "app/polyfills", "app/vendor", "app/main"],
chunks: ["theme_head", "app/polyfills", "app/vendor", "app/main", "styles"],
}),
new HtmlWebpackInjector(),
new HtmlWebpackPlugin({
@ -126,6 +126,11 @@ const plugins = [
filename: "duo-redirect-connector.html",
chunks: ["connectors/duo-redirect"],
}),
new HtmlWebpackPlugin({
template: "./src/404.html",
filename: "404.html",
chunks: ["styles"],
}),
new CopyWebpackPlugin({
patterns: [
{ from: "./src/.nojekyll" },
@ -133,8 +138,6 @@ const plugins = [
{ from: "./src/favicon.ico" },
{ from: "./src/browserconfig.xml" },
{ from: "./src/app-id.json" },
{ from: "./src/404.html" },
{ from: "./src/404", to: "404" },
{ from: "./src/images", to: "images" },
{ from: "./src/locales", to: "locales" },
{ from: "../../node_modules/qrious/dist/qrious.min.js", to: "scripts" },
@ -322,6 +325,7 @@ const webpackConfig = {
"connectors/sso": "./src/connectors/sso.ts",
"connectors/captcha": "./src/connectors/captcha.ts",
"connectors/duo-redirect": "./src/connectors/duo-redirect.ts",
styles: ["./src/scss/styles.scss", "./src/scss/tailwind.css"],
theme_head: "./src/theme.ts",
},
optimization: {

3
bitwarden_license/bit-web/src/main.ts
View File

@ -5,9 +5,6 @@ import "bootstrap";
import "jquery";
import "popper.js";
require("@bitwarden/web-vault/scss/styles.scss");
require("@bitwarden/web-vault/scss/tailwind.css");
import { AppModule } from "./app/app.module";
if (process.env.NODE_ENV === "production") {