Restyle Recent activity registration and environment type selection

package.json

@@ -109,6 +109,7 @@
     "react-cool-dimensions": "^3.0.1",
     "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",
+    "react-hook-form": "^7.48.2",
     "react-scrollbar-size": "^5.0.0",
     "react-syntax-highlighter": "^15.5.0",
     "react-transition-group": "^4.4.5",

src/components/Assets/FilterMenu/styles.ts

@@ -167,7 +167,7 @@ export const Tag = styled.div`
   border-radius: 2px;
   align-items: center;
   gap: 4px;
-  background: rgba(53 56 205 / 50%);
+  background: rgb(53 56 205 / 50%);
   font-size: 14px;
   padding: 4px;
   color: #dfe1e5;

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

@@ -21,10 +21,10 @@ export const Container = styled.div<ContainerProps>`
     }
     switch (theme.mode) {
       case "light":
-        return "rgba(103 210 139 / 64%)";
+        return "rgb(103 210 139 / 64%)";
       case "dark":
       case "dark-jetbrains":
-        return "rgba(103 210 139 / 24%)";
+        return "rgb(103 210 139 / 24%)";
     }
   }};
 `;

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

@@ -12,7 +12,7 @@ export const Container = styled.div<ContainerProps>`
   font-weight: 500;
   border-radius: 2px;
   border: 1px solid #434343;
