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: CreateTokenForm
  • Loading branch information
@aslilac
aslilac committed Oct 9, 2023
commit 3bab8b20a085909df9a95042c0f106b00f08fcb0
33 changes: 15 additions & 18 deletions site/src/pages/CreateTokenPage/CreateTokenForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,25 @@
import { FC, useState, useEffect } from "react";
import { type FC, useState, useEffect } from "react";
import TextField from "@mui/material/TextField";
import MenuItem from "@mui/material/MenuItem";
import type { FormikContextType } from "formik";
import dayjs from "dayjs";
import { useNavigate } from "react-router-dom";
import {
FormFields,
FormSection,
FormFooter,
HorizontalForm,
} from "components/Form/Form";
import makeStyles from "@mui/styles/makeStyles";
import { Stack } from "components/Stack/Stack";
import { onChangeTrimmed, getFormHelpers } from "utils/formUtils";
import TextField from "@mui/material/TextField";
import MenuItem from "@mui/material/MenuItem";
import {
NANO_HOUR,
CreateTokenData,
type CreateTokenData,
determineDefaultLtValue,
filterByMaxTokenLifetime,
customLifetimeDay,
} from "./utils";
import { FormikContextType } from "formik";
import dayjs from "dayjs";
import { useNavigate } from "react-router-dom";
import { Stack } from "components/Stack/Stack";
import { css } from "@emotion/css";

interface CreateTokenFormProps {
form: FormikContextType<CreateTokenData>;
Expand All @@ -30,6 +30,10 @@ interface CreateTokenFormProps {
creationFailed: boolean;
}

const sectionInfoStyles = css`
min-width: 300px;
`;

export const CreateTokenForm: FC<CreateTokenFormProps> = ({
form,
maxTokenLifetime,
Expand All @@ -38,7 +42,6 @@ export const CreateTokenForm: FC<CreateTokenFormProps> = ({
isCreating,
creationFailed,
}) => {
const styles = useStyles();
const navigate = useNavigate();

const [expDays, setExpDays] = useState<number>(1);
Expand All @@ -62,7 +65,7 @@ export const CreateTokenForm: FC<CreateTokenFormProps> = ({
<FormSection
title="Name"
description="What is this token for?"
classes={{ sectionInfo: styles.formSectionInfo }}
classes={{ sectionInfo: sectionInfoStyles }}
>
<FormFields>
<TextField
Expand All @@ -85,7 +88,7 @@ export const CreateTokenForm: FC<CreateTokenFormProps> = ({
.format("MMMM DD, YYYY")}`
: "Please set a token expiration."
}
classes={{ sectionInfo: styles.formSectionInfo }}
classes={{ sectionInfo: sectionInfoStyles }}
>
<FormFields>
<Stack direction="row">
Expand Down Expand Up @@ -149,9 +152,3 @@ export const CreateTokenForm: FC<CreateTokenFormProps> = ({
</HorizontalForm>
);
};

const useStyles = makeStyles(() => ({
formSectionInfo: {
minWidth: "300px",
},
}));