From 8ae27c261ae1a2b9eb7e496c1e86a294851035d9 Mon Sep 17 00:00:00 2001
From: Thomas Smith <49042513+tsmitty11@users.noreply.github.com>
Date: Fri, 20 Jan 2023 16:45:43 -0500
Subject: [PATCH] Styuling for bottle placeholder on bottle-details page

---
 src/assets/scripts/package-bottles.jsx | 10 ++++++----
 src/layouts/page/package-detail.html   |  1 +
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/assets/scripts/package-bottles.jsx b/src/assets/scripts/package-bottles.jsx
index 6d4f6f9..b3a36e7 100644
--- a/src/assets/scripts/package-bottles.jsx
+++ b/src/assets/scripts/package-bottles.jsx
@@ -13,10 +13,12 @@ function PackageBottles() {
   }, []);
 
   if (isLoading) return (
-    <div id="bottle-preloader" className="flex">
-      <div id="bottle-status" className="my-auto">
-        <i className="icon-tea-logo-iconasset-1 grid-gray tea-icon lead mb-0"></i>
-        <div id="bottle-loading-text"><p className="grid-gray">steeping available versions...</p></div>
+    <div id="bottle-preloader" className="flex one-box-down">
+      <div id="bottle-status" className="flex justifit-content-center">
+        <div className="mx-auto">
+          <i className="icon-tea-logo-iconasset-1 grid-gray tea-icon lead mb-0"></i>
+          <div id="bottle-loading-text"><p className="grid-gray">steeping available versions...</p></div>
+        </div>
       </div>
     </div>
   );
diff --git a/src/layouts/page/package-detail.html b/src/layouts/page/package-detail.html
index 1eba1a1..ee95d6b 100644
--- a/src/layouts/page/package-detail.html
+++ b/src/layouts/page/package-detail.html
@@ -108,6 +108,7 @@
     width: 100%;
     height: 200px;
     background: #1a1a1a;
+    border: 1px solid #949494;;
   }
   #bottle-status {
     width: 100%;