Styling adjustments

nimiq · Jun 25, 2020 · ca7632e · ca7632e
1 parent 5bbb0ef
commit ca7632e
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 6 deletions.
diff --git a/src/components/AccountBalance.vue b/src/components/AccountBalance.vue
@@ -30,19 +30,19 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+.account-balance {
+    text-align: center;
+}
+
 .nq-label {
     margin-bottom: 0.5rem;
 }
 
 .fiat-amount {
-    font-size: 8rem;
+    font-size: 7rem;
 }
 
 @media (max-width: 1160px) { // Half mobile breakpoint
-    .account-balance {
-        text-align: center;
-    }
-
     .fiat-amount {
         font-size: 5.5rem;
     }

diff --git a/src/components/modals/ReceiveModal.vue b/src/components/modals/ReceiveModal.vue
@@ -161,6 +161,7 @@ export default defineComponent({
     .copyable {
         padding: 0.5rem;
         background: var(--nimiq-highlight-bg);
+        border-radius: 0.625rem;
 
         transition:
             color .3s var(--nimiq-ease),
@@ -274,6 +275,7 @@ export default defineComponent({
         color: rgba(31, 35, 72, 0.5);
         text-align: center;
         font-size: var(--h2-size);
+        margin-top: 2rem;
     }
 }
 </style>
diff --git a/src/components/modals/SendModal.vue b/src/components/modals/SendModal.vue
@@ -740,7 +740,24 @@ export default defineComponent({
         }
 
         .copyable {
-            padding: 1rem;
+            padding: 0.5rem;
+
+            /deep/ .background {
+                border-radius: 0.625rem;
+            }
+
+            .address-display {
+                transition: opacity 0.3s var(--nimiq-ease);
+            }
+
+            &:hover,
+            &:focus,
+            &.copied {
+                .address-display {
+                    opacity: 1;
+                    font-weight: 500;
+                }
+            }
         }
     }