Disabled option, better responsive behavior.

common/components/ui/SwapDropdown.scss

@@ -4,8 +4,11 @@
 $menu-max-width: 540px;
 $menu-padding: 10px;
 $menu-triangle-size: 14px;
+$menu-offset: 40px;
 $option-width: ($menu-max-width - $menu-padding * 2) / 3;
 $option-width-main: ($menu-max-width - $menu-padding * 2) / 2;
+$option-width-small: $option-width-main;
+$option-width-main-small: 100%;
 
 .SwapDropdown {
   position: relative;
@@ -39,7 +42,7 @@ $option-width-main: ($menu-max-width - $menu-padding * 2) / 2;
   &-menu {
     position: absolute;
     top: 100%;
-    right: -20px;
+    right: -$menu-offset;
     z-index: $zindex-popover;
 
     &-content {
@@ -58,7 +61,7 @@ $option-width-main: ($menu-max-width - $menu-padding * 2) / 2;
     &-triangle {
       position: absolute;
       top: -($menu-triangle-size / 2);
-      right: 55px;
+      right: $menu-offset + 40px;
       width: $menu-triangle-size;
       height: $menu-triangle-size;
       background: #FFF;
@@ -81,6 +84,11 @@ $option-width-main: ($menu-max-width - $menu-padding * 2) / 2;
   color: $text-color;
   transition: $transition;
 
+  @media (max-width: $screen-sm) {
+    width: 50%;
+    max-width: none;
+  }
+
   &:hover {
     color: #FFF;
     background: rgba($brand-info, 0.9);
@@ -93,7 +101,7 @@ $option-width-main: ($menu-max-width - $menu-padding * 2) / 2;
   }
 
   &-logo {
-    height: 1.4rem;
+    height: 1.2rem;
     width: auto;
     margin-right: $space-xs;
 
@@ -116,5 +124,16 @@ $option-width-main: ($menu-max-width - $menu-padding * 2) / 2;
     max-width: $option-width-main;
     padding: $space $space-md;
     font-size: 1rem;
+
+    @media (max-width: $screen-sm) {
+      width: 50%;
+      max-width: none;
+    }
+  }
+
+  &.is-disabled {
+    filter: grayscale(1);
+    opacity: 0.3;
+    pointer-events: none;
   }
 }

common/components/ui/SwapDropdown.tsx

@@ -12,6 +12,7 @@ export interface SingleCoin {
 
 interface Props {
   options: SingleCoin[];
+  disabledOption?: string;
   value: string;
   onChange(value: SingleCoin): void;
 }
@@ -49,7 +50,7 @@ class SwapDropdown extends PureComponent<Props, State> {
   }
 
   public render() {
-    const { options, value } = this.props;
+    const { options, value, disabledOption } = this.props;
     const { isOpen, mainOptions, otherOptions } = this.state;
 
     const selectedOption = options.find(opt => opt.name === value);
@@ -72,10 +73,22 @@ class SwapDropdown extends PureComponent<Props, State> {
             <i className="SwapDropdown-menu-triangle" />
             <div className="SwapDropdown-menu-content">
               {mainOptions.map(opt => (
-                <SwapOption key={opt.id} option={opt} isMain={true} onChange={this.handleChange} />
+                <SwapOption
+                  key={opt.name}
+                  option={opt}
+                  isMain={true}
+                  isDisabled={opt.name === disabledOption}
+                  onChange={this.handleChange}
+                />
               ))}
               {otherOptions.map(opt => (
-                <SwapOption key={opt.id} option={opt} isMain={false} onChange={this.handleChange} />
+                <SwapOption
+                  key={opt.name}
+                  option={opt}
+                  isMain={false}
+                  isDisabled={opt.name === disabledOption}
+                  onChange={this.handleChange}
+                />
               ))}
             </div>
           </div>
@@ -133,10 +146,11 @@ class SwapDropdown extends PureComponent<Props, State> {
 interface SwapOptionProps {
   option: SingleCoin;
   isMain?: boolean;
+  isDisabled?: boolean;
   onChange(opt: Option): void;
 }
 
-const SwapOption: React.SFC<SwapOptionProps> = ({ option, isMain, onChange }) => {
+const SwapOption: React.SFC<SwapOptionProps> = ({ option, isMain, isDisabled, onChange }) => {
   const handleChange = (ev: React.MouseEvent<HTMLButtonElement>) => {
     ev.preventDefault();
     onChange({
@@ -145,8 +159,10 @@ const SwapOption: React.SFC<SwapOptionProps> = ({ option, isMain, onChange }) =>
     });
   };
 
+  const classNames = classnames('SwapOption', isMain && 'is-main', isDisabled && 'is-disabled');
+
   return (
-    <button className={classnames('SwapOption', isMain && 'is-main')} onClick={handleChange}>
+    <button className={classNames} disabled={isDisabled} onClick={handleChange}>
       {isMain ? (
         <React.Fragment>
           <img src={option.image} className="SwapOption-logo" alt={`${option.name} logo`} />

common/containers/Tabs/Swap/components/CurrencySwap.tsx

@@ -381,7 +381,8 @@ export default class CurrencySwap extends PureComponent<Props, State> {
                     onChange={this.onChangeAmount}
                   />
                   <SwapDropdown
-                    options={destinationKindOptions}
+                    options={originKindOptions}
+                    disabledOption={origin.value}
                     value={destination.value}
                     onChange={this.onChangeDestinationKind}
                   />