web: add some daylight between uibutton's icon and label (#4894)

tilt-dev · Aug 26, 2021 · 1aa4fa2 · 1aa4fa2
1 parent 9f28d50
commit 1aa4fa2
Showing 1 changed file with 10 additions and 5 deletions.
diff --git a/web/src/ApiButton.tsx b/web/src/ApiButton.tsx
@@ -12,7 +12,7 @@ type UIButton = Proto.v1alpha1UIButton
 type UIInputSpec = Proto.v1alpha1UIInputSpec
 type UIInputStatus = Proto.v1alpha1UIInputStatus
 
-const ApiButtonFormRoot = styled.span`
+const ApiButtonFormRoot = styled.div`
   z-index: 20;
 `
 const ApiButtonFormFooter = styled.div`
@@ -21,7 +21,12 @@ const ApiButtonFormFooter = styled.div`
   font-color: ${Color.grayLighter};
   font-size: ${FontSize.smallester};
 `
-export const ApiButtonLabel = styled.span``
+export const ApiButtonLabel = styled.div``
+export const ApiButtonRoot = styled(ButtonGroup)`
+  ${ApiButtonLabel} {
+    margin-left: ${SizeUnit(0.25)};
+  }
+`
 
 type ApiButtonProps = { className?: string; button: UIButton }
 
@@ -107,7 +112,7 @@ function ApiButtonWithOptions(props: ApiButtonWithOptionsProps) {
 
   return (
     <>
-      <ButtonGroup ref={anchorRef} className={props.className}>
+      <ApiButtonRoot ref={anchorRef} className={props.className}>
         {props.submit}
         <ApiButtonInputsToggleButton
           size="small"
@@ -118,7 +123,7 @@ function ApiButtonWithOptions(props: ApiButtonWithOptionsProps) {
         >
           <ArrowDropDownIcon />
         </ApiButtonInputsToggleButton>
-      </ButtonGroup>
+      </ApiButtonRoot>
       <FloatDialog
         open={open}
         onClose={() => {
@@ -244,7 +249,7 @@ export const ApiButton: React.FC<ApiButtonProps> = (props) => {
       />
     )
   } else {
-    return <ButtonGroup className={props.className}>{button}</ButtonGroup>
+    return <ApiButtonRoot className={props.className}>{button}</ApiButtonRoot>
   }
 }