Skip to content

Add modern styling and rounded buttons to GUI components #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
lsalab merged 1 commit into from
Nov 13, 2025
Merged

Add modern styling and rounded buttons to GUI components #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 40 additions & 9 deletions pwmanager/gui/dialogs/ask_passphrase.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,12 @@
"""

import tkinter as tk
import tkinter.ttk as ttk

from pwmanager.gui.styles import (
configure_dialog_styles, get_entry_style_config, StylingColors
)
from pwmanager.gui.rounded_button import RoundedButton


class AskPassphrase:
Expand All @@ -14,17 +20,42 @@ class AskPassphrase:

def __init__(self, parent):
dialog_window = self.top = tk.Toplevel(parent)
dialog_window.title('Unlock Password Manager')
dialog_window.resizable(width=False, height=False)
tk.Label(dialog_window, text="Enter passphrase:").grid(
row=0,
column=0,
padx=2,
pady=2

# Apply modern styling
style = ttk.Style()
configure_dialog_styles(dialog_window, style)
entry_style = get_entry_style_config()

# Override label font size for this dialog
style.configure('Dialog.TLabel', font=('Segoe UI', 11))

# Main frame
main_frame = ttk.Frame(dialog_window, style='Dialog.TFrame', padding=30)
main_frame.grid(row=0, column=0, sticky=(tk.W, tk.E, tk.N, tk.S))

ttk.Label(main_frame, text="Enter passphrase:", style='Dialog.TLabel').grid(
row=0, column=0, padx=5, pady=(0, 10), sticky=tk.W
)
passphrase_entry = self.passphrase_entry = tk.Entry(main_frame, width=35, show="*", **entry_style)
passphrase_entry.grid(row=1, column=0, padx=5, pady=10, sticky=(tk.W, tk.E))
ok_button = self.ok_button = RoundedButton(
main_frame,
text="OK",
command=self.ok,
bg_color=StylingColors.ACCENT.value,
hover_color=StylingColors.HOVER.value,
canvas_bg=StylingColors.BG.value,
width=100
)
passphrase_entry = self.passphrase_entry = tk.Entry(dialog_window, width=32, show="*")
passphrase_entry.grid(row=1, column=0, padx=2, pady=2)
ok_button = self.ok_button = tk.Button(dialog_window, text="OK", command=self.ok)
ok_button.grid(row=4, column=0, columnspan=2, padx=2, pady=2)
ok_button.grid(row=2, column=0, padx=5, pady=(10, 0))

# Configure grid weights
main_frame.columnconfigure(0, weight=1)
dialog_window.columnconfigure(0, weight=1)
dialog_window.rowconfigure(0, weight=1)

self.__passphrase = None
passphrase_entry.focus_set()
passphrase_entry.bind('<Return>', self.ok)
Expand Down
87 changes: 46 additions & 41 deletions pwmanager/gui/dialogs/initial_config.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,13 @@
"""

import tkinter as tk
import tkinter.ttk as ttk

from pwmanager.datastore import initialize_datastore
from pwmanager.gui.styles import (
configure_dialog_styles, get_entry_style_config, StylingColors
)
from pwmanager.gui.rounded_button import RoundedButton


class InitialConfig:
Expand All @@ -17,54 +22,54 @@ class InitialConfig:
def __init__(self, parent, store_path=None):
self.store_path = store_path if store_path else './data/store.pws'
dialog_window = self.top = tk.Toplevel(parent)
dialog_window.title('Initialize Password Manager')
dialog_window.resizable(width=False, height=False)
tk.Label(dialog_window, text='Datastore must be initialized and locked').grid(
row=0,
column=0,
columnspan=2,
padx=2,
pady=2
)
tk.Label(dialog_window, text="Enter passphrase:").grid(
row=1,
column=0,
padx=2,
sticky=tk.W

# Apply modern styling
style = ttk.Style()
configure_dialog_styles(dialog_window, style)
entry_style = get_entry_style_config()

# Main frame
main_frame = ttk.Frame(dialog_window, style='Dialog.TFrame', padding=30)
main_frame.grid(row=0, column=0, sticky=(tk.W, tk.E, tk.N, tk.S))

ttk.Label(main_frame, text='Datastore must be initialized and locked',
style='Dialog.TLabel', font=('Segoe UI', 11, 'bold')).grid(
row=0, column=0, columnspan=2, padx=5, pady=(0, 20), sticky=tk.W
)
passphrase_entry1 = self.passphrase_entry1 = tk.Entry(dialog_window, width=32, show="*")
passphrase_entry1.grid(
row=1,
column=1,
sticky=tk.E
ttk.Label(main_frame, text="Enter passphrase:", style='Dialog.TLabel').grid(
row=1, column=0, padx=5, pady=8, sticky=tk.W
)
passphrase_entry1 = self.passphrase_entry1 = tk.Entry(main_frame, width=35, show="*", **entry_style)
passphrase_entry1.grid(row=1, column=1, padx=5, pady=8, sticky=(tk.W, tk.E))
passphrase_entry1.bind('<Key>', self.verify)
tk.Label(dialog_window, text="Re-enter passphrase:").grid(
row=2,
column=0,
padx=2,
sticky=tk.W
)
passphrase_entry2 = self.passphrase_entry2 = tk.Entry(dialog_window, width=32, show="*")
passphrase_entry2.grid(
row=2,
column=1,
sticky=tk.E
ttk.Label(main_frame, text="Re-enter passphrase:", style='Dialog.TLabel').grid(
row=2, column=0, padx=5, pady=8, sticky=tk.W
)
passphrase_entry2 = self.passphrase_entry2 = tk.Entry(main_frame, width=35, show="*", **entry_style)
passphrase_entry2.grid(row=2, column=1, padx=5, pady=8, sticky=(tk.W, tk.E))
passphrase_entry2.bind('<Key>', self.verify)
status_label = self.status_label = tk.Label(dialog_window, text='', fg='red')
status_label.grid(
row=3,
column=0,
columnspan=2
)
ok_button = self.ok_button = tk.Button(dialog_window, text="OK", command=self.ok, state=tk.DISABLED)
ok_button.grid(
row=4,
column=0,
columnspan=2,
padx=2,
pady=2
status_label = self.status_label = tk.Label(main_frame, text='', fg=StylingColors.ERROR.value,
bg=StylingColors.BG.value, font=('Segoe UI', 9))
status_label.grid(row=3, column=0, columnspan=2, padx=5, pady=5, sticky=tk.W)
ok_button = self.ok_button = RoundedButton(
main_frame,
text="OK",
command=self.ok,
bg_color=StylingColors.ACCENT.value,
hover_color=StylingColors.HOVER.value,
canvas_bg=StylingColors.BG.value,
state='disabled',
width=120
)
ok_button.grid(row=4, column=0, columnspan=2, padx=5, pady=(15, 0))

# Configure grid weights
main_frame.columnconfigure(1, weight=1)
dialog_window.columnconfigure(0, weight=1)
dialog_window.rowconfigure(0, weight=1)

dialog_window.grab_set()
dialog_window.attributes('-topmost', True)
dialog_window.protocol('WM_DELETE_WINDOW', self.ok)
Expand Down
84 changes: 65 additions & 19 deletions pwmanager/gui/dialogs/password_dialog.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,46 +5,92 @@
"""

import tkinter as tk
import tkinter.ttk as ttk

from pwmanager.crypto import generate_random_password
from pwmanager.gui.styles import (
configure_dialog_styles, StylingColors
)
from pwmanager.gui.rounded_button import RoundedButton


class PasswordDialog: # pylint: disable=too-many-instance-attributes
"""Password information dialog"""

def __init__(self, parent, **kwargs):
dialog_window = self.top = tk.Toplevel(master=parent)
dialog_window.title('Password Entry')
dialog_window.resizable(width=False, height=False)

# Apply modern styling
style = ttk.Style()
configure_dialog_styles(dialog_window, style)

# Main frame
main_frame = ttk.Frame(dialog_window, style='Dialog.TFrame', padding=20)
main_frame.grid(row=0, column=0, sticky=(tk.W, tk.E, tk.N, tk.S))

self.__site = tk.StringVar(master=dialog_window)
self.__username = tk.StringVar(master=dialog_window)
self.__password = tk.StringVar(master=dialog_window)
self.__ok_pressed = False
tk.Label(master=dialog_window, text='Site:').grid(
row=0, column=0,
padx=2, pady=2

# Site field
ttk.Label(main_frame, text='Site:', style='Dialog.TLabel').grid(
row=0, column=0, padx=5, pady=8, sticky=tk.W
)
site_entry = self.site_entry = tk.Entry(master=dialog_window, width=32, textvariable=self.__site)
site_entry.grid(row=0, column=1, columnspan=2, padx=2, pady=2)
site_entry = self.site_entry = ttk.Entry(main_frame, width=35, textvariable=self.__site, style='Dialog.TEntry')
site_entry.grid(row=0, column=1, padx=5, pady=8, sticky=(tk.W, tk.E))
site_entry.bind('<Return>', self.ok)
tk.Label(master=dialog_window, text='Username:').grid(
row=1, column=0,
padx=2, pady=2

# Username field
ttk.Label(main_frame, text='Username:', style='Dialog.TLabel').grid(
row=1, column=0, padx=5, pady=8, sticky=tk.W
)
username_entry = self.username_entry = tk.Entry(master=dialog_window, width=32, textvariable=self.__username)
username_entry.grid(row=1, column=1, columnspan=2, padx=2, pady=2)
username_entry = self.username_entry = ttk.Entry(main_frame, width=35, textvariable=self.__username, style='Dialog.TEntry')
username_entry.grid(row=1, column=1, padx=5, pady=8, sticky=(tk.W, tk.E))
username_entry.bind('<Return>', self.ok)
tk.Label(master=dialog_window, text='Password:').grid(
row=2, column=0,
padx=2, pady=2

# Password field
ttk.Label(main_frame, text='Password:', style='Dialog.TLabel').grid(
row=2, column=0, padx=5, pady=8, sticky=tk.W
)
password_entry = self.password_entry = tk.Entry(master=dialog_window, width=32, textvariable=self.__password)
password_entry.grid(row=2, column=1, columnspan=2, padx=2, pady=2)
password_entry = self.password_entry = ttk.Entry(main_frame, width=35, textvariable=self.__password,
style='Dialog.TEntry', show='*')
password_entry.grid(row=2, column=1, padx=5, pady=8, sticky=(tk.W, tk.E))
password_entry.bind('<Return>', self.ok)
password_entry.bind('<FocusIn>', lambda evt: self.password_entry.config(show=''))
password_entry.bind('<FocusOut>', lambda evt: self.password_entry.config(show='*'))
ok_button = self.ok_button = tk.Button(dialog_window, text="OK", command=self.ok)
ok_button.grid(row=3, column=2, columnspan=1, padx=10, pady=2, sticky='ew')
generate_button = self.generate_button = tk.Button(dialog_window, text="Generate", command=self.__generate)
generate_button.grid(row=3, column=1, columnspan=1, padx=2, pady=2, sticky='ew')

# Button frame
button_frame = ttk.Frame(main_frame, style='Dialog.TFrame')
button_frame.grid(row=3, column=0, columnspan=2, pady=15, sticky=tk.E)

generate_button = self.generate_button = RoundedButton(
button_frame,
text="Generate",
command=self.__generate,
bg_color=StylingColors.ACCENT.value,
hover_color=StylingColors.HOVER.value,
canvas_bg=StylingColors.BG.value
)
generate_button.pack(side=tk.LEFT, padx=(0, 10))

ok_button = self.ok_button = RoundedButton(
button_frame,
text="OK",
command=self.ok,
bg_color=StylingColors.ACCENT.value,
hover_color=StylingColors.HOVER.value,
canvas_bg=StylingColors.BG.value
)
ok_button.pack(side=tk.LEFT, padx=0)

# Configure grid weights
main_frame.columnconfigure(1, weight=1)
dialog_window.columnconfigure(0, weight=1)
dialog_window.rowconfigure(0, weight=1)

if 'site' in kwargs:
self.__site.set(kwargs['site'])
if 'username' in kwargs:
Expand Down
Loading
Loading