bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-14 23:33:31 +00:00
Code Issues Releases Wiki Activity

Fix old FrontendLayoutComponent logo, update 404 and index styling (#16076)

Browse Source
This commit is contained in:
Oscar Hinton
2025-08-20 16:28:18 +02:00
committed by GitHub
parent 603a7031c0
commit 5483006ae4
3 changed files with 45 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -16,16 +16,18 @@
</head>
<body class="tw-min-h-screen !tw-min-w-0 tw-text-center tw-bg-background-alt tw-flex tw-flex-col">
<img class="new-logo-themed tw-m-8" alt="Bitwarden" />
<img class="new-logo-themed tw-my-4 tw-mx-6" alt="Bitwarden" />
<main class="tw-max-w-3xl tw-mx-auto tw-px-2 tw-my-4">
<main class="tw-max-w-3xl tw-mx-auto tw-px-2 tw-my-8">
<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.
<a href="https://bitwarden.com/help/" target="_blank" rel="noreferrer" class="tw-link"
>Help Center</a
>
for more information.
</p>
<a href="/" class="tw-btn-secondary tw-inline-block">Go to your web vault</a>

2
apps/web/src/index.html
View File

@@ -16,7 +16,7 @@
<body class="layout_frontend">
<app-root>
<!-- Note: any changes to this html need to be made in the app.component.html as well -->
<div class="tw-p-8 tw-flex">
<div class="tw-px-6 tw-py-4 tw-flex">
<img class="new-logo-themed" alt="Bitwarden" />
<div class="spinner-container tw-justify-center">
<i

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

@@ -11,19 +11,9 @@
* - Shared styles like Logo.
*/
@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;
body {
@apply tw-bg-background;
@apply tw-text-main;
}
/**
@@ -49,11 +39,6 @@
}
}
body {
@apply tw-bg-background;
@apply tw-text-main;
}
/**
* Loading page
*/
@@ -70,6 +55,16 @@
}
}
/**
* Logo on old `FrontendLayoutComponent`. Remove when the component is gone.
*/
img.logo {
display: block;
height: 43px;
margin: 0 auto;
width: 284px;
}
/**
* Logo, used both in loading and on "frontend" pages.
*/
@@ -85,3 +80,28 @@
content: url("../images/logo-white.svg");
}
}
/**
* 404 page styling.
*/
@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-full tw-transition tw-border-2 tw-border-solid tw-text-center tw-no-underline focus:tw-outline-none;
}
.tw-btn-secondary {
@apply tw-btn;
@apply tw-bg-transparent tw-text-primary-600 tw-border-primary-600 hover:tw-bg-hover-default;
}
.tw-link {
@apply tw-font-semibold hover:tw-underline hover:tw-decoration-1;
@apply tw-text-primary-600 hover:tw-text-primary-700 focus-visible:before:tw-ring-primary-600;
}
}