Skip to content

chore: use emotion for styling (pt. 4) #10149

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 25 commits into from
Oct 10, 2023
Merged

chore: use emotion for styling (pt. 4) #10149

Changes from 1 commit
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
95e9688
emotion: `TemplateScheduleForm`
aslilac Oct 9, 2023
b0cdf3f
emotion: `Form` & `FormFooter`
aslilac Oct 9, 2023
a7343f0
emotion: `LastUsed`
aslilac Oct 9, 2023
4407eda
emotion: `OptionsTable`
aslilac Oct 9, 2023
c824abc
emotion: `Dialog`
aslilac Oct 9, 2023
ae5c50d
emotion: `Expander`
aslilac Oct 9, 2023
8f28843
emotion: `Margins`
aslilac Oct 9, 2023
f2d257c
emotion: `WorkspaceOutdatedTooltip`
aslilac Oct 9, 2023
65cf2a5
emotion: `ExternalAuth`
aslilac Oct 9, 2023
3bab8b2
emotion: `CreateTokenForm`
aslilac Oct 9, 2023
4e48356
emotion: `AgentVersion`
aslilac Oct 9, 2023
d597c7b
emotion: `Typography`
aslilac Oct 9, 2023
e48ec94
emotion: `UserOrGroupAutocomplete`
aslilac Oct 9, 2023
4d96e15
emotion: `SetupPageView`
aslilac Oct 9, 2023
2d7fd61
emotion: `TemplateSchedulePageView`
aslilac Oct 9, 2023
2373c01
emotion: `TemplateSettingsPageView`
aslilac Oct 9, 2023
be3657f
emotion: `TemplateSchedulePageView`
aslilac Oct 9, 2023
da73bc8
🧹
aslilac Oct 9, 2023
9ce12e8
emotion: `ChangeVersionDialog`
aslilac Oct 9, 2023
d621d05
emotion: `TemplatePermissionsPageView`
aslilac Oct 9, 2023
6b3d6e0
🧹
aslilac Oct 9, 2023
81ed84a
emotion: `FullScreenLoader`
aslilac Oct 9, 2023
a672222
🧹
aslilac Oct 10, 2023
11b9307
Merge branch 'main' into emotional-damage-4
aslilac Oct 10, 2023
050a336
Merge branch 'main' into emotional-damage-4
aslilac Oct 10, 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: Expander
  • Loading branch information
@aslilac
aslilac committed Oct 9, 2023
commit ae5c50de58e71abb970d37954ea7bc81efe2c83c
31 changes: 14 additions & 17 deletions site/src/components/Expander/Expander.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
import { type Interpolation, type Theme } from "@emotion/react";
import Collapse from "@mui/material/Collapse";
import Link from "@mui/material/Link";
import makeStyles from "@mui/styles/makeStyles";
import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
import { type FC, type PropsWithChildren } from "react";
import { combineClasses } from "utils/combineClasses";

export interface ExpanderProps {
expanded: boolean;
Expand All @@ -15,29 +14,27 @@ export const Expander: FC<PropsWithChildren<ExpanderProps>> = ({
setExpanded,
children,
}) => {
const styles = useStyles();

const toggleExpanded = () => setExpanded(!expanded);

return (
<>
{!expanded && (
<Link onClick={toggleExpanded} className={styles.expandLink}>
<span className={styles.text}>
<Link onClick={toggleExpanded} css={styles.expandLink}>
<span css={styles.text}>
Click here to learn more
<DropdownArrow margin={false} />
</span>
</Link>
)}
<Collapse in={expanded}>
<div className={styles.text}>{children}</div>
<div css={styles.text}>{children}</div>
</Collapse>
{expanded && (
<Link
onClick={toggleExpanded}
className={combineClasses([styles.expandLink, styles.collapseLink])}
css={[styles.expandLink, styles.collapseLink]}
>
<span className={styles.text}>
<span css={styles.text}>
Click here to hide
<DropdownArrow margin={false} close />
</span>
Expand All @@ -47,18 +44,18 @@ export const Expander: FC<PropsWithChildren<ExpanderProps>> = ({
);
};

const useStyles = makeStyles((theme) => ({
expandLink: {
const styles = {
expandLink: (theme) => ({
cursor: "pointer",
color: theme.palette.text.secondary,
},
collapseLink: {
}),
collapseLink: (theme) => ({
marginTop: theme.spacing(2),
},
text: {
}),
text: (theme) => ({
display: "flex",
alignItems: "center",
color: theme.palette.text.secondary,
fontSize: theme.typography.caption.fontSize,
},
}));
}),
} satisfies Record<string, Interpolation<Theme>>;