Skip to content

Commit 93d78d8

Browse files
Ashjha75Ashjha75
committed
refactor: Simplify icon class handling and improve folder icon styles for better visual consistency
1 parent bd114b2 commit 93d78d8

File tree

2 files changed

+32
-45
lines changed

2 files changed

+32
-45
lines changed

‎index.js‎

Lines changed: 23 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -557,31 +557,31 @@
557557
type: 'svg',
558558
url: ICON_BASE_URL + 'maven.svg',
559559
color: '#c71a36',
560-
cls: 'maven-icon'
560+
cls: ''
561561
};
562562
}
563563
if (fileName === 'build.gradle' || fileName === 'build.gradle.kts' || fileName === 'settings.gradle' || fileName === 'settings.gradle.kts') {
564564
return {
565565
type: 'svg',
566566
url: ICON_BASE_URL + 'gradle.svg',
567567
color: '#02303a',
568-
cls: 'gradle-icon'
568+
cls: ''
569569
};
570570
}
571571
if (fileName === 'application.properties' || fileName === 'application.yml' || fileName === 'application.yaml') {
572572
return {
573573
type: 'svg',
574574
url: ICON_BASE_URL + 'spring.svg',
575575
color: '#6db33f',
576-
cls: 'spring-icon'
576+
cls: ''
577577
};
578578
}
579579
if (fileName.startsWith('application-') && (fileName.endsWith('.properties') || fileName.endsWith('.yml') || fileName.endsWith('.yaml'))) {
580580
return {
581581
type: 'svg',
582582
url: ICON_BASE_URL + 'spring.svg',
583583
color: '#6db33f',
584-
cls: 'spring-icon'
584+
cls: ''
585585
};
586586
}
587587
// ========================================
@@ -592,39 +592,39 @@
592592
type: 'svg',
593593
url: ICON_BASE_URL + 'python.svg',
594594
color: '#3776ab',
595-
cls: 'python-icon'
595+
cls: ''
596596
};
597597
}
598598
if (fileName === 'setup.py' || fileName === 'setup.cfg') {
599599
return {
600600
type: 'svg',
601601
url: ICON_BASE_URL + 'python.svg',
602602
color: '#3776ab',
603-
cls: 'python-icon'
603+
cls: ''
604604
};
605605
}
606606
if (fileName === 'pipfile' || fileName === 'pipfile.lock') {
607607
return {
608608
type: 'svg',
609609
url: ICON_BASE_URL + 'python.svg',
610610
color: '#3776ab',
611-
cls: 'python-icon'
611+
cls: ''
612612
};
613613
}
614614
if (fileName === 'pyproject.toml') {
615615
return {
616616
type: 'svg',
617617
url: ICON_BASE_URL + 'python.svg',
618618
color: '#3776ab',
619-
cls: 'python-icon'
619+
cls: ''
620620
};
621621
}
622622
if (fileName === 'manage.py') { // Django
623623
return {
624624
type: 'svg',
625625
url: ICON_BASE_URL + 'django.svg',
626626
color: '#092e20',
627-
cls: 'django-icon'
627+
cls: ''
628628
};
629629
}
630630
// ========================================
@@ -635,55 +635,55 @@
635635
type: 'svg',
636636
url: ICON_BASE_URL + 'nodejs.svg',
637637
color: '#8cc84b',
638-
cls: 'nodejs-icon'
638+
cls: ''
639639
};
640640
}
641641
if (fileName === 'package-lock.json') {
642642
return {
643643
type: 'svg',
644644
url: ICON_BASE_URL + 'npm.svg',
645645
color: '#cb3837',
646-
cls: 'npm-icon'
646+
cls: ''
647647
};
648648
}
649649
if (fileName === 'yarn.lock') {
650650
return {
651651
type: 'svg',
652652
url: ICON_BASE_URL + 'yarn.svg',
653653
color: '#2c8ebb',
654-
cls: 'yarn-icon'
654+
cls: ''
655655
};
656656
}
657657
if (fileName === 'tsconfig.json') {
658658
return {
659659
type: 'svg',
660660
url: ICON_BASE_URL + 'typescript-def.svg',
661661
color: '#3178c6',
662-
cls: 'typescript-icon'
662+
cls: ''
663663
};
664664
}
665665
if (fileName === 'webpack.config.js' || fileName === 'webpack.config.ts') {
666666
return {
667667
type: 'svg',
668668
url: ICON_BASE_URL + 'webpack.svg',
669669
color: '#8dd6f9',
670-
cls: 'webpack-icon'
670+
cls: ''
671671
};
672672
}
673673
if (fileName === 'vite.config.js' || fileName === 'vite.config.ts') {
674674
return {
675675
type: 'svg',
676676
url: ICON_BASE_URL + 'vite.svg',
677677
color: '#646cff',
678-
cls: 'vite-icon'
678+
cls: ''
679679
};
680680
}
681681
if (fileName === 'next.config.js' || fileName === 'next.config.ts') {
682682
return {
683683
type: 'svg',
684684
url: ICON_BASE_URL + 'next.svg',
685685
color: '#000000',
686-
cls: 'next-icon'
686+
cls: ''
687687
};
688688
}
689689
// ========================================
@@ -694,7 +694,7 @@
694694
type: 'svg',
695695
url: ICON_BASE_URL + 'git.svg',
696696
color: '#f34f29',
697-
cls: 'git-icon'
697+
cls: ''
698698
};
699699
}
700700
// ========================================
@@ -705,15 +705,15 @@
705705
type: 'svg',
706706
url: ICON_BASE_URL + 'docker.svg',
707707
color: '#0db7ed',
708-
cls: 'docker-icon'
708+
cls: ''
709709
};
710710
}
711711
if (fileName === 'docker-compose.yml' || fileName === 'docker-compose.yaml') {
712712
return {
713713
type: 'svg',
714714
url: ICON_BASE_URL + 'docker.svg',
715715
color: '#0db7ed',
716-
cls: 'docker-icon'
716+
cls: ''
717717
};
718718
}
719719
// ========================================
@@ -724,7 +724,7 @@
724724
type: 'svg',
725725
url: ICON_BASE_URL + 'tune.svg',
726726
color: '#e7c547',
727-
cls: 'env-icon'
727+
cls: ''
728728
};
729729
}
730730
// ========================================
@@ -735,7 +735,7 @@
735735
type: 'svg',
736736
url: ICON_BASE_URL + 'readme.svg',
737737
color: '#4caf50',
738-
cls: 'readme-icon'
738+
cls: ''
739739
};
740740
}
741741
// ========================================
@@ -746,26 +746,20 @@
746746
type: 'svg',
747747
url: ICON_BASE_URL + 'license.svg',
748748
color: '#cbcb41',
749-
cls: 'license-icon'
749+
cls: ''
750750
};
751751
}
752752
// ========================================
753753
// GET BY EXTENSION (DEFAULT)
754754
// ========================================
755755
const ext = name.split('.').pop().toLowerCase();
756756
const iconData = ICONS[ext] || ICONS['default'];
757-
// Add specific class for better CSS targeting and visual effects
758-
let specificClass = `${ext}-icon`;
759-
// Group similar extensions for consistent styling
760-
if (['jsx', 'tsx'].includes(ext)) specificClass += ' react-icon';
761-
if (['vue', 'svelte'].includes(ext)) specificClass += ' framework-icon';
762-
if (['scss', 'sass', 'less'].includes(ext)) specificClass += ' style-icon';
763757

