glorious styling

Signed-off-by: FTCHD <144691102+FTCHD@users.noreply.github.com>

lib/rclone/api.ts

@@ -204,7 +204,7 @@ export async function getBackends() {
         .then((res) => res.json() as Promise<any>)
         .then((r) => r.providers)
 
-    return providers.filter((b: any) => SUPPORTED_BACKENDS.includes(b.Name))
+    return providers.filter((b: any) => SUPPORTED_BACKENDS.includes(b.Prefix))
 }
 
 export interface ListOptions {

src/components/RemoteCreateDrawer.tsx

@@ -229,6 +229,7 @@ export default function RemoteCreateDrawer({
                                 startContent={<RefreshCcwIcon className="w-3 h-3" />}
                                 onPress={() => setConfig({})}
                                 data-focus-visible="false"
+                                className="gap-2"
                             >
                                 Reset
                             </Button>
@@ -266,7 +267,17 @@ export default function RemoteCreateDrawer({
                                     isRequired={true}
                                 >
                                     {backends.map((backend) => (
-                                        <SelectItem key={backend.Name}>
+                                        <SelectItem
+                                            className="h-12"
+                                            key={backend.Name}
+                                            startContent={
+                                                <img
+                                                    src={`/icons/${backend.Prefix}.png`}
+                                                    className="object-contain w-8 h-8"
+                                                    alt={backend.Name}
+                                                />
+                                            }
+                                        >
                                             {backend.Description.includes('Compliant')
                                                 ? `${backend.Description.split('Compliant')[0]} Compliant`
                                                 : backend.Description || backend.Name}

src/components/RemoteDefaultsDrawer.tsx

@@ -479,6 +479,7 @@ export default function RemoteDefaultsDrawer({
                                             globalOptions['main' as keyof typeof globalOptions]
                                         }
                                         getAvailableOptions={getConfigFlags}
+                                        rows={10}
                                     />
                                 </AccordionItem>
                                 <AccordionItem

src/components/RemoteEditDrawer.tsx

@@ -200,7 +200,17 @@ export default function RemoteEditDrawer({
                                     isDisabled={true}
                                 >
                                     {backends.map((backend) => (
-                                        <SelectItem key={backend.Name}>
+                                        <SelectItem
+                                            className="h-12"
+                                            key={backend.Name}
+                                            startContent={
+                                                <img
+                                                    src={`/icons/${backend.Prefix}.png`}
+                                                    className="object-contain w-8 h-8"
+                                                    alt={backend.Name}
+                                                />
+                                            }
+                                        >
                                             {backend.Description.includes('Compliant')
                                                 ? `${backend.Description.split('Compliant')[0]} Compliant`
                                                 : backend.Description || backend.Name}

src/pages/Delete.tsx

@@ -305,7 +305,7 @@ export default function Delete() {
                         isDisabled={isLoading || !!jsonError || !sourceFs || sourceFs.length === 0}
                         isLoading={isLoading}
                         endContent={buttonIcon}
-                        className="max-w-2xl"
+                        className="max-w-2xl gap-2"
                         data-focus-visible="false"
                     >
                         {buttonText}

src/pages/Mount.tsx

@@ -253,8 +253,8 @@ export default function Mount() {
     const buttonIcon = useMemo(() => {
         if (isLoading || isMounted) return
         if (!source || !dest || source === dest) return <FoldersIcon className="w-5 h-5" />
-        if (jsonError) return <AlertOctagonIcon className="w-5 h-5" />
-        return <PlayIcon className="w-5 h-5" />
+        if (jsonError) return <AlertOctagonIcon className="w-4 h-4" />
+        return <PlayIcon className="w-4 h-4 fill-current" />
     }, [isLoading, jsonError, source, dest, isMounted])
 
     return (
@@ -425,7 +425,7 @@ export default function Mount() {
                         }
                         isLoading={isLoading}
                         endContent={buttonIcon}
-                        className="max-w-2xl"
+                        className="max-w-2xl gap-2"
                         data-focus-visible="false"
                     >
                         {buttonText}

src/pages/Move.tsx

@@ -514,7 +514,7 @@ export default function Move() {
                         }
                         isLoading={isLoading}
                         endContent={buttonIcon}
-                        className="max-w-2xl"
+                        className="max-w-2xl gap-2"
                         data-focus-visible="false"
                     >
                         {buttonText}

src/pages/Sync.tsx

@@ -392,7 +392,7 @@ export default function Sync() {
                         isDisabled={isLoading || !!jsonError || !source || !dest || source === dest}
                         isLoading={isLoading}
                         endContent={buttonIcon}
-                        className="max-w-2xl"
+                        className="max-w-2xl gap-2"
                         data-focus-visible="false"
                     >
                         {buttonText}