From 75631ce684bb90b1105bf7ced28b17bcebefd4d9 Mon Sep 17 00:00:00 2001 From: Kyrylo Shmidt Date: Thu, 9 Nov 2023 11:08:18 +0100 Subject: [PATCH] Update Insights Overview styles --- .../EnvironmentTypeCard/styles.ts | 9 -- .../EnvironmentTypes/InsightCard/styles.ts | 14 ++- .../pages/EnvironmentTypes/index.tsx | 54 +++++++---- .../pages/EnvironmentTypes/styles.ts | 94 +++++++++++++------ .../pages/EnvironmentTypes/types.ts | 1 - 5 files changed, 111 insertions(+), 61 deletions(-) diff --git a/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/styles.ts b/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/styles.ts index fa9298653..43b0ac182 100644 --- a/src/components/Documentation/pages/EnvironmentTypes/EnvironmentTypeCard/styles.ts +++ b/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` diff --git a/src/components/Documentation/pages/EnvironmentTypes/InsightCard/styles.ts b/src/components/Documentation/pages/EnvironmentTypes/InsightCard/styles.ts index a9f24723f..061ef5b0c 100644 --- a/src/components/Documentation/pages/EnvironmentTypes/InsightCard/styles.ts +++ b/src/components/Documentation/pages/EnvironmentTypes/InsightCard/styles.ts @@ -10,6 +10,9 @@ export const Container = styled.div` 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` 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` diff --git a/src/components/Documentation/pages/EnvironmentTypes/index.tsx b/src/components/Documentation/pages/EnvironmentTypes/index.tsx index 1a3a54e4e..1dbd05db1 100644 --- a/src/components/Documentation/pages/EnvironmentTypes/index.tsx +++ b/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 ( @@ -25,6 +20,18 @@ const renderEnvironmentsTable = () => { ))} + + ); +}; + +const renderInsightsTable = () => { + const rowsCount = Math.max( + ...environmentTypesData.map((x) => x.insights.length) + ); + const rowsArray = new Array(rowsCount).fill(0); + + return ( + {rowsArray.map((_, i) => ( {environmentTypesData.map((x) => { @@ -52,20 +59,27 @@ export const EnvironmentTypes = () => { return ( - - - - Digma Insight Overview - - - The following lists describes some Digma's capabilities in - analyzing observability for multiple environment types, from local dev - and test through CI to real world production environment. - - - - {renderEnvironmentsTable()} - + + + + + + + + Digma Insight Overview + + + The following lists describes some Digma's capabilities in + analyzing observability for multiple environment types, from local + dev and test through CI to real world production environment. + + + {renderEnvironmentTypesTable()} + + + {renderInsightsTable()} + + ); }; diff --git a/src/components/Documentation/pages/EnvironmentTypes/styles.ts b/src/components/Documentation/pages/EnvironmentTypes/styles.ts index 8a03c87b6..69fe270c5 100644 --- a/src/components/Documentation/pages/EnvironmentTypes/styles.ts +++ b/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` - 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` +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` + 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"; - } - }}; `; diff --git a/src/components/Documentation/pages/EnvironmentTypes/types.ts b/src/components/Documentation/pages/EnvironmentTypes/types.ts index 8d4d8d2ec..6361b72a5 100644 --- a/src/components/Documentation/pages/EnvironmentTypes/types.ts +++ b/src/components/Documentation/pages/EnvironmentTypes/types.ts @@ -13,7 +13,6 @@ export interface EnvironmentTypeData { insights: { type: InsightCardType; count?: number; - isDisabled?: boolean; }[]; }