diff options
Diffstat (limited to 'web/source/settings')
| -rw-r--r-- | web/source/settings/admin/settings/index.tsx | 7 | ||||
| -rw-r--r-- | web/source/settings/style.css | 36 |
2 files changed, 25 insertions, 18 deletions
diff --git a/web/source/settings/admin/settings/index.tsx b/web/source/settings/admin/settings/index.tsx index 4e5ea343a..69fbfd4ca 100644 --- a/web/source/settings/admin/settings/index.tsx +++ b/web/source/settings/admin/settings/index.tsx @@ -105,19 +105,18 @@ function AdminSettingsForm({ data: instance }: AdminSettingsFormProps) { /> <div className="file-upload" aria-labelledby="avatar"> - <strong id="avatar">Instance avatar</strong> - <div> + <strong id="avatar">Instance avatar (1:1 images look best)</strong> + <div className="file-upload-with-preview"> <img className="preview avatar" src={form.thumbnail.previewValue ?? instance?.thumbnail} alt={form.thumbnailDesc.value ?? (instance?.thumbnail ? `Thumbnail image for the instance` : "No instance thumbnail image set")} /> - <div> + <div className="file-input-with-image-description"> <FileInput field={form.thumbnail} accept="image/png, image/jpeg, image/webp, image/gif" /> - <br/> <TextInput field={form.thumbnailDesc} label="Avatar image description" diff --git a/web/source/settings/style.css b/web/source/settings/style.css index 6e19acdd4..501e9dbef 100644 --- a/web/source/settings/style.css +++ b/web/source/settings/style.css @@ -395,21 +395,29 @@ section.with-sidebar > div, section.with-sidebar > form { gap: 1rem; } -.file-upload > div { - display: flex; - gap: 1rem; - - img { - height: 8rem; - border: 0.2rem solid $border-accent; - } - - img.avatar { - width: 8rem; +.file-upload { + .file-upload-with-preview { + display: flex; + gap: 1rem; + + img { + height: 8rem; + border: 0.2rem solid $border-accent; + } + + img.avatar { + width: 8rem; + } + + img.header { + width: 24rem; + } } - - img.header { - width: 24rem; + + .file-input-with-image-description { + display: flex; + flex-direction: column; + justify-content: space-around; } } |