Skip to content

Commit bd90366

Browse files
bokikoclaude
bokiko
and
claude
committed
UI improvements: wider window, better spacing and typography
Changes: - Increased window width from 440px to 580px (more spacious layout) - Applied consistent 8px grid spacing (8, 16, 24, 32px increments) - Improved typography hierarchy: - Title: 28pt → 32pt - Section headers: 13pt → 14pt - Body text: 12pt → 13pt - Result ping values: 22pt → 24pt - Updated result cards with "★ BEST" badge - Used short game names (OW2, CoD, CS2, BF6, MR) to fit 5 games - Widened results canvas from 380px to 500px - Version bump to 1.12.0 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
1 parent 6a5ff0a commit bd90366

2 files changed

Lines changed: 62 additions & 62 deletions

File tree

‎desktop/src/config.py‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
}
1313

1414
# App Version
15-
APP_VERSION = "1.11.0"
15+
APP_VERSION = "1.12.0"
1616

1717
# Ping Configuration
1818
PING_COUNT = 10 # Number of pings per server

‎desktop/src/gui.py‎

Lines changed: 61 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -298,7 +298,7 @@ def __init__(self, parent, result, is_best=False, **kwargs):
298298

299299
self.configure(highlightthickness=0)
300300

301-
inner = tk.Frame(self, bg=bg, padx=20, pady=16)
301+
inner = tk.Frame(self, bg=bg, padx=24, pady=16)
302302
inner.pack(fill=tk.X)
303303

304304
# Left side - server info
@@ -307,17 +307,17 @@ def __init__(self, parent, result, is_best=False, **kwargs):
307307

308308
# Best badge
309309
if is_best:
310-
badge = tk.Label(left, text="RECOMMENDED",
311-
font=get_font(9, "bold"),
310+
badge = tk.Label(left, text="★ BEST",
311+
font=get_font(10, "bold"),
312312
bg=COLORS["success"], fg="#ffffff",
313-
padx=8, pady=2)
314-
badge.pack(anchor=tk.W, pady=(0, 6))
313+
padx=10, pady=3)
314+
badge.pack(anchor=tk.W, pady=(0, 8))
315315

316316
# Server name
317317
is_failed = result.packet_loss >= 100
318318
name_color = COLORS["text_dim"] if is_failed else COLORS["text"]
319319
tk.Label(left, text=result.server_location,
320-
font=get_font(15, "bold"),
320+
font=get_font(16, "bold"),
321321
bg=bg, fg=name_color).pack(anchor=tk.W)
322322

323323
# Right side - stats
@@ -326,7 +326,7 @@ def __init__(self, parent, result, is_best=False, **kwargs):
326326

327327
if is_failed:
328328
tk.Label(right, text="Unreachable",
329-
font=get_font(14),
329+
font=get_font(15),
330330
bg=bg, fg=COLORS["error"]).pack(anchor=tk.E)
331331
else:
332332
# Ping value
@@ -344,10 +344,10 @@ def __init__(self, parent, result, is_best=False, **kwargs):
344344
ping_frame.pack(anchor=tk.E)
345345

346346
tk.Label(ping_frame, text=f"{result.ping_avg:.0f}",
347-
font=get_font(22, "bold"),
347+
font=get_font(24, "bold"),
348348
bg=bg, fg=ping_color).pack(side=tk.LEFT)
349349
tk.Label(ping_frame, text=" ms",
350-
font=get_font(12),
350+
font=get_font(13),
351351
bg=bg, fg=COLORS["text_muted"]).pack(side=tk.LEFT, pady=(6, 0))
352352

353353
# Jitter and packet loss
@@ -356,7 +356,7 @@ def __init__(self, parent, result, is_best=False, **kwargs):
356356
stats_text += f" · {result.packet_loss:.0f}% loss"
357357

358358
tk.Label(right, text=stats_text,
359-
font=get_font(11),
359+
font=get_font(12),
360360
bg=bg, fg=COLORS["text_dim"]).pack(anchor=tk.E)
361361

362362

@@ -366,8 +366,8 @@ class PingDiffApp:
366366
def __init__(self):
367367
self.root = tk.Tk()
368368
self.root.title("PingDiff")
369-
self.root.geometry("440x880")
370-
self.root.minsize(400, 820)
369+
self.root.geometry("580x820")
370+
self.root.minsize(520, 780)
371371
self.root.configure(bg=COLORS["bg"])
372372

