fix: offline cloud background color in the tree

Signed-off-by: Akos Kitta <[email protected]>

Author: Akos Kitta

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

@@ -199,7 +199,7 @@
     width: 100%;
 }
 
-.theia-TreeNodeContent > .theia-file-icons-js.file-icon > .sketch-folder-icon {
+.theia-file-icons-js.file-icon > .sketch-folder-icon {
     -webkit-mask-position: center;
     -webkit-mask-repeat: no-repeat;
     -webkit-mask-size: 100%;
@@ -208,19 +208,29 @@
     background-color: var(--theia-foreground);
 }
 
-.theia-TreeNodeContent > .theia-file-icons-js.file-icon > .sketch-folder-icon.cloud {
+.theia-file-icons-js.file-icon > .sketch-folder-icon.cloud {
     -webkit-mask: url('../icons/cloud.svg');
 }
 
-.theia-TreeNodeContent > .theia-file-icons-js.file-icon > .sketch-folder-icon.cloud.offline {
+.theia-file-icons-js.file-icon > .sketch-folder-icon.cloud.offline {
     -webkit-mask: url('../icons/cloud-offline.svg');
     background-color: var(--theia-activityBar-inactiveForeground);
 }
 
-.theia-TreeNodeContent > .theia-file-icons-js.file-icon > .sketch-folder-icon.cloud.synced {
+.theia-file-icons-js.file-icon > .sketch-folder-icon.cloud.synced {
     -webkit-mask: url('../icons/cloud-filled.svg');
 }
 
 .theia-TreeNodeContent > .theia-file-icons-js.file-icon > .sketch-folder-icon.cloud.synced.offline {
     -webkit-mask: url('../icons/cloud-filled-offline.svg');
 }
+
+.sketch-folder-icon.cloud.offline.action {
+    -webkit-mask: url('../icons/cloud-offline.svg');
+    -webkit-mask-position: center;
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-size: 100%;
+    width: var(--theia-icon-size);
+    height: var(--theia-icon-size);
+    background-color: var(--theia-foreground);
+}

Diff for: arduino-ide-extension/src/browser/widgets/cloud-sketchbook/cloud-status.tsx

@@ -49,12 +49,13 @@ export class CloudStatus extends React.Component<
             ? nls.localize('arduino/cloud/connected', 'Connected')
             : nls.localize('arduino/cloud/offline', 'Offline')}
         </div>
-        {this.props.connectionStatus.offlineStatus === 'internet' ? (
-          <div className="theia-file-icons-js file-icon">
-            <div className="cloud-sketch-folder-icon offline" />
-          </div>
-        ) : (
-          <div className="actions item flex-line">
+        <div className="actions item flex-line">
+          {this.props.connectionStatus.offlineStatus === 'internet' ? (
+            <div
+              className="sketch-folder-icon cloud offline action"
+              title={nls.localize('arduino/cloud/offline', 'Offline')}
+            />
+          ) : (
             <div
               title={nls.localize('arduino/cloud/sync', 'Sync')}
               className={`fa fa-reload ${
@@ -63,8 +64,8 @@ export class CloudStatus extends React.Component<
               style={{ cursor: 'pointer' }}
               onClick={this.onDidClickRefresh}
             />
-          </div>
-        )}
+          )}
+        </div>
       </div>
     );
   }