Updated Discord iFrame

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 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>
-            </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 className="discord-toggle" onClick={toggleMinimize}>
+        <span>{isMinimized ? '▲' : '▼'}</span>
       </button>
-        </div>
-        </div>
-  )
-}
+    </div >
+  );
+};
 
 export default DiscordInt

src/styles/DiscordInt.css

@@ -1,8 +1,22 @@
-.discordint iframe {
+.discord-container {
     position: fixed;
+    bottom: 10px;
+    right: 10px;
+    z-index: 1001;
     display: flex;
-        bottom: 20px;
-        right: 20px;
+    flex-direction: column;
+    align-items: flex-end;
+}
+
+iframe {
+    height: 350px;
+    width: 400px;
+    overflow: hidden;
+    border-radius: 10%;
+    border: none;
+}
+
+.discord-iframe {
     height: 350px;
     width: 400px;
     background-color: black;
@@ -10,92 +24,39 @@
     padding: 5px;
     box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
     border-radius: 10%;
-        z-index: 1001;
+    transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
 }
 
-.discordint .discord-minimized button {
-    display: none;
-    background-color: transparent;
+.discord-container.minimized .discord-iframe {
+    transform: translateY(100%);
+    opacity: 0;
+    pointer-events: none;
+}
+
+.discord-toggle {
+    background-color: #262731;
     border: none;
-    color: white;
+    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;
-}
-
-.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;
-    }
+.discord-container.minimized .discord-toggle {
+    transform: rotate(360deg);
+    /* Rotate for minimized state */
 }
 
 @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;
     }
 }