373373
# Try to set icon
@@ -395,9 +395,9 @@ def __init__(self):
395395
self._load_data()
396396

397397
def _create_ui(self):
398-
# Main container with padding
398+
# Main container with padding (32px grid)
399399
main = tk.Frame(self.root, bg=COLORS["bg"])
400-
main.pack(fill=tk.BOTH, expand=True, padx=28, pady=24)
400+
main.pack(fill=tk.BOTH, expand=True, padx=32, pady=32)
401401

402402
# Header
403403
self._create_header(main)
@@ -435,51 +435,51 @@ def _create_header(self, parent):
435435
title_row.pack(fill=tk.X)
436436

437437
tk.Label(title_row, text="PingDiff",
438-
font=get_font(28, "bold"),
438+
font=get_font(32, "bold"),
439439
bg=COLORS["bg"], fg=COLORS["text"]).pack(side=tk.LEFT)
440440

441441
# Version badge
442442
version_badge = tk.Label(title_row, text=f"v{APP_VERSION}",
443-
font=get_font(10),
443+
font=get_font(11),
444444
bg=COLORS["bg_tertiary"], fg=COLORS["text_muted"],
445-
padx=10, pady=3)
446-
version_badge.pack(side=tk.LEFT, padx=(12, 0), pady=(6, 0))
445+
padx=12, pady=4)
446+
version_badge.pack(side=tk.LEFT, padx=(16, 0), pady=(8, 0))
447447

448448
# Subtitle
449449
tk.Label(header, text="Game Server Connection Tester",
450-
font=get_font(13),
451-
bg=COLORS["bg"], fg=COLORS["text_muted"]).pack(anchor=tk.W, pady=(4, 0))
450+
font=get_font(14),
451+
bg=COLORS["bg"], fg=COLORS["text_muted"]).pack(anchor=tk.W, pady=(8, 0))
452452

453453
def _create_isp_section(self, parent):
454-
card = ModernCard(parent, padx=20, pady=16)
455-
card.pack(fill=tk.X, pady=(0, 20))
454+
card = ModernCard(parent, padx=24, pady=20)
455+
card.pack(fill=tk.X, pady=(0, 24))
456456

457457
# ISP Row
458458
isp_row = tk.Frame(card, bg=COLORS["card"])
459459
isp_row.pack(fill=tk.X)
460460

461461
tk.Label(isp_row, text="Your ISP",
462-
font=get_font(12),
462+
font=get_font(13),
463463
bg=COLORS["card"], fg=COLORS["text_dim"]).pack(side=tk.LEFT)
464464

465465
self.isp_label = tk.Label(isp_row, text="Detecting...",
466-
font=get_font(13, "bold"),
466+
font=get_font(14, "bold"),
467467
bg=COLORS["card"], fg=COLORS["text"])
468468
self.isp_label.pack(side=tk.RIGHT)
469469

470470
# Separator
471-
tk.Frame(card, bg=COLORS["separator"], height=1).pack(fill=tk.X, pady=12)
471+
tk.Frame(card, bg=COLORS["separator"], height=1).pack(fill=tk.X, pady=16)
472472

473473
# Location Row
474474
loc_row = tk.Frame(card, bg=COLORS["card"])
475475
loc_row.pack(fill=tk.X)
476476

477477
tk.Label(loc_row, text="Location",
478-
font=get_font(12),
478+
font=get_font(13),
479479
bg=COLORS["card"], fg=COLORS["text_dim"]).pack(side=tk.LEFT)
480480

481481
self.location_label = tk.Label(loc_row, text="...",
482-
font=get_font(13),
482+
font=get_font(14),
483483
bg=COLORS["card"], fg=COLORS["text_secondary"])
484484
self.location_label.pack(side=tk.RIGHT)
485485

@@ -488,25 +488,25 @@ def _create_game_section(self, parent):
488488
section.pack(fill=tk.X, pady=(0, 16))
489489

490490
tk.Label(section, text="Select Game",
491-
font=get_font(13, "bold"),
492-
bg=COLORS["bg"], fg=COLORS["text"]).pack(anchor=tk.W, pady=(0, 10))
491+
font=get_font(14, "bold"),
492+
bg=COLORS["bg"], fg=COLORS["text"]).pack(anchor=tk.W, pady=(0, 12))
493493

494-
# Game buttons
494+
# Game buttons container with wrap support
495495
btn_frame = tk.Frame(section, bg=COLORS["bg"])
496496
btn_frame.pack(fill=tk.X)
497497