764758
return {
765759
type: 'svg',
766760
url: ICON_BASE_URL + iconData.icon,
767761
color: iconData.color,
768-
cls: specificClass
762+
cls: '' // No custom classes needed - icons are already colored
769763
};
770764
};
771765
const esc = s => s.replace(/&/g, '&amp;').replace(/</g, '<').replace(/>/g, '>');

‎style.css‎

Lines changed: 9 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -458,31 +458,24 @@ html, body {
458458
transition: all 0.2s ease;
459459
}
460460

461-
/* File type specific icon colors - VSCode inspired */
462-
.file-icon.js-icon .vscode-icon { filter: brightness(1.2) sepia(0.3) hue-rotate(35deg) saturate(1.3); }
463-
.file-icon.ts-icon .vscode-icon { filter: brightness(1.15) sepia(0.35) hue-rotate(180deg) saturate(1.2); }
464-
.file-icon.py-icon .vscode-icon { filter: brightness(1.2) sepia(0.3) hue-rotate(170deg) saturate(1.3); }
465-
.file-icon.json-icon .vscode-icon { filter: brightness(1.3) sepia(0.4) hue-rotate(40deg) saturate(1.4); }
466-
.file-icon.md-icon .vscode-icon { filter: brightness(1.1) sepia(0.25) hue-rotate(200deg) saturate(1.2); }
467-
.file-icon.css-icon .vscode-icon { filter: brightness(1.15) sepia(0.35) hue-rotate(220deg) saturate(1.3); }
468-
.file-icon.html-icon .vscode-icon { filter: brightness(1.2) sepia(0.35) hue-rotate(350deg) saturate(1.3); }
469-
.file-icon.jsx-icon .vscode-icon { filter: brightness(1.2) sepia(0.3) hue-rotate(160deg) saturate(1.3); }
470-
.file-icon.tsx-icon .vscode-icon { filter: brightness(1.15) sepia(0.35) hue-rotate(185deg) saturate(1.2); }
471-
.file-icon.vue-icon .vscode-icon { filter: brightness(1.2) sepia(0.3) hue-rotate(110deg) saturate(1.4); }
461+
/* File icons - using native VSCode Material Icon Theme colors (no filters) */
462+
.file-icon .vscode-icon {
463+
/* Icons are already colored from VSCode Material Icon Theme CDN */
464+
opacity: 0.95;
465+
transition: opacity 0.15s ease, transform 0.15s ease;
466+
}
472467

473468
/* Folder icon with animated state changes */
474469
.folder-icon .vscode-icon {
475470
width: 19px;
476471
height: 19px;
477-
opacity: 0.85;
478-
filter: brightness(1.05) sepia(0.2) hue-rotate(30deg) saturate(1.15);
472+
opacity: 0.9;
479473
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
480474
}
481475

482-
/* Folder open state - brighter and more saturated */
476+
/* Folder open state - brighter */
483477
.expanded > .tree-item-content .folder-icon .vscode-icon {
484478
opacity: 1;
485-
filter: brightness(1.2) sepia(0.3) hue-rotate(35deg) saturate(1.3);
486479
transform: scale(1.05);
487480
}
488481

@@ -492,7 +485,7 @@ html, body {
492485
}
493486

494487
.tree-item-content:hover .vscode-icon {
495-
filter: brightness(1.35) !important;
488+
opacity: 1;
496489
transform: scale(1.1);
497490
}
498491

0 commit comments

Comments
 (0)