design feedback

Author: qardpeet

src/pages/spot/QuickButtons.tsx

@@ -84,6 +84,7 @@ export const QuickButtons = ({
         type="button"
         onClick={isEditing ? handleConfirmEdit : handleEdit}
         disabled={disabled}
+        isEditing={isEditing}
       >
         <Icon iconName={isEditing ? IconName.Check : IconName.Pencil2} size="1rem" />
       </$QuickButtonContainer>
@@ -127,7 +128,7 @@ const QuickButtonContainerStyles = css`
   border: 1px solid var(--color-layer-4);
   padding: 0 0.5rem;
   font: var(--font-base-medium);
-  color: var(--color-text);
+  color: var(--color-text-1);
   min-width: 0;
 
   @media (prefers-reduced-motion: no-preference) {
@@ -142,10 +143,12 @@ const $InputQuickButtonContainer = styled.div`
 
   &:focus-within {
     background-color: var(--color-layer-4);
+    border-color: var(--color-layer-5);
+    color: var(--color-text-2);
   }
 `;
 
-const $QuickButtonContainer = styled.button<{ isSelected?: boolean }>`
+const $QuickButtonContainer = styled.button<{ isSelected?: boolean; isEditing?: boolean }>`
   ${QuickButtonContainerStyles}
 
   ${({ isSelected }) =>
@@ -154,6 +157,14 @@ const $QuickButtonContainer = styled.button<{ isSelected?: boolean }>`
       background-color: var(--color-layer-4);
     `}
 
+  ${({ isEditing }) =>
+    isEditing &&
+    css`
+      background-color: var(--color-accent-faded);
+      color: var(--color-accent);
+      border-color: var(--color-accent);
+    `}
+
   @media (hover: hover) {
     &:hover {
       background-color: var(--color-layer-3);

src/pages/spot/SpotTabs.tsx

@@ -79,9 +79,10 @@ const $Root = styled(Root)`
 const $List = styled(List)`
   display: flex;
   flex-direction: row;
-  padding: 3px;
+  padding: 2px;
   background-color: var(--color-layer-1);
   border-radius: var(--tab-border-radius);
+  gap: 2px;
 `;
 
 const spotTabVariants: Record<SpotTabVariant, ReturnType<typeof css>> = {
@@ -125,7 +126,7 @@ const $Trigger = styled(Trigger)<{
   font-weight: 500;
   flex: 1;
   height: 37px;
-  border-radius: var(--tab-border-radius);
+  border-radius: calc(var(--tab-border-radius) - 2px);
   padding: 0 1rem;
   text-align: center;
 `;