agw/overleaf-cep
1
0
Fork 0
mirror of https://github.com/yu-i-i/overleaf-cep.git synced 2026-05-23 17:19:37 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: adding dark mode footer (#30772)

Browse Source 
* feat: adding dark mode footer

* Update services/web/frontend/stylesheets/components/footer.scss

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* feat: update linkedin logo to correct color, and enforce specific colors on socials logos

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
GitOrigin-RevId: 841317846dfbee04c1a00565054d7e9428805796
This commit is contained in:
Jimmy Domagala-Tang
2026-01-22 10:43:47 -08:00
committed by Copybot
parent f95b471797
commit f7b42d212a
3 changed files with 74 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
services/web/app/views/layout/fat-footer-base.pug
View File

@@ -50,7 +50,7 @@
svg(xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72' height='25')
g(fill='none' fill-rule='evenodd')
path.background(
fill='#0B66C3'
fill='#2867b2'
d='M8 72h56a8 8 0 0 0 8-8V8a8 8 0 0 0-8-8H8a8 8 0 0 0-8 8v56a8 8 0 0 0 8 8'
)
path.text(

2
services/web/frontend/js/shared/svgs/linkedin-logo.tsx
View File

@@ -4,7 +4,7 @@ function LinkedInLogo() {
<g fill="none" fillRule="evenodd">
<path
className="background"
fill="#0B66C3"
fill="#2867b2"
d="M8 72h56a8 8 0 0 0 8-8V8a8 8 0 0 0-8-8H8a8 8 0 0 0-8 8v56a8 8 0 0 0 8 8"
/>
<path

91
services/web/frontend/stylesheets/components/footer.scss
View File

@@ -15,17 +15,69 @@ $footer-width-delta: 320px;
--cookie-banner-link: var(--link-ui-dark);
}
@mixin footer-pre-redesign {
--footer-background: var(--bg-dark-primary);
--footer-content: var(--content-secondary-dark);
--footer-link: var(--content-secondary-dark);
--footer-logo-url: url('../../../frontend/js/shared/svgs/overleaf-green.svg');
}
@mixin footer-light {
--footer-background: var(--bg-light-secondary);
--footer-content: var(--content-primary);
--footer-link: var(--content-primary);
--footer-logo-url: url('../../../frontend/js/shared/svgs/overleaf-green.svg');
}
@mixin footer-dark {
--footer-background: var(--bg-dark-primary);
--footer-content: var(--content-primary-dark);
--footer-link: var(--content-placeholder-dark);
--footer-logo-url: url('../../../frontend/js/shared/svgs/overleaf-white.svg');
}
@mixin socials-light {
--facebook-logo-background: #0866ff;
--facebook-logo-path: transparent;
--x-logo-path: #000;
--linkedin-logo-background: #2867b2;
--linkedin-logo-path: #fff;
}
@mixin socials-dark {
--facebook-logo-background: #fff;
--facebook-logo-path: transparent;
--x-logo-path: #fff;
--linkedin-logo-background: #fff;
--linkedin-logo-path: #000;
}
:root {
.fat-footer {
@include footer-pre-redesign;
}
.cookie-banner {
@include cookie-banner-light;
}
.website-redesign-fat-footer,
.website-redesign .fat-footer {
@include footer-light;
@include socials-light;
}
@include theme('default') {
.ide-redesign-main,
.project-ds-nav-page {
.cookie-banner {
@include cookie-banner-dark;
}
.fat-footer {
@include footer-dark;
@include socials-dark;
}
}
}
}
@@ -153,11 +205,11 @@ footer.site-footer {
}
.fat-footer {
--footer-text-color: var(--content-secondary-dark);
--footer-background-color: var(--bg-dark-primary);
--link-color: var(--footer-text-color);
--link-hover-color: var(--footer-text-color);
--link-visited-color: var(--footer-text-color);
--footer-text-color: var(--footer-content);
--footer-background-color: var(--footer-background);
--link-color: var(--footer-link);
--link-hover-color: var(--footer-link);
--link-visited-color: var(--footer-link);
--link-text-decoration: none;
--link-hover-text-decoration: underline;
@@ -433,7 +485,7 @@ footer.site-footer {
.website-redesign-fat-footer,
.website-redesign .fat-footer {
--footer-text-color: var(--content-primary);
--footer-text-color: var(--footer-content);
.fat-footer-container {
@include footer-container-down(sm) {
@@ -442,14 +494,14 @@ footer.site-footer {
}
&.fat-footer {
background: var(--content-primary-dark);
background: var(--footer-background);
h2 {
font-weight: 400;
}
.fat-footer-base {
color: var(--content-primary);
color: var(--footer-content);
#language-picker-toggle {
color: inherit;
@@ -460,32 +512,33 @@ footer.site-footer {
// supported in older versions of browsers and these logos need to be correct.
.fat-footer-social {
&.x-logo svg path {
fill: #0f1419;
}
&.facebook-logo svg,
&.linkedin-logo svg {
path.text {
fill: #fff;
}
fill: var(--x-logo-path);
}
&.facebook-logo svg {
path.text {
fill: var(--facebook-logo-path);
}
path.background {
fill: #0866ff;
fill: var(--facebook-logo-background);
}
}
&.linkedin-logo svg {
path.text {
fill: var(--linkedin-logo-path);
}
path.background {
fill: #0b66c3;
fill: var(--linkedin-logo-background);
}
}
}
}
.footer-brand {
background-image: url('../../../frontend/js/shared/svgs/overleaf-green.svg');
background-image: var(--footer-logo-url);
}
@include footer-container-down(sm) {