add screenshots to supporter program

packages/docusaurus/docs/09-supporter-program.md

@@ -2,9 +2,9 @@
 
 ## What is this? 
 
-Pangolin is free and open source software and will always continue to be.
+Pangolin is free and open source software and will always continue to be. We will not use this to paywall features.
 
-Your support on this program allows us to continue to support Pangolin with bug fixes, new features, and support.
+Working on Pangolin takes a lot of time! Your support on this program allows us to continue to support Pangolin with bug fixes, new features, and support.
 
 ## How does this work?
 
@@ -16,6 +16,8 @@ We are using GitHub sponsors. In order to support and obtain your key:
 4. Go to your Pangolin instance and click the supporter button
 5. Enter the supporter key
 
+<img src={require("./img/redeem-key.png").default} alt="Tiers"/>
+
 ## How many times can I use my key?
 
 You can use your supporter key on as many servers and installations as you would like. 
@@ -34,12 +36,18 @@ Unlimited users
 
 You can add as many users as you want and the support button and other marks will never return. 
 
+<img src={require("./img/supporter-tiers.png").default} alt="Tiers"/>
+
 ## How can I upgrade?
 
 You can upgrade by purchasing the Full Supporter ($95) tier. After you purchase this tier your account will be automatically upgraded and you can restart your Pangolin server to update the status. 
 
 Due to the way GitHub tiers work even if you have purchased the lower tier you must purchase the higher tier. We apologize for the inconvenience but thank you for the extra donation. 
 
+## Can I hide the supporter button?
+
+You can hide the supporter button without paying by clicking the "Hide for 7 days" button at the bottom of the dialog.
+
 ## What happens if I buy a tier again?
 
 Thanks for your generous donation!

packages/docusaurus/src/css/custom.css

@@ -187,45 +187,45 @@ div[class^="announcementBarContent"] a:hover {
 /* Default (mobile styles remain unchanged) */
 
 /* Desktop: Apply new styles only when screen is larger than 768px */
-@media (min-width: 769px) {
-    .navbarSearchContainer_bmvg .DocSearch-Button {
-        border: 1px solid rgb(150, 153, 156); /* Outline instead of background */
-        background: transparent; /* No background */
-        border-radius: 6px; /* Less rounded */
-        padding: 8px 16px; /* Slightly larger */
-        width: 220px; /* Longer search bar */
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        transition: border-color 0.2s ease-in-out;
-        box-shadow: none !important; /* Removes any glow */
-    }
-
-    .navbarSearchContainer_bmvg .DocSearch-Button:hover,
-    .navbarSearchContainer_bmvg .DocSearch-Button:focus {
-        border-color: rgb(100, 102, 105); /* Slightly darker border on hover */
-        box-shadow: none !important; /* No glow */
-    }
-
-    /* Ensures search text & icon are properly aligned */
-    .navbarSearchContainer_bmvg .DocSearch-Button-Container {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-    }
-
-    /* Adjust search icon size */
-    .navbarSearchContainer_bmvg .DocSearch-Search-Icon {
-        width: 18px;
-        height: 18px;
-        color: rgb(100, 102, 105);
-    }
-
-    /* Remove Command+K shortcut icons */
-    .navbarSearchContainer_bmvg .DocSearch-Button-Keys {
-        display: none !important;
-    }
-}
+/* @media (min-width: 769px) { */
+/*     .navbarSearchContainer_bmvg .DocSearch-Button { */
+/*         border: 1px solid rgb(150, 153, 156); /* Outline instead of background */ */
+/*         background: transparent; /* No background */ */
+/*         border-radius: 6px; /* Less rounded */ */
+/*         padding: 8px 16px; /* Slightly larger */ */
+/*         width: 220px; /* Longer search bar */ */
+/*         display: flex; */
+/*         align-items: center; */
+/*         justify-content: center; */
+/*         transition: border-color 0.2s ease-in-out; */
+/*         box-shadow: none !important; /* Removes any glow */ */
+/*     } */
+/*  */
+/*     .navbarSearchContainer_bmvg .DocSearch-Button:hover, */
+/*     .navbarSearchContainer_bmvg .DocSearch-Button:focus { */
+/*         border-color: rgb(100, 102, 105); /* Slightly darker border on hover */ */
+/*         box-shadow: none !important; /* No glow */ */
+/*     } */
+/*  */
+/*     /* Ensures search text & icon are properly aligned */ */
+/*     .navbarSearchContainer_bmvg .DocSearch-Button-Container { */
+/*         display: flex; */
+/*         align-items: center; */
+/*         gap: 8px; */
+/*     } */
+/*  */
+/*     /* Adjust search icon size */ */
+/*     .navbarSearchContainer_bmvg .DocSearch-Search-Icon { */
+/*         width: 18px; */
+/*         height: 18px; */
+/*         color: rgb(100, 102, 105); */
+/*     } */
+/*  */
+/*     /* Remove Command+K shortcut icons */ */
+/*     .navbarSearchContainer_bmvg .DocSearch-Button-Keys { */
+/*         display: none !important; */
+/*     } */
+/* } */
 
 .breadcrumbs li:first-child {
     display: none;