Update styling of folder select error state (#2150)

* Update styling of folder select error state
* Decrease icon margin
This commit is contained in:
InfiniteTF
2021-12-20 12:44:26 +01:00
committed by GitHub
parent 4927bb078c
commit cfcc6aff6a

View File

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