diff --git a/app/components/settings-pane.gjs b/app/components/settings-pane.gjs index 5e8a213..b32d726 100644 --- a/app/components/settings-pane.gjs +++ b/app/components/settings-pane.gjs @@ -1,19 +1,49 @@ import Component from '@glimmer/component'; import { on } from '@ember/modifier'; import Icon from '#components/icon'; +import { service } from '@ember/service'; +import { action } from '@ember/object'; export default class SettingsPane extends Component { diff --git a/app/styles/app.css b/app/styles/app.css index 8b9f482..d6269fb 100644 --- a/app/styles/app.css +++ b/app/styles/app.css @@ -8,6 +8,7 @@ body { body { margin: 0; + font-family: "Noto Serif", serif; } #root, @@ -199,9 +200,9 @@ body { .settings-pane.sidebar { width: 100%; right: 0; - border-radius: 0; /* Full screen, no rounded corners needed */ - height: 100%; /* Ensure full height */ - top: 0; /* Start from top */ + border-radius: 16px 16px 0 0; + height: 66vh; + top: auto; bottom: 0; } } @@ -264,6 +265,19 @@ body { justify-content: flex-end; } +.settings-section { + margin-bottom: 2rem; +} + +.settings-section h3 { + font-size: 1rem; + font-weight: bold; + color: #666; + margin: 0 0 0.5rem 0; + text-transform: uppercase; + letter-spacing: 0.5px; +} + .btn-full { width: 100%; } @@ -281,6 +295,27 @@ body { .btn-primary:hover { background: #0069d9; } + +.link-list { + list-style: none; + padding: 0; + margin: 0; +} + +.link-list li { + margin-bottom: 0.5rem; +} + +.link-list a { + color: #007bff; + text-decoration: none; + font-size: 0.95rem; +} + +.link-list a:hover { + text-decoration: underline; +} + .back-btn { background: none; border: none;