src/components/Sidebar.ts

@@ -191,9 +191,9 @@ export default class Sidebar extends LitElement {
     }
 
     .profile-avatar {
-      max-width: 64px;
+      width: 64px;
-      max-height: 64px;
+      height: 64px;
-      border-radius: 100%;
+      border-radius: 50%;
       object-fit: cover;
       transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
       border: 2px solid var(--color-base-300);

src/routes/Settings.ts

@@ -1,11 +1,9 @@
 import { getSigner, getUserProfile, ndk } from '@/ndk';
-// @ts-ignore
 import defaultAvatar from '@assets/default-avatar.png';
 import type { ArxInputChangeEvent } from '@components/General/Input';
 import { NDKEvent, type NDKUserProfile } from '@nostr-dev-kit/ndk';
 import { LitElement, css, html } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
 import { when } from 'lit/directives/when.js';
 
 import '@components/Breadcrumbs';
@@ -29,8 +27,8 @@ export class EveSettings extends LitElement {
     }
 
     .profile-image {
-      max-width: 140px;
+      width: 140px;
-      max-height: 140px;
+      height: 140px;
       border-radius: 50%;
       object-fit: cover;
       border: calc(var(--border) * 2) solid var(--color-base-100);
@@ -157,12 +155,12 @@ export class EveSettings extends LitElement {
         </arx-fieldset>
         <arx-fieldset legend="Profile">
           ${when(
-            this.profile?.picture,
+            this.profile!.picture,
             () => html`
               <div class="profile-header">
                 <img
                   class="profile-image"
-                  src=${ifDefined(this.profile?.picture)}
+                  src=${this.profile!.picture}
                   alt="Profile"
                   @error=${(e: Event) => {
                     (e.target as HTMLImageElement).src = defaultAvatar;
@@ -176,7 +174,7 @@ export class EveSettings extends LitElement {
             label="Name"
             type="text"
             name="name"
-            .value=${this.profile?.name ?? ''}
+            .value=${this.profile!.name}
             @change=${(e: ArxInputChangeEvent) => this.handleInputChange('name', e)}
             placeholder="Your display name"
           ></arx-input>
@@ -185,7 +183,7 @@ export class EveSettings extends LitElement {
             label="Profile Image URL"
             type="text"
             name="image"
-            .value=${this.profile?.picture ?? ''}
+            .value=${this.profile!.picture}
             @change=${(e: ArxInputChangeEvent) => this.handleInputChange('picture', e)}
             placeholder="https://example.com/your-image.jpg"
           ></arx-input>
@@ -194,7 +192,7 @@ export class EveSettings extends LitElement {
             label="Banner URL"
             type="text"
             name="banner"
-            .value=${this.profile?.banner ?? ''}
+            .value=${this.profile!.banner}
             @change=${(e: ArxInputChangeEvent) => this.handleInputChange('banner', e)}
             placeholder="https://example.com/your-image.jpg"
           ></arx-input>
@@ -217,8 +215,8 @@ export class EveSettings extends LitElement {
           <arx-relay-logs .logs=${this.relayStatus.logs}></arx-relay-logs>
         </arx-fieldset>
       </arx-card>
-      <arx-card>
+      <arx-card >
-        <arx-fieldset legend="Reset">
+        <arx-fieldset  legend="Reset">
           <p>
             This will delete all the data stored on this device, and you will be sent back to the setup
             screen.