fix(ui): uniform-size checkboxes, vertically-aligned form labels, and fixes for other UI imperfections/inconsistencies (#737)

This commit is contained in:
TheCatLady
2021-02-02 02:20:05 -05:00
committed by GitHub
parent bfe25d9755
commit e34fbf72fd
55 changed files with 1230 additions and 1542 deletions

View File

@@ -100,7 +100,7 @@ const Release: React.FC<ReleaseProps> = ({
</Modal>
</Transition>
<div className="flex items-center justify-center mb-4 sm:mb-0 sm:justify-start">
<span className="mr-2 text-sm">
<span className="mt-1 mr-2 text-xs">
<FormattedRelativeTime
value={Math.floor(
(new Date(release.created_at).getTime() - Date.now()) / 1000
@@ -109,16 +109,16 @@ const Release: React.FC<ReleaseProps> = ({
numeric="always"
/>
</span>
<span className="text-xl">{release.name}</span>
<span className="text-lg">{release.name}</span>
{isLatest && (
<span className="ml-2">
<span className="ml-2 -mt-1">
<Badge badgeType="primary">
{intl.formatMessage(messages.latestversion)}
</Badge>
</span>
)}
{release.name.includes(currentVersion) && (
<span className="ml-2">
<span className="ml-2 -mt-1">
<Badge badgeType="success">
{intl.formatMessage(messages.currentversion)}
</Badge>
@@ -156,38 +156,38 @@ const Releases: React.FC<ReleasesProps> = ({ currentVersion }) => {
return (
<div>
<div className="pb-4 mb-4 text-xl border-b border-gray-800">
{intl.formatMessage(messages.releases)}
<h3 className="heading">{intl.formatMessage(messages.releases)}</h3>
<div className="section">
{currentVersion.startsWith('develop-') && (
<Alert title={intl.formatMessage(messages.runningDevelop)}>
{intl.formatMessage(messages.runningDevelopMessage, {
GithubLink: function GithubLink(msg) {
return (
<a
href="https://github.com/sct/overseerr"
target="_blank"
rel="noreferrer"
className="text-yellow-100 underline transition duration-300 hover:text-white"
>
{msg}
</a>
);
},
})}
</Alert>
)}
{data?.map((release, index) => {
return (
<div key={`release-${release.id}`} className="mb-2">
<Release
release={release}
currentVersion={currentVersion}
isLatest={index === 0}
/>
</div>
);
})}
</div>
{currentVersion.startsWith('develop-') && (
<Alert title={intl.formatMessage(messages.runningDevelop)}>
{intl.formatMessage(messages.runningDevelopMessage, {
GithubLink: function GithubLink(msg) {
return (
<a
href="https://github.com/sct/overseerr"
target="_blank"
rel="noreferrer"
className="text-yellow-100 underline transition duration-300 hover:text-white"
>
{msg}
</a>
);
},
})}
</Alert>
)}
{data?.map((release, index) => {
return (
<div key={`release-${release.id}`} className="mb-2">
<Release
release={release}
currentVersion={currentVersion}
isLatest={index === 0}
/>
</div>
);
})}
</div>
);
};

View File

@@ -37,7 +37,7 @@ const SettingsAbout: React.FC = () => {
return (
<>
<div className="mb-8">
<div className="section">
<List title={intl.formatMessage(messages.overseerrinformation)}>
<List.Item title={intl.formatMessage(messages.version)}>
{data.version}
@@ -55,7 +55,7 @@ const SettingsAbout: React.FC = () => {
)}
</List>
</div>
<div className="mb-8">
<div className="section">
<List title={intl.formatMessage(messages.gettingsupport)}>
<List.Item title={intl.formatMessage(messages.documentation)}>
<a
@@ -89,7 +89,7 @@ const SettingsAbout: React.FC = () => {
</List.Item>
</List>
</div>
<div className="mb-8">
<div className="section">
<List title={intl.formatMessage(messages.supportoverseerr)}>
<List.Item
title={`${intl.formatMessage(messages.helppaycoffee)} ☕️`}
@@ -105,7 +105,7 @@ const SettingsAbout: React.FC = () => {
</List.Item>
</List>
</div>
<div className="mb-8">
<div className="section">
<Releases currentVersion={data.version} />
</div>
</>