Update Insights Overview styles

src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/styles.ts

@@ -18,15 +18,6 @@ export const Container = styled.div`
         return "#9b9b9b";
     }
   }};
-  background: ${({ theme }) => {
-    switch (theme.mode) {
-      case "light":
-        return "#fff";
-      case "dark":
-      case "dark-jetbrains":
-        return "#393b40";
-    }
-  }};
 `;
 
 export const Title = styled.div`

src/components/Documentation/pages/EnvironmentTypes/InsightCard/styles.ts

@@ -10,6 +10,9 @@ export const Container = styled.div<ContainerProps>`
   gap: 4px;
   font-size: 14px;
   font-weight: 500;
+  border-radius: 2px;
+  border: 1px solid #434343;
+  box-shadow: 0 4px 8px 0 rgba(0 0 0 / 12%);
   color: ${({ theme }) => {
     switch (theme.mode) {
       case "light":
@@ -19,7 +22,16 @@ export const Container = styled.div<ContainerProps>`
         return "#9b9b9b";
     }
   }};
-  ${({ $isDisabled }) => ($isDisabled ? "opacity: 0.4;" : "")}
+  background: ${({ theme }) => {
+    switch (theme.mode) {
+      case "light":
+        return "#e9eef4";
+      case "dark":
+      case "dark-jetbrains":
+        return "#23282f";
+    }
+  }};
+  ${({ $isDisabled }) => ($isDisabled ? "opacity: 0.6;" : "")}
 `;
 
 export const Header = styled.div`

src/components/Documentation/pages/EnvironmentTypes/index.tsx

@@ -4,12 +4,7 @@ import { InsightCard } from "./InsightCard";
 import { environmentTypesData } from "./data";
 import * as s from "./styles";
 
-const renderEnvironmentsTable = () => {
-  const rowsCount = Math.max(
-    ...environmentTypesData.map((x) => x.insights.length)
-  );
-  const rowsArray = new Array(rowsCount).fill(0);
-
+const renderEnvironmentTypesTable = () => {
   return (
     <s.Table>
       <s.TableRow>
@@ -25,6 +20,18 @@ const renderEnvironmentsTable = () => {
           </s.TableCell>
         ))}
       </s.TableRow>
+    </s.Table>
+  );
+};
+
+const renderInsightsTable = () => {
+  const rowsCount = Math.max(
+    ...environmentTypesData.map((x) => x.insights.length)
+  );
+  const rowsArray = new Array(rowsCount).fill(0);
+
+  return (
+    <s.Table>
       {rowsArray.map((_, i) => (
         <s.TableRow key={i}>
           {environmentTypesData.map((x) => {
@@ -52,20 +59,27 @@ export const EnvironmentTypes = () => {
 
   return (
     <s.Container $columnCount={columnCount}>
-      <s.Header $columnCount={columnCount}>
-        <s.Title>
-          <DigmaLogoIcon size={16} />
-          <span>Digma Insight Overview</span>
-        </s.Title>
-        <span>
-          The following lists describes some Digma&apos;s capabilities in
-          analyzing observability for multiple environment types, from local dev
-          and test through CI to real world production environment.
-        </span>
-      </s.Header>
-      <s.EnvironmentsContainer>
-        {renderEnvironmentsTable()}
-      </s.EnvironmentsContainer>
+      <s.TopGradientBackground />
+      <s.BottomGradientBackground />
+      <s.ContentContainer>
+        <s.Header $columnCount={columnCount}>
+          <s.HeaderTextContainer>
+            <s.Title>
+              <DigmaLogoIcon size={16} />
+              <span>Digma Insight Overview</span>
+            </s.Title>
+            <span>
+              The following lists describes some Digma&apos;s capabilities in
+              analyzing observability for multiple environment types, from local
+              dev and test through CI to real world production environment.
+            </span>
+          </s.HeaderTextContainer>
+          {renderEnvironmentTypesTable()}
+        </s.Header>
+        <s.EnvironmentsContainer>
+          {renderInsightsTable()}
+        </s.EnvironmentsContainer>
+      </s.ContentContainer>
     </s.Container>
   );
 };

src/components/Documentation/pages/EnvironmentTypes/styles.ts

@@ -4,54 +4,98 @@ import { ContainerProps, HeaderProps } from "./types";
 // in pixels
 const COLUMN_MIN_WIDTH = 280;
 const COLUMN_PADDING = 8;
-const ENVIRONMENT_TYPES_OFFSET = 93;
 
 const getContainerMinWidth = (columnCount: number) => {
   return COLUMN_MIN_WIDTH * columnCount + (columnCount + 1) * COLUMN_PADDING;
 };
 
 export const Container = styled.div<ContainerProps>`
-  min-height: 100vh;
+  height: 100%;
   min-width: ${({ $columnCount }) => getContainerMinWidth($columnCount)}px;
   background: ${({ theme }) => {
     switch (theme.mode) {
       case "light":
-        return "#ebecf0";
+        return "rgba(235 236 240 / 59%)";
       case "dark":
       case "dark-jetbrains":
-        return "#191919";
+        return "rgba(66 65 65 / 59%)";
     }
   }};
+  backdrop-filter: blur(12px);
+  overflow: hidden;
 `;
 
-export const Header = styled.div<HeaderProps>`
+export const TopGradientBackground = styled.div`
   position: absolute;
-  min-width: ${({ $columnCount }) => getContainerMinWidth($columnCount)}px;
-  box-sizing: border-box;
-  left: 0;
-  right: 0;
+  top: 0;
+  left: -2.7%;
+  right: -5%;
+  height: 56%;
+  border-radius: 107.7vw;
+  opacity: 0.2;
+  background: radial-gradient(
+    50% 50% at 50% 50%,
+    #4f5da3 0%,
+    rgba(79 93 163 / 0%) 100%
+  );
+  filter: blur(5px);
+  z-index: -1;
+`;
+
+export const BottomGradientBackground = styled.div`
+  position: absolute;
+  top: 47%;
+  left: -3.9%;
+  right: -3.9%;
+  height: 156%;
+  border-radius: 156vh;
+  background: radial-gradient(
+    50% 50% at 50% 50%,
+    #4f5da3 0%,
+    rgba(79 93 163 / 0%) 100%
+  );
+  filter: blur(5px);
+  z-index: -1;
+`;
+
+export const ContentContainer = styled.div`
   display: flex;
-  height: 151px;
-  padding: 12px 12px ${ENVIRONMENT_TYPES_OFFSET}px;
   flex-direction: column;
-  gap: 10px;
-  font-size: 14px;
-  color: ${({ theme }) => {
+  height: 100%;
+  overflow: auto;
+`;
+
+export const Header = styled.div<HeaderProps>`
+  position: sticky;
+  top: 0;
+  display: flex;
+  padding: 16px 16px 1px;
+  flex-direction: column;
+  gap: 7px;
+  border-bottom: 1px solid #484848;
+  background: ${({ theme }) => {
     switch (theme.mode) {
       case "light":
-        return "#828797";
+        return "#e9eef4";
       case "dark":
       case "dark-jetbrains":
-        return "#b4b8bf";
+        return "#2b2d30";
     }
   }};
-  background: ${({ theme }) => {
+`;
+
+export const HeaderTextContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  font-size: 14px;
+  color: ${({ theme }) => {
     switch (theme.mode) {
       case "light":
-        return "#e9eef4";
+        return "#828797";
       case "dark":
       case "dark-jetbrains":
-        return "#2b2d30";
+        return "#b4b8bf";
     }
   }};
 `;
@@ -75,8 +119,7 @@ export const Title = styled.div`
 `;
 
 export const EnvironmentsContainer = styled.div`
-  position: relative;
-  padding: ${ENVIRONMENT_TYPES_OFFSET}px ${COLUMN_PADDING}px ${COLUMN_PADDING}px;
+  padding: 15px 16px ${COLUMN_PADDING}px;
 `;
 
 export const Table = styled.div`
@@ -95,13 +138,4 @@ export const TableCell = styled.div`
   display: flex;
   flex: 1 1 0;
   padding-bottom: 12px;
-  background: ${({ theme }) => {
-    switch (theme.mode) {
-      case "light":
-        return "#f7f8fa";
-      case "dark":
-      case "dark-jetbrains":
-        return "#1e1f22";
-    }
-  }};
 `;

src/components/Documentation/pages/EnvironmentTypes/types.ts

@@ -13,7 +13,6 @@ export interface EnvironmentTypeData {
   insights: {
     type: InsightCardType;
     count?: number;
-    isDisabled?: boolean;
   }[];
 }