498498
self.game_buttons = {}
499499
for game_id, game_info in GAMES.items():
500500
btn = tk.Label(
501501
btn_frame,
502-
text=game_info["name"],
503-
font=get_font(10, "bold"),
502+
text=game_info["short"], # Use short names to fit all games
503+
font=get_font(11, "bold"),
504504
bg=COLORS["bg_secondary"],
505505
fg=COLORS["text_muted"],
506-
padx=12, pady=8,
506+
padx=14, pady=10,
507507
cursor="hand2"
508508
)
509-
btn.pack(side=tk.LEFT, padx=(0, 6))
509+
btn.pack(side=tk.LEFT, padx=(0, 8))
510510
btn.bind("<Button-1>", lambda e, g=game_id: self._select_game(g))
511511
self.game_buttons[game_id] = btn
512512

@@ -543,11 +543,11 @@ def _update_footer_label(self):
543543

544544
def _create_region_section(self, parent):
545545
section = tk.Frame(parent, bg=COLORS["bg"])
546-
section.pack(fill=tk.X, pady=(0, 20))
546+
section.pack(fill=tk.X, pady=(0, 24))
547547

548548
tk.Label(section, text="Select Region",
549-
font=get_font(13, "bold"),
550-
bg=COLORS["bg"], fg=COLORS["text"]).pack(anchor=tk.W, pady=(0, 10))
549+
font=get_font(14, "bold"),
550+
bg=COLORS["bg"], fg=COLORS["text"]).pack(anchor=tk.W, pady=(0, 12))
551551

552552
# Region buttons
553553
btn_frame = tk.Frame(section, bg=COLORS["bg"])
@@ -558,10 +558,10 @@ def _create_region_section(self, parent):
558558
btn = tk.Label(
559559
btn_frame,
560560
text=region,
561-
font=get_font(11, "bold"),
561+
font=get_font(12, "bold"),
562562
bg=COLORS["bg_secondary"],
563563
fg=COLORS["text_muted"],
564-
padx=16, pady=8,
564+
padx=20, pady=10,
565565
cursor="hand2"
566566
)
567567
btn.pack(side=tk.LEFT, padx=(0, 8))
@@ -587,12 +587,12 @@ def _create_progress_section(self, parent):
587587
section = tk.Frame(parent, bg=COLORS["bg"])
588588
section.pack(pady=16)
589589

590-
self.progress_ring = GlowingRing(section, size=200)
590+
self.progress_ring = GlowingRing(section, size=180)
591591
self.progress_ring.pack()
592592

593593
def _create_test_button(self, parent):
594594
btn_frame = tk.Frame(parent, bg=COLORS["bg"])
595-
btn_frame.pack(pady=(8, 24))
595+
btn_frame.pack(pady=(8, 16))
596596

597597
self.test_button = PillButton(
598598
btn_frame,
@@ -610,14 +610,14 @@ def _create_results_section(self, parent):
610610

611611
# Header row
612612
header = tk.Frame(section, bg=COLORS["bg"])
613-
header.pack(fill=tk.X, pady=(0, 12))
613+
header.pack(fill=tk.X, pady=(0, 16))
614614

615615
tk.Label(header, text="Results",
616-
font=get_font(15, "bold"),
616+
font=get_font(16, "bold"),
617617
bg=COLORS["bg"], fg=COLORS["text"]).pack(side=tk.LEFT)
618618

619619
self.results_count = tk.Label(header, text="",
620-
font=get_font(12),
620+
font=get_font(13),
621621
bg=COLORS["bg"], fg=COLORS["text_muted"])
622622
self.results_count.pack(side=tk.RIGHT)
623623

@@ -626,14 +626,14 @@ def _create_results_section(self, parent):
626626
canvas_frame.pack(fill=tk.BOTH, expand=True)
627627

628628
canvas = tk.Canvas(canvas_frame, bg=COLORS["bg"],
629-
highlightthickness=0, height=160)
629+
highlightthickness=0, height=140)
630630
scrollbar = ttk.Scrollbar(canvas_frame, orient="vertical", command=canvas.yview)
631631

632632
self.results_frame = tk.Frame(canvas, bg=COLORS["bg"])
633633
self.results_frame.bind("<Configure>",
634634
lambda e: canvas.configure(scrollregion=canvas.bbox("all")))
635635

