Restyle Recent Activity

src/components/RecentActivity/Badge/index.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import * as s from "./styles";
+import { BadgeProps } from "./types";
+
+const BadgeComponent = (props: BadgeProps) => {
+  const size = props.size || "small";
+
+  return (
+    <s.Badge
+      $backgroundColor={props.backgroundColor}
+      $borderColor={props.borderColor}
+      $size={size}
+    />
+  );
+};
+
+export const Badge = React.memo(BadgeComponent);

src/components/RecentActivity/Badge/styles.ts

@@ -0,0 +1,21 @@
+import styled from "styled-components";
+import { grayScale } from "../../common/App/getTheme";
+import { BadgeElementProps, BadgeSize } from "./types";
+
+const getDimensions = (size: BadgeSize) => {
+  switch (size) {
+    case "small":
+      return 8;
+    case "large":
+      return 10;
+  }
+};
+
+export const Badge = styled.div<BadgeElementProps>`
+  box-sizing: border-box;
+  height: ${({ $size }) => getDimensions($size)}px;
+  width: ${({ $size }) => getDimensions($size)}px;
+  border-radius: 2px;
+  background: ${({ $backgroundColor }) => $backgroundColor || grayScale[200]};
+  border: 2px solid ${({ $borderColor }) => $borderColor || grayScale[850]};
+`;

src/components/RecentActivity/Badge/types.ts

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

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

@@ -1,12 +1,13 @@
 import { useCallback, useContext, useRef, useState } from "react";
 import { ConfigContext } from "../../../common/App/ConfigContext";
-import { Badge } from "../../../common/Badge";
+import { greenScale } from "../../../common/App/getTheme";
 import { KebabMenuButton } from "../../../common/KebabMenuButton";
 import { NewPopover } from "../../../common/NewPopover";
 import { Tooltip } from "../../../common/Tooltip";
 import { DesktopIcon } from "../../../common/icons/DesktopIcon";
 import { InfinityIcon } from "../../../common/icons/InfinityIcon";
 import { TrashBinIcon } from "../../../common/icons/TrashBinIcon";
+import { Badge } from "../../Badge";
 import { EnvironmentMenu } from "../../EnvironmentMenu";
 import * as s from "./styles";
 import { EnvironmentTabProps } from "./types";
