diff --git a/portal-ui/src/screens/Console/Configurations/TiersConfiguration/TierTypeCard.tsx b/portal-ui/src/screens/Console/Configurations/TiersConfiguration/TierTypeCard.tsx index 990fa601b..33a4be243 100644 --- a/portal-ui/src/screens/Console/Configurations/TiersConfiguration/TierTypeCard.tsx +++ b/portal-ui/src/screens/Console/Configurations/TiersConfiguration/TierTypeCard.tsx @@ -28,16 +28,22 @@ const TierTypeCard = ({ onClick, icon, name }: TierTypeCardProps) => { const styles = { tierTypeCard: { height: "80px", - width: "300px", + width: "auto", display: "flex", alignItems: "center", - justifyContent: "start", + justifyContent: "flex-start", padding: 5, border: "1px solid #E5E5E5", borderRadius: 2, cursor: "pointer", + overflow: "hidden", "&:hover": { background: "#ebebeb" }, }, + tierTypeTitle: { + fontWeight: 600, + fontSize: 14, + justifyContent: "center", + }, }; return ( diff --git a/portal-ui/src/screens/Console/Configurations/TiersConfiguration/TierTypeSelector.tsx b/portal-ui/src/screens/Console/Configurations/TiersConfiguration/TierTypeSelector.tsx index 896bc18bf..228afbe26 100644 --- a/portal-ui/src/screens/Console/Configurations/TiersConfiguration/TierTypeSelector.tsx +++ b/portal-ui/src/screens/Console/Configurations/TiersConfiguration/TierTypeSelector.tsx @@ -23,7 +23,9 @@ import PageHeader from "../../Common/PageHeader/PageHeader"; import BackLink from "../../../../common/BackLink"; import PageLayout from "../../Common/Layout/PageLayout"; import TierTypeCard from "./TierTypeCard"; -import ContentBox from "../../Common/ContentBox"; +import HelpBox from "../../../../common/HelpBox"; +import { TiersIcon } from "../../../../icons"; +import FormLayout from "../../Common/FormLayout"; const TierTypeSelector = () => { const navigate = useNavigate(); @@ -44,20 +46,75 @@ const TierTypeSelector = () => { /> - -
- Select Tier Type -
+ } + helpbox={ + } + title={"Tier Types"} + help={ + + MinIO supports creating object transition lifecycle management + rules, where MinIO can automatically move an object to a + remote storage “tier”. +
+
+ MinIO supports the following Tier types: +
+ +
+ } + /> + } + > @@ -72,7 +129,7 @@ const TierTypeSelector = () => { /> ))} -
+
);