Remove default outlined

coder · BrunoQuaresma · May 10, 2023 · May 5, 2023 · May 5, 2023 · May 5, 2023
commit 50e9f2294e4a0e88ce0bc20c41c8fc582ed1c87f
diff --git a/site/src/components/AlertBanner/AlertBannerCtas.tsx b/site/src/components/AlertBanner/AlertBannerCtas.tsx
@@ -29,20 +29,15 @@ export const AlertBannerCtas: FC<AlertBannerCtasProps> = ({
       {/* retry CTA */}
       {retry && (
         <div>
-          <Button
-            size="small"
-            onClick={retry}
-            startIcon={<RefreshIcon />}
-            variant="outlined"
-          >
+          <Button size="small" onClick={retry} startIcon={<RefreshIcon />}>
             {t("ctas.retry")}
           </Button>
         </div>
       )}
 
       {/* close CTA */}
       {dismissible && (
-        <Button size="small" onClick={() => setOpen(false)} variant="outlined">
+        <Button size="small" onClick={() => setOpen(false)}>
           {t("ctas.dismissCta")}
         </Button>
       )}

diff --git a/site/src/components/CreateUserForm/CreateUserForm.tsx b/site/src/components/CreateUserForm/CreateUserForm.tsx
@@ -70,15 +70,13 @@ export const CreateUserForm: FC<
             autoFocus
             fullWidth
             label={Language.usernameLabel}
-            variant="outlined"
           />
           <TextField
             {...getFieldHelpers("email")}
             onChange={onChangeTrimmed(form)}
             autoComplete="email"
             fullWidth
             label={Language.emailLabel}
-            variant="outlined"
           />
           <TextField
             {...getFieldHelpers("password")}
@@ -87,7 +85,6 @@ export const CreateUserForm: FC<
             id="password"
             label={Language.passwordLabel}
             type="password"
-            variant="outlined"
           />
         </Stack>
         <FormFooter onCancel={onCancel} isLoading={isLoading} />

diff --git a/site/src/components/DeploySettingsLayout/Header.tsx b/site/src/components/DeploySettingsLayout/Header.tsx
@@ -30,7 +30,6 @@ export const Header: FC<{
           component="a"
           href={docsHref}
           target="_blank"
-          variant="outlined"
         >
           Read the docs
         </Button>

diff --git a/site/src/components/Dialogs/Dialog.tsx b/site/src/components/Dialogs/Dialog.tsx
@@ -51,12 +51,7 @@ export const DialogActionButtons: React.FC<DialogActionButtonsProps> = ({
   return (
     <>
       {onCancel && (
-        <LoadingButton
-          disabled={confirmLoading}
-          onClick={onCancel}
-          variant="outlined"
-          fullWidth
-        >
+        <LoadingButton disabled={confirmLoading} onClick={onCancel} fullWidth>
           {cancelText}
         </LoadingButton>
       )}

diff --git a/site/src/components/FormFooter/FormFooter.tsx b/site/src/components/FormFooter/FormFooter.tsx
@@ -42,7 +42,6 @@ export const FormFooter: FC<FormFooterProps> = ({
         type="button"
         className={styles.button}
         onClick={onCancel}
-        variant="outlined"
         tabIndex={0}
       >
         {Language.cancelLabel}

diff --git a/site/src/components/FullPageForm/FullPageForm.stories.tsx b/site/src/components/FullPageForm/FullPageForm.stories.tsx
@@ -18,8 +18,8 @@ const Template: Story<FullPageFormProps> = (args) => (
       }}
     >
       <Stack>
-        <TextField fullWidth variant="outlined" label="Field 1" name="field1" />
-        <TextField fullWidth variant="outlined" label="Field 2" name="field2" />
+        <TextField fullWidth label="Field 1" name="field1" />
+        <TextField fullWidth label="Field 2" name="field2" />
         <FormFooter isLoading={false} onCancel={action("cancel")} />
       </Stack>
     </form>

diff --git a/site/src/components/FullPageForm/FullPageHorizontalForm.tsx b/site/src/components/FullPageForm/FullPageHorizontalForm.tsx
@@ -21,7 +21,7 @@ export const FullPageHorizontalForm: FC<
       <PageHeader
         actions={
           onCancel && (
-            <Button variant="outlined" size="small" onClick={onCancel}>
+            <Button size="small" onClick={onCancel}>
               Cancel
             </Button>
           )

diff --git a/site/src/components/IconField/IconField.tsx b/site/src/components/IconField/IconField.tsx
@@ -31,7 +31,6 @@ const IconField: FC<IconFieldProps> = ({ onPickEmoji, ...textFieldProps }) => {
         {...textFieldProps}
         fullWidth
         label={t("iconLabel")}
-        variant="outlined"
         InputProps={{
           endAdornment: hasIcon ? (
             <InputAdornment position="end" className={styles.adornment}>
@@ -51,7 +50,6 @@ const IconField: FC<IconFieldProps> = ({ onPickEmoji, ...textFieldProps }) => {
       <Button
         fullWidth
         ref={emojiButtonRef}
-        variant="outlined"
         size="small"
         endIcon={<OpenDropdown />}
         onClick={() => {

diff --git a/site/src/components/PaginationWidget/PageButton.tsx b/site/src/components/PaginationWidget/PageButton.tsx
@@ -21,7 +21,6 @@ export const PageButton = ({
   const styles = useStyles()
   return (
     <Button
-      variant="outlined"
       className={
         activePage === page
           ? `${styles.pageButton} ${styles.activePageButton}`

diff --git a/site/src/components/PaginationWidget/PaginationWidget.tsx b/site/src/components/PaginationWidget/PaginationWidget.tsx
@@ -44,7 +44,6 @@ export const PaginationWidget = ({
     <Maybe condition={showWidget}>
       <div style={containerStyle} className={styles.defaultContainerStyles}>
         <Button
-          variant="outlined"
           className={styles.prevLabelStyles}
           aria-label="Previous page"
           disabled={firstPageActive}
@@ -83,7 +82,6 @@ export const PaginationWidget = ({
           </Cond>
         </ChooseOne>
         <Button
-          variant="outlined"
           aria-label="Next page"
           disabled={lastPageActive}
           onClick={() => send({ type: "NEXT_PAGE" })}

diff --git a/site/src/components/Resources/AgentButton.tsx b/site/src/components/Resources/AgentButton.tsx
@@ -25,7 +25,6 @@ export const SecondaryAgentButton = forwardRef<HTMLButtonElement, ButtonProps>(
     return (
       <Button
         ref={ref}
-        variant="outlined"
         className={combineClasses([styles.secondaryButton, className])}
         {...props}
       />

diff --git a/site/src/components/Resources/ResourceCard.tsx b/site/src/components/Resources/ResourceCard.tsx
@@ -149,7 +149,7 @@ const useStyles = makeStyles((theme) => ({
   },
 
   metadata: {
-    fontSize: 16,
+    ...theme.typography.body2,
   },
 
   metadataLabel: {
@@ -164,5 +164,6 @@ const useStyles = makeStyles((theme) => ({
     textOverflow: "ellipsis",
     overflow: "hidden",
     whiteSpace: "nowrap",
+    ...theme.typography.body1,
   },
 }))
diff --git a/site/src/components/Resources/Resources.tsx b/site/src/components/Resources/Resources.tsx
@@ -46,7 +46,6 @@ export const Resources: FC<React.PropsWithChildren<ResourcesProps>> = ({
         <div className={styles.buttonWrapper}>
           <Button
             className={styles.showMoreButton}
-            variant="outlined"
             size="small"
             onClick={() => setShouldDisplayHideResources((v) => !v)}
           >

diff --git a/site/src/components/RuntimeErrorState/RuntimeErrorState.tsx b/site/src/components/RuntimeErrorState/RuntimeErrorState.tsx
@@ -88,7 +88,7 @@ export const RuntimeErrorState: FC<RuntimeErrorStateProps> = ({ error }) => {
               >
                 Reload page
               </Button>
-              <Button component="a" href="/" variant="outlined">
+              <Button component="a" href="/">
                 Go to dashboard
               </Button>
             </Stack>

diff --git a/site/src/components/SearchBarWithFilter/SearchBarWithFilter.tsx b/site/src/components/SearchBarWithFilter/SearchBarWithFilter.tsx
@@ -80,7 +80,6 @@ export const SearchBarWithFilter: React.FC<
       <Stack direction="row" spacing={0}>
         {presetFilters && presetFilters.length > 0 && (
           <Button
-            variant="outlined"
             aria-controls="filter-menu"
             aria-haspopup="true"
             onClick={handleClick}

diff --git a/site/src/components/SettingsAccountForm/SettingsAccountForm.tsx b/site/src/components/SettingsAccountForm/SettingsAccountForm.tsx
@@ -69,7 +69,6 @@ export const AccountForm: FC<React.PropsWithChildren<AccountFormProps>> = ({
             fullWidth
             label={Language.emailLabel}
             value={email}
-            variant="outlined"
           />
           <TextField
             {...getFieldHelpers("username")}
@@ -79,7 +78,6 @@ export const AccountForm: FC<React.PropsWithChildren<AccountFormProps>> = ({
             disabled={!editable}
             fullWidth
             label={Language.usernameLabel}
-            variant="outlined"
           />
 
           <div>

diff --git a/site/src/components/SettingsSecurityForm/SettingsSecurityForm.tsx b/site/src/components/SettingsSecurityForm/SettingsSecurityForm.tsx
@@ -83,7 +83,6 @@ export const SecurityForm: FC<SecurityFormProps> = ({
             autoComplete="old_password"
             fullWidth
             label={Language.oldPasswordLabel}
-            variant="outlined"
             type="password"
           />
           <TextField
@@ -94,7 +93,6 @@ export const SecurityForm: FC<SecurityFormProps> = ({
             autoComplete="password"
             fullWidth
             label={Language.newPasswordLabel}
-            variant="outlined"
             type="password"
           />
           <TextField
@@ -105,7 +103,6 @@ export const SecurityForm: FC<SecurityFormProps> = ({
             autoComplete="confirm_password"
             fullWidth
             label={Language.confirmPasswordLabel}
-            variant="outlined"
             type="password"
           />
 

diff --git a/site/src/components/SignInForm/OAuthSignInForm.tsx b/site/src/components/SignInForm/OAuthSignInForm.tsx
@@ -42,7 +42,6 @@ export const OAuthSignInForm: FC<OAuthSignInFormProps> = ({
             disabled={isSigningIn}
             fullWidth
             type="submit"
-            variant="outlined"
             size="large"
           >
             {Language.githubSignIn}
@@ -73,7 +72,6 @@ export const OAuthSignInForm: FC<OAuthSignInFormProps> = ({
             disabled={isSigningIn}
             fullWidth
             type="submit"
-            variant="outlined"
           >
             {authMethods.oidc.signInText || Language.oidcSignIn}
           </Button>

diff --git a/site/src/components/SignInForm/PasswordSignInForm.tsx b/site/src/components/SignInForm/PasswordSignInForm.tsx
@@ -50,7 +50,6 @@ export const PasswordSignInForm: FC<PasswordSignInFormProps> = ({
           fullWidth
           label={Language.emailLabel}
           type="email"
-          variant="outlined"
         />
         <TextField
           {...getFieldHelpers("password")}
@@ -59,15 +58,13 @@ export const PasswordSignInForm: FC<PasswordSignInFormProps> = ({
           id="password"
           label={Language.passwordLabel}
           type="password"
-          variant="outlined"
         />
         <div>
           <LoadingButton
             size="large"
             loading={isSigningIn}
             fullWidth
             type="submit"
-            variant="outlined"
           >
             {isSigningIn ? "" : Language.passwordSignIn}
           </LoadingButton>

diff --git a/site/src/components/SignInForm/SignInForm.tsx b/site/src/components/SignInForm/SignInForm.tsx
@@ -143,7 +143,6 @@ export const SignInForm: FC<React.PropsWithChildren<SignInFormProps>> = ({
           fullWidth
           size="large"
           onClick={() => setShowPasswordAuth(true)}
-          variant="outlined"
           startIcon={<EmailIcon className={styles.icon} />}
         >
           {loginPageTranslation.t("showPassword")}

diff --git a/site/src/components/Stack/Stack.stories.tsx b/site/src/components/Stack/Stack.stories.tsx
@@ -9,25 +9,9 @@ export default {
 
 const Template: Story<StackProps> = (args: StackProps) => (
   <Stack {...args}>
-    <TextField
-      autoFocus
-      autoComplete="name"
-      fullWidth
-      label="Name"
-      variant="outlined"
-    />
-    <TextField
-      autoComplete="email"
-      fullWidth
-      label="Email"
-      variant="outlined"
-    />
-    <TextField
-      autoComplete="username"
-      fullWidth
-      label="Username"
-      variant="outlined"
-    />
+    <TextField autoFocus autoComplete="name" fullWidth label="Name" />
+    <TextField autoComplete="email" fullWidth label="Email" />
+    <TextField autoComplete="username" fullWidth label="Username" />
   </Stack>
 )
 

diff --git a/site/src/components/TemplateLayout/TemplatePageHeader.tsx b/site/src/components/TemplateLayout/TemplatePageHeader.tsx
@@ -45,7 +45,6 @@ const TemplateMenu: FC<{
   return (
     <div>
       <Button
-        variant="outlined"
         aria-controls="template-options"
         aria-haspopup="true"
         onClick={() => setIsMenuOpen(true)}

diff --git a/site/src/components/TemplateVariableField/TemplateVariableField.tsx b/site/src/components/TemplateVariableField/TemplateVariableField.tsx
@@ -74,7 +74,6 @@ export const TemplateVariableField: FC<TemplateVariableFieldProps> = ({
         setVariableValue(event.target.value)
         onChange(event.target.value)
       }}
-      variant="outlined"
     />
   )
 }

diff --git a/site/src/components/TemplateVersionEditor/MissingTemplateVariablesDialog.tsx b/site/src/components/TemplateVersionEditor/MissingTemplateVariablesDialog.tsx
@@ -93,12 +93,7 @@ export const MissingTemplateVariablesDialog: FC<
         <Button color="primary" fullWidth type="submit" form="updateVariables">
           Submit
         </Button>
-        <Button
-          fullWidth
-          type="button"
-          variant="outlined"
-          onClick={dialogProps.onClose}
-        >
+        <Button fullWidth type="button" onClick={dialogProps.onClose}>
           Cancel
         </Button>
       </DialogActions>

diff --git a/site/src/components/TemplateVersionEditor/TemplateVersionEditor.tsx b/site/src/components/TemplateVersionEditor/TemplateVersionEditor.tsx
@@ -207,7 +207,6 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
             <Button
               title="Build template (Ctrl + Enter)"
               size="small"
-              variant="outlined"
               disabled={disablePreview}
               onClick={() => {
                 triggerPreview()

diff --git a/site/src/components/TerminalLink/TerminalLink.tsx b/site/src/components/TerminalLink/TerminalLink.tsx
@@ -46,7 +46,7 @@ export const TerminalLink: FC<React.PropsWithChildren<TerminalLinkProps>> = ({
         )
       }}
     >
-      <SecondaryAgentButton size="small" variant="outlined">
+      <SecondaryAgentButton size="small">
         {Language.linkText}
       </SecondaryAgentButton>
     </Link>

diff --git a/site/src/components/UserAutocomplete/UserAutocomplete.tsx b/site/src/components/UserAutocomplete/UserAutocomplete.tsx
@@ -89,7 +89,6 @@ export const UserAutocomplete: FC<UserAutocompleteProps> = ({
           <TextField
             {...params}
             fullWidth
-            variant="outlined"
             label={label}
             placeholder="User email or username"
             className={styles.textField}

diff --git a/site/src/components/UserOrGroupAutocomplete/UserOrGroupAutocomplete.tsx b/site/src/components/UserOrGroupAutocomplete/UserOrGroupAutocomplete.tsx
@@ -94,7 +94,6 @@ export const UserOrGroupAutocomplete: React.FC<
           <TextField
             {...params}
             margin="none"
-            variant="outlined"
             placeholder="Search for user or group"
             InputProps={{
               ...params.InputProps,

diff --git a/site/src/components/UsersLayout/UsersLayout.tsx b/site/src/components/UsersLayout/UsersLayout.tsx
@@ -37,7 +37,6 @@ export const UsersLayout: FC = () => {
               {canCreateUser &&
                 authMethods.context.authMethods?.password.enabled && (
                   <Button
-                    variant="outlined"
                     onClick={() => {
                       navigate("/users/create")
                     }}
@@ -52,9 +51,7 @@ export const UsersLayout: FC = () => {
                   component={RouterLink}
                   to="/groups/create"
                 >
-                  <Button variant="outlined" startIcon={<GroupAdd />}>
-                    Create group
-                  </Button>
+                  <Button startIcon={<GroupAdd />}>Create group</Button>
                 </Link>
               )}
             </>

diff --git a/site/src/components/VersionsTable/VersionRow.tsx b/site/src/components/VersionsTable/VersionRow.tsx
@@ -74,7 +74,6 @@ export const VersionRow: React.FC<VersionRowProps> = ({
             onPromoteClick && (
               <Button
                 size="small"
-                variant="outlined"
                 className={styles.promoteButton}
                 onClick={(e) => {
                   e.preventDefault()
-Original file line number
+Diff line change
@@ Expand Up @@
             setVariableValue(event.target.value)
             onChange(event.target.value)
           }}
-          variant="outlined"
         />
       )
     }
@@ Expand Down @@