Skip to content

chore: use emotion for styling (pt. 9) #10474

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 28 commits into from
Nov 2, 2023
Merged

chore: use emotion for styling (pt. 9) #10474

Changes from 1 commit
Commits
Show all changes
28 commits
Select commit Hold shift + click to select a range
4bd9a7e
emotion: `IconField`
aslilac Oct 31, 2023
6f820c1
emotion: `UserAutocomplete`
aslilac Oct 31, 2023
ffa39ef
emotion: `WorkspaceBuildLogs`
aslilac Oct 31, 2023
f6e0a64
emotion: `CreateTemplateForm`
aslilac Oct 31, 2023
1f61a4b
emotion: `SingleSignOnSection`
aslilac Oct 31, 2023
55ecf93
emotion: `WorkspaceActions`
aslilac Nov 1, 2023
f132aee
emotion: `LicensesSettingsPageView`
aslilac Nov 1, 2023
13db92d
emotion: `WorkspaceProxyPage`
aslilac Nov 1, 2023
0587497
emotion: `GroupsPageView`
aslilac Nov 1, 2023
0706d34
emotion: `useClickableTableRow`
aslilac Nov 1, 2023
21da106
🧹
aslilac Nov 1, 2023
3212c58
emotion: `CreateWorkspacePageView`
aslilac Nov 1, 2023
05df2f5
emotion: `WorkspaceStats`
aslilac Nov 1, 2023
90a6252
🧹
aslilac Nov 1, 2023
f61ad92
emotion: `StarterTemplatePageView`
aslilac Nov 1, 2023
44f9d42
emotion: `WorkspaceBuildProgress`
aslilac Nov 1, 2023
ec8e7b6
emotion: `WorkspaceBuildPageView`
aslilac Nov 1, 2023
0bf9449
emotion: `EditRolesButton`
aslilac Nov 1, 2023
ffc72af
emotion: `TerminalPage`
aslilac Nov 1, 2023
d05ea6c
emotion: `TemplatesPageView`
aslilac Nov 1, 2023
815ca99
emotion: `Sidebar`
aslilac Nov 1, 2023
a128475
🧹
aslilac Nov 1, 2023
67d0af4
emotion: `StarterTemplatesPageView`
aslilac Nov 1, 2023
49c5812
🧹
aslilac Nov 1, 2023
4323a07
emotion: `WorkspaceStatusBadge`
aslilac Nov 1, 2023
cca3565
🧹
aslilac Nov 1, 2023
7840dcb
Merge branch 'main' into emotional-damage-9
aslilac Nov 2, 2023
9af85c8
fix storybook!
aslilac Nov 2, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
emotion: WorkspaceBuildLogs
  • Loading branch information
@aslilac
aslilac committed Nov 1, 2023
commit ffa39ef5b366760eb3cf0185e91e2fa2b21174e5
29 changes: 11 additions & 18 deletions site/src/components/WorkspaceBuildLogs/WorkspaceBuildLogs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
import { makeStyles } from "@mui/styles";
import dayjs from "dayjs";
import { ComponentProps, FC, Fragment } from "react";
import { ProvisionerJobLog } from "api/typesGenerated";
import { type ComponentProps, type FC, Fragment } from "react";
import type { ProvisionerJobLog } from "api/typesGenerated";
import { MONOSPACE_FONT_FAMILY } from "theme/constants";
import { Logs } from "./Logs";
import Box from "@mui/material/Box";
import { combineClasses } from "utils/combineClasses";
import { type Interpolation, type Theme } from "@emotion/react";

const Language = {
seconds: "seconds",
Expand Down Expand Up @@ -53,7 +52,6 @@ export const WorkspaceBuildLogs: FC<WorkspaceBuildLogsProps> = ({
}) => {
const groupedLogsByStage = groupLogsByStage(logs);
const stages = Object.keys(groupedLogsByStage);
const styles = useStyles();

return (
<Box
Expand All @@ -79,15 +77,10 @@ export const WorkspaceBuildLogs: FC<WorkspaceBuildLogsProps> = ({

return (
<Fragment key={stage}>
<div
className={combineClasses([
styles.header,
sticky ? styles.sticky : "",
])}
>
<div css={[styles.header, sticky && styles.sticky]}>
<div>{stage}</div>
{shouldDisplayDuration && (
<div className={styles.duration}>
<div css={styles.duration}>
{duration} {Language.seconds}
</div>
)}
Expand All @@ -100,8 +93,8 @@ export const WorkspaceBuildLogs: FC<WorkspaceBuildLogsProps> = ({
);
};

const useStyles = makeStyles((theme) => ({
header: {
const styles = {
header: (theme) => ({
fontSize: 13,
fontWeight: 600,
padding: theme.spacing(0.5, 3),
Expand All @@ -119,16 +112,16 @@ const useStyles = makeStyles((theme) => ({
"&:first-child": {
borderRadius: "8px 8px 0 0",
},
},
}),

sticky: {
position: "sticky",
top: 0,
},

duration: {
duration: (theme) => ({
marginLeft: "auto",
color: theme.palette.text.secondary,
fontSize: 12,
},
}));
}),
} satisfies Record<string, Interpolation<Theme>>;