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

This commit is contained in:
Kamil Gabryjelski
2023-01-19 09:17:10 +01:00
committed by GitHub
parent 5026da50e1
commit 39c96d0568
61 changed files with 1665 additions and 2414 deletions

View File

@@ -41,6 +41,12 @@ const TabTitle = styled.span`
text-transform: none;
`;
const IconContainer = styled.div`
display: inline-block;
width: ${({ theme }) => theme.gridUnit * 8}px;
text-align: center;
`;
interface Props {
queryEditor: QueryEditor;
}
@@ -91,9 +97,9 @@ const SqlEditorTabHeader: React.FC<Props> = ({ queryEditor }) => {
onClick={() => actions.removeQueryEditor(qe)}
data-test="close-tab-menu-option"
>
<div className="icon-container">
<IconContainer>
<i className="fa fa-close" />
</div>
</IconContainer>
{t('Close tab')}
</Menu.Item>
<Menu.Item
@@ -101,9 +107,9 @@ const SqlEditorTabHeader: React.FC<Props> = ({ queryEditor }) => {
onClick={renameTab}
data-test="rename-tab-menu-option"
>
<div className="icon-container">
<IconContainer>
<i className="fa fa-i-cursor" />
</div>
</IconContainer>
{t('Rename tab')}
</Menu.Item>
<Menu.Item
@@ -111,9 +117,9 @@ const SqlEditorTabHeader: React.FC<Props> = ({ queryEditor }) => {
onClick={() => actions.toggleLeftBar(qe)}
data-test="toggle-menu-option"
>
<div className="icon-container">
<IconContainer>
<i className="fa fa-cogs" />
</div>
</IconContainer>
{qe.hideLeftBar ? t('Expand tool bar') : t('Hide tool bar')}
</Menu.Item>
<Menu.Item
@@ -121,9 +127,9 @@ const SqlEditorTabHeader: React.FC<Props> = ({ queryEditor }) => {
onClick={() => actions.removeAllOtherQueryEditors(qe)}
data-test="close-all-other-menu-option"
>
<div className="icon-container">
<IconContainer>
<i className="fa fa-times-circle-o" />
</div>
</IconContainer>
{t('Close all other tabs')}
</Menu.Item>
<Menu.Item
@@ -131,9 +137,9 @@ const SqlEditorTabHeader: React.FC<Props> = ({ queryEditor }) => {
onClick={() => actions.cloneQueryToNewTab(qe, false)}
data-test="clone-tab-menu-option"
>
<div className="icon-container">
<IconContainer>
<i className="fa fa-files-o" />
</div>
</IconContainer>
{t('Duplicate tab')}
</Menu.Item>
</Menu>