Skip to content

Commit 429067d

Browse files
jeffsieujeffsieu
committed
[questions][ui] last minute ui changes
1 parent 91abe74 commit 429067d

File tree

7 files changed

+80
-42
lines changed

7 files changed

+80
-42
lines changed

‎apps/portal/src/components/questions/QuestionAggregateBadge.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ export default function QuestionAggregateBadge({
5656
<button
5757
ref={setTriggerRef}
5858
className="-my-1 flex items-center rounded-md px-2
59-
py-1 text-xs font-medium text-slate-500 hover:bg-slate-100 hover:text-slate-600"
59+
py-1 text-xs font-medium text-slate-500 bg-slate-100 hover:bg-slate-200 hover:text-slate-600"
6060
type="button">
6161
<Icon
6262
aria-hidden={true}

‎apps/portal/src/components/questions/QuestionContainer.tsx

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
// TODO: Remove this after Steps
2+
3+
import clsx from 'clsx';
4+
import React from 'react';
5+
6+
type Props = Readonly<{
7+
children: React.ReactNode;
8+
className?: string;
9+
variant?: 'md' | 'sm' | 'xs';
10+
}>;
11+
12+
export default function QuestionContainer({
13+
children,
14+
className,
15+
variant = 'md',
16+
}: Props) {
17+
return (
18+
<div
19+
className={clsx(
20+
'mx-auto px-4 sm:px-6 lg:px-8',
21+
variant === 'md' && 'max-w-7xl',
22+
variant === 'sm' && 'max-w-7xl',
23+
variant === 'xs' && 'max-w-3xl',
24+
className,
25+
)}>
26+
{children}
27+
</div>
28+
);
29+
}

‎apps/portal/src/components/questions/QuestionSearchBar.tsx

Lines changed: 35 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import {
22
AdjustmentsHorizontalIcon,
33
MagnifyingGlassIcon,
44
} from '@heroicons/react/24/outline';
5-
import { Button, DropdownMenu, TextInput } from '@tih/ui';
5+
import { Button, Tabs, TextInput } from '@tih/ui';
66

77
import { SORT_ORDERS } from '~/utils/questions/constants';
88

@@ -43,7 +43,7 @@ export default function QuestionSearchBar({
4343
return (
4444
<div className="flex flex-col gap-4">
4545
<div className="flex flex-col items-stretch gap-x-2 gap-y-4 lg:flex-row lg:items-end">
46-
<div className="flex flex-1 items-center gap-4">
46+
<div className="flex flex-1 gap-2">
4747
<div className="flex-1">
4848
<TextInput
4949
isLabelHidden={true}
@@ -57,48 +57,52 @@ export default function QuestionSearchBar({
5757
}}
5858
/>
5959
</div>
60-
<DropdownMenu align="end" label="Sort by">
61-
{(sortOptionsSelectProps.sortTypeOptions ?? []).map(
62-
({ value: sortTypeValue }) =>
63-
(sortOptionsSelectProps?.sortOrderOptions ?? SORT_ORDERS).map(
64-
({ value: sortOrderValue }) => (
65-
<DropdownMenu.Item
66-
key={`${sortTypeValue}/${sortOrderValue}`}
67-
isSelected={
68-
sortOptionsSelectProps.sortTypeValue ===
69-
sortTypeValue &&
70-
sortOptionsSelectProps.sortOrderValue === sortOrderValue
71-
}
72-
label={getSortOrderLabel(sortOrderValue, sortTypeValue)}
73-
onClick={() => {
74-
sortOptionsSelectProps.onSortTypeChange?.(
75-
sortTypeValue,
76-
);
77-
sortOptionsSelectProps.onSortOrderChange?.(
78-
sortOrderValue,
79-
);
80-
}}
81-
/>
82-
),
83-
),
84-
)}
85-
</DropdownMenu>
8660
<div className="lg:hidden">
8761
<Button
8862
addonPosition="start"
89-
aria-label={
63+
icon={AdjustmentsHorizontalIcon}
64+
label={
9065
activeFilterCount > 0
9166
? `Filters (${activeFilterCount})`
9267
: 'Filters'
9368
}
94-
icon={AdjustmentsHorizontalIcon}
95-
label={`(${activeFilterCount})`}
9669
variant={activeFilterCount > 0 ? 'secondary' : 'tertiary'}
9770
onClick={onFilterOptionsToggle}
9871
/>
9972
</div>
10073
</div>
10174
</div>
75+
<div className="flex flex-col justify-start gap-x-4 gap-y-2 sm:flex-row">
76+
<div>
77+
<Tabs
78+
label="Sort by"
79+
tabs={sortOptionsSelectProps.sortTypeOptions ?? []}
80+
value={sortOptionsSelectProps.sortTypeValue}
81+
onChange={sortOptionsSelectProps.onSortTypeChange}
82+
/>
83+
</div>
84+
<div className="border-b border-l" />
85+
<div>
86+
<Tabs
87+
label="Order by"
88+
tabs={(sortOptionsSelectProps.sortOrderOptions ?? SORT_ORDERS).map(
89+
(option) => {
90+
const newLabel = getSortOrderLabel(
91+
option.value,
92+
sortOptionsSelectProps.sortTypeValue,
93+
);
94+
95+
return {
96+
...option,
97+
label: newLabel,
98+
};
99+
},
100+
)}
101+
value={sortOptionsSelectProps.sortOrderValue}
102+
onChange={sortOptionsSelectProps.onSortOrderChange}
103+
/>
104+
</div>
105+
</div>
102106
</div>
103107
);
104108
}

‎apps/portal/src/components/questions/VotingButtons.tsx

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,10 @@ export default function VotingButtons({
4040
<div className="flex flex-col items-center">
4141
<button
4242
aria-label="Upvote"
43-
className="rounded-full p-1 hover:bg-slate-100"
43+
className={clsx(
44+
'rounded-full p-1 hover:bg-slate-100',
45+
vote?.vote === 'UPVOTE' && 'bg-primary-50',
46+
)}
4447
type="button"
4548
onClick={(event) => {
4649
event.preventDefault();
@@ -50,7 +53,7 @@ export default function VotingButtons({
5053
<ChevronUpIcon
5154
className={clsx(
5255
size === 'sm' && 'h-5 w-5',
53-
size === 'md' && 'h-8 w-8',
56+
size === 'md' && 'h-6 w-6',
5457
vote?.vote === 'UPVOTE'
5558
? 'text-primary-500'
5659
: 'hover:text-primary-500 text-slate-400',
@@ -60,7 +63,10 @@ export default function VotingButtons({
6063
<p>{upvoteCount}</p>
6164
<button
6265
aria-label="Downvote"
63-
className="rounded-full p-1 hover:bg-slate-100"
66+
className={clsx(
67+
'rounded-full p-1 hover:bg-slate-100',
68+
vote?.vote === 'DOWNVOTE' && 'bg-danger-50',
69+
)}
6470
type="button"
6571
onClick={(event) => {
6672
event.preventDefault();
@@ -70,7 +76,7 @@ export default function VotingButtons({
7076
<ChevronDownIcon
7177
className={clsx(
7278
size === 'sm' && 'h-5 w-5',
73-
size === 'md' && 'h-8 w-8',
79+
size === 'md' && 'h-6 w-6',
7480
vote?.vote === 'DOWNVOTE'
7581
? 'text-danger-500'
7682
: 'hover:text-danger-500 text-slate-400',

‎apps/portal/src/components/questions/card/question/BaseQuestionCard.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -252,7 +252,7 @@ export default function BaseQuestionCard({
252252
</div>
253253
<p
254254
className={clsx(
255-
'whitespace-pre-line text-base font-medium leading-6 text-slate-900 md:text-lg',
255+
'md:text-md whitespace-pre-line text-base font-medium leading-6 text-slate-900',
256256
truncateContent && 'line-clamp-2 text-ellipsis',
257257
)}>
258258
{content}
@@ -321,7 +321,7 @@ export default function BaseQuestionCard({
321321
className={clsx(
322322
'group flex gap-4 border-slate-200',
323323
showHover && 'hover:border-primary-500 transition',
324-
!hideCard && 'rounded-md border bg-white p-4 sm:rounded-lg sm:p-6',
324+
!hideCard && 'rounded-md border bg-white px-2 py-4 sm:rounded-lg',
325325
)}>
326326
{cardContent}
327327
{showDeleteButton && (

‎apps/portal/src/pages/questions/[questionId]/[questionSlug]/index.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -261,7 +261,6 @@ export default function QuestionPage() {
261261
/>
262262
<div className="sm:ml-13 ml-11 mr-2 md:ml-14">
263263
<Collapsible
264-
defaultOpen={true}
265264
label={
266265
<div className="text-primary-700">
267266
{question.numComments}{' '}

‎apps/portal/src/pages/questions/browse.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,11 @@ import QuestionOverviewCard from '~/components/questions/card/question/QuestionO
1414
import ContributeQuestionCard from '~/components/questions/ContributeQuestionCard';
1515
import FilterSection from '~/components/questions/filter/FilterSection';
1616
import PaginationLoadMoreButton from '~/components/questions/PaginationLoadMoreButton';
17+
import QuestionContainer from '~/components/questions/QuestionContainer';
1718
import QuestionSearchBar from '~/components/questions/QuestionSearchBar';
1819
import CompanyTypeahead from '~/components/questions/typeahead/CompanyTypeahead';
1920
import LocationTypeahead from '~/components/questions/typeahead/LocationTypeahead';
2021
import RoleTypeahead from '~/components/questions/typeahead/RoleTypeahead';
21-
import Container from '~/components/shared/Container';
2222
import type { JobTitleType } from '~/components/shared/JobTitles';
2323
import { getLabelForJobTitleType } from '~/components/shared/JobTitles';
2424

@@ -506,7 +506,7 @@ export default function QuestionsBrowsePage() {
506506
<title>Home - {APP_TITLE}</title>
507507
</Head>
508508
<main>
509-
<Container className="relative flex" variant="sm">
509+
<QuestionContainer className="relative flex" variant="sm">
510510
<section className="min-h-0 flex-1 overflow-auto">
511511
<div className="my-4 mx-auto flex flex-col items-stretch justify-start gap-6 sm:px-4">
512512
<ContributeQuestionCard
@@ -589,7 +589,7 @@ export default function QuestionsBrowsePage() {
589589
<h2 className="px-4 text-xl font-semibold">Filter by</h2>
590590
{filterSidebar}
591591
</aside>
592-
</Container>
592+
</QuestionContainer>
593593
<SlideOut
594594
className="lg:hidden"
595595
enterFrom="end"

0 commit comments

Comments
 (0)