Command palette restyling (#2642)

* Styling command palette

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Animating command palette entering

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Fixing errors paddings

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/animate/animate.scss

@@ -63,6 +63,6 @@
   }
 
   &.opacity-scale {
-    @include animate-opacity-scale;
+    @include animate-opacity-scale(100ms);
   }
 }

src/renderer/components/command-palette/command-container.scss

@@ -1,11 +1,86 @@
 #command-container {
   position: absolute;
   top: 20px;
-  width: 40%;
   left: 0;
   right: 0;
   margin-left: auto;
   margin-right: auto;
-  padding: 10px;
-  background-color: var(--dockInfoBackground);
+  background-color: var(--layoutBackground);
+  border-radius: 8px;
+  box-shadow: rgba(0, 0, 0, 0.5) 0px 16px 70px;
+  max-width: 640px;
+  color: var(--settingsColor);
+  transition: all 0.3s;
+
+  .Input {
+    label {
+      caret-color: var(--blue);
+      color: var(--settingsColor);
+      background: transparent;
+      border: 0;
+      font-size: 18px;
+      padding: 15px 19px;
+      border-bottom: 1px solid var(--borderFaintColor);
+
+      &:focus {
+        box-shadow: none;
+      }
+    }
+  }
+
+  .hint {
+    padding: 8px;
+    display: block;
+  }
+
+  .errors {
+    padding: 8px;
+  }
+
+  .Select__menu {
+    position: relative;
+  }
+
+  .Select__control {
+    padding: var(--padding);
+    box-shadow: none;
+    border-bottom: 1px solid var(--borderFaintColor);
+    caret-color: var(--blue);
+    font-size: 18px;
+
+    &:focus {
+      box-shadow: none;
+    }
+  }
+
+  .Select__menu {
+    box-shadow: none;
+    background: transparent;
+    margin: 0;
+  }
+
+  .Select__menu-list {
+    padding: 0;
+  }
+
+  .Select__option {
+    background-color: transparent;
+    padding: 10px 18px;
+
+    &:hover {
+      background-color: var(--menuSelectedOptionBgc);
+      border-left: 4px solid var(--blue);
+      padding-left: 14px;
+    }
+
+    &.Select__option--is-focused {
+      background-color: var(--menuSelectedOptionBgc);
+      border-left: 4px solid var(--blue);
+      padding-left: 14px;
+    }
+  }
+
+  .Select__menu-notice--no-options {
+    padding: 12px;
+  }
 }

src/renderer/components/command-palette/command-container.tsx

@@ -73,7 +73,7 @@ export class CommandContainer extends React.Component<{ clusterId?: string }> {
 
   render() {
     return (
-      <Dialog isOpen={!!this.commandComponent} animated={false} onClose={() => this.commandComponent = null}>
+      <Dialog isOpen={!!this.commandComponent} animated={true} onClose={() => this.commandComponent = null} modal={false}>
         <div id="command-container">
           {this.commandComponent}
         </div>

src/renderer/components/command-palette/command-dialog.tsx

@@ -72,6 +72,7 @@ export class CommandDialog extends React.Component {
   render() {
     return (
       <Select
+        menuPortalTarget={null}
         onChange={(v) => this.onChange(v.value)}
         components={{ DropdownIndicator: null, IndicatorSeparator: null }}
         menuIsOpen={this.menuIsOpen}
@@ -79,7 +80,7 @@ export class CommandDialog extends React.Component {
         autoFocus={true}
         escapeClearsValue={false}
         data-test-id="command-palette-search"
-        placeholder="" />
+        placeholder="Type a command or search&hellip;" />
     );
   }
 }

src/renderer/components/hotbar/hotbar-remove-command.tsx

@@ -45,6 +45,7 @@ export class HotbarRemoveCommand extends React.Component {
   render() {
     return (
       <Select
+        menuPortalTarget={null}
         onChange={(v) => this.onChange(v.value)}
         components={{ DropdownIndicator: null, IndicatorSeparator: null }}
         menuIsOpen={true}

src/renderer/components/hotbar/hotbar-switch-command.tsx

@@ -46,6 +46,7 @@ export class HotbarSwitchCommand extends React.Component {
   render() {
     return (
       <Select
+        menuPortalTarget={null}
         onChange={(v) => this.onChange(v.value)}
         components={{ DropdownIndicator: null, IndicatorSeparator: null }}
         menuIsOpen={true}