update

Author: Kfrizb11

src/App.tsx

@@ -55,16 +55,21 @@ export default function App() {
     <>
       {newcomer && (
         <Modal>
-          <h1>Welcome</h1>
+          <h1>Welcome to POG COINSINO</h1>
           <TosWrapper>
             <TosInner dangerouslySetInnerHTML={{ __html: TOS_HTML }} />
           </TosWrapper>
           <p>
-            By playing on our platform, you confirm your compliance.
+            By playing on our platform, you confirm your compliance with our terms and conditions.
           </p>
-          <GambaUi.Button main onClick={() => set({ newcomer: false })}>
-            Acknowledge
-          </GambaUi.Button>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '15px', width: '100%', padding: '0 40px' }}>
+            <GambaUi.Button main onClick={() => set({ newcomer: false })}>
+              Let's Play! 🎮
+            </GambaUi.Button>
+            <div style={{ textAlign: 'center', fontSize: '14px', opacity: 0.7 }}>
+              Need POG Coins? <a href="https://v2.gamba.so/" target="_blank" rel="noopener noreferrer" style={{ color: '#4ECDC4', textDecoration: 'underline' }}>Get them here</a>
+            </div>
+          </div>
         </Modal>
       )}
       <ScrollToTop />

src/components/Dropdown.tsx

@@ -1,9 +1,31 @@
 import React from 'react'
-import styled, { css } from 'styled-components'
+import styled, { css, keyframes } from 'styled-components'
+
+const fadeIn = keyframes`
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`
+
+const itemEntrance = keyframes`
+  from {
+    opacity: 0;
+    transform: translateX(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+`
 
 const Wrapper = styled.div<{$visible: boolean, $anchor: 'top' | 'bottom'}>`
   opacity: 0;
-  transition: transform .2s ease, opacity .2s;
+  transition: transform .3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity .3s ease;
   position: absolute;
   visibility: hidden;
   z-index: 1000;
@@ -12,33 +34,59 @@ const Wrapper = styled.div<{$visible: boolean, $anchor: 'top' | 'bottom'}>`
   min-width: 100%;
   white-space: nowrap;
   min-width: max-content;
+  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.2));
+  
   ${(props) => props.$visible && css`
     opacity: 1;
     transform: translateY(0px)!important;
     visibility: visible;
+    animation: ${fadeIn} 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
   `}
+  
   ${(props) => props.$anchor === 'top' && css`
     top: 100%;
     margin-top: 10px;
     transform: translateY(-10px);
   `}
+  
   ${(props) => props.$anchor === 'bottom' && css`
     bottom: 100%;
     margin-bottom: 10px;
     transform: translateY(10px);
   `}
+  
   & > div {
     display: grid;
-    background: #15151f;
-    border-radius: 10px;
+    background: rgba(21, 21, 31, 0.95);
+    backdrop-filter: blur(10px);
+    border-radius: 12px;
     overflow: hidden;
-    padding: 5px;
-    gap: 5px;
+    padding: 8px;
+    gap: 6px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    
+    & > * {
+      opacity: 0;
+      animation: ${itemEntrance} 0.3s forwards;
+      
+      ${props => props.$visible && Array.from({ length: 10 }).map((_, i) => css`
+        &:nth-child(${i + 1}) {
+          animation-delay: ${0.05 * (i + 1)}s;
+        }
+      `)}
+    }
   }
 `
 
 export function Dropdown({ visible, children, anchor: _anchor }: React.PropsWithChildren<{visible: boolean, anchor?: 'bottom' | 'top'}>) {
   const ref = React.useRef<HTMLDivElement>(null!)
+  const [mounted, setMounted] = React.useState(false)
+  
+  React.useEffect(() => {
+    if (visible && !mounted) {
+      setMounted(true)
+    }
+  }, [visible])
 
   const anchor = React.useMemo(
     () => {
@@ -48,6 +96,24 @@ export function Dropdown({ visible, children, anchor: _anchor }: React.PropsWith
     }
     , [children, visible, _anchor],
   )
+  
+  // Close dropdown when clicking outside
+  React.useEffect(() => {
+    if (!visible) return
+    
+    const handleClickOutside = (event: MouseEvent) => {
+      if (ref.current && !ref.current.contains(event.target as Node)) {
+        // We can't directly modify the visible prop, but we can dispatch a custom event
+        // that the parent component can listen for
+        ref.current.dispatchEvent(new CustomEvent('dropdown-close', { bubbles: true }))
+      }
+    }
+    
+    document.addEventListener('mousedown', handleClickOutside)
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+    }
+  }, [visible])
 
   return (
     <Wrapper
@@ -56,7 +122,7 @@ export function Dropdown({ visible, children, anchor: _anchor }: React.PropsWith
       $visible={visible}
     >
       <div>
-        {children}
+        {mounted && children}
       </div>
     </Wrapper>
   )