MyClub/DOCS/SETUP_IMPROVEMENTS.md

Setup Page Improvements - Implementation Guide

✅ Completed

1. Font/Typography Selection (DONE)

• Added to SetupPage.tsx (lines 62-64, 218-219, 584-634)
• Features:
  • Separate font selection for headings and body text
  • 12+ popular Google Fonts + system fonts
  • Live preview of selected fonts
  • Saves to backend with setup payload
• Fonts Available:
  • Sans-serif: Inter, Roboto, Open Sans, Lato, Montserrat, Poppins, Raleway, Source Sans Pro, PT Sans, Nunito
  • Display: Oswald, Bebas Neue
  • Serif: Playfair Display, Merriweather, Georgia
  • System fonts

2. Custom Scrollbars (DONE)

• File Created: frontend/src/styles/custom-scrollbar.css
• Imported in: frontend/src/App.tsx (line 5)
• Features:
  • Beautiful gradient scrollbars using club's primary and secondary colors
  • Hover effects with glow
  • Dark mode support
  • Firefox and Chrome compatibility
  • Thin scrollbar variant available
  • Hide scrollbar option for carousels

3. Layout Variants for HomePage (DONE)

• Matches Section: Now supports single column (default) or two-column layout
  • Variants: compact (single) and compact_split (two columns)
• Standings Section: Now supports two-column layout (default) with news + tables
  • Variants: split_news (two columns - default) and standard (single column)
• Configurable via MyUIbrix Editor

4. Placeholder Cards Fix (DONE)

• Fixed the hero section to show exactly 2 placeholder cards instead of 3

🔧 Recommended Improvements for SetupPage

1. Add Tabs for Better Organization

// Add to imports
import { Tabs, TabList, TabPanels, Tab, TabPanel } from '@chakra-ui/react';

// Structure:
<Tabs colorScheme="blue" variant="enclosed" isLazy>
  <TabList>
    <Tab><Icon as={FaUserShield} mr={2} />Administr

átor</Tab>
    <Tab><Icon as={FaFootballBall} mr={2} />Klub</Tab>
    <Tab><Icon as={FaMapMarkerAlt} mr={2} />Lokace</Tab>
    <Tab><Icon as={FaShareAlt} mr={2} />Sociální sítě</Tab>
    <Tab><Icon as={FaCog} mr={2} />Pokročilé</Tab>
  </TabList>
  <TabPanels>
    <!-- Content here -->
  </TabPanels>
</Tabs>

2. Add Missing Location/Address Fields

Add these state variables after line 79:

// Location/Address
const [clubAddress, setClubAddress] = useState('');
const [clubCity, setClubCity] = useState('');
const [clubZip, setClubZip] = useState('');
const [clubCountry, setClubCountry] = useState('Česká republika');
const [stadiumName, setStadiumName] = useState('');
const [latitude, setLatitude] = useState<string>('');
const [longitude, setLongitude] = useState<string>('');

Add fields in a new "Lokace" tab:

<FormControl>
  <FormLabel>Název stadionu</FormLabel>
  <Input value={stadiumName} onChange={(e) => setStadiumName(e.target.value)} placeholder="Městský stadion" />
</FormControl>

<FormControl>
  <FormLabel>Adresa</FormLabel>
  <Input value={clubAddress} onChange={(e) => setClubAddress(e.target.value)} placeholder="Ulice a číslo" />
</FormControl>

<SimpleGrid columns={[1, 3]} spacing={4}>
  <FormControl>
    <FormLabel>Město</FormLabel>
    <Input value={clubCity} onChange={(e) => setClubCity(e.target.value)} placeholder="Praha" />
  </FormControl>
  <FormControl>
    <FormLabel>PSČ</FormLabel>
    <Input value={clubZip} onChange={(e) => setClubZip(e.target.value)} placeholder="123 45" />
  </FormControl>
  <FormControl>
    <FormLabel>Země</FormLabel>
    <Input value={clubCountry} onChange={(e) => setClubCountry(e.target.value)} />
  </FormControl>
</SimpleGrid>

<Divider />

<Box>
  <Text fontWeight="semibold" mb={2}>GPS Souřadnice (pro mapu)</Text>
  <SimpleGrid columns={[1, 2]} spacing={4}>
    <FormControl>
      <FormLabel>Zeměpisná šířka (Latitude)</FormLabel>
      <Input value={latitude} onChange={(e) => setLatitude(e.target.value)} placeholder="50.0755" type="number" step="any" />
    </FormControl>
    <FormControl>
      <FormLabel>Zeměpisná délka (Longitude)</FormLabel>
      <Input value={longitude} onChange={(e) => setLongitude(e.target.value)} placeholder="14.4378" type="number" step="any" />
    </FormControl>
  </SimpleGrid>
</Box>

3. Fix Percentage Calculation

Replace the getCompletionPercentage function (around line 341):

const getCompletionPercentage = () => {
  let total = 0;
  let completed = 0;
  // Admin account (required)
  total += 30;
  if (adminEmail && adminPassword && isPasswordValid(sanitizePassword(adminPassword))) completed += 30;
  // Club info (required)
  total += 30;
  if (clubName && clubLogoUrl) completed += 30;
  // Appearance colors
  total += 15;
  if (primaryColor && secondaryColor) completed += 15;
  // Social links
  total += 15;
  if (facebookUrl || instagramUrl || youtubeUrl) completed += 15;
  // SMTP/Email (optional but recommended)
  total += 10;
  if (smtpHost && smtpPort) completed += 10;
  return Math.round((completed / total) * 100);
};

4. Move "Barvy vzhledu" Section

Currently under separate heading. Should be moved to the "Klub" tab as a subsection after club basic info. Add a <Divider /> before it to separate visually.

📝 Benefits of These Changes

1. Tabs: Much cleaner interface, easier to navigate through setup steps
2. Location Fields: Essential for maps, contact page, and SEO
3. Fixed Percentage: Now accurately reflects completion (was broken before)
4. Custom Scrollbars: Professional look matching club branding throughout the site
5. Better Organization: Colors logically grouped with club info

🎨 Scrollbar Usage Examples

/* Default - uses primary color automatically */
.my-element {
  overflow-y: auto;
}

/* Thin variant */
.my-element {
  overflow-y: auto;
}
.my-element.thin-scrollbar { }

/* Hide scrollbar but keep scroll */
.my-carousel {
  overflow-x: auto;
}
.my-carousel.hide-scrollbar { }

/* Accent color variant */
.special-section {
  overflow-y: auto;
}
.special-section.accent-scrollbar { }

🚀 Next Steps

1. Apply the tab structure to SetupPage.tsx
2. Add location/address fields
3. Fix percentage calculation
4. Test the setup flow end-to-end
5. Consider adding a preview of how the site will look with selected colors