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.

scm-ui/ui-webapp/src/admin/plugins/components/PluginBottomActions.tsx

@@ -22,6 +22,7 @@
  * SOFTWARE.
  */
 import * as React from "react";
+import classNames from "classnames";
 import styled from "styled-components";
 
 type Props = {
@@ -29,15 +30,16 @@ type Props = {
 };
 
 const ActionWrapper = styled.div`
-  justify-content: center;
-  margin-top: 2em;
-  padding: 1em 1em;
-  border: 2px solid #e9f7df;
+  border: 2px solid #e9f7fd;
 `;
 
 export default class PluginBottomActions extends React.Component<Props> {
   render() {
     const { children } = this.props;
-    return <ActionWrapper className="is-flex">{children}</ActionWrapper>;
+    return (
+      <ActionWrapper className={classNames("is-flex", "is-justify-content-center", "mt-5", "p-4")}>
+        {children}
+      </ActionWrapper>
+    );
   }
 }

scm-ui/ui-webapp/src/admin/plugins/components/PluginEntry.tsx

@@ -40,13 +40,11 @@ const ActionbarWrapper = styled.div`
   }
 `;
 
-const IconWrapper = styled.span`
-  margin-bottom: 0 !important;
-  padding: 0.5rem;
+const IconWrapper = styled.span.attrs((props) => ({
+  className: "level-item mb-0 p-2 is-clickable",
+}))`
   border: 1px solid #cdcdcd; // $dark-25
   border-radius: 4px;
-  cursor: pointer;
-  pointer-events: all;
 
   &:hover {
     border-color: #9a9a9a; // $dark-50
@@ -78,22 +76,22 @@ const PluginEntry: FC<Props> = ({ plugin, openModal }) => {
   const actionBar = () => (
     <ActionbarWrapper className="is-flex">
       {isCloudoguPlugin && (
-        <IconWrapper className="level-item" onClick={() => openModal({ plugin, action: PluginAction.CLOUDOGU })}>
+        <IconWrapper onClick={() => openModal({ plugin, action: PluginAction.CLOUDOGU })}>
           <Icon title={t("plugins.modal.cloudoguInstall")} name="link" color="success-dark" />
         </IconWrapper>
       )}
       {isInstallable && (
-        <IconWrapper className="level-item" onClick={() => openModal({ plugin, action: PluginAction.INSTALL })}>
+        <IconWrapper onClick={() => openModal({ plugin, action: PluginAction.INSTALL })}>
           <Icon title={t("plugins.modal.install")} name="download" color="info" />
         </IconWrapper>
       )}
       {isUninstallable && (
-        <IconWrapper className="level-item" onClick={() => openModal({ plugin, action: PluginAction.UNINSTALL })}>
+        <IconWrapper onClick={() => openModal({ plugin, action: PluginAction.UNINSTALL })}>
           <Icon title={t("plugins.modal.uninstall")} name="trash" color="info" />
         </IconWrapper>
       )}
       {isUpdatable && (
-        <IconWrapper className="level-item" onClick={() => openModal({ plugin, action: PluginAction.UPDATE })}>
+        <IconWrapper onClick={() => openModal({ plugin, action: PluginAction.UPDATE })}>
           <Icon title={t("plugins.modal.update")} name="sync-alt" color="info" />
         </IconWrapper>
       )}

scm-ui/ui-webapp/src/admin/plugins/components/PluginModal.tsx

@@ -41,10 +41,10 @@ type ParentWithPluginAction = {
   pluginAction?: PluginAction;
 };
 
-const ListParent = styled.div.attrs((props) => ({}))<ParentWithPluginAction>`
-  margin-right: 0;
+const ListParent = styled.div.attrs((props) => ({
+  className: "field-label is-inline-flex mr-0 has-text-left",
+}))<ParentWithPluginAction>`
   min-width: ${(props) => (props.pluginAction === PluginAction.INSTALL ? "5.5em" : "10em")};
-  text-align: left;
 `;
 
 const ListChild = styled.div`
@@ -194,9 +194,7 @@ const PluginModal: FC<Props> = ({ onClose, pluginAction, plugin }) => {
       <div className="media">
         <div className="media-content">
           <div className="field is-horizontal">
-            <ListParent className={classNames("field-label", "is-inline-flex")} pluginAction={pluginAction}>
-              {t("plugins.modal.author")}:
-            </ListParent>
+            <ListParent pluginAction={pluginAction}>{t("plugins.modal.author")}:</ListParent>
             <ListChild className={classNames("field-body", "is-inline-flex")}>{plugin.author}</ListChild>
           </div>
           {pluginAction === PluginAction.CLOUDOGU && (
@@ -208,25 +206,19 @@ const PluginModal: FC<Props> = ({ onClose, pluginAction, plugin }) => {
           )}
           {pluginAction === PluginAction.INSTALL && (
             <div className="field is-horizontal">
-              <ListParent className={classNames("field-label", "is-inline-flex")} pluginAction={pluginAction}>
-                {t("plugins.modal.version")}:
-              </ListParent>
+              <ListParent pluginAction={pluginAction}>{t("plugins.modal.version")}:</ListParent>
               <ListChild className={classNames("field-body", "is-inline-flex")}>{plugin.version}</ListChild>
             </div>
           )}
           {(pluginAction === PluginAction.UPDATE || pluginAction === PluginAction.UNINSTALL) && (
             <div className="field is-horizontal">
-              <ListParent className={classNames("field-label", "is-inline-flex")}>
-                {t("plugins.modal.currentVersion")}:
-              </ListParent>
+              <ListParent>{t("plugins.modal.currentVersion")}:</ListParent>
               <ListChild className={classNames("field-body", "is-inline-flex")}>{plugin.version}</ListChild>
             </div>
           )}
           {pluginAction === PluginAction.UPDATE && (
             <div className="field is-horizontal">
-              <ListParent className={classNames("field-label", "is-inline-flex")}>
-                {t("plugins.modal.newVersion")}:
-              </ListParent>
+              <ListParent>{t("plugins.modal.newVersion")}:</ListParent>
               <ListChild className={classNames("field-body", "is-inline-flex")}>{plugin.newVersion}</ListChild>
             </div>
           )}

scm-ui/ui-webapp/src/admin/plugins/components/PluginTopActions.tsx

@@ -23,24 +23,27 @@
  */
 import * as React from "react";
 import classNames from "classnames";
-import styled from "styled-components";
 
 type Props = {
   children?: React.Node;
 };
 
-const ChildWrapper = styled.div`
-  justify-content: flex-end;
-  align-items: center;
-`;
-
 export default class PluginTopActions extends React.Component<Props> {
   render() {
     const { children } = this.props;
     return (
-      <ChildWrapper className={classNames("column", "is-flex", "is-one-fifths", "is-mobile-action-spacing")}>
+      <div
+        className={classNames(
+          "column",
+          "is-one-fifths",
+          "is-mobile-action-spacing",
+          "is-flex",
+          "is-justify-content-flex-end",
+          "is-align-items-center"
+        )}
+      >
         {children}
-      </ChildWrapper>
+      </div>
     );
   }
 }