bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-15 15:53:27 +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> </head>
<body class="tw-min-h-screen !tw-min-w-0 tw-text-center tw-bg-background-alt tw-flex tw-flex-col"> <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> <h1 class="tw-mb-0 tw-h1">Sorry, this page isn't available.</h1>
<p class="tw-py-9 tw-mb-0"> <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 link you followed may be broken, or the page may have been removed. Try going back to
the previous page or see our the previous page or see our
<a href="https://bitwarden.com/help/" target="_blank" rel="noreferrer">Help Center</a> for <a href="https://bitwarden.com/help/" target="_blank" rel="noreferrer" class="tw-link"
more information. >Help Center</a
>
for more information.
</p> </p>
<a href="/" class="tw-btn-secondary tw-inline-block">Go to your web vault</a> <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"> <body class="layout_frontend">
<app-root> <app-root>
<!-- Note: any changes to this html need to be made in the app.component.html as well --> <!-- 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" /> <img class="new-logo-themed" alt="Bitwarden" />
<div class="spinner-container tw-justify-center"> <div class="spinner-container tw-justify-center">
<i <i

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

@@ -11,19 +11,9 @@
* - Shared styles like Logo. * - Shared styles like Logo.
*/ */
@layer components { @layer components {
.tw-h1 { body {
@apply tw-text-3xl tw-font-semibold; @apply tw-bg-background;
} @apply tw-text-main;
.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;
} }
/** /**
@@ -49,11 +39,6 @@
} }
} }
body {
@apply tw-bg-background;
@apply tw-text-main;
}
/** /**
* Loading page * 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. * Logo, used both in loading and on "frontend" pages.
*/ */
@@ -85,3 +80,28 @@
content: url("../images/logo-white.svg"); 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;
}
}