make ticker arrow visible only on parent elem hover

src/components/Futa/SearchableTicker/TickerItem.module.css

@@ -6,6 +6,17 @@
     transition: all var(--animation-speed) ease-in-out;
 }
 
+/* transparent ticker arrow in base state with transition */
+.ticker_arrow {
+    transition: all var(--animation-speed) ease-in-out;
+    color: #f0f0f800;
+}
+
+/* add color to ticker arrow when parent elem is hovered */
+.ticker_name:hover .ticker_arrow {
+    color: var(--text2);
+}
+
 /* styles to apply universally to cells in the row */
 /* will be overridden by lower CSS in this file */
 .ticker_item > * {
@@ -16,6 +27,10 @@
     width: 120px;
 }
 
+/* .ticker_arrow {
+    visibility: hidden;
+} */
+
 .active {
     background-color: #28585d;
 }

src/components/Futa/SearchableTicker/TickerItem.tsx

@@ -201,7 +201,7 @@ export default function TickerItem(props: PropsIF) {
             }}
         >
             <div className={styles.ticker_name}>
-                {isMobile || <GoChevronRight />}
+                {isMobile || <GoChevronRight className={styles.ticker_arrow} />}
                 <p>{ticker}</p>
             </div>
             <p className={styles.market_cap}>{formattedMarketCap}</p>