upd: created badge

src/modules/Platform/components/Assets.tsx

@@ -29,7 +29,7 @@ const Assets = (): JSX.Element => {
     initTableData();
   }, []);
   return (
-    <div>
+    <div className="max-w-[1200px] w-full">
       <Breadcrumbs links={["Platform", "Assets"]} />
 
       <HeadingText text="Assets" scale={1} />

src/modules/Platform/components/Chains/index.tsx

@@ -47,7 +47,7 @@ const Chains = (): JSX.Element => {
     initTableData();
   }, [$apiData]);
   return (
-    <div>
+    <div className="max-w-[1200px] w-full">
       <Breadcrumbs links={["Platform", "Chains"]} />
 
       <HeadingText text="Chains" scale={1} styles="mt-3" />

src/modules/Platform/components/Integrations.tsx

@@ -34,7 +34,7 @@ const Integrations = (): JSX.Element => {
     initTableData();
   }, []);
   return (
-    <div>
+    <div className="max-w-[1200px] w-full">
       <Breadcrumbs links={["Platform", "Integrations"]} />
 
       <HeadingText text="Integrations" scale={1} />

src/modules/Platform/components/Network/index.tsx

@@ -16,7 +16,7 @@ const Network = (): JSX.Element => {
   const $apiData: ApiMainReply = useStore(apiData);
 
   return (
-    <div>
+    <div className="max-w-[1200px] w-full">
       <Breadcrumbs links={["Platform", "Network"]} />
 
       <HeadingText text="Network" scale={1} />

src/modules/Platform/components/Strategies/index.tsx

@@ -41,7 +41,7 @@ const Strategies = (): JSX.Element => {
   }, []);
 
   return (
-    <div>
+    <div className="max-w-[1200px] w-full">
       <Breadcrumbs links={["Platform", "Strategies"]} />
 
       <HeadingText text="Strategies" scale={1} />

src/modules/Platform/index.tsx

@@ -122,7 +122,7 @@ const Platform = (): JSX.Element => {
   ];
 
   return (
-    <div className="flex flex-col min-[1440px]:w-[1338px] gap-[36px]">
+    <div className="flex flex-col max-w-[1200px] w-full gap-[36px]">
       <h1 className="mb-0 text-[40px] font-bold">Platform</h1>
 
       <div className="px-6">

src/modules/Users/components/Contests.tsx

@@ -1,4 +1,4 @@
-import { HeadingText } from "@ui";
+import { Badge, HeadingText } from "@ui";
 
 import { formatTimestampToDate } from "../functions";
 
@@ -25,18 +25,13 @@ const Contests = ({ periodsData }: IContestsProps): JSX.Element => {
                     {formatTimestampToDate(contest.end)}
                   </span>
                 </div>
-                <div
-                  className={
-                    "h-[25px] text-[12px] inline-flex w-[100px] justify-center items-center font-semibold px-[8px] rounded-[100px] mb-2 " +
-                    (!index
-                      ? "bg-neutral-950 text-neutral-500"
-                      : index === 1
-                        ? "bg-success-950 border-[1px] border-success-400 text-success-400"
-                        : "bg-accent-950 border-[1px] border-accent-400 text-accent-400")
+                <Badge
+                  state={
+                    !index ? "default" : index === 1 ? "success" : "accent"
                   }
-                >
-                  {!index ? "Ended" : index === 1 ? "Ongoing" : "Future"}
-                </div>
+                  text={!index ? "Ended" : index === 1 ? "Ongoing" : "Future"}
+                  greater={true}
+                />
 
                 {!!contest.rewards.length && (
                   <div className="flex flex-col">

src/modules/Users/index.tsx

@@ -27,14 +27,14 @@ const Users = (): JSX.Element => {
   // const activeContestInfo = contests?.[currentPeriod];
   // const pastContestInfo = contests?.[previousPeriod];
 
-  const { currentPeriod, previousPeriod, nextPeriod } =
-    findAllValidPeriods(contests);
+  // nextPeriod
+  const { currentPeriod, previousPeriod } = findAllValidPeriods(contests);
 
-  const periodsData = [
-    contests[previousPeriod as keyof YieldContest],
-    contests[currentPeriod as keyof YieldContest],
-    contests[nextPeriod as keyof YieldContest],
-  ];
+  // const periodsData = [
+  //   contests[previousPeriod as keyof YieldContest],
+  //   contests[currentPeriod as keyof YieldContest],
+  //   contests[nextPeriod as keyof YieldContest],
+  // ];
 
   const [activeContest, setActiveContest] = useState(TABLE_TYPES[1]);
 
@@ -72,7 +72,7 @@ const Users = (): JSX.Element => {
   }, [activeContest, allContests]);
 
   return (
-    <div className="flex flex-col xl:min-w-[1000px] gap-[36px]">
+    <div className="flex flex-col xl:min-w-[1000px] max-w-[1200px] gap-[36px]">
       <HeadingText text="Users" scale={1} styles="mb-0" />
       {/* periodsData */}
       <Contests

src/ui/Badge.tsx

@@ -0,0 +1,42 @@
+interface IProps {
+  state: "default" | "bright" | "accent" | "error" | "warning" | "success";
+  text: string;
+  greater?: boolean;
+}
+
+const BUTTON_STYLES = {
+  default: "bg-neutral-950",
+  bright: "bg-neutral-900",
+  accent: "bg-accent-950 border border-accent-400",
+  error: "bg-error-950 border border-error-400",
+  warning: "bg-warning-950 border border-warning-400",
+  success: "bg-success-950 border border-success-400",
+};
+
+const TEXT_STYLES = {
+  default: "text-neutral-500",
+  bright: "text-neutral-50",
+  accent: "text-accent-400",
+  error: "text-error-400",
+  warning: "text-warning-400",
+  success: "text-success-400",
+};
+
+const Badge: React.FC<IProps> = ({ state, text, greater = false }) => {
+  const buttonStyle = BUTTON_STYLES[state];
+  const textStyle = TEXT_STYLES[state];
+
+  return (
+    <div
+      className={`flex items-center justify-center rounded-2xl ${greater ? "max-w-[100px]" : "max-w-[60px]"} ${buttonStyle}`}
+    >
+      <p
+        className={`font-manrope font-semibold px-2 ${greater ? "text-[12px] leading-[17px] py-1" : "text-[10px] leading-[10px] py-[2px]"} ${textStyle}`}
+      >
+        {text}
+      </p>
+    </div>
+  );
+};
+
+export { Badge };

src/ui/index.ts

@@ -17,6 +17,7 @@ import { Checkbox } from "./Checkbox";
 import { HeadingText } from "./HeadingText";
 import { FieldValue } from "./FieldValue";
 import { TableColumnSort } from "./TableColumnSort";
+import { Badge } from "./Badge";
 
 import { AssetsSkeleton } from "./Skeletons/AssetsSkeleton";
 import { ChartSkeleton } from "./Skeletons/ChartSkeleton";
@@ -47,4 +48,5 @@ export {
   HeadingText,
   FieldValue,
   TableColumnSort,
+  Badge,
 };