goose.art / cloud-go
extremely claude-assisted go game based on atproto! working on cleaning up and giving a more unique design, still has a bit of a slop vibe to it.
fork atom

Refactor Header and Footer to use unified UI components

Header:
- Replace custom cloud card styling with Card component (variant="large")
- Remove duplicate CSS for cloud effects
- Keep only header-specific positioning and layout styles

Footer:
- Replace custom buttons with Button components (secondary, primary)
- Replace custom modal with Modal component
- Remove duplicate button and modal CSS

This reduces code duplication and ensures consistent styling across
the application using the unified component library.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

goose.art 3c8358e8 cd213d30

+27 -75
unified split
+24 -44
src/lib/components/Footer.svelte
··· 1 <script lang="ts"> 2 interface Props { 3 onReplayTutorial?: () => void; 4 } ··· 9 10 <footer class="site-footer"> 11 <div class="footer-links"> 12 - <button onclick={onReplayTutorial}> 13 Replay Tutorial 14 - </button> 15 <a href="/rules">Rules</a> 16 </div> 17 <div class="footer-credit"> ··· 25 </div> 26 </footer> 27 28 - {#if showClaudeModal} 29 - <div class="modal-overlay" onclick={() => showClaudeModal = false} role="button" tabindex="0"> 30 - <div class="modal-content cloud-card" onclick={(e) => e.stopPropagation()} role="dialog" aria-modal="true"> 31 - <div class="modal-inner"> 32 - <div class="modal-header"> 33 - <h2>About AI in Cloud Go</h2> 34 - <button class="modal-close" onclick={() => showClaudeModal = false} aria-label="Close">×</button> 35 - </div> 36 - <div class="modal-body"> 37 - <p> 38 - I know that AI is a hot issue right now, and I completely understand where the skeptics are coming from. 39 - This is my first time experimenting with making apps this way and thought it was a cool thing I wanted to share. 40 - </p> 41 - <p> 42 - I understand if that's a dealbreaker for you and you want to avoid using it. 43 - </p> 44 - </div> 45 - <div class="modal-footer"> 46 - <button class="btn-primary" onclick={() => showClaudeModal = false}> 47 - Got it 48 - </button> 49 - </div> 50 - </div> 51 </div> 52 </div> 53 - {/if} 54 55 <style> 56 .footer-credit { ··· 136 justify-content: flex-end; 137 padding-top: 1rem; 138 border-top: 1px solid var(--color-border); 139 - } 140 - 141 - .btn-primary { 142 - padding: 0.75rem 1.5rem; 143 - border: none; 144 - border-radius: 0.5rem; 145 - cursor: pointer; 146 - font-size: 1rem; 147 - transition: all 0.2s; 148 - font-weight: 500; 149 - background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%); 150 - color: white; 151 - box-shadow: 0 2px 8px rgba(242, 197, 160, 0.3); 152 - } 153 - 154 - .btn-primary:hover { 155 - transform: translateY(-1px); 156 - box-shadow: 0 4px 12px rgba(242, 197, 160, 0.4); 157 } 158 </style>
··· 1 <script lang="ts"> 2 + import { Button, Modal } from '$lib/components/ui'; 3 + 4 interface Props { 5 onReplayTutorial?: () => void; 6 } ··· 11 12 <footer class="site-footer"> 13 <div class="footer-links"> 14 + <Button variant="secondary" size="small" onclick={onReplayTutorial}> 15 Replay Tutorial 16 + </Button> 17 <a href="/rules">Rules</a> 18 </div> 19 <div class="footer-credit"> ··· 27 </div> 28 </footer> 29 30 + <Modal isOpen={showClaudeModal} onClose={() => showClaudeModal = false}> 31 + <div class="modal-inner"> 32 + <div class="modal-header"> 33 + <h2>About AI in Cloud Go</h2> 34 + <button class="modal-close" onclick={() => showClaudeModal = false} aria-label="Close">×</button> 35 + </div> 36 + <div class="modal-body"> 37 + <p> 38 + I know that AI is a hot issue right now, and I completely understand where the skeptics are coming from. 39 + This is my first time experimenting with making apps this way and thought it was a cool thing I wanted to share. 40 + </p> 41 + <p> 42 + I understand if that's a dealbreaker for you and you want to avoid using it. 43 + </p> 44 + </div> 45 + <div class="modal-footer"> 46 + <Button variant="primary" onclick={() => showClaudeModal = false}> 47 + Got it 48 + </Button> 49 </div> 50 </div> 51 + </Modal> 52 53 <style> 54 .footer-credit { ··· 134 justify-content: flex-end; 135 padding-top: 1rem; 136 border-top: 1px solid var(--color-border); 137 } 138 </style>
+3 -31
src/lib/components/Header.svelte
··· 2 import { onMount } from 'svelte'; 3 import { fetchUserProfile, type UserProfile } from '$lib/atproto-client'; 4 import ProfileDropdown from './ProfileDropdown.svelte'; 5 6 type Session = { did: string } | null; 7 ··· 17 </script> 18 19 <div class="header-wrapper"> 20 - <header class="header"> 21 <div class="header-content"> 22 <a href="/" class="logo">☁️ Cloud Go ☁️</a> 23 ··· 36 {/if} 37 </div> 38 </div> 39 - </header> 40 </div> 41 42 <style> ··· 47 } 48 49 .header { 50 - background: linear-gradient( 51 - 135deg, 52 - rgba(255, 255, 255, 0.95) 0%, 53 - rgba(245, 248, 250, 0.9) 50%, 54 - rgba(232, 239, 244, 0.85) 100% 55 - ); 56 - border: none; 57 - border-radius: 2rem 2.5rem 2rem 2.2rem; 58 - box-shadow: 59 - 0 0 20px rgba(255, 255, 255, 0.8), 60 - 0 0 40px rgba(255, 255, 255, 0.4), 61 - 0 8px 32px rgba(90, 122, 144, 0.12), 62 - inset 0 1px 1px rgba(255, 255, 255, 0.9); 63 - backdrop-filter: blur(8px); 64 position: relative; 65 z-index: 100; 66 - } 67 - 68 - .header::before { 69 - content: ''; 70 - position: absolute; 71 - inset: -2px; 72 - border-radius: inherit; 73 - background: linear-gradient( 74 - 135deg, 75 - rgba(255, 255, 255, 0.6) 0%, 76 - rgba(212, 229, 239, 0.3) 50%, 77 - rgba(255, 255, 255, 0.4) 100% 78 - ); 79 - filter: blur(4px); 80 - z-index: -1; 81 } 82 83 .header-content {
··· 2 import { onMount } from 'svelte'; 3 import { fetchUserProfile, type UserProfile } from '$lib/atproto-client'; 4 import ProfileDropdown from './ProfileDropdown.svelte'; 5 + import { Card } from '$lib/components/ui'; 6 7 type Session = { did: string } | null; 8 ··· 18 </script> 19 20 <div class="header-wrapper"> 21 + <Card variant="large" class="header"> 22 <div class="header-content"> 23 <a href="/" class="logo">☁️ Cloud Go ☁️</a> 24 ··· 37 {/if} 38 </div> 39 </div> 40 + </Card> 41 </div> 42 43 <style> ··· 48 } 49 50 .header { 51 position: relative; 52 z-index: 100; 53 } 54 55 .header-content {