From ac7d74767132346d51ce08b5a7d0db780f9e2da3 Mon Sep 17 00:00:00 2001
From: Benjamin Akar <benjaminakar2001@gmail.com>
Date: Thu, 2 Jun 2022 18:45:00 +0200
Subject: [PATCH 1/3] fix: disappearing icons

---
 apps/desktop/vite.config.ts                       |  8 ++++++--
 apps/landing/src/pages/roadmap.tsx                |  4 ++--
 .../interface/src/components/file/FileThumb.tsx   |  4 ++--
 .../interface/src/components/file/Sidebar.tsx     | 15 ++++++++++++---
 4 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/apps/desktop/vite.config.ts b/apps/desktop/vite.config.ts
index 7c6347331..d30823c5a 100644
--- a/apps/desktop/vite.config.ts
+++ b/apps/desktop/vite.config.ts
@@ -1,6 +1,6 @@
 import react from '@vitejs/plugin-react';
 import { defineConfig } from 'vite';
-import svg from 'vite-plugin-svgr';
+import svgr from 'vite-plugin-svgr';
 
 import { name, version } from './package.json';
 
@@ -14,7 +14,11 @@ export default defineConfig({
 		react({
 			jsxRuntime: 'classic'
 		}),
-		svg({ svgrOptions: { icon: true } })
+		svgr({
+			svgrOptions: {
+				icon: true
+			}
+		})
 	],
 	root: 'src',
 	publicDir: '../../packages/interface/src/assets',
diff --git a/apps/landing/src/pages/roadmap.tsx b/apps/landing/src/pages/roadmap.tsx
index 67322ba78..f0fac58bd 100644
--- a/apps/landing/src/pages/roadmap.tsx
+++ b/apps/landing/src/pages/roadmap.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Helmet } from 'react-helmet';
 import { ReactComponent as Content } from '~/docs/product/roadmap.md';
 
