From cfcc6aff6af04e4ec4d68383b75ef6bf38e4cfb7 Mon Sep 17 00:00:00 2001
From: InfiniteTF <infinitekittens@protonmail.com>
Date: Mon, 20 Dec 2021 12:44:26 +0100
Subject: [PATCH] Update styling of folder select error state (#2150)

* Update styling of folder select error state
* Decrease icon margin
---
 .../Shared/FolderSelect/FolderSelect.tsx           | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/ui/v2.5/src/components/Shared/FolderSelect/FolderSelect.tsx b/ui/v2.5/src/components/Shared/FolderSelect/FolderSelect.tsx
index 6ceccb7b2..4e88c2a2c 100644
--- a/ui/v2.5/src/components/Shared/FolderSelect/FolderSelect.tsx
+++ b/ui/v2.5/src/components/Shared/FolderSelect/FolderSelect.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState, useMemo } from "react";
 import { FormattedMessage } from "react-intl";
 import { Button, InputGroup, Form } from "react-bootstrap";
 import { debounce } from "lodash";
-import { LoadingIndicator } from "src/components/Shared";
+import { Icon, LoadingIndicator } from "src/components/Shared";
 import { useDirectory } from "src/core/StashService";
 
 interface IProps {
@@ -69,7 +69,6 @@ export const FolderSelect: React.FC<IProps> = ({
 
   return (
     <>
-      {error ? <h1>{error.message}</h1> : ""}
       <InputGroup>
         <Form.Control
           placeholder="File path"
@@ -83,11 +82,18 @@ export const FolderSelect: React.FC<IProps> = ({
           <InputGroup.Append>{appendButton}</InputGroup.Append>
         ) : undefined}
         {!data || !data.directory || loading ? (
-          <InputGroup.Append>
-            <LoadingIndicator inline small message="" />
+          <InputGroup.Append className="align-self-center">
+            {loading ? (
+              <LoadingIndicator inline small message="" />
+            ) : (
+              <Icon icon="times" color="red" className="ml-3" />
+            )}
           </InputGroup.Append>
         ) : undefined}
       </InputGroup>
+      {error !== undefined && (
+        <h5 className="mt-4 text-break">Error: {error.message}</h5>
+      )}
       <ul className="folder-list">
         {topDirectory}
         {selectableDirectories.map((path) => {