Replace styled-components with bulma helpers (#1783)

Use Bulma helpers whenever possible instead of custom styled components. This pull request replaces primarily color definitions, spacing and flex instructions.
2025-11-14 09:25:43 +01:00 · 2021-09-15 17:40:08 +02:00
parent 8a65660278
commit 2cb006d040
97 changed files with 1931 additions and 2244 deletions
--- a/scm-ui/ui-components/src/repos/DiffButton.tsx
+++ b/scm-ui/ui-components/src/repos/DiffButton.tsx
@@ -27,7 +27,6 @@ import Tooltip from "../Tooltip";

 const Button = styled.a`
  width: 50px;
-  cursor: pointer;
  &:hover {
    color: #33b2e8;
  }
@@ -47,7 +46,7 @@ const DiffButton: FC<Props> = ({ icon, tooltip, onClick }) => {

  return (
    <Tooltip message={tooltip} location="top">
-      <Button aria-label={tooltip} className="button" onClick={handleClick}>
+      <Button aria-label={tooltip} className="button is-clickable" onClick={handleClick}>
        <i className={`fas fa-${icon}`} />
      </Button>
    </Tooltip>
--- a/scm-ui/ui-components/src/repos/DiffFile.tsx
+++ b/scm-ui/ui-components/src/repos/DiffFile.tsx
@@ -69,22 +69,6 @@ const FullWidthTitleHeader = styled.div`
  max-width: 100%;
 `;

-const TitleWrapper = styled.span`
-  margin-left: 0.25rem;
-`;
-
-const AlignRight = styled.div`
-  margin-left: auto;
-`;
-
-const HunkDivider = styled.hr`
-  margin: 0.5rem 0;
-`;
-
-const ChangeTypeTag = styled(Tag)`
-  margin-left: 0.75rem;
-`;
-
 const MarginlessModalContent = styled.div`
  margin: -1.25rem;

@@ -319,7 +303,7 @@ class DiffFile extends React.Component<Props, State> {
    } else if (i > 0) {
      items.push(
        <Decoration>
-          <HunkDivider />
+          <hr className="my-2" />
        </Decoration>
      );
    }
@@ -403,8 +387,8 @@ class DiffFile extends React.Component<Props, State> {

    const color = value === "added" ? "success" : value === "deleted" ? "danger" : "info";
    return (
-      <ChangeTypeTag
-        className={classNames("has-text-weight-normal")}
+      <Tag
+        className={classNames("has-text-weight-normal", "ml-3")}
        rounded={true}
        outlined={true}
        color={color}
@@ -431,7 +415,7 @@ class DiffFile extends React.Component<Props, State> {

    const fileAnnotations = fileAnnotationFactory ? fileAnnotationFactory(file) : null;
    const innerContent = (
-      <div className="panel-block is-paddingless">
+      <div className="panel-block p-0">
        {fileAnnotations}
        <TokenizedDiffView className={viewType} viewType={viewType} file={file}>
          {(hunks: HunkType[]) =>
@@ -475,13 +459,13 @@ class DiffFile extends React.Component<Props, State> {
      </MenuContext.Consumer>
    );
    const headerButtons = (
-      <AlignRight className={classNames("level-right", "is-flex")}>
+      <div className={classNames("level-right", "is-flex", "ml-auto")}>
        <ButtonGroup>
          {sideBySideToggle}
          {openInFullscreen}
          {fileControls}
        </ButtonGroup>
-      </AlignRight>
+      </div>
    );

    let errorModal;
@@ -506,14 +490,14 @@ class DiffFile extends React.Component<Props, State> {
        <div className="panel-heading">
          <div className={classNames("level", "is-flex-wrap-wrap")}>
            <FullWidthTitleHeader
-              className={classNames("level-left", "is-flex", "has-cursor-pointer")}
+              className={classNames("level-left", "is-flex", "is-clickable")}
              onClick={this.toggleCollapse}
              title={this.hoverFileTitle(file)}
            >
              {collapseIcon}
-              <TitleWrapper className={classNames("is-ellipsis-overflow", "is-size-6")}>
+              <span className={classNames("is-ellipsis-overflow", "is-size-6", "ml-1")}>
                {this.renderFileTitle(file)}
-              </TitleWrapper>
+              </span>
              {this.renderChangeTag(file)}
            </FullWidthTitleHeader>
            {headerButtons}
--- a/scm-ui/ui-components/src/repos/HealthCheckFailureDetail.tsx
+++ b/scm-ui/ui-components/src/repos/HealthCheckFailureDetail.tsx
@@ -43,7 +43,7 @@ const HealthCheckFailureDetail: FC<Props> = ({ active, closeFunction, failures }
  return (
    <Modal
      body={
-        <div className={"content"}>
+        <div className="content">
          <HealthCheckFailureList failures={failures} />
        </div>
      }
--- a/scm-ui/ui-components/src/repos/HunkExpandDivider.tsx
+++ b/scm-ui/ui-components/src/repos/HunkExpandDivider.tsx
@@ -28,14 +28,12 @@ import styled from "styled-components";

 const HunkDivider = styled.div`
  background: #98d8f3;
-  font-size: 0.7rem;
-  padding-left: 1.78em;
 `;

 const HunkExpandDivider: FC = ({ children }) => {
  return (
    <Decoration>
-      <HunkDivider>{children}</HunkDivider>
+      <HunkDivider className="is-size-7 pl-5">{children}</HunkDivider>
    </Decoration>
  );
 };
--- a/scm-ui/ui-components/src/repos/HunkExpandLink.tsx
+++ b/scm-ui/ui-components/src/repos/HunkExpandLink.tsx
@@ -24,7 +24,6 @@
 import React, { FC, useState } from "react";
 import { useTranslation } from "react-i18next";
 import classNames from "classnames";
-import styled from "styled-components";

 type Props = {
  icon: string;
@@ -32,10 +31,6 @@ type Props = {
  onClick: () => Promise<any>;
 };

-const ExpandLink = styled.span`
-  cursor: pointer;
-`;
-
 const HunkExpandLink: FC<Props> = ({ icon, text, onClick }) => {
  const [t] = useTranslation("repos");
  const [loading, setLoading] = useState(false);
@@ -49,9 +44,9 @@ const HunkExpandLink: FC<Props> = ({ icon, text, onClick }) => {
  };

  return (
-    <ExpandLink onClick={onClickWithLoadingMarker}>
+    <span className="is-clickable" onClick={onClickWithLoadingMarker}>
      <i className={classNames("fa", icon)} /> {loading ? t("diff.expanding") : text}
-    </ExpandLink>
+    </span>
  );
 };

--- a/scm-ui/ui-components/src/repos/JumpToFileButton.tsx
+++ b/scm-ui/ui-components/src/repos/JumpToFileButton.tsx
@@ -24,13 +24,11 @@
 import React, { FC } from "react";
 import styled from "styled-components";
 import { Link } from "react-router-dom";
-import { useTranslation } from "react-i18next";
 import Tooltip from "../Tooltip";
 import Icon from "../Icon";

 const Button = styled(Link)`
  width: 50px;
-  cursor: pointer;
  &:hover {
    color: #33b2e8;
  }
@@ -44,7 +42,7 @@ type Props = {
 const JumpToFileButton: FC<Props> = ({ link, tooltip }) => {
  return (
    <Tooltip message={tooltip} location="top">
-      <Button aria-label={tooltip} className="button" to={link}>
+      <Button aria-label={tooltip} className="button is-clickable" to={link}>
        <Icon name="file-code" color="inherit" />
      </Button>
    </Tooltip>
--- a/scm-ui/ui-components/src/repos/LoadingDiff.tsx
+++ b/scm-ui/ui-components/src/repos/LoadingDiff.tsx
@@ -22,16 +22,14 @@
 * SOFTWARE.
 */
 import React, { FC } from "react";
+import { useTranslation } from "react-i18next";
 import { NotFoundError, useDiff } from "@scm-manager/ui-api";
 import ErrorNotification from "../ErrorNotification";
-import Notification from "../Notification";
-
 import Loading from "../Loading";
+import Notification from "../Notification";
+import Button from "../buttons/Button";
 import Diff from "./Diff";
 import { DiffObjectProps } from "./DiffTypes";
-import { useTranslation } from "react-i18next";
-import Button from "../buttons/Button";
-import styled from "styled-components";

 type Props = DiffObjectProps & {
  url: string;
@@ -44,19 +42,15 @@ type NotificationProps = {
  isFetchingNextPage: boolean;
 };

-const StyledNotification = styled(Notification)`
-  margin-top: 1.5rem;
-`;
-
 const PartialNotification: FC<NotificationProps> = ({ fetchNextPage, isFetchingNextPage }) => {
  const [t] = useTranslation("repos");
  return (
-    <StyledNotification type="info">
+    <Notification className="mt-5" type="info">
      <div className="columns is-centered">
        <div className="column">{t("changesets.moreDiffsAvailable")}</div>
        <Button label={t("changesets.loadMore")} action={fetchNextPage} loading={isFetchingNextPage} />
      </div>
-    </StyledNotification>
+    </Notification>
  );
 };

--- a/scm-ui/ui-components/src/repos/RepositoryEntry.tsx
+++ b/scm-ui/ui-components/src/repos/RepositoryEntry.tsx
@@ -31,6 +31,7 @@ import RepositoryFlags from "./RepositoryFlags";
 import styled from "styled-components";
 import Icon from "../Icon";
 import { useTranslation } from "react-i18next";
+import classNames from "classnames";

 type DateProp = Date | string;

@@ -43,26 +44,9 @@ type Props = {

 const ContentRightContainer = styled.div`
  height: calc(80px - 1.5rem);
-  margin-right: 1rem;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-`;
-
-const DateWrapper = styled.small`
-  padding-bottom: 0.25rem;
-`;
-
-const QuickActionbar = styled.span`
-  display: flex;
-  justify-content: flex-end;
-  align-items: flex-end;
 `;

 const QuickAction = styled(Icon)`
-  font-size: 1.25rem;
-
  :hover {
    color: #363636 !important;
  }
@@ -80,7 +64,15 @@ const RepositoryEntry: FC<Props> = ({ repository, baseDate }) => {
  const [openCloneModal, setOpenCloneModal] = useState(false);

  const createContentRight = () => (
-    <ContentRightContainer>
+    <ContentRightContainer
+      className={classNames(
+        "is-flex",
+        "is-flex-direction-column",
+        "is-justify-content-space-between",
+        "is-relative",
+        "mr-4"
+      )}
+    >
      {openCloneModal && (
        <Modal
          size="L"
@@ -98,18 +90,18 @@ const RepositoryEntry: FC<Props> = ({ repository, baseDate }) => {
          closeFunction={() => setOpenCloneModal(false)}
        />
      )}
-      <QuickActionbar>
+      <span className={classNames("is-flex", "is-justify-content-flex-end", "is-align-items-flex-end")}>
        <QuickAction
+          className={classNames("is-clickable", "is-size-5")}
          name="download"
          color="info"
-          className="has-cursor-pointer"
          onClick={() => setOpenCloneModal(true)}
          title={t("overview.clone")}
        />
-      </QuickActionbar>
-      <DateWrapper>
+      </span>
+      <small className="pb-1">
        <DateFromNow baseDate={baseDate} date={repository.lastModified || repository.creationDate} />
-      </DateWrapper>
+      </small>
    </ContentRightContainer>
  );

--- a/scm-ui/ui-components/src/repos/RepositoryEntryLink.tsx
+++ b/scm-ui/ui-components/src/repos/RepositoryEntryLink.tsx
@@ -23,7 +23,6 @@
 */
 import React from "react";
 import { Link } from "react-router-dom";
-import styled from "styled-components";
 import { Icon } from "@scm-manager/ui-components";
 import Tooltip from "../Tooltip";

@@ -33,10 +32,6 @@ type Props = {
  tooltip?: string;
 };

-const PointerEventsLink = styled(Link)`
-  pointer-events: all;
-`;
-
 class RepositoryEntryLink extends React.Component<Props> {
  render() {
    const { to, icon, tooltip } = this.props;
@@ -51,9 +46,9 @@ class RepositoryEntryLink extends React.Component<Props> {
    }

    return (
-      <PointerEventsLink className="level-item" to={to}>
+      <Link className="level-item is-clickable" to={to}>
        {content}
-      </PointerEventsLink>
+      </Link>
    );
  }
 }
--- a/scm-ui/ui-components/src/repos/RepositoryFlags.tsx
+++ b/scm-ui/ui-components/src/repos/RepositoryFlags.tsx
@@ -21,15 +21,15 @@
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */
-
 import React, { FC, useState } from "react";
-import RepositoryFlag from "./RepositoryFlag";
-import { ExtensionPoint } from "@scm-manager/ui-extensions";
-import { Repository } from "@scm-manager/ui-types";
 import { useTranslation } from "react-i18next";
+import classNames from "classnames";
 import styled from "styled-components";
-import HealthCheckFailureDetail from "./HealthCheckFailureDetail";
+import { Repository } from "@scm-manager/ui-types";
+import { ExtensionPoint } from "@scm-manager/ui-extensions";
 import { TooltipLocation } from "../Tooltip";
+import RepositoryFlag from "./RepositoryFlag";
+import HealthCheckFailureDetail from "./HealthCheckFailureDetail";

 type Props = {
  repository: Repository;
@@ -37,11 +37,6 @@ type Props = {
  tooltipLocation?: TooltipLocation;
 };

-const Wrapper = styled.span`
-  display: flex;
-  align-items: center;
-`;
-
 const RepositoryFlagContainer = styled.div`
  .tag {
    margin-left: 0.25rem;
@@ -91,13 +86,13 @@ const RepositoryFlags: FC<Props> = ({ repository, className, tooltipLocation = "
  );

  return (
-    <Wrapper>
+    <span className={classNames("is-flex", "is-align-items-center", className)}>
      {modal}
      <RepositoryFlagContainer>
        {repositoryFlags}
        <ExtensionPoint name="repository.flags" props={{ repository, tooltipLocation }} renderAll={true} />
      </RepositoryFlagContainer>
-    </Wrapper>
+    </span>
  );
 };

--- a/scm-ui/ui-components/src/repos/annotate/Annotate.tsx
+++ b/scm-ui/ui-components/src/repos/annotate/Annotate.tsx
@@ -36,7 +36,6 @@ import Popover from "./Popover";
 import AnnotateLine from "./AnnotateLine";
 import { Action } from "./actions";
 import { determineLanguage } from "../../languages";
-import styled from "styled-components";

 type Props = {
  source: AnnotatedSource;
@@ -57,11 +56,6 @@ const initialState = {
  onLine: false,
 };

-const NoSpacingReactSyntaxHighlighter = styled(ReactSyntaxHighlighter)`
-  margin: 0 !important;
-  padding: 0 !important;
-`;
-
 const reducer = (state: State, action: Action): State => {
  switch (action.type) {
    case "enter-line": {
@@ -152,14 +146,15 @@ const Annotate: FC<Props> = ({ source, repository, baseDate }) => {
  return (
    <div className="panel-block">
      {popover}
-      <NoSpacingReactSyntaxHighlighter
+      <ReactSyntaxHighlighter
+        className="m-0 p-0"
        showLineNumbers={false}
        language={determineLanguage(source.language)}
        style={highlightingTheme}
        renderer={defaultRenderer}
      >
        {code}
-      </NoSpacingReactSyntaxHighlighter>
+      </ReactSyntaxHighlighter>
    </div>
  );
 };
--- a/scm-ui/ui-components/src/repos/annotate/AnnotateLine.tsx
+++ b/scm-ui/ui-components/src/repos/annotate/AnnotateLine.tsx
@@ -44,8 +44,6 @@ const Author = styled(LineElement)`
 `;

 const When = styled(LineElement)`
-  display: inline-block;
-
  width: 6.5em;
  overflow: hidden;
  text-overflow: ellipsis;
--- a/scm-ui/ui-components/src/repos/annotate/Popover.tsx
+++ b/scm-ui/ui-components/src/repos/annotate/Popover.tsx
@@ -31,7 +31,7 @@ import { DateInput } from "../../useDateFormatter";
 import { Repository, AnnotatedLine } from "@scm-manager/ui-types";
 import AuthorImage from "./AuthorImage";
 import { Action } from "./actions";
-import {useTranslation} from "react-i18next";
+import { useTranslation } from "react-i18next";

 const PopoverContainer = styled.div`
  position: absolute;
@@ -62,16 +62,11 @@ const PopoverContainer = styled.div`
  }
 `;

-const SmallHr = styled.hr`
-  margin: 0.5em 0;
-`;
-
 const PopoverHeading = styled.div`
  height: 1.5em;
 `;

 const PopoverDescription = styled.p`
-  margin-top: 0.5em;
  overflow-wrap: break-word;
 `;

@@ -102,13 +97,13 @@ const Popover: FC<PopoverProps> = ({ annotation, offsetTop, repository, baseDate

  const onMouseEnter = () => {
    dispatch({
-      type: "enter-popover"
+      type: "enter-popover",
    });
  };

  const OnMouseLeave = () => {
    dispatch({
-      type: "leave-popover"
+      type: "leave-popover",
    });
  };

@@ -128,14 +123,14 @@ const Popover: FC<PopoverProps> = ({ annotation, offsetTop, repository, baseDate
        </span>
        <DateFromNow className="is-pulled-right" date={annotation.when} baseDate={baseDate} />
      </PopoverHeading>
-      <SmallHr />
+      <hr className="my-2" />
      <p>
        {t("changeset.label") + " "}
        <Link to={`/repo/${repository.namespace}/${repository.name}/code/changeset/${annotation.revision}`}>
          {shortRevision(annotation.revision)}
        </Link>
      </p>
-      <PopoverDescription className="content">{annotation.description}</PopoverDescription>
+      <PopoverDescription className="content mt-2">{annotation.description}</PopoverDescription>
    </PopoverContainer>
  );
 };
--- a/scm-ui/ui-components/src/repos/changesets/ChangesetButtonGroup.tsx
+++ b/scm-ui/ui-components/src/repos/changesets/ChangesetButtonGroup.tsx
@@ -38,7 +38,7 @@ class ChangesetButtonGroup extends React.Component<Props> {
    const changesetLink = createChangesetLink(repository, changeset);
    const sourcesLink = createSourcesLink(repository, changeset);
    return (
-      <ButtonAddons className="is-marginless">
+      <ButtonAddons className="m-0">
        <Button link={changesetLink} icon="exchange-alt" label={t("changeset.buttons.details")} reducedMobile={true} />
        <Button link={sourcesLink} icon="code" label={t("changeset.buttons.sources")} reducedMobile={true} />
      </ButtonAddons>
--- a/scm-ui/ui-components/src/repos/changesets/ChangesetRow.tsx
+++ b/scm-ui/ui-components/src/repos/changesets/ChangesetRow.tsx
@@ -52,39 +52,15 @@ const Wrapper = styled.div`
  }
 `;

-const AvatarFigure = styled.figure`
-  margin-top: 0.5rem;
-  margin-right: 0.5rem;
-`;
-
 const FixedSizedAvatar = styled.div`
  width: 35px;
  height: 35px;
 `;

-const Metadata = styled.div`
-  margin-left: 0;
+const FullWidthDiv = styled.div`
  width: 100%;
 `;

-const AuthorWrapper = styled.p`
-  margin-top: 0.5rem;
-`;
-
-const VCenteredColumn = styled.div`
-  align-self: center;
-`;
-
-const VCenteredChildColumn = styled.div`
-  align-items: center;
-  justify-content: flex-end;
-`;
-
-const FlexRow = styled.div`
-  display: flex;
-  flex-direction: row;
-`;
-
 class ChangesetRow extends React.Component<Props> {
  createChangesetId = (changeset: Changeset) => {
    const { repository } = this.props;
@@ -99,25 +75,25 @@ class ChangesetRow extends React.Component<Props> {

    return (
      <Wrapper>
-        <div className="columns is-gapless is-mobile">
-          <div className="column is-three-fifths">
-            <div className="columns is-gapless">
-              <div className="column is-four-fifths">
+        <div className={classNames("columns", "is-gapless", "is-mobile")}>
+          <div className={classNames("column", "is-three-fifths")}>
+            <div className={classNames("columns", "is-gapless")}>
+              <div className={classNames("column", "is-four-fifths")}>
                <div className="media">
                  <AvatarWrapper>
-                    <AvatarFigure className="media-left">
+                    <figure className={classNames("media-left", "mt-2", "mr-2")}>
                      <FixedSizedAvatar className="image">
                        <AvatarImage person={changeset.author} />
                      </FixedSizedAvatar>
-                    </AvatarFigure>
+                    </figure>
                  </AvatarWrapper>
-                  <Metadata className="media-right">
-                    <h4 className="has-text-weight-bold is-ellipsis-overflow">
+                  <FullWidthDiv className={classNames("media-right", "ml-0")}>
+                    <h4 className={classNames("has-text-weight-bold", "is-ellipsis-overflow")}>
                      <ExtensionPoint
                        name="changeset.description"
                        props={{
                          changeset,
-                          value: description.title
+                          value: description.title,
                        }}
                        renderAll={false}
                      >
@@ -130,36 +106,33 @@ class ChangesetRow extends React.Component<Props> {
                    <p className="is-hidden-desktop">
                      <Trans i18nKey="repos:changeset.shortSummary" components={[changesetId, dateFromNow]} />
                    </p>
-                    <FlexRow>
-                      <AuthorWrapper className="is-size-7 is-ellipsis-overflow">
+                    <div className="is-flex">
+                      <p className={classNames("is-size-7", "is-ellipsis-overflow", "mt-2")}>
                        <ChangesetAuthor changeset={changeset} />
-                      </AuthorWrapper>
+                      </p>
                      {changeset?.signatures && changeset.signatures.length > 0 && (
-                        <SignatureIcon
-                          className="mx-2 pt-1"
-                          signatures={changeset.signatures}
-                        />
+                        <SignatureIcon className={classNames("mx-2", "pt-1")} signatures={changeset.signatures} />
                      )}
-                    </FlexRow>
-                  </Metadata>
+                    </div>
+                  </FullWidthDiv>
                </div>
              </div>
-              <VCenteredColumn className="column">
+              <div className={classNames("column", "is-align-self-center")}>
                <ChangesetTags changeset={changeset} />
-              </VCenteredColumn>
+              </div>
            </div>
          </div>
-          <VCenteredChildColumn className={classNames("column", "is-flex")}>
+          <div className={classNames("column", "is-flex", "is-justify-content-flex-end", "is-align-items-center")}>
            <ChangesetButtonGroup repository={repository} changeset={changeset} />
            <ExtensionPoint
              name="changeset.right"
              props={{
                repository,
-                changeset
+                changeset,
              }}
              renderAll={true}
            />
-          </VCenteredChildColumn>
+          </div>
        </div>
      </Wrapper>
    );