[frontend/components] Update styling for profile page

This commit is contained in:
Jeder 2024-10-24 21:47:15 +02:00 committed by Lilian
parent 438206dd45
commit 5d7c9a32ca
No known key found for this signature in database
2 changed files with 20 additions and 26 deletions

View file

@ -17,13 +17,13 @@
@if (State is State.Loaded) @if (State is State.Loaded)
{ {
<div class="section"> <div class="section">
<span class="title">Profile Description</span><textarea class="input" @bind="@UserProfile.Description"></textarea> <span class="title">@Loc["Profile Description"]</span><textarea class="input" @bind="@UserProfile.Description"></textarea>
</div> </div>
<div class="section"> <div class="section">
<span class="title">Birthday</span><input class="input" @bind="@UserProfile.Birthday"/> <span class="title">@Loc["Birthday"]</span><input class="input" @bind="@UserProfile.Birthday"/>
</div> </div>
<div class="section"> <div class="section">
<span class="title">Location</span><input class="input" @bind="@UserProfile.Location"/> <span class="title">@Loc["Location"]</span><input class="input" @bind="@UserProfile.Location"/>
</div> </div>
<div class="user-fields"> <div class="user-fields">
<span class="title">@Loc["Fields"]</span> <span class="title">@Loc["Fields"]</span>
@ -33,7 +33,7 @@
<div class="field"> <div class="field">
<input class="input" @bind="@entry.Name"/> <input class="input" @bind="@entry.Name"/>
<input class="input" @bind="@entry.Value"/> <input class="input" @bind="@entry.Value"/>
<button @onclick="() => DeleteField(entry)"> <button class="button" title="@Loc["Delete Field"]" @onclick="() => DeleteField(entry)">
<Icon Name="Icons.Trash"/> <Icon Name="Icons.Trash"/>
</button> </button>
</div> </div>
@ -44,11 +44,13 @@
<div class="new-field"> <div class="new-field">
<input class="input" @bind="@FieldName"/> <input class="input" @bind="@FieldName"/>
<input class="input" @bind="@FieldValue"/> <input class="input" @bind="@FieldValue"/>
<button @onclick="AddField">@Loc["Add Field"]</button> <button class="button" title="@Loc["Add Field"]" @onclick="AddField">
<Icon Name="Icons.Plus"/>
</button>
</div> </div>
<div class="section"> <div class="section">
<StateButton OnClick="SaveChanges" @ref="SaveButton"> <StateButton OnClick="SaveChanges" ExtraClasses="button" @ref="SaveButton">
<Initial> <Initial>
<Icon Name="Icons.FloppyDisk"/>@Loc["Save"] <Icon Name="Icons.FloppyDisk"/>@Loc["Save"]
</Initial> </Initial>

View file

@ -1,29 +1,21 @@
.input { .field, .new-field {
display: block; display: flex;
background-color: var(--foreground-color); flex-direction: row;
border: none; align-items: center;
outline: none;
width: 100%; .button {
border-radius: 0.5rem; padding: 0.75rem;
padding: 0.5rem; margin: 0.2rem;
margin: 0.5rem i {
padding: 0;
}
}
} }
.body {
max-width: 50rem;
}
.new-field {
display: flex;
flex-direction: row;
}
.user-fields { .user-fields {
} }
.field {
display: flex;
}
.title { .title {
font-size: 0.9rem; font-size: 0.9rem;
} }