Blink fixes (#267)

* badge fixes

* button fixes

src/components/atoms/Badge.module.css

@@ -1,10 +1,11 @@
 .badge {
   display: inline-block;
   font-size: var(--font-size-mini);
+  font-family: var(--font-family-base);
   font-weight: var(--font-weight-bold);
-  line-height: 1;
+  line-height: 1 !important;
   text-transform: uppercase;
-  padding: 0.2rem 0.2rem 0.1rem 0.2rem;
+  padding: 0.2rem;
   border-radius: var(--border-radius);
   color: var(--brand-white);
   background: var(--brand-purple);

src/components/atoms/Badge.tsx

@@ -1,5 +1,8 @@
 import React, { ReactElement } from 'react'
 import styles from './Badge.module.css'
+import classNames from 'classnames/bind'
+
+const cx = classNames.bind(styles)
 
 export default function Badge({
   label,
@@ -8,5 +11,10 @@ export default function Badge({
   label: string
   className?: string
 }): ReactElement {
-  return <span className={`${styles.badge} ${className}`}>{label}</span>
+  const styleClasses = cx({
+    badge: true,
+    [className]: className
+  })
+
+  return <span className={styleClasses}>{label}</span>
 }

src/components/atoms/Price/PriceUnit.module.css

@@ -1,6 +1,7 @@
 .price {
   display: inline-block;
   font-weight: var(--font-weight-bold);
+  font-family: var(--font-family-base);
   font-size: var(--font-size-large);
   color: var(--font-color-text);
   line-height: 1.2;
@@ -25,7 +26,7 @@
   font-size: var(--font-size-small);
 }
 
-.badge {
+.price .badge {
   vertical-align: middle;
   margin-left: calc(var(--spacer) / 6);
   background: var(--color-secondary);

src/components/molecules/AssetTeaser.module.css

@@ -29,6 +29,7 @@
 }
 
 .title {
+  line-height: 1.3 !important;
   font-size: var(--font-size-large);
   margin-top: calc(var(--spacer) / 12);
   margin-bottom: 0;

src/components/organisms/AssetActions/Pool/Graph.module.css

@@ -21,7 +21,9 @@
 }
 
 .button,
-.button:hover {
+.button:hover,
+.button:focus,
+.button:active {
   display: inline-block;
   color: var(--color-secondary);
   font-size: var(--font-size-mini);

src/components/organisms/AssetActions/Trade/Swap.module.css

@@ -3,7 +3,9 @@
 }
 
 .swapButton,
-.swapButton:hover {
+.swapButton:hover,
+.swapButton:focus,
+.swapButton:active {
   padding: 0;
   display: block;
   width: calc(100% + 4rem);
@@ -13,6 +15,7 @@
   border-top: 1px solid var(--border-color);
   border-bottom: 1px solid var(--border-color);
   padding: calc(var(--spacer) / 3) 0 calc(var(--spacer) / 6) 0;
+  transform: none;
 }
 
 .swapButton svg {

src/components/organisms/AssetQueryCarousel.module.css

@@ -24,6 +24,11 @@
   margin-top: calc(var(--spacer) / 2);
 }
 
+.assetCarousel [class*='alice-carousel__stage-item'] *,
+.assetCarousel [class*='alice-carousel__stage-item'] {
+  line-height: var(--line-height);
+}
+
 .empty {
   color: var(--color-secondary);
   font-size: var(--font-size-small);