Redesign Discord card: square card with real logo, fixed at bottom of login page

Author: ddrayko

public/css/style.css

@@ -642,31 +642,27 @@ cap-widget {
 }
 
 .discord-login-card {
+  position: absolute;
+  bottom: 24px;
+  left: 50%;
+  transform: translateX(-50%);
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 10px;
-  margin-top: 16px;
-  padding: 12px 16px;
+  width: 52px;
+  height: 52px;
   background: var(--bg-primary);
   border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  color: var(--text-primary);
-  font-size: 0.9rem;
-  font-weight: 500;
+  border-radius: 12px;
   text-decoration: none;
   transition: all var(--transition);
   cursor: pointer;
 }
 
 .discord-login-card:hover {
   border-color: #5865F2;
-  background: rgba(88, 101, 242, 0.08);
-  color: #5865F2;
-}
-
-.discord-login-card svg {
-  flex-shrink: 0;
+  background: rgba(88, 101, 242, 0.1);
+  transform: translateX(-50%) scale(1.05);
 }
 
 .auth-error {

public/js/app.js

@@ -663,12 +663,13 @@ function renderLoginPage() {
           <div class="auth-footer">
             Don't have an account? <a href="/signup" id="go-register">Create one</a>
           </div>
-
-          <a href="https://discord.zero-host.org" target="_blank" class="discord-login-card">
-            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5z"/><path d="M13 11.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5z"/><path d="M18 3a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3h12z"/><path d="M7 18v-1a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v1"/><path d="M6 16v1a3 3 0 0 0 3 3h6a3 3 0 0 0 3-3v-1"/><path d="M9 13h6"/><circle cx="12" cy="10" r="1"/></svg>
-            <span>Sign in with Discord</span>
-          </a>
         </div>
+
+        <a href="https://discord.zero-host.org" target="_blank" class="discord-login-card">
+          <svg width="28" height="28" viewBox="0 0 127.14 96.36" fill="#5865F2">
+            <path d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"/>
+          </svg>
+        </a>
       </div>
     </div>
   `;