fix modal css

aeternity · Mar 17, 2021 · ebd5eb8 · ebd5eb8
1 parent 3a423d2
commit ebd5eb8
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 7 deletions.
diff --git a/src/components/Button.vue b/src/components/Button.vue
@@ -18,7 +18,7 @@
   font-weight: 700;
   justify-self: center;
   line-height: 1.125;
-  padding: 0.65rem 1rem;
+  padding: 0.65rem 1.3rem;
 
   &[disabled] {
     cursor: not-allowed;

diff --git a/src/components/ErrorModal.vue b/src/components/ErrorModal.vue
@@ -120,26 +120,28 @@ export default {
 
 <style lang="scss" scoped>
 .error-modal {
-  vertical-align: middle;
   padding-top: 5rem;
   position: fixed;
+  justify-content: center;
+  align-items: center;
   z-index: 9998;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-  display: table;
+  display: flex;
   background-color: rgba(0, 0, 0, 0.5);
 
   .modal-body {
     text-align: center;
     margin: 0 auto;
-    padding: 2.5rem 1.6em 3.5rem 1.6em;
+    padding: 2.5rem 1.6em 2.5rem 1.6em;
     background: #131313;
     border-radius: 0.25rem;
-    border: 1px solid $card_border_color;
+    border: 1px solid #000000;
     box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.25);
-    width: 448px;
+    height: auto;
+    max-width: 448px;
 
     @include smallest {
       width: 100%;

diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
@@ -19,7 +19,7 @@ $thumbnail_background_color: #0f0f0f;
 $thumbnail_background_color_alt: #272727;
 $preview_description_font_color: #90909c;
 $buttons_background: #141414;
-$card_border_color: #2f2f2f;
+$card_border_color: #131313;
 $card_hover_color: #191919;
 
 $super_dark: #0f0f0f;