Fix/light theme

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`

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;
     },

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 = () => {
               />
               <AssetsFilter />
               <Tooltip title={"Refresh"}>
-                <s.RefreshButton
-                  buttonType={"tertiary"}
+                <NewIconButton
+                  buttonType={"secondary"}
                   icon={RefreshIcon}
                   onClick={handleRefresh}
                 />

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;
-  }
-`;

src/components/Highlights/EmptyStateCard/styles.ts

@@ -28,7 +28,7 @@ export const Card = styled(CommonCard)<CardProps>`
     $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`

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={
-            <Button
+            <NewButton
               buttonType={"secondary"}
               onClick={handleLearnMoreButtonClick}
               label={"Learn more"}

src/components/Highlights/Scaling/index.tsx

@@ -13,8 +13,8 @@ import { CrossCircleIcon } from "../../common/icons/16px/CrossCircleIcon";
 import { MeterHighIcon } from "../../common/icons/16px/MeterHighIcon";
 import { RefreshIcon } from "../../common/icons/16px/RefreshIcon";
 import { CheckCircleIcon } from "../../common/icons/20px/CheckCircleIcon";
-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 { addEnvironmentColumns } from "../TopIssues/highlightCards/addEnvironmentColumns";
@@ -189,7 +189,7 @@ export const Scaling = () => {
           title={"Unlock Scaling Issues"}
           text={"Connect a CI/Prod environment to run code at scale"}
           customContent={
-            <Button
+            <NewButton
               buttonType={"secondary"}
               onClick={handleLearnMoreButtonClick}
               label={"Learn more"}
@@ -219,7 +219,7 @@ export const Scaling = () => {
           title={"No scaling issue found"}
           text={"Looks like this asset is scaling well"}
           customContent={
-            <Button
+            <NewButton
               buttonType={"secondary"}
               onClick={handleViewAnalyticsButtonClick}
               label={"View analytics"}

src/components/Insights/InsightsCatalog/EnvironmentSelector/EnvironmentChip/styles.ts

@@ -35,7 +35,7 @@ export const Counter = styled.div<CounterProps>`
   display: flex;
   justify-content: center;
   padding: 0 4px;
-  color: ${({ theme }) => theme.colors.v3.text.white};
+  color: ${({ theme }) => theme.colors.v3.text.primary};
   border-radius: 2px;
   margin-left: auto;
 

src/components/Insights/InsightsCatalog/FilterPanel/FilterChip/styles.ts

@@ -11,7 +11,7 @@ export const StatCounter = styled.div`
   display: flex;
   justify-content: center;
   padding: 0 4px;
-  color: ${({ theme }) => theme.colors.v3.text.white};
+  color: ${({ theme }) => theme.colors.v3.text.primary};
   border-radius: 2px;
   background: ${({ theme }) => theme.colors.v3.surface.highlight};
 `;

src/components/Insights/InsightsCatalog/index.tsx

@@ -19,7 +19,7 @@ import { ChevronIcon } from "../../common/icons/16px/ChevronIcon";
 import { EyeIcon } from "../../common/icons/16px/EyeIcon";
 import { RefreshIcon } from "../../common/icons/16px/RefreshIcon";
 import { Direction } from "../../common/icons/types";
-import { Button } from "../../common/v3/Button";
+import { NewButton } from "../../common/v3/NewButton";
 import { NewIconButton } from "../../common/v3/NewIconButton";
 import { Tooltip } from "../../common/v3/Tooltip";
 import { IssuesFilter } from "../Issues/IssuesFilter";
@@ -330,8 +330,8 @@ export const InsightsCatalog = ({
           </>
         )}
         {isDismissalViewModeButtonVisible && (
-          <Button
-            buttonType={"tertiary"}
+          <NewButton
+            buttonType={"secondaryBorderless"}
             icon={(props) => (
               <EyeIcon
                 {...props}

src/components/RecentActivity/Badge/index.tsx

@@ -2,16 +2,8 @@ import React from "react";
 import * as s from "./styles";
 import { BadgeProps } from "./types";
 
-const BadgeComponent = ({
-  size = "small",
-  backgroundColor,
-  borderColor
-}: BadgeProps) => (
-  <s.Badge
-    $backgroundColor={backgroundColor}
-    $borderColor={borderColor}
-    $size={size}
-  />
+const BadgeComponent = ({ size = "small", className }: BadgeProps) => (
+  <s.Badge className={className} $size={size} />
 );
 
 export const Badge = React.memo(BadgeComponent);

src/components/RecentActivity/Badge/styles.ts

@@ -1,5 +1,4 @@
 import styled from "styled-components";
-import { grayScale } from "../../common/App/v2colors";
 import { BadgeElementProps, BadgeSize } from "./types";
 
 const getDimensions = (size: BadgeSize) => {
@@ -16,6 +15,6 @@ export const Badge = styled.div<BadgeElementProps>`
   height: ${({ $size }) => getDimensions($size)}px;
   width: ${({ $size }) => getDimensions($size)}px;
   border-radius: 2px;
-  background: ${({ $backgroundColor = grayScale[200] }) => $backgroundColor};
-  border: 2px solid ${({ $borderColor = grayScale[850] }) => $borderColor};
+  border: 2px solid ${({ theme }) => theme.colors.v3.surface.secondary};
+  background: ${({ theme }) => theme.colors.v3.status.success};
 `;

src/components/RecentActivity/Badge/types.ts

@@ -1,9 +1,8 @@
 export type BadgeSize = "small" | "large";
 
 export interface BadgeProps {
-  backgroundColor?: string;
-  borderColor?: string;
   size?: BadgeSize;
+  className?: string;
 }
 
 export interface BadgeElementProps {

src/components/RecentActivity/EnvironmentPanel/EnvironmentTab/EnvironmentTab.stories.tsx

@@ -0,0 +1,42 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { EnvironmentTab } from ".";
+import { ExtendedEnvironment } from "../../types";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta: Meta<typeof EnvironmentTab> = {
+  title: "Recent Activity/EnvironmentPanel/EnvironmentTab",
+  component: EnvironmentTab,
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout
+    layout: "fullscreen"
+  }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+const env: ExtendedEnvironment = {
+  name: "ENV_RENDER",
+  id: "ENV_RENDER#ID#1",
+  isPending: false,
+  type: "Public",
+  token: null,
+  serverApiUrl: null,
+  isOrgDigmaSetupFinished: false,
+  hasRecentActivity: false
+};
+
+export const Default: Story = {
+  args: {
+    environment: env
+  }
+};
+
+export const DefaultWithRecentActivity: Story = {
+  args: {
+    environment: {
+      ...env,
+      hasRecentActivity: true
+    }
+  }
+};

src/components/RecentActivity/EnvironmentPanel/EnvironmentTab/index.tsx

@@ -1,6 +1,5 @@
 import { useState } from "react";
 import { sendUserActionTrackingEvent } from "../../../../utils/actions/sendUserActionTrackingEvent";
-import { greenScale } from "../../../common/App/v2colors";
 import { EnvironmentIcon } from "../../../common/EnvironmentIcon";
 import { NewPopover } from "../../../common/NewPopover";
 import { Tooltip } from "../../../common/Tooltip";
@@ -69,12 +68,7 @@ export const EnvironmentTab = ({
       <Tooltip title={environment.name}>
         <s.LabelContainer>
           <s.Label $isSelected={isSelected}>{environment.name}</s.Label>
-          {environment.hasRecentActivity && (
-            <Badge
-              backgroundColor={greenScale[300]}
-              borderColor={greenScale[400]}
-            />
-          )}
+          {environment.hasRecentActivity && <Badge />}
         </s.LabelContainer>
       </Tooltip>
       {menuItems.length > 0 && (

src/components/RecentActivity/RecentActivityTable/index.tsx

@@ -11,7 +11,6 @@ import { formatTimeDistance } from "../../../utils/formatTimeDistance";
 import { getDurationString } from "../../../utils/getDurationString";
 import { getInsightTypeInfo } from "../../../utils/getInsightTypeInfo";
 import { getInsightTypeOrderPriority } from "../../../utils/getInsightTypeOrderPriority";
-import { greenScale } from "../../common/App/v2colors";
 import { NewButton } from "../../common/NewButton";
 import { Tag } from "../../common/Tag";
 import { Tooltip } from "../../common/Tooltip";
@@ -38,7 +37,7 @@ export const isRecent = (entry: ActivityEntry): boolean => {
 
 const renderBadge = () => (
   <s.BadgeContainer>
-    <Badge backgroundColor={greenScale[300]} borderColor={greenScale[400]} />
+    <Badge />
   </s.BadgeContainer>
 );