@@ -81,14 +82,17 @@ export const EnvironmentTab = (props: EnvironmentTabProps) => {
       onBlur={handleBlur}
       onClick={handleClick}
     >
-      {props.environment.hasRecentActivity && (
-        <s.BadgeContainer>
-          <Badge />
-        </s.BadgeContainer>
-      )}
       {renderIcon()}
       <Tooltip title={props.environment.name}>
-        <s.Label>{props.environment.name}</s.Label>
+        <s.LabelContainer>
+          <s.Label>{props.environment.name}</s.Label>
+          {props.environment.hasRecentActivity && (
+            <Badge
+              backgroundColor={greenScale[300]}
+              borderColor={greenScale[400]}
+            />
+          )}
+        </s.LabelContainer>
       </Tooltip>
       {isMenuVisible &&
         menuItems.length > 0 &&

src/components/RecentActivity/EnvironmentPanel/EnvironmentTab/styles.ts

@@ -3,74 +3,51 @@ import { ContainerProps } from "./types";
 
 export const Container = styled.li<ContainerProps>`
   display: flex;
-  position: relative;
   cursor: pointer;
-  font-weight: ${({ $isSelected }) => ($isSelected ? 700 : 500)};
-  font-size: 14px;
-  padding: 4px 12px;
+  font-size: 13px;
+  padding: 0 4px;
   user-select: none;
   align-items: center;
   gap: 4px;
-  color: ${({ $isPending, $isSelected, theme }) => {
+  box-sizing: border-box;
+  color: ${({ theme, $isPending, $isSelected }) => {
     if ($isPending) {
-      switch (theme.mode) {
-        case "light":
-          return "#c9ccd6";
-        case "dark":
-        case "dark-jetbrains":
-          return "#5a5d63";
-      }
+      return theme.colors.tab.text.disabled;
     }
 
     if ($isSelected) {
-      switch (theme.mode) {
-        case "light":
-          return "#494b57";
-        case "dark":
-          return "#b9c2eb";
-        case "dark-jetbrains":
-          return "#dfe1e5";
-      }
+      return theme.colors.tab.text.focus;
     }
 
-    switch (theme.mode) {
-      case "light":
-        return "#818594";
-      case "dark":
-        return "#7c7c94";
-      case "dark-jetbrains":
-        return "#b4b8bf";
-    }
+    return theme.colors.tab.text.default;
   }};
-  border-bottom: ${({ $isSelected }) =>
-    $isSelected ? "1px solid #5154ec" : "none"};
-
-  &:hover {
-    font-weight: 700;
-    ${({ theme, $isPending }) => {
-      let color = "";
+  background: ${({ theme }) => theme.colors.tab.background.default};
+  border-bottom: ${({ theme, $isSelected }) =>
+    $isSelected ? `1px solid ${theme.colors.tab.borderBottom.focus}` : "none"};
+
+  &:hover,
+  &:focus {
+    color: ${({ theme, $isPending, $isSelected }) => {
+      if ($isPending) {
+        return theme.colors.tab.text.disabled;
+      }
 
-      if (!$isPending) {
-        switch (theme.mode) {
-          case "light":
-            color = "#002d61";
-            break;
-          case "dark":
-            color = "#b9c2eb";
-            break;
-          case "dark-jetbrains":
-            color = "#dfe1e5";
-            break;
-        }
+      if ($isSelected) {
+        return theme.colors.tab.text.focus;
       }
 
-      return color ? `color: ${color};` : "";
+      return theme.colors.tab.text.hover;
     }};
+    background: ${({ theme }) => theme.colors.tab.background.hover};
+    border-bottom: ${({ theme }) =>
+      `1px solid ${theme.colors.tab.borderBottom.hover}`};
   }
+`;
 
-  transition-property: color, font-weight;
-  transition-duration: 300ms;
-  transition-timing-function: ease-out;
+export const LabelContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
 `;
 
 export const Label = styled.span`
@@ -79,9 +56,3 @@ export const Label = styled.span`
   overflow: hidden;
   max-width: 110px;
 `;
-
-export const BadgeContainer = styled.div`
-  position: absolute;
-  top: -1px;
-  left: -1px;
-`;

src/components/RecentActivity/EnvironmentPanel/EnvironmentTab/types.ts

@@ -1,5 +1,24 @@
 import { ExtendedEnvironment } from "../../types";
 
+export interface TabThemeColors {
+  text: {
+    default: string;
+    hover: string;
+    focus: string;
+    disabled: string;
+  };
+  background: {
+    default: string;
+    hover: string;
+    focus: string;
+    disabled: string;
+  };
+  borderBottom: {
+    hover: string;
+    focus: string;
+  };
+}
+
 export interface EnvironmentTabProps {
   environment: ExtendedEnvironment;
   isSelected: boolean;

src/components/RecentActivity/EnvironmentPanel/index.tsx

@@ -1,14 +1,11 @@
 import { useEffect, useState } from "react";
 import useDimensions from "react-cool-dimensions";
 import { RECENT_ACTIVITY_CONTAINER_ID } from "..";
-import { IconButton } from "../../common/IconButton";
 import { NewButton } from "../../common/NewButton";
 import { NewPopover } from "../../common/NewPopover";
 import { ChevronIcon } from "../../common/icons/ChevronIcon";
-import { DigmaLogoFlatDetailedIcon } from "../../common/icons/DigmaLogoFlatDetailedIcon";
-import { ListIcon } from "../../common/icons/ListIcon";
+import { DigmaLogoIcon } from "../../common/icons/DigmaLogoIcon";
 import { PlusIcon } from "../../common/icons/PlusIcon";
-import { TableIcon } from "../../common/icons/TableIcon";
 import { Direction } from "../../common/icons/types";
 import { AddEnvironmentDialog } from "../AddEnvironmentDialog";
 import { ExtendedEnvironment } from "../types";
@@ -42,16 +39,6 @@ export const EnvironmentPanel = (props: EnvironmentPanelProps) => {
     props.onEnvironmentSelect(environment);
   };
 
-  const icons = {
-    list: ListIcon,
-    table: TableIcon
-  };
-
-  const handleViewModeButtonClick = () => {
-    const mode = props.viewMode === "table" ? "list" : "table";
-    props.onViewModeChange(mode);
-  };
-
   const handleCloseAddEnvironmentDialog = () => {
     setIsAddEnvironmentDialogOpen(false);
   };
@@ -146,59 +133,54 @@ export const EnvironmentPanel = (props: EnvironmentPanelProps) => {
   };
 
   return (
-    <s.BorderContainer>
-      <s.Container>
-        <s.LogoRotationContainer>
-          <s.LogoContainer>
-            <DigmaLogoFlatDetailedIcon color={"#5154ec"} size={22} />
-          </s.LogoContainer>
-        </s.LogoRotationContainer>
-        <s.CarouselButtonContainer key={"left"}>
-          {areCarouselButtonsVisible && (
-            <s.CarouselButton
-              onClick={() => handleCarouselButtonClick("left")}
-              disabled={isLeftCarouselButtonDisabled}
-            >
-              <ChevronIcon direction={Direction.LEFT} color={"currentColor"} />
-            </s.CarouselButton>
-          )}
-        </s.CarouselButtonContainer>
-        <s.EnvironmentListContainer
-          ref={environmentListContainerDimensions.observe}
-        >
-          <s.EnvironmentList ref={environmentListDimensions.observe}>
-            {props.environments.map((environment) => (
-              <EnvironmentTab
-                key={environment.originalName}
-                environment={environment}
-                isSelected={
-                  props.selectedEnvironment?.originalName ===
-                  environment.originalName
-                }
-                onClick={handleEnvironmentTabClick}
-                onEnvironmentDelete={handleEnvironmentDelete}
-              />
-            ))}
-          </s.EnvironmentList>
-        </s.EnvironmentListContainer>
-        <s.CarouselButtonContainer key={"right"}>
-          {areCarouselButtonsVisible && (
-            <s.CarouselButton
-              onClick={() => handleCarouselButtonClick("right")}
-              disabled={isRightCarouselButtonDisabled}
-            >
-              <ChevronIcon direction={Direction.RIGHT} color={"currentColor"} />
-            </s.CarouselButton>
-          )}
-        </s.CarouselButtonContainer>
-        <s.ButtonsContainer>
-          {isAddButtonVisible && renderAddButton()}
-          <IconButton
-            icon={icons[props.viewMode]}
-            onClick={handleViewModeButtonClick}
-          />
-        </s.ButtonsContainer>
-      </s.Container>
-    </s.BorderContainer>
+    <s.Container>
+      <s.LogoRotationContainer>
+        <s.LogoContainer>
+          <DigmaLogoIcon size={12} />
+        </s.LogoContainer>
+      </s.LogoRotationContainer>
+      <s.Divider />
+      <s.CarouselButtonContainer key={"left"}>
+        {areCarouselButtonsVisible && (
+          <s.CarouselButton
+            onClick={() => handleCarouselButtonClick("left")}
+            disabled={isLeftCarouselButtonDisabled}
+          >
+            <ChevronIcon direction={Direction.LEFT} color={"currentColor"} />
+          </s.CarouselButton>
+        )}
+      </s.CarouselButtonContainer>
+      <s.EnvironmentListContainer
+        ref={environmentListContainerDimensions.observe}
+      >
+        <s.EnvironmentList ref={environmentListDimensions.observe}>
+          {props.environments.map((environment) => (
+            <EnvironmentTab
+              key={environment.originalName}
+              environment={environment}
+              isSelected={
+                props.selectedEnvironment?.originalName ===
+                environment.originalName
+              }
+              onClick={handleEnvironmentTabClick}
+              onEnvironmentDelete={handleEnvironmentDelete}
+            />
+          ))}
+        </s.EnvironmentList>
+      </s.EnvironmentListContainer>
+      <s.CarouselButtonContainer key={"right"}>
+        {areCarouselButtonsVisible && (
+          <s.CarouselButton
+            onClick={() => handleCarouselButtonClick("right")}
+            disabled={isRightCarouselButtonDisabled}
+          >
+            <ChevronIcon direction={Direction.RIGHT} color={"currentColor"} />
+          </s.CarouselButton>
+        )}
+      </s.CarouselButtonContainer>
+      <s.ButtonsContainer>
+        {isAddButtonVisible && renderAddButton()}
+      </s.ButtonsContainer>
+    </s.Container>
   );
 };