EditCard only appears when focused

Author: RoyEJohnson

src/app/components/Modal/styles.tsx

@@ -37,7 +37,6 @@ export const Heading = styled.h1`
   display: flex;
   align-items: center;
   margin: 0;
-  padding: ${modalPadding * 0.5}rem 0;
 `;
 
 // tslint:disable-next-line:variable-name

src/app/content/components/Page/PageContent.tsx

@@ -58,6 +58,7 @@ export default styled(MainContent)`
   .highlight {
     position: relative;
     z-index: 1;
+    user-select: none;
   }
 
   /* stylelint-disable selector-class-pattern */

src/app/content/highlights/components/Card.tsx

@@ -170,6 +170,9 @@ function Card(props: CardProps) {
   );
 }
 
+type ComputedProps = ReturnType<typeof useComputedProps>;
+type CommonProps = ComputedProps['commonProps'];
+
 function NoteOrCard({
   props,
   setHighlightRemoved,
@@ -179,7 +182,7 @@ function NoteOrCard({
   props: CardPropsWithBookAndPage;
   setHighlightRemoved: React.Dispatch<React.SetStateAction<boolean>>;
   locationFilterId: string;
-  computedProps: ReturnType<typeof useComputedProps>;
+  computedProps: ComputedProps;
 }) {
   const {
     focusCard,
@@ -219,7 +222,7 @@ function NoteOrCard({
         />
       ) : (
         <EditCardWithOnCreate
-          cardProps={props as CardPropsWithBookAndPage}
+          cardProps={props}
           commonProps={{ ...commonProps, onRemove }}
           locationFilterId={locationFilterId}
           hasUnsavedHighlight={hasUnsavedHighlight}
@@ -230,9 +233,8 @@ function NoteOrCard({
   );
 }
 
-type ComputedProps = ReturnType<typeof useComputedProps>;
 type EditCardProps = {
-  commonProps: object;
+  commonProps: CommonProps & {onRemove: () => void};
   cardProps: CardPropsWithBookAndPage;
   locationFilterId: string;
 } & Pick<ComputedProps, 'hasUnsavedHighlight' | 'setEditing'>;
@@ -291,12 +293,13 @@ const StyledCard = styled(Card)`
 // Styling is expensive and most Cards don't need to render
 function PreCard(props: CardProps) {
   const computedProps = useComputedProps(props);
+  const hideUnfocusedEditCard = computedProps.annotation ? {} : {isHidden: !props.shouldFocusCard}
 
   if (!computedProps.annotation && (!props.isActive)) {
     return null;
   }
   return (
-    <StyledCard {...props} />
+    <StyledCard {...{...props, ...hideUnfocusedEditCard}} />
   );
 }