Update icons and add component for vertical alignment of table cell c…

…ontent (#1193)

- Changed the species home icon in the selected genomes table in species manager from the home icon
   to the species selector icon
- Updated the VEP icon in the launchbar
- Added a new component (VerticallyCenteredCellContent) to help with the vertical centring of inline-block or inline-flex
   items in table cells

src/content/app/species-selector/views/species-manager/selected-genomes-table/SelectedGenomesTable.module.css

@@ -47,10 +47,16 @@
   text-align: center;
 }
 
-.homeIcon {
-  fill: var(--color-blue);
-  width: 19px;
+.speciesHomeLink {
+  display: inline-flex;
+}
+
+.speciesHomeIcon {
+  fill: white;
+  background-color: var(--color-blue);
+  width: 20px;
   aspect-ratio: 1;
+  padding: 2px;
   font-size: 0; /* to remove the empty vertical space around the home icon and better center it vertically */
 }
 

src/content/app/species-selector/views/species-manager/selected-genomes-table/SelectedGenomesTable.tsx

@@ -24,7 +24,11 @@ import * as urlFor from 'src/shared/helpers/urlHelper';
 import { deleteSpeciesAndSave } from 'src/content/app/species-selector/state/species-selector-general-slice/speciesSelectorGeneralSlice';
 import { toggleSpeciesUseAndSave } from 'src/content/app/species-selector/state/species-selector-general-slice/speciesSelectorGeneralSlice';
 
-import { Table, ColumnHead } from 'src/shared/components/table';
+import {
+  Table,
+  ColumnHead,
+  VerticallyCenteredCellContent
+} from 'src/shared/components/table';
 
 import DeleteButton from 'src/shared/components/delete-button/DeleteButton';
 
@@ -39,7 +43,7 @@ import {
   SpeciesType
 } from 'src/shared/components/species-name-parts-for-table';
 
-import HomeIcon from 'static/icons/icon_home.svg';
+import SpeciesSelectorIcon from 'static/icons/icon_launchbar_species_selector.svg';
 
 import type { CommittedItem } from 'src/content/app/species-selector/types/committedItem';
 
@@ -230,13 +234,18 @@ const SelectedGenomesTable = (props: {
               className={isInDeletionMode ? styles.disabledRow : undefined}
             >
               <td className={styles.alignCenter}>
-                <Link to={getLinkToSpeciesPage(genome)}>
-                  <HomeIcon
-                    className={styles.homeIcon}
-                    role="img"
-                    aria-label={getSpeciesLinkAriaLabel(genome)}
-                  />
-                </Link>
+                <VerticallyCenteredCellContent>
+                  <Link
+                    to={getLinkToSpeciesPage(genome)}
+                    className={styles.speciesHomeLink}
+                  >
+                    <SpeciesSelectorIcon
+                      className={styles.speciesHomeIcon}
+                      role="img"
+                      aria-label={getSpeciesLinkAriaLabel(genome)}
+                    />
+                  </Link>
+                </VerticallyCenteredCellContent>
               </td>
               <td>
                 <CommonName {...genome} />
@@ -254,24 +263,28 @@ const SelectedGenomesTable = (props: {
                 <AssemblyAccessionId {...genome} />
               </td>
               <td className={styles.alignCenter}>
-                <DeleteButtonOrCheckbox
-                  species={genome}
-                  isInDeletionMode={isInDeletionMode}
-                  enterDeletionMode={enterDeletionMode}
-                  addGenomeToDeleteList={addGenomeToDeleteList}
-                  removeGenomeFromDeleteList={removeGenomeFromDeleteList}
-                  isMarkedForDeletion={genomeIdsForDeletion.has(
-                    genome.genome_id
-                  )}
-                />
+                <VerticallyCenteredCellContent>
+                  <DeleteButtonOrCheckbox
+                    species={genome}
+                    isInDeletionMode={isInDeletionMode}
+                    enterDeletionMode={enterDeletionMode}
+                    addGenomeToDeleteList={addGenomeToDeleteList}
+                    removeGenomeFromDeleteList={removeGenomeFromDeleteList}
+                    isMarkedForDeletion={genomeIdsForDeletion.has(
+                      genome.genome_id
+                    )}
+                  />
+                </VerticallyCenteredCellContent>
               </td>
               <td className={styles.alignCenter}>
-                <SlideToggle
-                  className={styles.toggle}
-                  isOn={genome.isEnabled}
-                  onChange={() => toggleGenomeUse(genome)}
-                  disabled={isInDeletionMode}
-                />
+                <VerticallyCenteredCellContent>
+                  <SlideToggle
+                    className={styles.toggle}
+                    isOn={genome.isEnabled}
+                    onChange={() => toggleGenomeUse(genome)}
+                    disabled={isInDeletionMode}
+                  />
+                </VerticallyCenteredCellContent>
               </td>
             </tr>
             {isInDeletionMode &&

src/shared/components/app-icon/AppIcon.module.css

@@ -8,7 +8,7 @@
 }
 
 .appIcon svg {
-  fill: white;
+  fill: var(--app-icon-color, white);
 }
 
 /* The image-button-svg-width and image-button-svg-height variables below
@@ -50,10 +50,8 @@ get used when AppIcon is placed inside of the ImageButton component */
 }
 
 .vep svg {
-  --image-button-svg-width: 95%;
-  --image-button-svg-height: 95%;
-  width: 95%;
-  height: 95%;
+  width: 100%;
+  height: 100%;
 }
 
 .help svg {

src/shared/components/table/VerticallyCenteredCellContent.module.css

@@ -0,0 +1,8 @@
+.verticallyCentered {
+  display: flex;
+  align-items: center;
+}
+
+.horizontallyCentered {
+  justify-content: center;
+}

src/shared/components/table/VerticallyCenteredCellContent.tsx

@@ -0,0 +1,48 @@
+/**
+ * See the NOTICE file distributed with this work for additional information
+ * regarding copyright ownership.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import classNames from 'classnames';
+import type { ReactNode } from 'react';
+
+import styles from './VerticallyCenteredCellContent.module.css';
+
+/**
+ * The purpose of this component is to keep table cell content
+ * vertically centred.
+ *
+ * Its typical use case is to wrap an element whose display
+ * is inline-block (an image, an icon, a button, etc.), or inline-flex
+ */
+
+type Props = {
+  children: ReactNode;
+  centerHorizontally?: boolean;
+  className?: string;
+};
+
+const VerticallyCenteredCellContent = (props: Props) => {
+  const componentClasses = classNames(
+    styles.verticallyCentered,
+    props.className,
+    {
+      [styles.horizontallyCentered]: props.centerHorizontally ?? true
+    }
+  );
+
+  return <div className={componentClasses}>{props.children}</div>;
+};
+
+export default VerticallyCenteredCellContent;

src/shared/components/table/index.ts

@@ -17,3 +17,4 @@
 export { default as Table } from './Table';
 export { default as RowFooter } from './RowFooter';
 export { default as ColumnHead } from './ColumnHead';
+export { default as VerticallyCenteredCellContent } from './VerticallyCenteredCellContent';