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 { serviceConfig } from '../../config/service-config';
......@@ -86,9 +87,21 @@ function GroupList({ settings }) {
// and pass an empty string.
const altName = orgName(focusedGroup) ? orgName(focusedGroup) : '';
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 && (
<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}
</span>
......@@ -114,7 +127,7 @@ function GroupList({ settings }) {
return (
<Menu
align="left"
contentClass="GroupList__content"
contentClass="min-w-[250px]"
label={label}
onOpenChanged={() => setExpandedGroup(null)}
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 @@
// UI (Preact) Components
// ----------
@use './FilterSelect';
@use './GroupList';
@use './StyledText';
// 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