EditCard only appears when focused

Update snapshots

Author: RoyEJohnson

src/app/components/Modal/__snapshots__/Modal.spec.tsx.snap

@@ -68,7 +68,6 @@ exports[`Modal matches snapshot 1`] = `
   -ms-flex-align: center;
   align-items: center;
   margin: 0;
-  padding: 1.5rem 0;
 }
 
 .c6 {
@@ -263,7 +262,6 @@ exports[`Modal matches snapshot with children 1`] = `
   -ms-flex-align: center;
   align-items: center;
   margin: 0;
-  padding: 1.5rem 0;
 }
 
 .c6 {

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/__snapshots__/routes.spec.tsx.snap

@@ -286,6 +286,10 @@ Array [
 .c4 .highlight {
   position: relative;
   z-index: 1;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
 
 .c4 .MathJax_Display .highlight,

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/components/__snapshots__/Content.spec.tsx.snap

@@ -711,6 +711,10 @@ Array [
 .c74 .highlight {
   position: relative;
   z-index: 1;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
 
 .c74 .MathJax_Display .highlight,
@@ -8072,6 +8076,10 @@ Array [
 .c74 .highlight {
   position: relative;
   z-index: 1;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
 
 .c74 .MathJax_Display .highlight,

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}} />
   );
 }
 

src/app/content/highlights/components/__snapshots__/Card.spec.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Card matches snapshot when focused without note 1`] = `
 .c0 {
-  visibility: visible;
+  visibility: hidden;
   -webkit-animation: 600ms bcCCNc ease-out;
   animation: 600ms bcCCNc ease-out;
   display: block;
@@ -121,7 +121,7 @@ exports[`Card matches snapshot when focused without note 1`] = `
 
 exports[`Card matches snapshot when passed data without note 1`] = `
 .c0 {
-  visibility: visible;
+  visibility: hidden;
   -webkit-animation: 600ms bcCCNc ease-out;
   animation: 600ms bcCCNc ease-out;
   display: block;
@@ -215,7 +215,7 @@ exports[`Card matches snapshot when passed data without note 1`] = `
 
 exports[`Card matches snapshot without data 1`] = `
 .c0 {
-  visibility: visible;
+  visibility: hidden;
   -webkit-animation: 600ms bcCCNc ease-out;
   animation: 600ms bcCCNc ease-out;
   display: block;

src/app/content/highlights/components/__snapshots__/ConfirmationModal.spec.tsx.snap

@@ -68,7 +68,6 @@ exports[`ConfirmationModal matches snapshot 1`] = `
   -ms-flex-align: center;
   align-items: center;
   margin: 0;
-  padding: 1.5rem 0;
 }
 
 .c7 {

src/app/errors/components/__snapshots__/ErrorModal.spec.tsx.snap

@@ -68,7 +68,6 @@ exports[`ErrorModal matches snapshot 1`] = `
   -ms-flex-align: center;
   align-items: center;
   margin: 0;
-  padding: 1.5rem 0;
 }
 
 .c7 {
@@ -391,7 +390,6 @@ exports[`ErrorModal matches snapshots with recorded error ids 1`] = `
   -ms-flex-align: center;
   align-items: center;
   margin: 0;
-  padding: 1.5rem 0;
 }
 
 .c7 {