Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitb0fe626

Browse files
refactor: update the workspace table design (#17404)
Related to#17309**Before:**<img width="1624" alt="Screenshot 2025-04-15 at 11 36 32"src="https://github.com/user-attachments/assets/ecca4c22-8d9c-4ee9-8c1d-193f538a0515"/>**After:**<img width="1624" alt="Screenshot 2025-04-15 at 11 36 22"src="https://github.com/user-attachments/assets/dd95b5cb-12c0-4806-8253-9be97d5a3a8a"/>
1 parent00b5f56 commitb0fe626

File tree

4 files changed

+204
-250
lines changed

4 files changed

+204
-250
lines changed

‎site/src/hooks/useClickableTableRow.ts‎

Lines changed: 6 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,9 @@
1313
* It might not make sense to test this hook until the underlying design
1414
* problems are fixed.
1515
*/
16-
import{typeCSSObject,useTheme}from"@emotion/react";
1716
importtype{TableRowProps}from"@mui/material/TableRow";
1817
importtype{MouseEventHandler}from"react";
18+
import{cn}from"utils/cn";
1919
import{
2020
typeClickableAriaRole,
2121
typeUseClickableResult,
@@ -26,7 +26,7 @@ type UseClickableTableRowResult<
2626
TRoleextendsClickableAriaRole=ClickableAriaRole,
2727
>=UseClickableResult<HTMLTableRowElement,TRole>&
2828
TableRowProps&{
29-
css:CSSObject;
29+
className:string;
3030
hover:true;
3131
onAuxClick:MouseEventHandler<HTMLTableRowElement>;
3232
};
@@ -54,23 +54,13 @@ export const useClickableTableRow = <
5454
onAuxClick:externalOnAuxClick,
5555
}:UseClickableTableRowConfig<TRole>):UseClickableTableRowResult<TRole>=>{
5656
constclickableProps=useClickable(onClick,(role??"button")asTRole);
57-
consttheme=useTheme();
5857

5958
return{
6059
...clickableProps,
61-
css:{
62-
cursor:"pointer",
63-
64-
"&:focus":{
65-
outline:`1px solid${theme.palette.primary.main}`,
66-
outlineOffset:-1,
67-
},
68-
69-
"&:last-of-type":{
70-
borderBottomLeftRadius:8,
71-
borderBottomRightRadius:8,
72-
},
73-
},
60+
className:cn([
61+
"cursor-pointer hover:outline focus:outline outline-1 -outline-offset-1 outline-border-hover",
62+
"first:rounded-t-md last:rounded-b-md",
63+
]),
7464
hover:true,
7565
onDoubleClick,
7666
onAuxClick:(event)=>{

‎site/src/pages/TemplatesPage/TemplatesPageView.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@ const TemplateRow: FC<TemplateRowProps> = ({
102102
);
103103
constnavigate=useNavigate();
104104

105-
const{css:clickableCss, ...clickableRow}=useClickableTableRow({
105+
constclickableRow=useClickableTableRow({
106106
onClick:()=>navigate(templatePageLink),
107107
});
108108

@@ -111,7 +111,7 @@ const TemplateRow: FC<TemplateRowProps> = ({
111111
key={template.id}
112112
data-testid={`template-${template.id}`}
113113
{...clickableRow}
114-
css={[clickableCss,styles.tableRow]}
114+
css={styles.tableRow}
115115
>
116116
<TableCell>
117117
<AvatarData

‎site/src/pages/WorkspacesPage/LastUsed.tsx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import{useTheme}from"@emotion/react";
21
import{Stack}from"components/Stack/Stack";
32
import{StatusIndicatorDot}from"components/StatusIndicator/StatusIndicator";
43
importdayjsfrom"dayjs";
@@ -12,8 +11,6 @@ interface LastUsedProps {
1211
}
1312

1413
exportconstLastUsed:FC<LastUsedProps>=({ lastUsedAt})=>{
15-
consttheme=useTheme();
16-
1714
const[circle,message]=useTime(()=>{
1815
constt=dayjs(lastUsedAt);
1916
constnow=dayjs();
@@ -40,7 +37,7 @@ export const LastUsed: FC<LastUsedProps> = ({ lastUsedAt }) => {
4037

4138
return(
4239
<Stack
43-
style={{color:theme.palette.text.secondary}}
40+
className="text-content-secondary"
4441
direction="row"
4542
spacing={1}
4643
alignItems="center"

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp