connor/calendar
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Make remember checkboxes more subtle and checked by default

Browse Source 
- Remember checkboxes now default to checked for better user experience
- Reduced visual prominence with smaller size, lighter colors, and lower opacity
- Users get convenience by default while still being able to opt out

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Connor Johnstone
2025-09-01 19:02:29 -04:00
parent 03c0011445
commit 0453763c98
2 changed files with 10 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/components/login.rs
View File

@@ -20,13 +20,9 @@ pub fn Login(props: &LoginProps) -> Html {
let error_message = use_state(|| Option::<String>::None); let error_message = use_state(|| Option::<String>::None);
let is_loading = use_state(|| false); let is_loading = use_state(|| false);
// Remember checkboxes state // Remember checkboxes state - default to checked
let remember_server = use_state(|| { let remember_server = use_state(|| true);
LocalStorage::get::<String>("remembered_server_url").is_ok() let remember_username = use_state(|| true);
});
let remember_username = use_state(|| {
LocalStorage::get::<String>("remembered_username").is_ok()
});
let server_url_ref = use_node_ref(); let server_url_ref = use_node_ref();
let username_ref = use_node_ref(); let username_ref = use_node_ref();

11
frontend/styles.css
View File

@@ -292,22 +292,25 @@ body {
.remember-checkbox { .remember-checkbox {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.375rem;
margin-top: 0.5rem; margin-top: 0.375rem;
opacity: 0.7;
} }
.remember-checkbox input[type="checkbox"] { .remember-checkbox input[type="checkbox"] {
width: auto; width: auto;
margin: 0; margin: 0;
cursor: pointer; cursor: pointer;
transform: scale(0.85);
} }
.remember-checkbox label { .remember-checkbox label {
margin: 0; margin: 0;
font-size: 0.875rem; font-size: 0.75rem;
color: #666; color: #888;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
font-weight: 400;
} }
.login-button, .register-button { .login-button, .register-button {