tweaks

app/scenes/ApiKeyNew/components/ExpiryDatePicker.tsx

@@ -1,5 +1,4 @@
 import { format as formatDate } from "date-fns";
-import { CalendarIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
@@ -36,7 +35,7 @@ const ExpiryDatePicker = ({ selectedDate, onSelect }: Props) => {
   return (
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger>
-        <StyledPopoverButton icon={<Icon />} neutral>
+        <StyledPopoverButton neutral>
           {selectedDate
             ? formatDate(selectedDate, "MMM dd, yyyy", { locale })
             : t("Choose a date")}
@@ -61,23 +60,9 @@ const ExpiryDatePicker = ({ selectedDate, onSelect }: Props) => {
   );
 };
 
-const Icon = () => (
-  <IconWrapper>
-    <CalendarIcon />
-  </IconWrapper>
-);
-
 const StyledPopoverButton = styled(Button)`
   margin-top: 12px;
   width: 150px;
 `;
 
-const IconWrapper = styled.span`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 24px;
-  height: 24px;
-`;
-
 export default ExpiryDatePicker;

app/scenes/ApiKeyNew/index.tsx

@@ -122,7 +122,7 @@ function ApiKeyNew({ onSubmit }: Props) {
           )}
           .
         </Text>
-        <Flex align="center" gap={16}>
+        <Flex align="center" gap={8}>
           <StyledExpirySelect
             options={expiryOptions}
             value={expiryType}

shared/editor/components/Mentions.tsx

@@ -545,7 +545,7 @@ export const MentionDate = observer(function MentionDate_(props: DateProps) {
     [onChangeDate]
   );
 
-  const trigger = (
+  const content = (
     <DateMention
       {...attrs}
       className={cn(className, {
@@ -558,7 +558,7 @@ export const MentionDate = observer(function MentionDate_(props: DateProps) {
   );
 
   if (!isEditable) {
-    return trigger;
+    return content;
   }
 
   return (
@@ -567,7 +567,7 @@ export const MentionDate = observer(function MentionDate_(props: DateProps) {
         asChild
         onMouseDown={(e) => e.stopPropagation()}
       >
-        {trigger}
+        {content}
       </PopoverPrimitive.Trigger>
       <PopoverPrimitive.Portal>
         <PopoverPrimitive.Content
@@ -577,7 +577,6 @@ export const MentionDate = observer(function MentionDate_(props: DateProps) {
           aria-label={t("Choose a date")}
           onOpenAutoFocus={(e) => e.preventDefault()}
         >
-          {/* Lock page scroll while open, matching the inline editor menu. */}
           <RemoveScroll as={Slot} allowPinchZoom>
             <DatePopoverContent>
               <Calendar