Renamed DomainsDropdown to DomainSelector

src/domains/DomainSelector.scss

@@ -15,6 +15,11 @@
   color: #495057;
 }
 
+.domains-dropdown__back-btn.domains-dropdown__back-btn,
+.domains-dropdown__back-btn.domains-dropdown__back-btn:hover {
+  border-color: #ced4da;
+}
+
 .domains-dropdown__toggle-btn.domains-dropdown__toggle-btn::after {
   right: .75rem;
 

src/domains/DomainSelector.tsx

@@ -17,19 +17,19 @@ import { isEmpty, pipe } from 'ramda';
 import classNames from 'classnames';
 import { useToggle } from '../utils/helpers/hooks';
 import { DomainsList } from './reducers/domainsList';
-import './DomainsDropdown.scss';
+import './DomainSelector.scss';
 
-export interface DomainsDropdownProps extends Omit<InputProps, 'onChange'> {
+export interface DomainSelectorProps extends Omit<InputProps, 'onChange'> {
   value?: string;
   onChange: (domain?: string) => void;
 }
 
-interface DomainsDropdownConnectProps extends DomainsDropdownProps {
+interface DomainSelectorConnectProps extends DomainSelectorProps {
   listDomains: Function;
   domainsList: DomainsList;
 }
 
-export const DomainsDropdown = ({ listDomains, value, domainsList, onChange }: DomainsDropdownConnectProps) => {
+export const DomainSelector = ({ listDomains, value, domainsList, onChange }: DomainSelectorConnectProps) => {
   const [ inputDisplayed,, showInput, hideInput ] = useToggle();
   const [ isDropdownOpen, toggleDropdown ] = useToggle();
   const { domains } = domainsList;
@@ -48,7 +48,13 @@ export const DomainsDropdown = ({ listDomains, value, domainsList, onChange }: D
         onChange={(e) => onChange(e.target.value)}
       />
       <InputGroupAddon addonType="append">
-        <Button id="backToDropdown" outline type="button" onClick={pipe(unselectDomain, hideInput)}>
+        <Button
+          id="backToDropdown"
+          outline
+          type="button"
+          className="domains-dropdown__back-btn"
+          onClick={pipe(unselectDomain, hideInput)}
+        >
           <FontAwesomeIcon icon={faUndo} />
         </Button>
         <UncontrolledTooltip target="backToDropdown" placement="left" trigger="hover">
@@ -58,7 +64,13 @@ export const DomainsDropdown = ({ listDomains, value, domainsList, onChange }: D
     </InputGroup>
   ) : (
     <Dropdown isOpen={isDropdownOpen} toggle={toggleDropdown}>
-      <DropdownToggle caret className={classNames('domains-dropdown__toggle-btn btn-block', { 'domains-dropdown__toggle-btn--active': !valueIsEmpty })}>
+      <DropdownToggle
+        caret
+        className={classNames(
+          'domains-dropdown__toggle-btn btn-block',
+          { 'domains-dropdown__toggle-btn--active': !valueIsEmpty },
+        )}
+      >
         {valueIsEmpty && <>Domain</>}
         {!valueIsEmpty && <>Domain: {value}</>}
       </DropdownToggle>

src/domains/services/provideServices.ts

@@ -1,12 +1,12 @@
 import Bottle from 'bottlejs';
 import { ConnectDecorator } from '../../container/types';
 import { listDomains } from '../reducers/domainsList';
-import { DomainsDropdown } from '../DomainsDropdown';
+import { DomainSelector } from '../DomainSelector';
 
 const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
   // Components
-  bottle.serviceFactory('DomainsDropdown', () => DomainsDropdown);
+  bottle.serviceFactory('DomainSelector', () => DomainSelector);
-  bottle.decorator('DomainsDropdown', connect([ 'domainsList' ], [ 'listDomains' ]));
+  bottle.decorator('DomainSelector', connect([ 'domainsList' ], [ 'listDomains' ]));
 
   // Actions
   bottle.serviceFactory('listDomains', listDomains, 'buildShlinkApiClient');

src/short-urls/CreateShortUrl.tsx

@@ -13,7 +13,7 @@ import { useToggle } from '../utils/helpers/hooks';
 import { isReachableServer, SelectedServer } from '../servers/data';
 import { formatIsoDate } from '../utils/helpers/date';
 import { TagsSelectorProps } from '../tags/helpers/TagsSelector';
-import { DomainsDropdownProps } from '../domains/DomainsDropdown';
+import { DomainSelectorProps } from '../domains/DomainSelector';
 import { ShortUrlData } from './data';
 import { ShortUrlCreation } from './reducers/shortUrlCreation';
 import UseExistingIfFoundInfoIcon from './UseExistingIfFoundInfoIcon';
@@ -47,7 +47,7 @@ const CreateShortUrl = (
   TagsSelector: FC<TagsSelectorProps>,
   CreateShortUrlResult: FC<CreateShortUrlResultProps>,
   ForServerVersion: FC<Versions>,
-  DomainsDropdown: FC<DomainsDropdownProps>,
+  DomainSelector: FC<DomainSelectorProps>,
 ) => ({ createShortUrl, shortUrlCreationResult, resetCreateShortUrl, selectedServer }: CreateShortUrlProps) => {
   const [ shortUrlCreation, setShortUrlCreation ] = useState(initialState);
   const [ moreOptionsVisible, toggleMoreOptionsVisible ] = useToggle();
@@ -89,7 +89,7 @@ const CreateShortUrl = (
 
   const currentServerVersion = isReachableServer(selectedServer) ? selectedServer.version : '';
   const disableDomain = !versionMatch(currentServerVersion, { minVersion: '1.19.0-beta.1' });
-  const showDomainsDropdown = versionMatch(currentServerVersion, { minVersion: '2.4.0' });
+  const showDomainSelector = versionMatch(currentServerVersion, { minVersion: '2.4.0' });
   const disableShortCodeLength = !versionMatch(currentServerVersion, { minVersion: '2.1.0' });
 
   return (
@@ -126,13 +126,13 @@ const CreateShortUrl = (
             })}
           </div>
           <div className="col-sm-4">
-            {!showDomainsDropdown && renderOptionalInput('domain', 'Domain', 'text', {
+            {!showDomainSelector && renderOptionalInput('domain', 'Domain', 'text', {
               disabled: disableDomain,
               ...disableDomain && { title: 'Shlink 1.19.0 or higher is required to be able to provide the domain' },
             })}
-            {showDomainsDropdown && (
+            {showDomainSelector && (
               <FormGroup>
-                <DomainsDropdown
+                <DomainSelector
                   value={shortUrlCreation.domain}
                   onChange={(domain?: string) => setShortUrlCreation({ ...shortUrlCreation, domain })}
                 />

src/short-urls/services/provideServices.ts

@@ -57,7 +57,7 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
     'TagsSelector',
     'CreateShortUrlResult',
     'ForServerVersion',
-    'DomainsDropdown',
+    'DomainSelector',
   );
   bottle.decorator(
     'CreateShortUrl',