Inventory: fixes / layout (#11948)

Co-authored-by: Sabe Jones <sabrecat@gmail.com>

website/client/src/components/inventory/stable/hatchingModal.vue

@@ -47,6 +47,7 @@
 
 <style lang="scss">
   @import '~@/assets/scss/mixins.scss';
+  @import '~@/assets/scss/colors.scss';
 
   #hatching-modal {
     @include centeredModal();
@@ -66,7 +67,7 @@
       font-weight: bold;
       line-height: 1.2;
       text-align: center;
-      color: #4e4a57;
+      color: $gray-50;
     }
 
     .text {
@@ -75,7 +76,7 @@
       font-size: 14px;
       line-height: 1.43;
       text-align: center;
-      color: #686274;
+      color: $gray-100;
     }
 
     span.svg-icon.icon-10 {
@@ -87,6 +88,27 @@
     .modal-footer {
       justify-content: center;
     }
+
+    .potionEggGroup {
+      margin: 0 auto;
+    }
+
+    .potionEggBackground {
+      display: inline-flex;
+      align-items: center;
+      width: 112px;
+      height: 112px;
+      border-radius: 4px;
+      background-color: $gray-700;
+
+      &:first-child {
+        margin-right: 24px;
+      }
+
+      div {
+        margin: 0 auto;
+      }
+    }
   }
 </style>