feat(theming): land Ant Design v5 overhaul — dynamic themes, real dark mode + massive styling refactor (#31590)

Co-authored-by: Enzo Martellucci <52219496+EnxDev@users.noreply.github.com>
Co-authored-by: Diego Pucci <diegopucci.me@gmail.com>
Co-authored-by: Mehmet Salih Yavuz <salih.yavuz@proton.me>
Co-authored-by: Geido <60598000+geido@users.noreply.github.com>
Co-authored-by: Alexandru Soare <37236580+alexandrusoare@users.noreply.github.com>
Co-authored-by: Damian Pendrak <dpendrak@gmail.com>
Co-authored-by: Pius Iniobong <67148161+payose@users.noreply.github.com>
Co-authored-by: Enzo Martellucci <enzomartellucci@gmail.com>
Co-authored-by: Kamil Gabryjelski <kamil.gabryjelski@gmail.com>

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

@@ -19,13 +19,17 @@
 import { useState, useEffect, useMemo, ChangeEvent } from 'react';
 
 import type { DatabaseObject } from 'src/features/databases/types';
-import { Row, Col } from 'src/components';
-import { Input, TextArea } from 'src/components/Input';
 import { t, styled } from '@superset-ui/core';
-import Button from 'src/components/Button';
-import { Menu } from 'src/components/Menu';
-import { Form, FormItem } from 'src/components/Form';
-import Modal from 'src/components/Modal';
+import {
+  Input,
+  Button,
+  Form,
+  FormItem,
+  Modal,
+  Row,
+  Col,
+} from '@superset-ui/core/components';
+import { Menu } from '@superset-ui/core/components/Menu';
 import SaveDatasetActionButton from 'src/SqlLab/components/SaveDatasetActionButton';
 import {
   SaveDatasetModal,
@@ -62,7 +66,7 @@ const Styles = styled.span`
     margin: 0;
     color: ${({ theme }) => theme.colors.grayscale.base};
     svg {
-      vertical-align: -${({ theme }) => theme.gridUnit * 1.25}px;
+      vertical-align: -${({ theme }) => theme.sizeUnit * 1.25}px;
       margin: 0;
     }
   }
@@ -174,7 +178,7 @@ const SaveQuery = ({
       <Row>
         <Col xs={24}>
           <FormItem label={t('Description')}>
-            <TextArea
+            <Input.TextArea
               rows={4}
               value={description}
               onChange={onDescriptionChange}
@@ -223,24 +227,23 @@ const SaveQuery = ({
         title={<h4>{t('Save query')}</h4>}
         footer={
           <>
-            <Button onClick={close} data-test="cancel-query" cta>
+            <Button
+              onClick={close}
+              data-test="cancel-query"
+              cta
+              buttonStyle="secondary"
+            >
               {t('Cancel')}
             </Button>
             <Button
               buttonStyle={isSaved ? undefined : 'primary'}
               onClick={onSaveWrapper}
-              className="m-r-3"
               cta
             >
               {isSaved ? t('Save as new') : t('Save')}
             </Button>
             {isSaved && (
-              <Button
-                buttonStyle="primary"
-                onClick={onUpdateWrapper}
-                className="m-r-3"
-                cta
-              >
+              <Button buttonStyle="primary" onClick={onUpdateWrapper} cta>
                 {t('Update')}
               </Button>
             )}