diff --git a/src/components/Assets/AssetList/AssetEntry/styles.ts b/src/components/Assets/AssetList/AssetEntry/styles.ts index 9c3c1b48d..93da7725d 100644 --- a/src/components/Assets/AssetList/AssetEntry/styles.ts +++ b/src/components/Assets/AssetList/AssetEntry/styles.ts @@ -20,15 +20,8 @@ export const Container = styled.div` return "#9b9b9b"; } }}; - background: ${({ theme }) => { - switch (theme.mode) { - case "light": - return "#f1f5fa"; - case "dark": - case "dark-jetbrains": - return "#383838"; - } - }}; + background: ${({ theme }) => theme.colors.v3.surface.secondary}; + border: 1px solid ${({ theme }) => theme.colors.v3.stroke.primary}; `; export const Header = styled.div` diff --git a/src/components/Assets/AssetList/AssetList.stories.tsx b/src/components/Assets/AssetList/AssetList.stories.tsx index 9b1303009..6d5b3e1ea 100644 --- a/src/components/Assets/AssetList/AssetList.stories.tsx +++ b/src/components/Assets/AssetList/AssetList.stories.tsx @@ -1,5 +1,6 @@ import { Meta, StoryObj } from "@storybook/react"; +import { fn } from "@storybook/test"; import { AssetList } from "."; import { ConfigContext, initialState } from "../../common/App/ConfigContext"; import { ConfigContextData, DeploymentType } from "../../common/App/types"; @@ -38,6 +39,7 @@ const mockedConfig: ConfigContextData = { export const Default: Story = { args: { + onAssetCountChange: fn(), setRefresher: () => { return undefined; }, @@ -63,6 +65,7 @@ export const WithPerformanceImpact: Story = { ) ], args: { + onAssetCountChange: fn(), setRefresher: () => { return undefined; }, diff --git a/src/components/Assets/index.tsx b/src/components/Assets/index.tsx index d935101f2..73e3a6e9c 100644 --- a/src/components/Assets/index.tsx +++ b/src/components/Assets/index.tsx @@ -10,6 +10,7 @@ import { useHistory } from "../Main/useHistory"; import { EmptyState } from "../common/EmptyState"; import { SearchInput } from "../common/SearchInput"; import { RefreshIcon } from "../common/icons/16px/RefreshIcon"; +import { NewIconButton } from "../common/v3/NewIconButton"; import { Tooltip } from "../common/v3/Tooltip"; import { AssetList } from "./AssetList"; import { AssetTypeList } from "./AssetTypeList"; @@ -160,8 +161,8 @@ export const Assets = () => { /> - diff --git a/src/components/Assets/styles.ts b/src/components/Assets/styles.ts index f3b78a9e0..f07f1241c 100644 --- a/src/components/Assets/styles.ts +++ b/src/components/Assets/styles.ts @@ -1,5 +1,4 @@ import styled from "styled-components"; -import { Button } from "../common/v3/Button"; export const Container = styled.div` height: 100%; @@ -105,14 +104,3 @@ export const UpgradeMessage = styled.div` text-align: center; gap: 8px; `; - -export const RefreshButton = styled(Button)` - color: ${({ theme }) => theme.colors.v3.icon.tertiary}; - border: 1px solid ${({ theme }) => theme.colors.v3.stroke.dark}; - background: ${({ theme }) => theme.colors.v3.surface.primary}; - - &:hover:enabled { - color: ${({ theme }) => theme.colors.v3.icon.white}; - background: none; - } -`; diff --git a/src/components/Highlights/EmptyStateCard/styles.ts b/src/components/Highlights/EmptyStateCard/styles.ts index 37013c574..56b2b6861 100644 --- a/src/components/Highlights/EmptyStateCard/styles.ts +++ b/src/components/Highlights/EmptyStateCard/styles.ts @@ -28,7 +28,7 @@ export const Card = styled(CommonCard)` $blurredBackground ? css` background: none; - backdrop-filter: blur(4px); + backdrop-filter: blur(12px); ` : ""}; `; @@ -82,7 +82,7 @@ export const TextContainer = styled.div` align-items: center; justify-content: center; gap: 2px; - color: ${({ theme }) => theme.colors.v3.text.secondary}; + color: ${({ theme }) => theme.colors.v3.text.tertiary}; `; export const Title = styled.span` diff --git a/src/components/Highlights/Impact/index.tsx b/src/components/Highlights/Impact/index.tsx index 62a49f0cf..0b538c25b 100644 --- a/src/components/Highlights/Impact/index.tsx +++ b/src/components/Highlights/Impact/index.tsx @@ -8,8 +8,8 @@ import { SCOPE_CHANGE_EVENTS } from "../../Main/types"; import { InfinityIcon } from "../../common/icons/16px/InfinityIcon"; import { RefreshIcon } from "../../common/icons/16px/RefreshIcon"; import { TargetIcon } from "../../common/icons/16px/TargetIcon"; -import { Button } from "../../common/v3/Button"; import { Card } from "../../common/v3/Card"; +import { NewButton } from "../../common/v3/NewButton"; import { Tag } from "../../common/v3/Tag"; import { EmptyStateCard } from "../EmptyStateCard"; import { EnvironmentName } from "../common/EnvironmentName"; @@ -176,7 +176,7 @@ export const Impact = () => { text={"Connect a CI environment to measure performance impact"} blurredContent={renderImpactCard(demoData)} customContent={ -