paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-10-23 16:14:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

css: Redesign link styles.

Browse Source 
This commit redesigns the link styles based on the Figma designs by
Vlad Korobov, and implements them in the navbar banners. This also
removes the `--color-text-link` which was being used in the custom
profile field links in the user card popovers while the variable did
not exist previously.
This commit is contained in:
Sayam Samal
2025-01-22 17:56:27 +05:30
committed by Tim Abbott
parent 5ed85e0a2d
commit 06005bc32c
5 changed files with 49 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/navbar_alerts.ts
View File

@@ -352,9 +352,9 @@ const demo_organization_deadline_banner = (): AlertBanner => {
},
{
"z-demo-link": (content_html) =>
`<a class="banner__link" href="https://zulip.com/help/demo-organizations" target="_blank" rel="noopener noreferrer">${content_html.join("")}</a>`,
`<a class="banner-link" href="https://zulip.com/help/demo-organizations" target="_blank" rel="noopener noreferrer">${content_html.join("")}</a>`,
"z-convert-link": (content_html) =>
`<a class="banner__link" href="https://zulip.com/help/demo-organizations#convert-a-demo-organization-to-a-permanent-organization" target="_blank" rel="noopener noreferrer">${content_html.join("")}</a>`,
`<a class="banner-link" href="https://zulip.com/help/demo-organizations#convert-a-demo-organization-to-a-permanent-organization" target="_blank" rel="noopener noreferrer">${content_html.join("")}</a>`,
days_remaining,
},
),

6
web/src/portico/showroom.ts
View File

@@ -108,9 +108,9 @@ const alert_banners: Record<string, AlertBanner> = {
},
{
demo_link: (content_html) =>
`<a class="banner__link" href="https://zulip.com/help/demo-organizations" target="_blank" rel="noopener noreferrer">${content_html.join("")}</a>`,
`<a class="banner-link" href="https://zulip.com/help/demo-organizations" target="_blank" rel="noopener noreferrer">${content_html.join("")}</a>`,
convert_link: (content_html) =>
`<a class="banner__link" href="https://zulip.com/help/demo-organizations#convert-a-demo-organization-to-a-permanent-organization" target="_blank" rel="noopener noreferrer">${content_html.join("")}</a>`,
`<a class="banner-link" href="https://zulip.com/help/demo-organizations#convert-a-demo-organization-to-a-permanent-organization" target="_blank" rel="noopener noreferrer">${content_html.join("")}</a>`,
},
),
),
@@ -129,7 +129,7 @@ const alert_banners: Record<string, AlertBanner> = {
},
{
"z-link": (content_html) =>
`<a class="banner__link" href="https://zulip.com/help/desktop-notifications#desktop-notifications" target="_blank" rel="noopener noreferrer">${content_html.join("")}</a>`,
`<a class="banner-link" href="https://zulip.com/help/desktop-notifications#desktop-notifications" target="_blank" rel="noopener noreferrer">${content_html.join("")}</a>`,
},
),
),

30
web/styles/app_variables.css
View File

@@ -892,6 +892,21 @@
--color-text-settings-field-hint: hsl(0deg 0% 57%);
--color-text-clear-search-button: hsl(0deg 0% 80%);
--color-text-clear-search-button-hover: hsl(0deg 0% 0%);
/* Link colors */
--color-text-link: hsl(210deg 94% 42%);
--color-text-link-decoration: color-mix(
in oklch,
hsl(210deg 94% 42%) 20%,
transparent
);
--color-text-link-hover: hsl(212deg 100% 50%);
--color-text-link-decoration-hover: color-mix(
in oklch,
hsl(212deg 100% 50%) 70%,
transparent
);
--color-text-link-active: hsl(212deg 100% 30%);
/* These colors are from Bootstrap. */
--color-text-generic-link: #08c;
--color-text-generic-link-interactive: #005580;
@@ -1884,6 +1899,21 @@
--color-text-settings-field-hint: hsl(0deg 0% 52%);
--color-text-clear-search-button: hsl(236deg 33% 80%);
--color-text-clear-search-button-hover: hsl(0deg 0% 100%);
/* Link colors */
--color-text-link: hsl(200deg 100% 50%);
--color-text-link-decoration: color-mix(
in oklch,
hsl(200deg 100% 50%) 20%,
transparent
);
--color-text-link-hover: hsl(200deg 100% 60%);
--color-text-link-decoration-hover: color-mix(
in oklch,
hsl(200deg 100% 60%) 70%,
transparent
);
--color-text-link-active: hsl(200deg 100% 50%);
--color-text-generic-link: #08c;
--color-text-generic-link-interactive: hsl(200deg 79% 66%);

16
web/styles/banners.css
View File

@@ -15,8 +15,20 @@
border-radius: 6px;
}
.banner__link {
color: var(--color-text-link-banner);
.banner-link {
color: var(--color-text-link);
text-decoration: underline;
text-decoration-color: var(--color-text-link-decoration);
&:hover {
color: var(--color-text-link-hover);
text-decoration-color: var(--color-text-link-decoration-hover);
}
&:active {
color: var(--color-text-link-active);
text-decoration-color: currentcolor;
}
}
.banner-label {

1
web/styles/popovers.css
View File

@@ -177,7 +177,6 @@
color: var(--color-text-item);
&:hover {
color: var(--color-text-link);
text-decoration: none;
}