Commit 1adb25a4 authored by Lyza Danger Gardner's avatar Lyza Danger Gardner Committed by Lyza Gardner

Migrate `GroupList` to tailwind

parent 6757da21
import classnames from 'classnames';
import { useMemo, useState } from 'preact/hooks'; import { useMemo, useState } from 'preact/hooks';
import { serviceConfig } from '../../config/service-config'; import { serviceConfig } from '../../config/service-config';
...@@ -86,9 +87,21 @@ function GroupList({ settings }) { ...@@ -86,9 +87,21 @@ function GroupList({ settings }) {
// and pass an empty string. // and pass an empty string.
const altName = orgName(focusedGroup) ? orgName(focusedGroup) : ''; const altName = orgName(focusedGroup) ? orgName(focusedGroup) : '';
label = ( label = (
<span className="GroupList__menu-label"> <span
className={classnames(
// Don't allow this label to shrink (wrap to next line)
'shrink-0 flex items-center gap-x-1 text-lg text-color-text font-bold'
)}
>
{icon && ( {icon && (
<img className="GroupList__menu-icon" src={icon} alt={altName} /> <img
className={classnames(
// Tiny adjustment to make H logo align better with group name
'relative top-[1px] w-4 h-4'
)}
src={icon}
alt={altName}
/>
)} )}
{focusedGroup.name} {focusedGroup.name}
</span> </span>
...@@ -114,7 +127,7 @@ function GroupList({ settings }) { ...@@ -114,7 +127,7 @@ function GroupList({ settings }) {
return ( return (
<Menu <Menu
align="left" align="left"
contentClass="GroupList__content" contentClass="min-w-[250px]"
label={label} label={label}
onOpenChanged={() => setExpandedGroup(null)} onOpenChanged={() => setExpandedGroup(null)}
title={menuTitle} title={menuTitle}
......
@use '../../variables' as var;
@use '../../mixins/utils';
.GroupList__content {
min-width: 250px;
}
.GroupList__menu-label {
@include utils.font--large;
align-items: center;
color: var.$color-text;
display: flex;
// Prevent label from wrapping if top bar is too narrow to fit all of its
// items.
flex-shrink: 0;
font-weight: bold;
}
.GroupList__menu-icon {
@include utils.icon--medium;
margin-right: 4px;
// A minor adjustment to make the default icon (the Hypothesis logo) align
// better with the text.
position: relative;
top: 1px;
}
...@@ -10,7 +10,6 @@ ...@@ -10,7 +10,6 @@
// UI (Preact) Components // UI (Preact) Components
// ---------- // ----------
@use './FilterSelect'; @use './FilterSelect';
@use './GroupList';
@use './StyledText'; @use './StyledText';
// TODO: Evaluate all classes below after components have been converted to // TODO: Evaluate all classes below after components have been converted to
......
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