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 1 <script lang="ts"> 2 + import { Button, Modal } from '$lib/components/ui'; 3 + 2 4 interface Props { 3 5 onReplayTutorial?: () => void; 4 6 } ··· 9 11 10 12 <footer class="site-footer"> 11 13 <div class="footer-links"> 12 - <button onclick={onReplayTutorial}> 14 + <Button variant="secondary" size="small" onclick={onReplayTutorial}> 13 15 Replay Tutorial 14 - </button> 16 + </Button> 15 17 <a href="/rules">Rules</a> 16 18 </div> 17 19 <div class="footer-credit"> ··· 25 27 </div> 26 28 </footer> 27 29 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> 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> 51 49 </div> 52 50 </div> 53 - {/if} 51 + </Modal> 54 52 55 53 <style> 56 54 .footer-credit { ··· 136 134 justify-content: flex-end; 137 135 padding-top: 1rem; 138 136 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 137 } 158 138 </style>
+3 -31
src/lib/components/Header.svelte
··· 2 2 import { onMount } from 'svelte'; 3 3 import { fetchUserProfile, type UserProfile } from '$lib/atproto-client'; 4 4 import ProfileDropdown from './ProfileDropdown.svelte'; 5 + import { Card } from '$lib/components/ui'; 5 6 6 7 type Session = { did: string } | null; 7 8 ··· 17 18 </script> 18 19 19 20 <div class="header-wrapper"> 20 - <header class="header"> 21 + <Card variant="large" class="header"> 21 22 <div class="header-content"> 22 23 <a href="/" class="logo">☁️ Cloud Go ☁️</a> 23 24 ··· 36 37 {/if} 37 38 </div> 38 39 </div> 39 - </header> 40 + </Card> 40 41 </div> 41 42 42 43 <style> ··· 47 48 } 48 49 49 50 .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 51 position: relative; 65 52 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 53 } 82 54 83 55 .header-content {