remove css vars, use flex block instead of absolute aligned block

scm-ui/src/admin/plugins/components/PluginEntry.js

@@ -2,7 +2,7 @@
 import React from "react";
 import injectSheet from "react-jss";
 import type { Plugin } from "@scm-manager/ui-types";
-import { CardColumn } from "@scm-manager/ui-components";
+import {CardColumn, Icon} from "@scm-manager/ui-components";
 import PluginAvatar from "./PluginAvatar";
 import classNames from "classnames";
 import PluginModal from "./PluginModal";
@@ -32,20 +32,10 @@ const styles = {
     cursor: "pointer",
     pointerEvents: "all",
     padding: "0.5rem",
-    border: "solid 1px var(--dark-25)",
+    border: "solid 1px #cdcdcd", // $dark-25
     borderRadius: "4px",
     "&:hover": {
-      borderColor: "var(--dark-50)"
-    }
-  },
-  topRight: {
-    position: "absolute",
-    right: 0,
-    top: 0
-  },
-  layout: {
-    "& .level": {
-      paddingBottom: "0.5rem"
+      borderColor: "#9a9a9a" // $dark-50
     }
   },
   actionbar: {
@@ -100,10 +90,10 @@ class PluginEntry extends React.Component<Props, State> {
   createActionbar = () => {
     const { classes } = this.props;
     return (
-      <div className={classNames(classes.actionbar, classes.topRight)}>
+      <div className={classes.actionbar}>
         {this.isInstallable() && (
           <span
-            className={classNames(classes.link, "level-item")}
+            className={classNames(classes.link, "level-item", "is-marginless")}
             onClick={() => this.toggleModal("showInstallModal")}
           >
             <i className="fas fa-download has-text-info" />
@@ -188,7 +178,6 @@ class PluginEntry extends React.Component<Props, State> {
     return (
       <>
         <CardColumn
-          className={classes.layout}
           action={
             this.isInstallable()
               ? () => this.toggleModal("showInstallModal")