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 = () => {
/>
))}
-
+
);