modal ui

Author: sanghoonio

ui/src/components/bed-splash-components/refgenome-modal.tsx

@@ -44,7 +44,7 @@ export const RefGenomeModal = (props: Props) => {
         {genomeStats?.compared_genome?.sort((a, b) => a.tier_ranking - b.tier_ranking)
           .map(genome => (
             <div 
-              className='card mb-3 shadow-sm' 
+              className='card mb-2 shadow-sm genome-card'
               style={{backgroundColor: (genome.tier_ranking == 1 ? '#C8EFB3' : (genome.tier_ranking == 2 ? '#FFF7BA' : (genome.tier_ranking == 3 ? '#F9D39D' : '#FCB6B6'))) }} 
               key={genome.compared_genome}
             >
@@ -55,21 +55,21 @@ export const RefGenomeModal = (props: Props) => {
                     <div className='d-flex align-items-center gap-2'>
                       <p className='mb-1 fw-semibold' style={{width: '33%'}}>{genome.compared_genome}</p>
 
-                      <div className="rounded-1 mx-2 bg-white position-relative" style={{width: '14%'}}>
+                      <div className="rounded-1 mx-2 bg-white position-relative shadow-sm" style={{width: '14%'}}>
                         <span className={`text-xs position-absolute start-50 top-50 translate-middle ${(genome.xs || 0) * 100 > 30 ? 'text-white' : 'text-dark'}`}>
                           {((genome.xs || 0) * 100).toFixed(2) + '%'}
                         </span>
                         <div className="rounded-1 bg-primary" style={{height: '16px', width: `${(genome.xs || 0) * 100}%` }} />
                       </div>
 
-                      <div className="rounded-1 mx-2 bg-white position-relative" style={{width: '14%'}}>
+                      <div className="rounded-1 mx-2 bg-white position-relative shadow-sm" style={{width: '14%'}}>
                         <span className={`text-xs position-absolute start-50 top-50 translate-middle ${(genome.oobr || 0) * 100 > 30 ? 'text-white' : 'text-dark'}`}>
                           {((genome.oobr || 0) * 100).toFixed(2) + '%'}
                         </span>
                         <div className="rounded-1 bg-primary" style={{height: '16px', width: `${(genome.oobr || 0) * 100}%` }} />
                       </div>
 
-                      <div className="rounded-1 mx-2 bg-white position-relative" style={{width: '14%'}}>
+                      <div className="rounded-1 mx-2 bg-white position-relative shadow-sm" style={{width: '14%'}}>
                         <span className={`text-xs position-absolute start-50 top-50 translate-middle ${(genome.sequence_fit || 0) * 100 > 30 ? 'text-white' : 'text-dark'}`}>
                           {((genome.sequence_fit || 0) * 100).toFixed(2) + '%'}
                         </span>

ui/src/custom.scss

@@ -311,3 +311,8 @@ td {
   color: #212529;
   background: #e9ecef;
 }
+
+.genome-card:hover {
+  border: 1px solid $primary;
+  filter: brightness(98%);
+}