Fix text-overflow in danger zone

This commit is contained in:
Florian Scholdei
2020-08-24 11:29:27 +02:00
parent 330f7c500e
commit 81d4c2f64f
3 changed files with 22 additions and 10 deletions

View File

@@ -36,9 +36,20 @@ type Props = {
}; };
const DangerZoneContainer = styled.div` const DangerZoneContainer = styled.div`
padding: 1rem; padding: 1.5rem 1rem;
border: 1px solid #ff6a88; border: 1px solid #ff6a88;
border-radius: 5px; border-radius: 5px;
> .level {
flex-flow: wrap;
.level-left {
max-width: 100%;
}
.level-right {
margin-top: 0.75rem;
}
}
> *:not(:last-child) { > *:not(:last-child) {
padding-bottom: 1.5rem; padding-bottom: 1.5rem;
border-bottom: solid 2px whitesmoke; border-bottom: solid 2px whitesmoke;

View File

@@ -26,9 +26,8 @@ import { connect } from "react-redux";
import { compose } from "redux"; import { compose } from "redux";
import { RouteComponentProps, withRouter } from "react-router-dom"; import { RouteComponentProps, withRouter } from "react-router-dom";
import { WithTranslation, withTranslation } from "react-i18next"; import { WithTranslation, withTranslation } from "react-i18next";
import { History } from "history";
import { Repository } from "@scm-manager/ui-types"; import { Repository } from "@scm-manager/ui-types";
import { confirmAlert, DeleteButton, ErrorNotification, Level, ButtonGroup } from "@scm-manager/ui-components"; import { confirmAlert, DeleteButton, ErrorNotification, Level } from "@scm-manager/ui-components";
import { deleteRepo, getDeleteRepoFailure, isDeleteRepoPending } from "../modules/repos"; import { deleteRepo, getDeleteRepoFailure, isDeleteRepoPending } from "../modules/repos";
type Props = RouteComponentProps & type Props = RouteComponentProps &
@@ -89,10 +88,11 @@ class DeleteRepo extends React.Component<Props> {
<ErrorNotification error={error} /> <ErrorNotification error={error} />
<Level <Level
left={ left={
<div> <p>
<strong>{t("deleteRepo.subtitle")}</strong> <strong>{t("deleteRepo.subtitle")}</strong>
<p>{t("deleteRepo.description")}</p> <br />
</div> {t("deleteRepo.description")}
</p>
} }
right={<DeleteButton label={t("deleteRepo.button")} action={action} loading={loading} />} right={<DeleteButton label={t("deleteRepo.button")} action={action} loading={loading} />}
/> />

View File

@@ -38,7 +38,7 @@ type Props = {
}; };
const RenameRepository: FC<Props> = ({ repository, indexLinks }) => { const RenameRepository: FC<Props> = ({ repository, indexLinks }) => {
let history = useHistory(); const history = useHistory();
const [t] = useTranslation("repos"); const [t] = useTranslation("repos");
const [error, setError] = useState<Error | undefined>(undefined); const [error, setError] = useState<Error | undefined>(undefined);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
@@ -156,10 +156,11 @@ const RenameRepository: FC<Props> = ({ repository, indexLinks }) => {
/> />
<Level <Level
left={ left={
<div> <p>
<strong>{t("renameRepo.subtitle")}</strong> <strong>{t("renameRepo.subtitle")}</strong>
<p>{t("renameRepo.description")}</p> <br />
</div> {t("renameRepo.description")}
</p>
} }
right={ right={
<Button <Button