SONAR-19174 Updating UI for load more button inside measure page

diff --git a/server/sonar-web/src/main/js/apps/issues/crossComponentSourceViewer/IssueSourceViewerHeader.tsx b/server/sonar-web/src/main/js/apps/issues/crossComponentSourceViewer/IssueSourceViewerHeader.tsx
index 736dfd99379378e27d7f7c41262ecc8993b7de80..6b98928229a6bad54decefb0603e4ef662103607 100644 (file)
--- a/server/sonar-web/src/main/js/apps/issues/crossComponentSourceViewer/IssueSourceViewerHeader.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/crossComponentSourceViewer/IssueSourceViewerHeader.tsx
@@ -126,7 +126,7 @@ function IssueSourceViewerHeader(props: Props & ThemeProp) {
                       Icon={CopyIcon}
                       aria-label={translate('source_viewer.click_to_copy_filepath')}
                       data-clipboard-text={path}
-                      className="sw-h-6 sw-mr-2"
+                      className="sw-h-6 sw-mx-2"
                       innerRef={setCopyButton}
                     />
                   </Tooltip>

diff --git a/server/sonar-web/src/main/js/components/SourceViewer/SourceViewerCode.tsx b/server/sonar-web/src/main/js/components/SourceViewer/SourceViewerCode.tsx
index fc1dc04f3c1f36409bc9d9d44e2dc6324f5e9a65..9f53f638091e08f92022fec59939983ff2e06ece 100644 (file)
--- a/server/sonar-web/src/main/js/components/SourceViewer/SourceViewerCode.tsx
+++ b/server/sonar-web/src/main/js/components/SourceViewer/SourceViewerCode.tsx
@@ -18,9 +18,8 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 
-import { SonarCodeColorizer } from 'design-system';
+import { ButtonSecondary, DeferredSpinner, LightLabel, SonarCodeColorizer } from 'design-system';
 import * as React from 'react';
-import { Button } from '../../components/controls/buttons';
 import { decorateWithUnderlineFlags } from '../../helpers/code-viewer';
 import { translate } from '../../helpers/l10n';
 import { BranchLike } from '../../types/branch-like';
@@ -285,21 +284,18 @@ export default class SourceViewerCode extends React.PureComponent<Props, State>
       <SonarCodeColorizer>
         <div className="it__source-viewer-code">
           {hasSourcesBefore && (
-            <div className="source-viewer-more-code">
+            <div className="sw-flex sw-justify-center sw-p-6">
               {loadingSourcesBefore ? (
-                <div className="js-component-viewer-loading-before">
-                  <i className="spinner" />
-                  <span className="note spacer-left">
+                <div className="sw-flex sw-items-center">
+                  <DeferredSpinner loading />
+                  <LightLabel className="sw-ml-2">
                     {translate('source_viewer.loading_more_code')}
-                  </span>
+                  </LightLabel>
                 </div>
               ) : (
-                <Button
-                  className="js-component-viewer-source-before"
-                  onClick={this.props.loadSourcesBefore}
-                >
+                <ButtonSecondary onClick={this.props.loadSourcesBefore}>
                   {translate('source_viewer.load_more_code')}
-                </Button>
+                </ButtonSecondary>
               )}
             </div>
           )}
@@ -327,21 +323,18 @@ export default class SourceViewerCode extends React.PureComponent<Props, State>
           </table>
 
           {hasSourcesAfter && (
-            <div className="source-viewer-more-code">
+            <div className="sw-flex sw-justify-center sw-p-6">
               {loadingSourcesAfter ? (
-                <div className="js-component-viewer-loading-after">
-                  <i className="spinner" />
-                  <span className="note spacer-left">
+                <div className="sw-flex sw-items-center">
+                  <DeferredSpinner loading />
+                  <LightLabel className="sw-ml-2">
                     {translate('source_viewer.loading_more_code')}
-                  </span>
+                  </LightLabel>
                 </div>
               ) : (
-                <Button
-                  className="js-component-viewer-source-after"
-                  onClick={this.props.loadSourcesAfter}
-                >
+                <ButtonSecondary onClick={this.props.loadSourcesAfter}>
                   {translate('source_viewer.load_more_code')}
-                </Button>
+                </ButtonSecondary>
               )}
             </div>
           )}