-import { ReactComponent as Folder } from '../../../../packages/interface/src/assets/svg/folder.svg';
+import folderSvg from '../../../../packages/interface/src/assets/svg/folder.svg';
 import Markdown from '../components/Markdown';
 
 function Page() {
@@ -13,7 +13,7 @@ function Page() {
 				<meta name="description" content="What can Spacedrive do?" />
 			</Helmet>
 			<div className="w-24 mb-10">
-				<Folder className="" />
+				<img src={folderSvg} alt="Folder icon" />
 			</div>
 			<Content />
 		</Markdown>
diff --git a/packages/interface/src/components/file/FileThumb.tsx b/packages/interface/src/components/file/FileThumb.tsx
index 347ad86a3..e50bc1378 100644
--- a/packages/interface/src/components/file/FileThumb.tsx
+++ b/packages/interface/src/components/file/FileThumb.tsx
@@ -5,7 +5,7 @@ import React, { useContext } from 'react';
 
 import { AppPropsContext } from '../../App';
 import icons from '../../assets/icons';
-import { ReactComponent as Folder } from '../../assets/svg/folder.svg';
+import folderSvg from '../../assets/svg/folder.svg';
 
 export default function FileThumb(props: {
 	file: FilePath;
@@ -17,7 +17,7 @@ export default function FileThumb(props: {
 	const { data: client } = useBridgeQuery('NodeGetState');
 
 	if (props.file.is_dir) {
-		return <Folder className="max-w-[170px]" />;
+		return <img src={folderSvg} className="max-w-[20px]" alt="Folder icon" />;
 	}
 
 	if (client?.data_path && (props.file.file?.has_thumbnail || props.hasThumbnailOverride)) {
diff --git a/packages/interface/src/components/file/Sidebar.tsx b/packages/interface/src/components/file/Sidebar.tsx
index 231b45b27..598b4fa79 100644
--- a/packages/interface/src/components/file/Sidebar.tsx
+++ b/packages/interface/src/components/file/Sidebar.tsx
@@ -9,7 +9,8 @@ import { NavLink, NavLinkProps } from 'react-router-dom';
 
 import { AppPropsContext } from '../../App';
 import { ReactComponent as FolderWhite } from '../../assets/svg/folder-white.svg';
-import { ReactComponent as Folder } from '../../assets/svg/folder.svg';
+import folderWhiteSvg from '../../assets/svg/folder-white.svg';
+import folderSvg from '../../assets/svg/folder.svg';
 import { useNodeStore } from '../device/Stores';
 import RunningJobsWidget from '../jobs/RunningJobsWidget';
 import { MacTrafficLights } from '../os/TrafficLights';
@@ -172,8 +173,16 @@ export const Sidebar: React.FC<SidebarProps> = (props) => {
 										)}
 									>
 										<div className="w-[18px] mr-2 -mt-0.5">
-											<FolderWhite className={clsx(!isActive && 'hidden')} />
-											<Folder className={clsx(isActive && 'hidden')} />
+											<img
+												src={folderWhiteSvg}
+												className={clsx(!isActive && 'hidden')}
+												alt="Folder icon"
+											/>
+											<img
+												src={folderSvg}
+												className={clsx(isActive && 'hidden')}
+												alt="Folder icon"
+											/>
 										</div>
 										{location.name}
 										<div className="flex-grow" />

From b45b85da689865d5bc38895cbd934ad99a2268b5 Mon Sep 17 00:00:00 2001
From: Benjamin Akar <benjaminakar2001@gmail.com>
Date: Thu, 2 Jun 2022 20:15:11 +0200
Subject: [PATCH 2/3] chore: remove unused import

---
 packages/interface/src/components/file/Sidebar.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/interface/src/components/file/Sidebar.tsx b/packages/interface/src/components/file/Sidebar.tsx
index 598b4fa79..fe76a587a 100644
--- a/packages/interface/src/components/file/Sidebar.tsx
+++ b/packages/interface/src/components/file/Sidebar.tsx
@@ -8,7 +8,6 @@ import React, { useContext } from 'react';
 import { NavLink, NavLinkProps } from 'react-router-dom';
 
 import { AppPropsContext } from '../../App';
-import { ReactComponent as FolderWhite } from '../../assets/svg/folder-white.svg';
 import folderWhiteSvg from '../../assets/svg/folder-white.svg';
 import folderSvg from '../../assets/svg/folder.svg';
 import { useNodeStore } from '../device/Stores';

From a937d1c463d1468d439e545eb47566b6cfaaed05 Mon Sep 17 00:00:00 2001
From: Benjamin Akar <benjaminakar2001@gmail.com>
Date: Fri, 3 Jun 2022 09:29:04 +0200
Subject: [PATCH 3/3] chore: componentize folder img icons

---
 apps/landing/src/pages/roadmap.tsx            |  4 +--
 .../src/components/file/FileThumb.tsx         |  4 +--
 .../interface/src/components/file/Sidebar.tsx | 15 +++--------
 .../interface/src/components/icons/Folder.tsx | 26 +++++++++++++++++++
 4 files changed, 33 insertions(+), 16 deletions(-)
 create mode 100644 packages/interface/src/components/icons/Folder.tsx

diff --git a/apps/landing/src/pages/roadmap.tsx b/apps/landing/src/pages/roadmap.tsx
index f0fac58bd..cce420987 100644
--- a/apps/landing/src/pages/roadmap.tsx
+++ b/apps/landing/src/pages/roadmap.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Helmet } from 'react-helmet';
 import { ReactComponent as Content } from '~/docs/product/roadmap.md';
 
-import folderSvg from '../../../../packages/interface/src/assets/svg/folder.svg';
+import { Folder } from '../../../../packages/interface/src/components/icons/Folder';
 import Markdown from '../components/Markdown';
 
 function Page() {
@@ -13,7 +13,7 @@ function Page() {
 				<meta name="description" content="What can Spacedrive do?" />
 			</Helmet>
 			<div className="w-24 mb-10">
-				<img src={folderSvg} alt="Folder icon" />
+				<Folder />
 			</div>
 			<Content />
 		</Markdown>
diff --git a/packages/interface/src/components/file/FileThumb.tsx b/packages/interface/src/components/file/FileThumb.tsx
index e50bc1378..a120b192f 100644
--- a/packages/interface/src/components/file/FileThumb.tsx
+++ b/packages/interface/src/components/file/FileThumb.tsx
@@ -5,7 +5,7 @@ import React, { useContext } from 'react';
 
 import { AppPropsContext } from '../../App';
 import icons from '../../assets/icons';
-import folderSvg from '../../assets/svg/folder.svg';
+import { Folder } from '../icons/Folder';
 
 export default function FileThumb(props: {
 	file: FilePath;
@@ -17,7 +17,7 @@ export default function FileThumb(props: {
 	const { data: client } = useBridgeQuery('NodeGetState');
 
 	if (props.file.is_dir) {
-		return <img src={folderSvg} className="max-w-[20px]" alt="Folder icon" />;
+		return <Folder className="max-w-[20px]" />;
 	}
 
 	if (client?.data_path && (props.file.file?.has_thumbnail || props.hasThumbnailOverride)) {
diff --git a/packages/interface/src/components/file/Sidebar.tsx b/packages/interface/src/components/file/Sidebar.tsx
index fe76a587a..fca0cc3a0 100644
--- a/packages/interface/src/components/file/Sidebar.tsx
+++ b/packages/interface/src/components/file/Sidebar.tsx
@@ -8,9 +8,8 @@ import React, { useContext } from 'react';
 import { NavLink, NavLinkProps } from 'react-router-dom';
 
 import { AppPropsContext } from '../../App';
-import folderWhiteSvg from '../../assets/svg/folder-white.svg';
-import folderSvg from '../../assets/svg/folder.svg';
 import { useNodeStore } from '../device/Stores';
+import { Folder } from '../icons/Folder';
 import RunningJobsWidget from '../jobs/RunningJobsWidget';
 import { MacTrafficLights } from '../os/TrafficLights';
 import { DefaultProps } from '../primitive/types';
@@ -172,16 +171,8 @@ export const Sidebar: React.FC<SidebarProps> = (props) => {
 										)}
 									>
 										<div className="w-[18px] mr-2 -mt-0.5">
-											<img
-												src={folderWhiteSvg}
-												className={clsx(!isActive && 'hidden')}
-												alt="Folder icon"
-											/>
-											<img
-												src={folderSvg}
-												className={clsx(isActive && 'hidden')}
-												alt="Folder icon"
-											/>
+											<Folder className={clsx(!isActive && 'hidden')} white />
+											<Folder className={clsx(isActive && 'hidden')} />
 										</div>
 										{location.name}
 										<div className="flex-grow" />
diff --git a/packages/interface/src/components/icons/Folder.tsx b/packages/interface/src/components/icons/Folder.tsx
new file mode 100644
index 000000000..d0751cbcb
--- /dev/null
+++ b/packages/interface/src/components/icons/Folder.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+
+import folderWhiteSvg from '../../assets/svg/folder-white.svg';
+import folderSvg from '../../assets/svg/folder.svg';
+
+interface FolderProps {
+	/**
+	 * Append additional classes to the underlying SVG
+	 */
+	className?: string;
+
+	/**
+	 * Render a white folder icon
+	 */
+	white?: boolean;
+}
+
+export function Folder(props: FolderProps) {
+	return (
+		<img
+			className={props.className}
+			src={props.white ? folderWhiteSvg : folderSvg}
+			alt="Folder icon"
+		/>
+	);
+}