修改功能

public/css/profile.css

@@ -211,16 +211,23 @@
 }
 
 .user-actions a,
+.user-actions button,
 .todo-list a {
   display: block;
+  width: 100%;
   padding: 15px 16px;
   border: 1px solid var(--line);
   border-radius: 14px;
   background: #fbf7ed;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
   transition: transform .22s ease, border-color .22s ease, background .22s ease, color .22s ease;
 }
 
 .user-actions a:hover,
+.user-actions button:hover,
 .todo-list a:hover {
   transform: translateX(5px);
   border-color: rgba(71, 111, 99, .28);
@@ -499,6 +506,10 @@
   transition: opacity .22s ease;
 }
 
+.logout-modal[hidden] {
+  display: none;
+}
+
 .logout-modal.show {
   opacity: 1;
   pointer-events: auto;
@@ -662,3 +673,47 @@
     grid-template-columns: 1fr;
   }
 }
+
+.page-profile {
+  background: var(--color-canvas);
+}
+
+.profile-hero {
+  padding: var(--space-7) 0 var(--space-6);
+}
+
+.profile-card,
+.profile-stats,
+.profile-next-card,
+.panel,
+.side-card {
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-panel);
+}
+
+.profile-info h1 {
+  font-size: var(--text-display);
+}
+
+.avatar .media-avatar,
+.avatar .media-avatar img {
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+}
+
+.avatar .media-avatar {
+  color: #fff;
+  background: transparent;
+  font: inherit;
+}
+
+@media (max-width: 760px) {
+  .profile-hero {
+    padding: var(--space-5) 0 var(--space-4);
+  }
+
+  .profile-info h1 {
+    font-size: var(--text-title);
+  }
+}