Pull request #21: metrics & button fix/style

Merge in LB/trading-post from as/button to master

* commit '3a8996071589abcc5ab064a2c79428bd54cdc346':
  adjust metric styles
  button fix/style

Author: qtbeee

src/components/Button.vue

@@ -44,6 +44,14 @@ export default Vue.defineComponent({
         background-color: rgba(255, 255, 255, 0.3);
         color: rgba(255, 255, 255, 0.7);
     }
-    
+
+    &:active {
+        background-color: var(--colorSoftToneInk);
+    }
+
+    &:active,
+    &:focus {
+        outline: none;
+    }
 }
 </style>

src/components/Metric.vue

@@ -11,9 +11,9 @@ export default Vue.defineComponent({
     setup(props: Props, context) {
         return (): JSX.Element => (
             <div class="Metric-main">
-                <div class="Metric-title">{ props.title }</div>
-                <div class="Metric-content">{ context.slots["default"]?.() }</div>
+                <div class="Metric-title">{ props.title }:</div>
                 <div class="Metric-value">{ props.value }</div>
+                <div class="Metric-content">{ context.slots["default"]?.() }</div>
             </div>
         )
     }
@@ -28,19 +28,17 @@ export default Vue.defineComponent({
 }
 
 .Metric-title {
-    font-size: 20px;
+    font-size: 16px;
     color: var(--colorBeer);
 }
 
 .Metric-content {
-    border: 1px solid var(--colorGlazedGranite);
-    border-radius: 10px;
-    padding: 10px;
-    margin: 10px;
+    padding: 5px;
 }
 
 .Metric-value {
-    font-size: 20px;
+    padding-block: 7px;
+    font-size: 15px;
     color: var(--colorBeer);
 }
 </style>

src/components/NetworkMetrics.vue

@@ -60,13 +60,22 @@ export default Vue.defineComponent({
 
 <style>
 .NetworkMetrics-main {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
     background-color: var(--colorBlackGrey);
     color: var(--colorWhite);
     padding: 16px;
     border-radius: 2px;
-    display: flex;
     align-items: center;
-    justify-content: space-between;
+    
+
+}
+@media (max-width: 930px){
+    .NetworkMetrics-main {
+        grid-template-rows: 1fr 1fr;
+        grid-template-columns: 1fr 1fr;
+        grid-row-gap: 50px;
+    }
 }
 
 .emojiMetric {

src/components/Trades.vue

@@ -78,6 +78,6 @@ export default Vue.defineComponent({
 
 .Trades-allTrades {
     justify-self: end;
-    background-color: var(--colorSoftToneInk);
+    margin: 10px 0;
 }
 </style>

src/components/UserRow.vue

@@ -8,7 +8,7 @@ import { AllEmoji } from "../domain/tokens";
 import Avatar from "./Avatar.vue";
 import UserVue from "./User.vue";
 import GoldAmount from "./GoldAmount.vue";
-
+import Button from "./Button.vue";
 interface Props {
     user: User;
     onPressTrade: () => void;
@@ -27,9 +27,9 @@ export default Vue.defineComponent({
                     <Icon class="Holder-balanceIcon" d={ mdiEmoticonOutline } />
                 </div>
                 <GoldAmount amount={ props.user.balance.gold.toFormat() } />
-                <button class="Holder-newTrade" onClick={ props.onPressTrade } >
+                <Button class="Holder-newTrade" onClick={ props.onPressTrade } >
                     Trade
-                </button>
+                </Button>
             </div>
         );
     }