-  box-shadow: 0 4px 8px 0 rgba(0 0 0 / 12%);
+  box-shadow: 0 4px 8px 0 rgb(0 0 0 / 12%);
   color: ${({ theme }) => {
     switch (theme.mode) {
       case "light":
@@ -81,10 +81,10 @@ export const CountChip = styled(Chip)<CountChipProps>`
   background: ${({ theme, $count }) => {
     switch (theme.mode) {
       case "light":
-        return `rgba(${$count > 0 ? "29 198 147" : "224 0 54"} / 30%)`;
+        return `rgb(${$count > 0 ? "29 198 147" : "224 0 54"} / 30%)`;
       case "dark":
       case "dark-jetbrains":
-        return `rgba(${$count > 0 ? "103 210 139" : "249 57 103"} / 30%)`;
+        return `rgb(${$count > 0 ? "103 210 139" : "249 57 103"} / 30%)`;
     }
   }};
 `;

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

@@ -15,10 +15,10 @@ export const Container = styled.div<ContainerProps>`
   background: ${({ theme }) => {
     switch (theme.mode) {
       case "light":
-        return "rgba(235 236 240 / 59%)";
+        return "rgb(235 236 240 / 59%)";
       case "dark":
       case "dark-jetbrains":
-        return "rgba(66 65 65 / 59%)";
+        return "rgb(66 65 65 / 59%)";
     }
   }};
   backdrop-filter: blur(12px);
@@ -36,7 +36,7 @@ export const TopGradientBackground = styled.div`
   background: radial-gradient(
     50% 50% at 50% 50%,
     #4f5da3 0%,
-    rgba(79 93 163 / 0%) 100%
+    rgb(79 93 163 / 0%) 100%
   );
   filter: blur(5px);
   z-index: -1;
@@ -52,7 +52,7 @@ export const BottomGradientBackground = styled.div`
   background: radial-gradient(
     50% 50% at 50% 50%,
     #4f5da3 0%,
-    rgba(79 93 163 / 0%) 100%
+    rgb(79 93 163 / 0%) 100%
   );
   filter: blur(5px);
   z-index: -1;

src/components/RecentActivity/EnvironmentTypePanel/index.tsx

@@ -1,28 +1,13 @@
-import { ReactNode, useCallback, useState } from "react";
 import { sendTrackingEvent } from "../../../utils/sendTrackingEvent";
-import { CodeDisplayIcon } from "../../common/icons/CodeDisplayIcon";
-import { InfiniteLoopIcon } from "../../common/icons/InfiniteLoopIcon";
+import { NewButton } from "../../common/NewButton";
+import { CodeIcon } from "../../common/icons/CodeIcon";
+import { InfinityIcon } from "../../common/icons/InfinityIcon";
 import { trackingEvents } from "../tracking";
 import { EnvironmentType } from "../types";
 import * as s from "./styles";
-import { EnvironmentTypePanelProps } from "./types";
+import { EnvironmentTypeData, EnvironmentTypePanelProps } from "./types";
 
 export const EnvironmentTypePanel = (props: EnvironmentTypePanelProps) => {
-  const [selectedType, setSelectedType] = useState<EnvironmentType>();
-
-  const handleMouseEnter = useCallback(
-    (type: EnvironmentType) => setSelectedType(type),
-    []
-  );
-
-  const handleMouseLeave = useCallback(() => setSelectedType(undefined), []);
-
-  const handleFocus = useCallback(
-    (type: EnvironmentType) => setSelectedType(type),
-    []
-  );
-  const handleBlur = useCallback(() => setSelectedType(undefined), []);
-
   const handleEnvironmentTypeButtonClick = (type: EnvironmentType) => {
     const typeData = environmentTypes.find((x) => x.type === type);
 
@@ -35,73 +20,58 @@ export const EnvironmentTypePanel = (props: EnvironmentTypePanelProps) => {
     props.onEnvironmentTypeSelect(props.environment.originalName, type);
   };
 
-  const environmentTypes: {
-    type: EnvironmentType;
-    title: string;
-    description: ReactNode;
-    icon: ReactNode;
-  }[] = [
+  const environmentTypes: EnvironmentTypeData[] = [
     {
       type: "local",
       title: "Local environment",
       description:
         "Define an environment for specific branches, types of tests or other criteria",
-      icon: <CodeDisplayIcon />
+      icon: <CodeIcon size={16} color={"currentColor"} />,
+      button: (
+        <NewButton
+          onClick={() => handleEnvironmentTypeButtonClick("local")}
+          label={"Add"}
+          buttonType={"primary"}
+          size={"large"}
+        />
+      )
     },
     {
       type: "shared",
       title: "CI/Prod environment",
       description:
         "Connect to centralized org systems such as CI builds, production servers etc.",
-      icon: <InfiniteLoopIcon />
+      icon: <InfinityIcon size={16} color={"currentColor"} />,
+      button: (
+        <NewButton
+          onClick={() => handleEnvironmentTypeButtonClick("local")}
+          label={"Learn more"}
+          buttonType={"secondary"}
+          size={"large"}
+        />
+      )
     }
   ];
 
-  const getEnvironmentTypeDescription = (type: EnvironmentType) => {
-    const data = environmentTypes.find((x) => x.type === type);
-
-    if (!data) {
-      return null;
-    }
-
-    return (
-      <>
-        <s.EnvironmentTypeDescriptionTitle>
-          {data.title}
-        </s.EnvironmentTypeDescriptionTitle>
-        {data.description}
-      </>
-    );
-  };
-
   return (
     <s.Container>
       <s.Title>Choose environment type</s.Title>
       <s.Subtitle>
         Choose which environment type you would like to create
       </s.Subtitle>
       <s.ContentContainer>
-        <s.EnvironmentTypeDescription>
-          {selectedType === "local" && getEnvironmentTypeDescription("local")}
-        </s.EnvironmentTypeDescription>
         {environmentTypes.map((x) => (
-          <s.EnvironmentTypeButton
-            key={x.type}
-            onClick={() => handleEnvironmentTypeButtonClick(x.type)}
-            onMouseEnter={() => handleMouseEnter(x.type)}
-            onMouseLeave={() => handleMouseLeave()}
-            onFocus={() => handleFocus(x.type)}
-            onBlur={() => handleBlur()}
-          >
+          <s.EnvironmentTypeCard key={x.type}>
             <s.EnvironmentTypeIconContainer>
               {x.icon}
             </s.EnvironmentTypeIconContainer>
-            {x.title}
-          </s.EnvironmentTypeButton>
+            <s.EnvironmentTypeTextContainer>
+              <s.EnvironmentTypeTitle>{x.title}</s.EnvironmentTypeTitle>
+              {x.description}
+            </s.EnvironmentTypeTextContainer>
+            {x.button}
+          </s.EnvironmentTypeCard>
         ))}
-        <s.EnvironmentTypeDescription>
-          {selectedType === "shared" && getEnvironmentTypeDescription("shared")}
-        </s.EnvironmentTypeDescription>
       </s.ContentContainer>
     </s.Container>
   );