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

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

@@ -21,7 +21,7 @@ import { useDispatch } from 'react-redux';
 import Collapse from 'src/components/Collapse';
 import Card from 'src/components/Card';
 import ButtonGroup from 'src/components/ButtonGroup';
-import { t, styled } from '@superset-ui/core';
+import { css, t, styled } from '@superset-ui/core';
 import { debounce } from 'lodash';
 
 import { removeDataPreview, removeTables } from 'src/SqlLab/actions/sqlLab';
@@ -61,7 +61,7 @@ export interface TableElementProps {
 
 const StyledSpan = styled.span`
   color: ${({ theme }) => theme.colors.primary.dark1};
-  &: hover {
+  &:hover {
     color: ${({ theme }) => theme.colors.primary.dark2};
   }
   cursor: pointer;
@@ -72,6 +72,39 @@ const Fade = styled.div`
   opacity: ${(props: { hovered: boolean }) => (props.hovered ? 1 : 0)};
 `;
 
+const StyledCollapsePanel = styled(Collapse.Panel)`
+  ${({ theme }) => css`
+    & {
+      .ws-el-controls {
+        margin-right: ${-theme.gridUnit}px;
+        display: flex;
+      }
+
+      .header-container {
+        display: flex;
+        flex: 1;
+        align-items: center;
+        width: 100%;
+
+        .table-name {
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          font-size: ${theme.typography.sizes.l}px;
+          flex: 1;
+        }
+
+        .header-right-side {
+          margin-left: auto;
+          display: flex;
+          align-items: center;
+          margin-right: ${theme.gridUnit * 8}px;
+        }
+      }
+    }
+  `}
+`;
+
 const TableElement = ({ table, ...props }: TableElementProps) => {
   const dispatch = useDispatch();
 
@@ -287,7 +320,7 @@ const TableElement = ({ table, ...props }: TableElementProps) => {
   };
 
   return (
-    <Collapse.Panel
+    <StyledCollapsePanel
       {...props}
       key={table.id}
       header={renderHeader()}
@@ -295,7 +328,7 @@ const TableElement = ({ table, ...props }: TableElementProps) => {
       forceRender
     >
       {renderBody()}
-    </Collapse.Panel>
+    </StyledCollapsePanel>
   );
 };