636-
canvas.create_window((0, 0), window=self.results_frame, anchor="nw", width=380)
636+
canvas.create_window((0, 0), window=self.results_frame, anchor="nw", width=500)
637637
canvas.configure(yscrollcommand=scrollbar.set)
638638

639639
canvas.pack(side=tk.LEFT, fill=tk.BOTH, expand=True)
@@ -647,43 +647,43 @@ def _scroll(event):
647647
# Empty state
648648
self.empty_label = tk.Label(self.results_frame,
649649
text="Run a test to see results",
650-
font=get_font(13),
650+
font=get_font(14),
651651
bg=COLORS["bg"], fg=COLORS["text_dim"])
652-
self.empty_label.pack(pady=40)
652+
self.empty_label.pack(pady=32)
653653

654654
def _create_settings_section(self, parent):
655-
card = ModernCard(parent, padx=20, pady=16)
656-
card.pack(fill=tk.X, pady=(20, 0))
655+
card = ModernCard(parent, padx=24, pady=20)
656+
card.pack(fill=tk.X, pady=(16, 0))
657657

658658
# Settings header
659659
tk.Label(card, text="Settings",
660-
font=get_font(13, "bold"),
661-
bg=COLORS["card"], fg=COLORS["text"]).pack(anchor=tk.W, pady=(0, 12))
660+
font=get_font(14, "bold"),
661+
bg=COLORS["card"], fg=COLORS["text"]).pack(anchor=tk.W, pady=(0, 16))
662662

663663
# Share toggle row
664664
share_row = tk.Frame(card, bg=COLORS["card"])
665665
share_row.pack(fill=tk.X)
666666

667667
tk.Label(share_row, text="Share results anonymously",
668-
font=get_font(12),
668+
font=get_font(13),
669669
bg=COLORS["card"], fg=COLORS["text_secondary"]).pack(side=tk.LEFT)
670670

671671
self.share_toggle = AppleToggle(share_row, self.share_results_var,
672672
command=self._on_share_toggle)
673673
self.share_toggle.pack(side=tk.RIGHT)
674674

675675
# Data folder row
676-
tk.Frame(card, bg=COLORS["separator"], height=1).pack(fill=tk.X, pady=12)
676+
tk.Frame(card, bg=COLORS["separator"], height=1).pack(fill=tk.X, pady=16)
677677

678678
folder_row = tk.Frame(card, bg=COLORS["card"])
679679
folder_row.pack(fill=tk.X)
680680

681681
tk.Label(folder_row, text="App data",
682-
font=get_font(12),
682+
font=get_font(13),
683683
bg=COLORS["card"], fg=COLORS["text_dim"]).pack(side=tk.LEFT)
684684

685685
folder_link = tk.Label(folder_row, text="Open Folder",
686-
font=get_font(12),
686+
font=get_font(13),
687687
bg=COLORS["card"], fg=COLORS["accent"],
688688
cursor="hand2")
689689
folder_link.pack(side=tk.RIGHT)
@@ -701,14 +701,14 @@ def _open_data_folder(self, event=None):
701701

702702
def _create_footer(self, parent):
703703
footer = tk.Frame(parent, bg=COLORS["bg"])
704-
footer.pack(fill=tk.X, pady=(20, 0))
704+
footer.pack(fill=tk.X, pady=(16, 0))
705705

706706
# Dashboard button
707707
self.dashboard_btn = PillButton(
708708
footer,
709709
text="Open Dashboard",
710710
command=self._open_dashboard,
711-
width=140,
711+
width=150,
712712
height=40,
713713
style="secondary"
714714
)
@@ -719,16 +719,16 @@ def _create_footer(self, parent):
719719
footer,
720720
text="GitHub",
721721
command=lambda: webbrowser.open("https://github.com/bokiko/pingdiff"),
722-
width=90,
722+
width=100,
723723
height=40,
724724
style="secondary"
725725
)
726-
github_btn.pack(side=tk.LEFT, padx=(10, 0))
726+
github_btn.pack(side=tk.LEFT, padx=(12, 0))
727727

728728
# Game label (dynamic)
729729
game_name = GAMES.get(self.current_game, {}).get("name", "Unknown")
730730
self.game_label = tk.Label(footer, text=game_name,
731-
font=get_font(11),
731+
font=get_font(12),
732732
bg=COLORS["bg"], fg=COLORS["text_dim"])
733733
self.game_label.pack(side=tk.RIGHT)
734734

0 commit comments

Comments
 (0)