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

help-beta: Make keyboard shortcut styling more similar to tooltips.

Browse Source 
Fixes #35118.
Visual tuning for this was done on a call, some of it was done in
https://chat.zulip.org/#narrow/channel/19-documentation/topic/new.20help.20center.3A.20design
For dark theme, we use the same color as we use in styling
`.tooltip-hotkey-hint`. For light theme, we brainstormed a color that
looked fine to us. Padding and font-size was also experimented and set.
Since we just took inspiration from `tooltip-hotkey-hint` and did not
use the same styling i.e. tweaked them, we do not add any comments
declaring dependency b/w both styles.

We increase the font-size from 0.85em to 1.2em, so we don't need to
increase font-size for ⌘ and ⌥ in scripts/adjust_mac_kbd_tags.ts.

Current help center had special styling for arrow keys, we don't port
that over here, since the styling we do for our keyboard shortcuts does
not necessitate that.
This commit is contained in:
Shubham Padia
2025-07-28 19:50:32 +00:00
committed by Tim Abbott
parent b8d4ad8b47
commit af3b6c8f5e
2 changed files with 13 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
help-beta/src/scripts/client/adjust_mac_kbd_tags.ts
View File

@@ -59,12 +59,7 @@ function adjust_mac_kbd_tags(): void {
// In web/src/common.ts, we use zulip icon for ⌘ due to centering
// problems, we don't have that problem in the new help center and
// thus don't do that transformation here. We do need to make these
// symbols appear larger than they do by default since they are too
// small to see in the default font-size of 0.85em for kbd elements.
if (key_text === "⌘" || key_text === "⌥") {
element.style.fontSize = "1em";
}
// thus don't do that transformation here.
}
}

32
help-beta/src/styles/main.css
View File

@@ -65,6 +65,12 @@
hsl(204deg 58% 92%),
hsl(204deg 100% 12%)
);
/* Keyboard shortcuts */
--color-keyboard-shortcuts: light-dark(
hsl(225deg 57.09% 42.9%),
hsl(225deg 100% 84%)
);
}
.non-clickable-sidebar-heading {
@@ -222,26 +228,12 @@
}
& kbd {
/* Same as kbd in app_components.css */
display: inline-block;
border: 1px solid hsl(0deg 0% 80%);
border-radius: 4px;
font-weight: 600;
font-size: 1.2em;
padding: 0.15em 0.4em 0.05em;
border: 1px solid var(--color-keyboard-shortcuts);
border-radius: 3px;
color: var(--color-keyboard-shortcuts);
text-align: center;
white-space: nowrap;
background-color: hsl(0deg 0% 98%);
color: hsl(0deg 0% 20%);
text-shadow: 0 1px 0 hsl(0deg 0% 100%);
/* Different from app_components.css */
/* Removed margin setting */
font-size: 0.85em;
padding: 0 0.4em;
&.arrow-key {
/* Same as in informational_overlays.css */
line-height: 1;
padding: 0 0.2em 0.2em;
/* Different from informational_overlays.css */
font-size: 1.2em;
}
}
}