chore: Migrate .less styles to Emotion (#22474)

superset-frontend/src/SqlLab/components/TabStatusIcon/index.tsx

@@ -17,13 +17,42 @@
  * under the License.
  */
 import React from 'react';
-import { QueryState, styled } from '@superset-ui/core';
+import { css, QueryState, styled } from '@superset-ui/core';
 import Icons, { IconType } from 'src/components/Icons';
 
 const IconContainer = styled.span`
   position: absolute;
-  top: -7px;
-  left: 0px;
+  top: -6px;
+  left: 1px;
+`;
+
+const Circle = styled.div`
+  ${({ theme }) => css`
+    border-radius: 50%;
+    width: ${theme.gridUnit * 3}px;
+    height: ${theme.gridUnit * 3}px;
+
+    display: inline-block;
+    background-color: ${theme.colors.grayscale.light2};
+    text-align: center;
+    vertical-align: middle;
+    font-size: ${theme.typography.sizes.m}px;
+    font-weight: ${theme.typography.weights.bold};
+    color: ${theme.colors.grayscale.light5};
+    position: relative;
+
+    &.running {
+      background-color: ${theme.colors.info.base};
+    }
+
+    &.success {
+      background-color: ${theme.colors.success.base};
+    }
+
+    &.failed {
+      background-color: ${theme.colors.error.base};
+    }
+  `}
 `;
 
 interface TabStatusIconProps {
@@ -38,12 +67,12 @@ const STATE_ICONS: Record<string, React.FC<IconType>> = {
 export default function TabStatusIcon({ tabState }: TabStatusIconProps) {
   const StatusIcon = STATE_ICONS[tabState];
   return (
-    <div className={`circle ${tabState}`}>
+    <Circle className={`circle ${tabState}`}>
       {StatusIcon && (
         <IconContainer>
           <StatusIcon iconSize="xs" />
         </IconContainer>
       )}
-    </div>
+    </Circle>
   );
 }