increase sequence limit to 50 (#753)

src/content/app/tools/blast/components/blast-input-sequences/BlastInputSequences.scss

@@ -48,6 +48,10 @@
   border-radius: 100%;
   font-size: 15px;
   margin: 0 0.6rem 0 0.6rem;
+
+  &Error {
+    background-color: $red;
+  }
 }
 
 .maxSequences {

src/content/app/tools/blast/components/blast-input-sequences/BlastInputSequencesHeader.tsx

@@ -74,6 +74,10 @@ const BlastInputSequencesHeader = (props: Props) => {
     ? sequences.length + 1
     : sequences.length;
 
+  const sequenceCounterClass = classNames(styles.sequenceCounter, {
+    [styles.sequenceCounterError]: sequences.length > MAX_BLAST_SEQUENCE_COUNT
+  });
+
   const headerClass = classNames(styles.header, {
     [styles.smallScreenHeader]: compact
   });
@@ -82,8 +86,10 @@ const BlastInputSequencesHeader = (props: Props) => {
     <div className={headerClass}>
       <div className={styles.headerGroup}>
         <span className={styles.headerTitle}>Sequences</span>
-        <span className={styles.sequenceCounter}>{sequencesCount}</span>
-        <span className={styles.maxSequences}>of 30</span>
+        <span className={sequenceCounterClass}>{sequencesCount}</span>
+        <span className={styles.maxSequences}>
+          of {MAX_BLAST_SEQUENCE_COUNT}
+        </span>
       </div>
       <SequenceSwitcher
         sequenceType={sequenceType}

src/content/app/tools/blast/utils/blastFormValidator.ts

@@ -17,7 +17,7 @@
 import { ParsedInputSequence } from 'src/content/app/tools/blast/types/parsedInputSequence';
 
 export const MAX_BLAST_SPECIES_COUNT = 25;
-export const MAX_BLAST_SEQUENCE_COUNT = 30;
+export const MAX_BLAST_SEQUENCE_COUNT = 50;
 
 export const isBlastFormValid = (
   species: string[],