Apply Kira PR comments

coder · BrunoQuaresma · May 10, 2023 · May 5, 2023 · May 5, 2023 · May 5, 2023
commit e18c0c1b69fa1a9de3375682f72624cf57572c7e
diff --git a/site/src/components/AvatarData/AvatarData.tsx b/site/src/components/AvatarData/AvatarData.tsx
@@ -41,9 +41,9 @@ export const AvatarData: FC<PropsWithChildren<AvatarDataProps>> = ({
 
 const useStyles = makeStyles((theme) => ({
   root: {
-    ...theme.typography.body2,
     minHeight: theme.spacing(5), // Make it predictable for the skeleton
     width: "100%",
+    lineHeight: "150%",
   },
 
   info: {
@@ -58,7 +58,7 @@ const useStyles = makeStyles((theme) => ({
   subtitle: {
     fontSize: 12,
     color: theme.palette.text.secondary,
-    lineHeight: "140%",
+    lineHeight: "150%",
     maxWidth: 540,
   },
 }))
diff --git a/site/src/components/CodeExample/CodeExample.tsx b/site/src/components/CodeExample/CodeExample.tsx
@@ -53,6 +53,7 @@ const useStyles = makeStyles<Theme, styleProps>((theme) => ({
     fontSize: 14,
     borderRadius: theme.shape.borderRadius,
     padding: theme.spacing(1),
+    lineHeight: "150%",
   }),
   code: {
     padding: theme.spacing(0, 1),

diff --git a/site/src/components/EditRolesButton/EditRolesButton.tsx b/site/src/components/EditRolesButton/EditRolesButton.tsx
@@ -24,7 +24,6 @@ const Option: React.FC<{
         <Checkbox
           id={name}
           size="small"
-          color="primary"
           className={styles.checkbox}
           value={value}
           checked={isChecked}

diff --git a/site/src/components/LicenseCard/LicenseCard.tsx b/site/src/components/LicenseCard/LicenseCard.tsx
@@ -30,12 +30,7 @@ export const LicenseCard = ({
   >(undefined)
 
   return (
-    <Paper
-      variant="outlined"
-      key={license.id}
-      elevation={2}
-      className={styles.licenseCard}
-    >
+    <Paper key={license.id} elevation={2} className={styles.licenseCard}>
       <ConfirmDialog
         type="info"
         hideCancel={false}
@@ -119,6 +114,7 @@ const useStyles = makeStyles((theme) => ({
     fontWeight: 600,
   },
   licenseCard: {
+    ...theme.typography.body2,
     padding: theme.spacing(2),
   },
   cardContent: {
@@ -130,7 +126,7 @@ const useStyles = makeStyles((theme) => ({
   },
   accountType: {
     fontWeight: 600,
-    fontSize: theme.typography.h4.fontSize,
+    fontSize: 24,
     justifyContent: "center",
     alignItems: "center",
     textTransform: "capitalize",

diff --git a/site/src/components/PageHeader/FullWidthPageHeader.tsx b/site/src/components/PageHeader/FullWidthPageHeader.tsx
@@ -58,6 +58,7 @@ const useStyles = makeStyles((theme) => ({
     fontSize: 18,
     fontWeight: 500,
     margin: 0,
+    lineHeight: "24px",
   },
   subtitle: {
     fontSize: 14,

diff --git a/site/src/components/ParameterInput/ParameterInput.tsx b/site/src/components/ParameterInput/ParameterInput.tsx
@@ -101,13 +101,13 @@ const ParameterField: React.FC<ParameterInputProps> = ({
         <FormControlLabel
           disabled={disabled}
           value="true"
-          control={<Radio color="primary" disableRipple />}
+          control={<Radio />}
           label="True"
         />
         <FormControlLabel
           disabled={disabled}
           value="false"
-          control={<Radio color="primary" disableRipple />}
+          control={<Radio />}
           label="False"
         />
       </RadioGroup>

diff --git a/site/src/components/PortForwardButton/PortForwardButton.tsx b/site/src/components/PortForwardButton/PortForwardButton.tsx
@@ -83,6 +83,7 @@ const TooltipView: React.FC<PortForwardButtonProps> = (props) => {
         <TextField
           label="Port"
           type="number"
+          size="small"
           value={port}
           className={styles.portField}
           onChange={(e) => {
@@ -204,6 +205,6 @@ const useStyles = makeStyles((theme) => ({
   },
 
   form: {
-    margin: theme.spacing(1.5, 0, 0),
+    margin: theme.spacing(2, 0),
   },
 }))
diff --git a/site/src/components/Resources/AgentRow.tsx b/site/src/components/Resources/AgentRow.tsx
@@ -390,7 +390,7 @@ const useStyles = makeStyles((theme) => ({
     fontSize: 16,
     borderLeft: `2px solid ${theme.palette.text.secondary}`,
 
-    "&:not(:first-child)": {
+    "&:not(:first-of-type)": {
       borderTop: `2px solid ${theme.palette.divider}`,
     },
   },
@@ -538,7 +538,7 @@ const useStyles = makeStyles((theme) => ({
     flexDirection: "column",
     fontSize: 12,
 
-    "& > *:first-child": {
+    "& > *:first-of-type": {
       fontWeight: 500,
       color: theme.palette.text.secondary,
     },

diff --git a/site/src/components/Resources/ResourceCard.tsx b/site/src/components/Resources/ResourceCard.tsx
@@ -115,7 +115,7 @@ const useStyles = makeStyles((theme) => ({
     borderRadius: theme.shape.borderRadius,
     border: `1px solid ${theme.palette.divider}`,
 
-    "&:not(:first-child)": {
+    "&:not(:first-of-type)": {
       borderTop: 0,
       borderTopLeftRadius: 0,
       borderTopRightRadius: 0,
@@ -150,6 +150,7 @@ const useStyles = makeStyles((theme) => ({
 
   metadata: {
     ...theme.typography.body2,
+    lineHeight: "120%",
   },
 
   metadataLabel: {

diff --git a/site/src/components/RichParameterInput/RichParameterInput.tsx b/site/src/components/RichParameterInput/RichParameterInput.tsx
@@ -110,13 +110,13 @@ const RichParameterField: React.FC<RichParameterInputProps> = ({
         <FormControlLabel
           disabled={disabled}
           value="true"
-          control={<Radio color="primary" size="small" disableRipple />}
+          control={<Radio size="small" />}
           label="True"
         />
         <FormControlLabel
           disabled={disabled}
           value="false"
-          control={<Radio color="primary" size="small" disableRipple />}
+          control={<Radio size="small" />}
           label="False"
         />
       </RadioGroup>
@@ -136,7 +136,7 @@ const RichParameterField: React.FC<RichParameterInputProps> = ({
             disabled={disabled}
             key={option.name}
             value={option.value}
-            control={<Radio color="primary" size="small" disableRipple />}
+            control={<Radio size="small" />}
             label={
               <span className={styles.radioOption}>
                 {option.icon && (

diff --git a/site/src/components/TemplateVariableField/TemplateVariableField.tsx b/site/src/components/TemplateVariableField/TemplateVariableField.tsx
@@ -37,13 +37,13 @@ export const TemplateVariableField: FC<TemplateVariableFieldProps> = ({
         <FormControlLabel
           disabled={disabled}
           value="true"
-          control={<Radio color="primary" size="small" disableRipple />}
+          control={<Radio size="small" />}
           label="True"
         />
         <FormControlLabel
           disabled={disabled}
           value="false"
-          control={<Radio color="primary" size="small" disableRipple />}
+          control={<Radio size="small" />}
           label="False"
         />
       </RadioGroup>

diff --git a/site/src/components/TemplateVersionEditor/PublishTemplateVersionDialog.tsx b/site/src/components/TemplateVersionEditor/PublishTemplateVersionDialog.tsx
@@ -83,7 +83,6 @@ export const PublishTemplateVersionDialog: FC<
                     )
                   }}
                   name="isActiveVersion"
-                  color="primary"
                 />
               }
             />

diff --git a/site/src/components/Timeline/TimelineDateRow.tsx b/site/src/components/Timeline/TimelineDateRow.tsx
@@ -29,7 +29,7 @@ const useStyles = makeStyles((theme) => ({
   dateRow: {
     background: theme.palette.background.paper,
 
-    "&:not(:first-child) td": {
+    "&:not(:first-of-type) td": {
       borderTop: `1px solid ${theme.palette.divider}`,
     },
   },

diff --git a/site/src/components/Tooltips/HelpTooltip/HelpTooltip.tsx b/site/src/components/Tooltips/HelpTooltip/HelpTooltip.tsx
@@ -256,16 +256,20 @@ const useStyles = makeStyles((theme) => ({
     marginTop: 0,
     marginBottom: theme.spacing(1),
     color: theme.palette.text.primary,
+    fontSize: 14,
+    fontWeight: 600,
   },
 
   text: {
     marginTop: theme.spacing(0.5),
     marginBottom: theme.spacing(0.5),
+    ...theme.typography.body2,
   },
 
   link: {
     display: "flex",
     alignItems: "center",
+    ...theme.typography.body2,
   },
 
   linkIcon: {

diff --git a/site/src/components/UserAutocomplete/UserAutocomplete.tsx b/site/src/components/UserAutocomplete/UserAutocomplete.tsx
@@ -115,6 +115,9 @@ export const UserAutocomplete: FC<UserAutocompleteProps> = ({
                 root: styles.inputRoot,
               },
             }}
+            InputLabelProps={{
+              shrink: true,
+            }}
           />
         </>
       )}

diff --git a/site/src/components/WorkspaceBuildLogs/WorkspaceBuildLogs.tsx b/site/src/components/WorkspaceBuildLogs/WorkspaceBuildLogs.tsx
@@ -112,7 +112,7 @@ const useStyles = makeStyles<
     alignItems: "center",
     fontFamily: "Inter",
 
-    "&:first-child": {
+    "&:first-of-type": {
       borderTopLeftRadius: theme.shape.borderRadius,
       borderTopRightRadius: theme.shape.borderRadius,
       borderTop: 0,

diff --git a/site/src/components/WorkspaceScheduleForm/WorkspaceScheduleForm.tsx b/site/src/components/WorkspaceScheduleForm/WorkspaceScheduleForm.tsx
@@ -292,7 +292,6 @@ export const WorkspaceScheduleForm: FC<
                 name="autostartEnabled"
                 checked={form.values.autostartEnabled}
                 onChange={handleToggleAutostart}
-                color="primary"
               />
             }
             label={Language.startSwitch}
@@ -334,9 +333,7 @@ export const WorkspaceScheduleForm: FC<
                       disabled={isLoading || !form.values.autostartEnabled}
                       onChange={form.handleChange}
                       name={checkbox.name}
-                      color="primary"
                       size="small"
-                      disableRipple
                     />
                   }
                   key={checkbox.name}
@@ -363,7 +360,6 @@ export const WorkspaceScheduleForm: FC<
                 name="autostopEnabled"
                 checked={form.values.autostopEnabled}
                 onChange={handleToggleAutostop}
-                color="primary"
               />
             }
             label={Language.stopSwitch}

diff --git a/site/src/components/WorkspaceStats/WorkspaceStats.tsx b/site/src/components/WorkspaceStats/WorkspaceStats.tsx
@@ -325,7 +325,7 @@ const useStyles = makeStyles((theme) => ({
     gap: 0,
     padding: 0,
 
-    "& > span:first-child": {
+    "& > span:first-of-type": {
       fontSize: 12,
       fontWeight: 500,
     },
@@ -346,6 +346,8 @@ const useStyles = makeStyles((theme) => ({
   scheduleButton: {
     border: `1px solid ${theme.palette.divider}`,
     borderRadius: 4,
+    width: 20,
+    height: 20,
 
     "& svg.MuiSvgIcon-root": {
       width: theme.spacing(1.5),

diff --git a/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx b/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx
@@ -342,7 +342,6 @@ export const CreateTemplateForm: FC<CreateTemplateFormProps> = ({
               <Checkbox
                 id="allow_user_autostart"
                 size="small"
-                color="primary"
                 disabled={isSubmitting || !allowAdvancedScheduling}
                 onChange={async () => {
                   await form.setFieldValue(
@@ -363,7 +362,6 @@ export const CreateTemplateForm: FC<CreateTemplateFormProps> = ({
               <Checkbox
                 id="allow-user-autostop"
                 size="small"
-                color="primary"
                 disabled={isSubmitting || !allowAdvancedScheduling}
                 onChange={async () => {
                   await form.setFieldValue(
@@ -398,7 +396,6 @@ export const CreateTemplateForm: FC<CreateTemplateFormProps> = ({
           <label htmlFor="allow_user_cancel_workspace_jobs">
             <Stack direction="row" spacing={1}>
               <Checkbox
-                color="primary"
                 id="allow_user_cancel_workspace_jobs"
                 name="allow_user_cancel_workspace_jobs"
                 disabled={isSubmitting}

diff --git a/site/src/pages/CreateTemplatePage/VariableInput.tsx b/site/src/pages/CreateTemplatePage/VariableInput.tsx
@@ -75,13 +75,13 @@ const VariableField: React.FC<VariableInputProps> = ({
         <FormControlLabel
           disabled={disabled}
           value="true"
-          control={<Radio color="primary" size="small" disableRipple />}
+          control={<Radio  size="small" />}
           label="True"
         />
         <FormControlLabel
           disabled={disabled}
           value="false"
-          control={<Radio color="primary" size="small" disableRipple />}
+          control={<Radio  size="small" />}
           label="False"
         />
       </RadioGroup>

diff --git a/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx b/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx
@@ -155,7 +155,6 @@ export const AppearanceSettingsPageView = ({
             <FormControlLabel
               control={
                 <Switch
-                  color="primary"
                   checked={serviceBannerForm.values.enabled}
                   onChange={async () => {
                     const newState = !serviceBannerForm.values.enabled

diff --git a/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsForm.tsx b/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsForm.tsx
@@ -139,7 +139,6 @@ export const TemplateSettingsForm: FC<TemplateSettingsForm> = ({
         <label htmlFor="allow_user_cancel_workspace_jobs">
           <Stack direction="row" spacing={1}>
             <Checkbox
-              color="primary"
               id="allow_user_cancel_workspace_jobs"
               name="allow_user_cancel_workspace_jobs"
               disabled={isSubmitting}

diff --git a/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateScheduleForm.tsx b/site/src/pages/TemplateSettingsPage/TemplateSchedulePage/TemplateScheduleForm.tsx
@@ -274,7 +274,6 @@ export const TemplateScheduleForm: FC<TemplateScheduleForm> = ({
             <Checkbox
               id="allow_user_autostart"
               size="small"
-              color="primary"
               disabled={isSubmitting || !allowAdvancedScheduling}
               onChange={async () => {
                 await form.setFieldValue(
@@ -295,7 +294,6 @@ export const TemplateScheduleForm: FC<TemplateScheduleForm> = ({
             <Checkbox
               id="allow-user-autostop"
               size="small"
-              color="primary"
               disabled={isSubmitting || !allowAdvancedScheduling}
               onChange={async () => {
                 await form.setFieldValue(
@@ -332,7 +330,6 @@ export const TemplateScheduleForm: FC<TemplateScheduleForm> = ({
                     name="failureCleanupEnabled"
                     checked={form.values.failure_cleanup_enabled}
                     onChange={handleToggleFailureCleanup}
-                    color="primary"
                   />
                 }
                 label="Enable Failure Cleanup"
@@ -365,7 +362,6 @@ export const TemplateScheduleForm: FC<TemplateScheduleForm> = ({
                     name="inactivityCleanupEnabled"
                     checked={form.values.inactivity_cleanup_enabled}
                     onChange={handleToggleInactivityCleanup}
-                    color="primary"
                   />
                 }
                 label="Enable Inactivity Cleanup"
-Original file line number
+Diff line change
@@ Expand Up / @@ -83,7 +83,6 @@ export const PublishTemplateVersionDialog: FC< @@
                         )
                       }}
                       name="isActiveVersion"
-                      color="primary"
                     />
                   }
                 />
@@ Expand Down @@