From ae058c6bac7ea37108e2894e419a22dfb95fd3ff Mon Sep 17 00:00:00 2001
From: Nate Sesti <sestinj@gmail.com>
Date: Sat, 12 Aug 2023 12:13:49 -0700
Subject: feat: :lipstick: UI Improvements!

---
 .../react-app/src/components/StepContainer.tsx     | 122 ++++++++++-----------
 1 file changed, 55 insertions(+), 67 deletions(-)

(limited to 'extension/react-app/src/components/StepContainer.tsx')

diff --git a/extension/react-app/src/components/StepContainer.tsx b/extension/react-app/src/components/StepContainer.tsx
index fe81e9e1..ce7d9a58 100644
--- a/extension/react-app/src/components/StepContainer.tsx
+++ b/extension/react-app/src/components/StepContainer.tsx
@@ -1,12 +1,6 @@
 import { useContext, useEffect, useRef, useState } from "react";
 import styled, { keyframes } from "styled-components";
-import {
-  defaultBorderRadius,
-  secondaryDark,
-  vscBackground,
-  vscBackgroundTransparent,
-  vscForeground,
-} from ".";
+import { secondaryDark, vscBackground } from ".";
 import {
   ChevronDownIcon,
   ChevronRightIcon,
@@ -48,18 +42,10 @@ const MainDiv = styled.div<{
   margin-right: 0px;
 `;
 
-const StepContainerDiv = styled.div<{ open: boolean }>`
-  /* background-color: ${(props) =>
-    props.open ? vscBackground : secondaryDark}; */
-  /* border-radius: ${defaultBorderRadius}; */
-  /* padding: 8px; */
-`;
-
 const HeaderDiv = styled.div<{ error: boolean; loading: boolean }>`
   background-color: ${(props) => (props.error ? "#522" : vscBackground)};
   display: grid;
   grid-template-columns: 1fr auto auto;
-  grid-gap: 8px;
   align-items: center;
   padding-right: 8px;
 `;
@@ -73,7 +59,8 @@ const LeftHeaderSubDiv = styled.div`
 `;
 
 const ContentDiv = styled.div<{ isUserInput: boolean }>`
-  padding: 8px;
+  padding-left: 4px;
+  padding-right: 2px;
   background-color: ${(props) =>
     props.isUserInput ? secondaryDark : vscBackground};
   font-size: 13px;
@@ -151,9 +138,9 @@ function StepContainer(props: StepContainerProps) {
       }}
       hidden={props.historyNode.step.hide as any}
     >
-      <StepContainerDiv open={props.open}>
+      <div>
         <GradientBorder
-          loading={(props.historyNode.active as boolean) || false}
+          loading={props.historyNode.active as boolean}
           isFirst={props.isFirst}
           isLast={props.isLast}
           borderColor={
@@ -198,62 +185,63 @@ function StepContainer(props: StepContainerProps) {
             >
               <Backward size="1.6em" onClick={props.onReverse}></Backward>
             </HeaderButton> */}
-
-            <>
-              {(props.historyNode.logs as any)?.length > 0 && (
+            {(isHovered || (props.historyNode.active as boolean)) && (
+              <div className="flex gap-2 items-center">
+                {(props.historyNode.logs as any)?.length > 0 && (
+                  <HeaderButtonWithText
+                    text="Logs"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      client?.showLogsAtIndex(props.index);
+                    }}
+                  >
+                    <MagnifyingGlassIcon width="1.4em" height="1.4em" />
+                  </HeaderButtonWithText>
+                )}
                 <HeaderButtonWithText
-                  text="Logs"
                   onClick={(e) => {
                     e.stopPropagation();
-                    client?.showLogsAtIndex(props.index);
+                    props.onDelete();
                   }}
+                  text={
+                    props.historyNode.active
+                      ? `Stop (${getMetaKeyLabel()}⌫)`
+                      : "Delete"
+                  }
                 >
-                  <MagnifyingGlassIcon width="1.4em" height="1.4em" />
+                  {props.historyNode.active ? (
+                    <StopCircleIcon
+                      width="1.4em"
+                      height="1.4em"
+                      onClick={props.onDelete}
+                    />
+                  ) : (
+                    <XMarkIcon
+                      width="1.4em"
+                      height="1.4em"
+                      onClick={props.onDelete}
+                    />
+                  )}
                 </HeaderButtonWithText>
-              )}
-              <HeaderButtonWithText
-                onClick={(e) => {
-                  e.stopPropagation();
-                  props.onDelete();
-                }}
-                text={
-                  props.historyNode.active
-                    ? `Stop (${getMetaKeyLabel()}⌫)`
-                    : "Delete"
-                }
-              >
-                {props.historyNode.active ? (
-                  <StopCircleIcon
-                    width="1.4em"
-                    height="1.4em"
-                    onClick={props.onDelete}
-                  />
+                {props.historyNode.observation?.error ? (
+                  <HeaderButtonWithText
+                    text="Retry"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      props.onRetry();
+                    }}
+                  >
+                    <ArrowPathIcon
+                      width="1.4em"
+                      height="1.4em"
+                      onClick={props.onRetry}
+                    />
+                  </HeaderButtonWithText>
                 ) : (
-                  <XMarkIcon
-                    width="1.4em"
-                    height="1.4em"
-                    onClick={props.onDelete}
-                  />
+                  <></>
                 )}
-              </HeaderButtonWithText>
-              {props.historyNode.observation?.error ? (
-                <HeaderButtonWithText
-                  text="Retry"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    props.onRetry();
-                  }}
-                >
-                  <ArrowPathIcon
-                    width="1.4em"
-                    height="1.4em"
-                    onClick={props.onRetry}
-                  />
-                </HeaderButtonWithText>
-              ) : (
-                <></>
-              )}
-            </>
+              </div>
+            )}
           </HeaderDiv>
         </GradientBorder>
         <ContentDiv hidden={!props.open} isUserInput={isUserInput}>
@@ -283,7 +271,7 @@ function StepContainer(props: StepContainerProps) {
             />
           )}
         </ContentDiv>
-      </StepContainerDiv>
+      </div>
     </MainDiv>
   );
 }
-- 
cgit v1.2.3-70-g09d2