add spinners to firmware and certificate dialogs

Author: Alberto Iannaccone

Diff for: arduino-ide-extension/src/browser/dialogs/certificate-uploader/certificate-uploader-component.tsx

@@ -124,22 +124,22 @@ export const CertificateUploaderComponent = ({
         <div className="dialogRow">
           <div className="upload-status">
             {installFeedback === 'installing' && (
-              <span className="success">
-                <i className="fa fa-info status-icon" />
+              <div className="success">
+                <div className="spinner" />
                 Uploading certificates...
-              </span>
+              </div>
             )}
             {installFeedback === 'ok' && (
-              <span className="success">
+              <div className="success">
                 <i className="fa fa-info status-icon" />
                 Certificates succesfully installed.
-              </span>
+              </div>
             )}
             {installFeedback === 'fail' && (
-              <span className="warn">
+              <div className="warn">
                 <i className="fa fa-exclamation status-icon" />
                 Upload failed. Please try again.
-              </span>
+              </div>
             )}
           </div>
           <button

Diff for: arduino-ide-extension/src/browser/dialogs/firmware-uploader/firmware-uploader-component.tsx

@@ -175,7 +175,7 @@ export const FirmwareUploaderComponent = ({
             )}
             {installFeedback === 'installing' && (
               <div className="dialogRow success">
-                <i className="fa fa-info status-icon" />
+                <div className="spinner" />
                 Installing firmware...
               </div>
             )}

Diff for: arduino-ide-extension/src/browser/style/certificate-uploader-dialog.css

@@ -35,8 +35,9 @@
   align-items: center;
   flex: 1;
 }
-
 .certificate-uploader-dialog  .success {
+  display: flex;
+  align-items: center;
   color: #1DA086;
 }
 

Diff for: arduino-ide-extension/src/browser/style/dialogs.css

@@ -39,6 +39,14 @@
     display: flex;
     align-items: center;
 }
+
+.p-Widget.dialogOverlay .dialogBlock .dialogContent .dialogSection .dialogRow .spinner {
+    background: var(--theia-icon-loading) center center no-repeat;
+    animation: theia-spin 1.25s linear infinite;
+    width: 30px;
+    height: 30px;
+}
+
 .p-Widget.dialogOverlay .dialogBlock .dialogContent .dialogSection .dialogRow:first-child {
     margin-top: 0px;
 }