From 99313b9427d1d12213b8b8dd847a9c4920225544 Mon Sep 17 00:00:00 2001
From: Dev EhChad <devehchad@gmail.com>
Date: Tue, 7 Jan 2025 08:06:28 -0500
Subject: [PATCH] Updated Discord iFrame

---
 src/components/DiscordInt.js |  36 ++++-----
 src/styles/DiscordInt.css    | 139 +++++++++++++----------------------
 2 files changed, 68 insertions(+), 107 deletions(-)

diff --git a/src/components/DiscordInt.js b/src/components/DiscordInt.js
index 4bdeaf6..46d8b52 100644
--- a/src/components/DiscordInt.js
+++ b/src/components/DiscordInt.js
@@ -4,26 +4,26 @@ import '../styles/DiscordInt.css'
 
 function DiscordInt() {
 
-  const [openLinks, setOpenLinks] = useState(false);
+  const [isMinimized, setIsMinimized] = useState(false);
 
-  const toggleDiscordInt = () => {
-    setOpenLinks(!openLinks);
+  const toggleMinimize = () => {
+    setIsMinimized(!isMinimized);
   };
+
   return (
-      <div className='discordint'>
-        <div className='discord-opened' id={openLinks ? "open" : "close"}>
-            <div className='hiddenLinks'>
-            <div className='discordiframe'><iframe src="https://discord.com/widget?id=573633846587817992&theme=dark" allowtransparency="true" frameborder="0" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"></iframe></div>     
-            </div>
-            </div>
-        <div className='discord-minimized'>
-            <div className='discordiframe'><iframe src="https://discord.com/widget?id=573633846587817992&theme=dark" width="350" height="500" allowtransparency="true" frameborder="0" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"></iframe></div>
-            <button onClick={toggleDiscordInt}>
-                <ReorderIcon />
-          </button>
-        </div>
-        </div>
-  )
-}
+    <div className={`discord-container ${isMinimized ? 'minimized' : ''}`}>
+      <div className="discord-iframe">
+        <iframe
+          src="https://discord.com/widget?id=573633846587817992&theme=dark"
+          frameborder="0"
+          title="Discord Widget"
+        ></iframe>
+      </div>
+      <button className="discord-toggle" onClick={toggleMinimize}>
+        <span>{isMinimized ? '▲' : '▼'}</span>
+      </button>
+    </div >
+  );
+};
 
 export default DiscordInt
diff --git a/src/styles/DiscordInt.css b/src/styles/DiscordInt.css
index 639ca8a..a286eb3 100644
--- a/src/styles/DiscordInt.css
+++ b/src/styles/DiscordInt.css
@@ -1,101 +1,62 @@
-.discordint iframe {
-        position: fixed;
-        display: flex;
-        bottom: 20px;
-        right: 20px;
-        height: 350px;
-        width: 400px;
-        background-color: black;
-        border: 1px solid black;
-        padding: 5px;
-        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
-        border-radius: 10%;
-        z-index: 1001;
+.discord-container {
+    position: fixed;
+    bottom: 10px;
+    right: 10px;
+    z-index: 1001;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
 }
 
-.discordint .discord-minimized button {
-    display: none;
-    background-color: transparent;
+iframe {
+    height: 350px;
+    width: 400px;
+    overflow: hidden;
+    border-radius: 10%;
     border: none;
-    color: white;
+}
+
+.discord-iframe {
+    height: 350px;
+    width: 400px;
+    background-color: black;
+    border: 1px solid black;
+    padding: 5px;
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
+    border-radius: 10%;
+    transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
+}
+
+.discord-container.minimized .discord-iframe {
+    transform: translateY(100%);
+    opacity: 0;
+    pointer-events: none;
+}
+
+.discord-toggle {
+    background-color: #262731;
+    border: none;
+    color: #7289DA;
+    /* Discord Blurple */
+    padding: 8px 12px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.2rem;
+    border-radius: 50%;
     cursor: pointer;
+    transition: transform 0.3s ease-in-out;
 }
 
-.discordint .discord-minimized svg {
-    font-size: 40px;
+.discord-container.minimized .discord-toggle {
+    transform: rotate(360deg);
+    /* Rotate for minimized state */
 }
 
-.discordint #open {
-    padding-left: 0px;
-}
-
-.discordint #open .hiddenLinks {
-    display: inherit;
-    margin-left: 30px;
-}
-
-.discordint #close .hiddenLinks {
-    display: none;
-}
-
-.discordint #open a {
-    width: 70px;
-    margin: 5px;
-}
-
-
-@media only screen and (max-width: 765px) {
-    .discordint .discord-minimized a {
-       display: none;
-    }
-
-    .discordint .discord-opened {
-        display: none;
-    }
-
-
-    .discordint iframe {
-        
-        display: none;
-    }
-
-    .discordint .discord-minimized button {
-        display: none;
-    }
-}
-
-@media only screen and (max-width: 500px) {
-    .discordint .discord-minimized a {
-        display: none;
-    }
-
-    .discord .discord-opened a {
-        padding-left: 50px;
-    }
-    
-    .discordint iframe {
-        display: none;
-    }
-    
-    .discordint .discord-minimized button {
-        display: none;
-    }
-}
-  
 @media only screen and (max-width: 1030px) {
-    .discordint iframe {
-        display: none;
-    }
-    .discordint .discord-minimized button {
-        display: none
-    }
-}
-
-@media only screen and (max-width: 920px),(max-height: 630px) {
-    .discordint iframe {
-        display: none;
-    }
-    .discordint .discord-minimized button {
+    .discord-container {
         display: none;
     }
 }
\ No newline at end of file