fix: removed redundant CSS props of tree icons

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

Author: Akos Kitta

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

@@ -200,42 +200,28 @@
     width: 100%;
 }
 
-.cloud-sketch-folder-icon {
-    -webkit-mask: url('../icons/cloud.svg');
-    background-color: var(--theia-foreground);
+.theia-TreeNodeContent > .theia-file-icons-js.file-icon > .sketch-folder-icon {
     -webkit-mask-position: center;
     -webkit-mask-repeat: no-repeat;
+    -webkit-mask-size: 100%;
     width: var(--theia-icon-size);
     height: var(--theia-icon-size);
-    -webkit-mask-size: 100%;
+    background-color: var(--theia-foreground);
 }
 
-.cloud-sketch-folder-icon.offline {
+.theia-TreeNodeContent > .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 {
     -webkit-mask: url('../icons/cloud-offline.svg');
     background-color: var(--theia-activityBar-inactiveForeground);
-    -webkit-mask-position: center;
-    -webkit-mask-repeat: no-repeat;
-    width: var(--theia-icon-size);
-    height: var(--theia-icon-size);
-    -webkit-mask-size: 100%;
 }
 
-.cloud-sketch-folder-icon.synced {
+.theia-TreeNodeContent > .theia-file-icons-js.file-icon > .sketch-folder-icon.cloud.synced {
     -webkit-mask: url('../icons/cloud-filled.svg');
-    background-color: var(--theia-foreground);
-    -webkit-mask-position: center;
-    -webkit-mask-repeat: no-repeat;
-    width: var(--theia-icon-size);
-    height: var(--theia-icon-size);
-    -webkit-mask-size: 100%;
 }
 
-.cloud-sketch-folder-icon.synced.offline {
+.theia-TreeNodeContent > .theia-file-icons-js.file-icon > .sketch-folder-icon.cloud.synced.offline {
     -webkit-mask: url('../icons/cloud-filled-offline.svg');
-    background-color: var(--theia-foreground);
-    -webkit-mask-position: center;
-    -webkit-mask-repeat: no-repeat;
-    width: var(--theia-icon-size);
-    height: var(--theia-icon-size);
-    -webkit-mask-size: 100%;
 }

arduino-ide-extension/src/browser/widgets/cloud-sketchbook/cloud-sketchbook-tree-widget.tsx

@@ -103,7 +103,7 @@ export class CloudSketchbookTreeWidget extends SketchbookTreeWidget {
     props: NodeProps
   ): React.ReactNode {
     if (CloudSketchbookTree.CloudSketchDirNode.is(node)) {
-      const iconClassName = ['cloud-sketch-folder-icon'];
+      const iconClassName = ['sketch-folder-icon', 'cloud'];
       if (CloudSketchbookTree.CloudSketchTreeNode.isSynced(node)) {
         iconClassName.push('synced');
       }