Commit f764be18 authored by Stefan Probst's avatar Stefan Probst
Browse files

style: fix padding

parent f884f57d
Pipeline #290280 passed with stages
in 9 minutes and 57 seconds
......@@ -41,7 +41,7 @@ export function ItemHistorySearchResult(props: ItemHistorySearchResultProps): JS
versionId={item.id}
>
{item.label}
{isNonEmptyString(item.version) ? <span>({item.version})</span> : null}
{isNonEmptyString(item.version) ? <span> ({item.version})</span> : null}
</ItemLink>
</SearchResultTitle>
<SearchResultMeta>
......
......@@ -19,11 +19,11 @@ export function ItemDateCreated(props: ItemDateCreatedProps): JSX.Element {
}
return (
<Fragment>
<dt>{t(['common', 'item', 'date-created'])}</dt>
<div>
<dt className={css['group-label']}>{t(['common', 'item', 'date-created'])}</dt>
<dd>
<Timestamp dateTime={dateTime} />
</dd>
</Fragment>
</div>
)
}
......@@ -19,11 +19,11 @@ export function ItemDateLastUpdated(props: ItemDateLastUpdatedProps): JSX.Elemen
}
return (
<Fragment>
<dt>{t(['common', 'item', 'date-last-modified'])}</dt>
<div>
<dt className={css['group-label']}>{t(['common', 'item', 'date-last-modified'])}</dt>
<dd>
<Timestamp dateTime={dateTime} />
</dd>
</Fragment>
</div>
)
}
......@@ -14,6 +14,7 @@
height: var(--size-64);
padding: var(--space-8) var(--space-10);
place-items: center;
place-content: center;
@media (/* --screen-md */ min-width: 48rem) {
height: var(--size-96);
......@@ -115,4 +116,6 @@
flex-wrap: wrap;
gap: var(--space-2);
justify-content: center;
font-size: var(--font-size-3-5);
line-height: var(--line-height-tight);
}
......@@ -9,7 +9,11 @@
border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
background-color: var(--color-primary-750);
color: var(--color-neutral-50);
font-weight: var(--font-weight-medium);
font-size: var(--font-size-ui-sm);
transition-timing-function: var(--transition-timing-function);
transition-duration: var(--transition-duration);
transition-property: var(--transition-property);
&[data-hovered] {
background-color: var(--color-primary-600);
......
......@@ -70,12 +70,12 @@ export function AccountMenu(): JSX.Element {
return (
<div className={css['container']}>
<button
ref={buttonRef}
{...mergeProps(focusProps, hoverProps, buttonProps)}
data-hovered={isHovered ? '' : undefined}
className={css['menu-button']}
data-focused={isFocusVisible ? '' : undefined}
data-hovered={isHovered ? '' : undefined}
data-state={state.isOpen ? 'expanded' : 'collapsed'}
className={css['menu-button']}
ref={buttonRef}
>
{t(['common', 'auth', 'account-menu-message'], {
values: { username: currentUser.data.displayName },
......@@ -86,12 +86,12 @@ export function AccountMenu(): JSX.Element {
<Popover isDismissable isOpen={state.isOpen} onClose={state.close} shouldCloseOnBlur>
<DismissButton onDismiss={state.close} />
<Menu
menuProps={menuProps}
aria-label={t(['common', 'auth', 'account-menu'])}
autoFocus={state.focusStrategy}
onClose={state.close}
onAction={onAction}
items={items}
menuProps={menuProps}
onAction={onAction}
onClose={state.close}
>
{(item) => {
const props = { type: item.type, href: item.href }
......@@ -162,9 +162,9 @@ function MenuItem<T extends object>(props: MenuItemProps<T>) {
if (item.props.type === 'button') {
return (
<li
ref={ref as RefObject<HTMLLIElement>}
{...menuItemProps}
className={menuStyles['nav-menu-item']}
ref={ref as RefObject<HTMLLIElement>}
>
<Button variant="nav-menu-link">{item.rendered}</Button>
</li>
......@@ -175,12 +175,12 @@ function MenuItem<T extends object>(props: MenuItemProps<T>) {
return (
<li role="none" className={menuStyles['nav-menu-item']}>
<a
ref={ref as RefObject<HTMLAnchorElement>}
{...menuItemProps}
className={menuStyles['nav-menu-link']}
href={item.props.href}
target="_blank"
rel="noreferrer"
ref={ref as RefObject<HTMLAnchorElement>}
>
{item.rendered}
</a>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment