frontend: update actionable-item styling

Actionable item component should set correct color even if it is
internally a button and allow for text only children.

Author: thisconnect

frontends/web/src/components/actionable-item/actionable-item.module.css

@@ -3,6 +3,7 @@
   align-items: center;
   background-color: var(--background-secondary);
   border: none;
+  color: var(--color-default);
   display: flex;
   font-size: var(--size-default);
   justify-content: space-between;
@@ -16,9 +17,10 @@
   cursor: pointer;
 }
 
-.leftContent {
+.content {
   align-items: center;
   display: flex;
+  justify-content: space-between;
   width: 100%;
 }
 

frontends/web/src/components/actionable-item/actionable-item.tsx

@@ -34,7 +34,7 @@ export const ActionableItem = ({
   const notButton = disabled || onClick === undefined;
 
   const content = (
-    <div className={styles.leftContent}>
+    <div className={styles.content}>
       {children}
       <ChevronRightDark />
     </div>

frontends/web/src/routes/exchange/components/exchange-provider.module.css

@@ -119,7 +119,6 @@
 }
 
 .text {
-    color: var(--color-default);
     margin: 0;
 }