@@ -25,20 +25,8 @@ export const WorkspacesEmpty: FC<WorkspacesEmptyProps> = ({
2525const defaultMessage =
2626"A workspace is your personal, customizable development environment." ;
2727const defaultImage = (
28- < div
29- css = { {
30- maxWidth :"50%" ,
31- height :272 ,
32- overflow :"hidden" ,
33- marginTop :48 ,
34- opacity :0.85 ,
35-
36- "& img" :{
37- maxWidth :"100%" ,
38- } ,
39- } }
40- >
41- < img src = "/featured/workspaces.webp" alt = "" />
28+ < div className = "max-w-[50%] h-[272px] overflow-hidden mt-12 opacity-85" >
29+ < img src = "/featured/workspaces.webp" alt = "" className = "max-w-full" />
4230</ div >
4331) ;
4432
@@ -56,9 +44,7 @@ export const WorkspacesEmpty: FC<WorkspacesEmptyProps> = ({
5644< Link to = "/templates" > Go to templates</ Link >
5745</ Button >
5846}
59- css = { {
60- paddingBottom :0 ,
61- } }
47+ className = "pb-0"
6248image = { defaultImage }
6349/>
6450) ;
@@ -69,9 +55,7 @@ export const WorkspacesEmpty: FC<WorkspacesEmptyProps> = ({
6955< TableEmpty
7056message = { defaultTitle }
7157description = { `${ defaultMessage } }
72- css = { {
73- paddingBottom :0 ,
74- } }
58+ className = "pb-0"
7559image = { defaultImage }
7660/>
7761) ;
@@ -83,70 +67,30 @@ export const WorkspacesEmpty: FC<WorkspacesEmptyProps> = ({
8367description = { `${ defaultMessage } }
8468cta = {
8569< div >
86- < div
87- css = { {
88- display :"flex" ,
89- flexWrap :"wrap" ,
90- gap :16 ,
91- marginBottom :24 ,
92- justifyContent :"center" ,
93- maxWidth :"800px" ,
94- } }
95- >
70+ < div className = "flex flex-wrap gap-4 mb-6 justify-center max-w-[800px]" >
9671{ featuredTemplates ?. map ( ( t ) => (
9772< Link
9873key = { t . id }
9974to = { `${ getLink (
10075linkToTemplate ( t . organization_name , t . name ) ,
10176) } }
102- css = { ( theme ) => ( {
103- width :"320px" ,
104- padding :16 ,
105- borderRadius :6 ,
106- border :`1px solid${ theme . palette . divider } ,
107- textAlign :"left" ,
108- display :"flex" ,
109- gap :16 ,
110- textDecoration :"none" ,
111- color :"inherit" ,
112-
113- "&:hover" :{
114- backgroundColor :theme . palette . background . paper ,
115- } ,
116- } ) }
77+ className = "w-[320px] p-4 rounded-md border border-solid border-surface-quaternary text-left flex gap-4 no-underline text-inherit hover:bg-surface-grey"
11778>
118- < div css = { { flexShrink : 0 , paddingTop : 4 } } >
79+ < div className = "flex-shrink-0 pt-1" >
11980< Avatar variant = "icon" src = { t . icon } fallback = { t . name } />
12081</ div >
12182
122- < div css = { { width :"100%" , minWidth :"0" } } >
123- < h4
124- css = { {
125- fontSize :14 ,
126- fontWeight :600 ,
127- margin :0 ,
128- overflow :"hidden" ,
129- textOverflow :"ellipsis" ,
130- whiteSpace :"nowrap" ,
131- } }
132- >
83+ < div className = "w-full min-w-0" >
84+ < h4 className = "text-sm font-semibold m-0 overflow-hidden truncate whitespace-nowrap" >
13385{ t . display_name || t . name }
13486</ h4 >
13587
13688< p
137- css = { ( theme ) => ( {
138- fontSize :13 ,
139- color :theme . palette . text . secondary ,
140- lineHeight :"1.4" ,
141- margin :0 ,
142- paddingTop :"4px" ,
143-
144- // We've had users plug URLs directly into the
145- // descriptions, when those URLS have no hyphens or other
146- // easy semantic breakpoints. Need to set this to ensure
147- // those URLs don't break outside their containing boxes
148- wordBreak :"break-word" ,
149- } ) }
89+ // We've had users plug URLs directly into the
90+ // descriptions, when those URLS have no hyphens or other
91+ // easy semantic breakpoints. Need to set this to ensure
92+ // those URLs don't break outside their containing boxes
93+ className = "text-sm text-gray-400 leading-[1.4] m-0 pt-1 break-words"
15094>
15195{ t . description }
15296</ p >