Fix some buttons (#4151)

* Add btn-sm to Sign In button to remove the min-width constraint

* Add cancel button to forms

app/javascript/components/admin/manage_users/forms/InviteUserForm.jsx

@@ -22,8 +22,11 @@ export default function InviteUserForm({ handleClose }) {
     <Form methods={methods} onSubmit={createInvitation.mutate}>
       <FormControl field={fields.emails} type="text" />
 
-      <Stack className="mt-1" gap={1}>
-        <Button variant="brand" className="w-100 mb- mt-1" type="submit" disabled={isSubmitting}>
+      <Stack className="mt-1" direction="horizontal" gap={1}>
+        <Button variant="neutral" className="ms-auto" onClick={handleClose}>
+          {t('close')}
+        </Button>
+        <Button variant="brand" type="submit" disabled={isSubmitting}>
           { isSubmitting && <Spinner className="me-2" /> }
           { t('admin.manage_users.send_invitation') }
         </Button>

app/javascript/components/admin/manage_users/forms/UserSignupForm.jsx

@@ -26,8 +26,11 @@ export default function UserSignupForm({ handleClose }) {
       <FormControl field={fields.password} type="password" />
       <FormControl field={fields.password_confirmation} type="password" />
 
-      <Stack className="mt-1" gap={1}>
-        <Button variant="brand" className="w-100 mb- mt-1" type="submit" disabled={isSubmitting}>
+      <Stack className="mt-1" direction="horizontal" gap={1}>
+        <Button variant="neutral" className="ms-auto" onClick={handleClose}>
+          {t('close')}
+        </Button>
+        <Button variant="brand" type="submit" disabled={isSubmitting}>
           { isSubmitting && <Spinner className="me-2" /> }
           { t('admin.manage_users.create_account') }
         </Button>

app/javascript/components/admin/site_settings/appearance/BrandColorPopover.jsx

@@ -57,8 +57,8 @@ export default function BrandColorPopover({
               <div className="color-preview" style={{ background: initialColor }} />
               <div className="color-preview" style={{ background: color }} />
               <Stack direction="horizontal" className="mt-2 pb-2 float-end">
-                <Button variant="neutral" className="me-2" onClick={handleCancel}> { t('cancel') } </Button>
-                <Button variant="brand" onClick={handleSave}> { t('save') } </Button>
+                <Button variant="neutral" className="btn-sm me-2" onClick={handleCancel}> { t('cancel') } </Button>
+                <Button variant="brand" className="btn-sm" onClick={handleSave}> { t('save') } </Button>
               </Stack>
             </div>
           </div>

app/javascript/components/rooms/room/join/RoomJoin.jsx

@@ -191,11 +191,11 @@ export default function RoomJoin() {
         </Card.Footer>
       </Card>
       {!currentUser?.signed_in && (
-        env.OPENID_CONNECT ? (
+        env?.OPENID_CONNECT ? (
           <Stack direction="horizontal" className="d-flex justify-content-center text-muted mt-3"> {t('authentication.already_have_account')}
             <RegularForm action="/auth/openid_connect" method="POST" data-turbo="false">
               <input type="hidden" name="authenticity_token" value={document.querySelector('meta[name="csrf-token"]').content} />
-              <Button variant="link" className="cursor-pointer ms-2 ps-0" type="submit">{t('authentication.sign_in')}</Button>
+              <Button variant="link" className="btn-sm fs-6 cursor-pointer ms-2 ps-0" type="submit">{t('authentication.sign_in')}</Button>
             </RegularForm>
           </Stack>
         ) : (