From 369fcf2f6a61517b665412c37ad361e3b369891f Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Sat, 28 Nov 2020 09:34:41 +0100
Subject: [PATCH] Improved design on domains dropdown

---
 src/domains/DomainsDropdown.scss        | 8 +++++++-
 src/domains/DomainsDropdown.tsx         | 7 ++++---
 src/short-urls/CreateShortUrl.tsx       | 1 +
 src/utils/BooleanControl.tsx            | 6 ++++--
 test/short-urls/CreateShortUrl.test.tsx | 2 +-
 5 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/domains/DomainsDropdown.scss b/src/domains/DomainsDropdown.scss
index 7ec41da9..ba789483 100644
--- a/src/domains/DomainsDropdown.scss
+++ b/src/domains/DomainsDropdown.scss
@@ -5,10 +5,16 @@
 .domains-dropdown__toggle-btn.domains-dropdown__toggle-btn:active {
   text-align: left;
   color: #6c757d;
-  border-color: #6c757d;
+  border-color: #ced4da;
   background-color: white;
 }
 
+.domains-dropdown__toggle-btn--active.domains-dropdown__toggle-btn--active,
+.domains-dropdown__toggle-btn--active.domains-dropdown__toggle-btn--active:hover,
+.domains-dropdown__toggle-btn--active.domains-dropdown__toggle-btn--active:active {
+  color: #495057;
+}
+
 .domains-dropdown__toggle-btn.domains-dropdown__toggle-btn::after {
   right: .75rem;
 
diff --git a/src/domains/DomainsDropdown.tsx b/src/domains/DomainsDropdown.tsx
index 731c524f..c46ef3b5 100644
--- a/src/domains/DomainsDropdown.tsx
+++ b/src/domains/DomainsDropdown.tsx
@@ -14,6 +14,7 @@ import {
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faUndo } from '@fortawesome/free-solid-svg-icons';
 import { isEmpty, pipe } from 'ramda';
+import classNames from 'classnames';
 import { useToggle } from '../utils/helpers/hooks';
 import { DomainsList } from './reducers/domainsList';
 import './DomainsDropdown.scss';
@@ -32,7 +33,6 @@ export const DomainsDropdown = ({ listDomains, value, domainsList, onChange }: D
   const [ inputDisplayed,, showInput, hideInput ] = useToggle();
   const [ isDropdownOpen, toggleDropdown ] = useToggle();
   const { domains } = domainsList;
-  const defaultDomain = domains.find(({ isDefault }) => isDefault);
   const valueIsEmpty = isEmpty(value);
   const unselectDomain = () => onChange('');
 
@@ -58,8 +58,9 @@ export const DomainsDropdown = ({ listDomains, value, domainsList, onChange }: D
     </InputGroup>
   ) : (
     <Dropdown isOpen={isDropdownOpen} toggle={toggleDropdown}>
-      <DropdownToggle caret className="domains-dropdown__toggle-btn btn-block">
-        Domain: {valueIsEmpty ? defaultDomain?.domain : value}
+      <DropdownToggle caret className={classNames('domains-dropdown__toggle-btn btn-block', { 'domains-dropdown__toggle-btn--active': !valueIsEmpty })}>
+        {valueIsEmpty && <>Domain</>}
+        {!valueIsEmpty && <>Domain: {value}</>}
       </DropdownToggle>
       <DropdownMenu className="domains-dropdown__menu">
         {domains.map(({ domain, isDefault }) => (
diff --git a/src/short-urls/CreateShortUrl.tsx b/src/short-urls/CreateShortUrl.tsx
index 9c9a072c..963f039d 100644
--- a/src/short-urls/CreateShortUrl.tsx
+++ b/src/short-urls/CreateShortUrl.tsx
@@ -156,6 +156,7 @@ const CreateShortUrl = (
         <ForServerVersion minVersion="1.16.0">
           <div className="mb-4 text-right">
             <Checkbox
+              inline
               className="mr-2"
               checked={shortUrlCreation.findIfExists}
               onChange={(findIfExists) => setShortUrlCreation({ ...shortUrlCreation, findIfExists })}
diff --git a/src/utils/BooleanControl.tsx b/src/utils/BooleanControl.tsx
index 9b25b69c..72f7056e 100644
--- a/src/utils/BooleanControl.tsx
+++ b/src/utils/BooleanControl.tsx
@@ -7,6 +7,7 @@ export interface BooleanControlProps {
   checked?: boolean;
   onChange?: (checked: boolean, e: ChangeEvent<HTMLInputElement>) => void;
   className?: string;
+  inline?: boolean;
 }
 
 interface BooleanControlWithTypeProps extends BooleanControlProps {
@@ -14,7 +15,7 @@ interface BooleanControlWithTypeProps extends BooleanControlProps {
 }
 
 const BooleanControl: FC<BooleanControlWithTypeProps> = (
-  { checked = false, onChange = identity, className, children, type },
+  { checked = false, onChange = identity, className, children, type, inline = false },
 ) => {
   const id = uuid();
   const onChecked = (e: ChangeEvent<HTMLInputElement>) => onChange(e.target.checked, e);
@@ -22,9 +23,10 @@ const BooleanControl: FC<BooleanControlWithTypeProps> = (
     'custom-switch': type === 'switch',
     'custom-checkbox': type === 'checkbox',
   };
+  const style = inline ? { display: 'inline-block' } : {};
 
   return (
-    <span className={classNames('custom-control', typeClasses, className)}>
+    <span className={classNames('custom-control', typeClasses, className)} style={style}>
       <input type="checkbox" className="custom-control-input" id={id} checked={checked} onChange={onChecked} />
       <label className="custom-control-label" htmlFor={id}>{children}</label>
     </span>
diff --git a/test/short-urls/CreateShortUrl.test.tsx b/test/short-urls/CreateShortUrl.test.tsx
index 13493238..4aeb72bb 100644
--- a/test/short-urls/CreateShortUrl.test.tsx
+++ b/test/short-urls/CreateShortUrl.test.tsx
@@ -13,7 +13,7 @@ describe('<CreateShortUrl />', () => {
   const createShortUrl = jest.fn(async () => Promise.resolve());
 
   beforeEach(() => {
-    const CreateShortUrl = createShortUrlsCreator(TagsSelector, () => null, () => null);
+    const CreateShortUrl = createShortUrlsCreator(TagsSelector, () => null, () => null, () => null);
 
     wrapper = shallow(
       <CreateShortUrl