command palette ui fixes

src/components/CommandPalette.jsx

@@ -24,13 +24,20 @@ function Row({ item, onClick, isSelected }) {
 				}`}
 				onClick={onClick}
 			>
-				{item.path ? <FileIcon file={item} /> : null}
-				{item.name}
-				{item.path ? (
+				<div>
+					{item.path ? <FileIcon file={item} /> : null}
+					{item.name}
+					{item.path ? (
+						<span class="command-palette__option-subtitle">
+							{getFolder(item.path)}
+						</span>
+					) : null}
+				</div>
+				<div>
 					<span class="command-palette__option-subtitle">
-						{getFolder(item.path)}
+						{item.keyboardShortcut ? item.keyboardShortcut : ''}
 					</span>
-				) : null}
+				</div>
 			</button>
 		</li>
 	);
@@ -101,6 +108,7 @@ export class CommandPalette extends Component {
 				closeHandler={this.props.closeHandler}
 				noOverlay
 				hideCloseButton
+				extraClasses="modal--command-palette"
 			>
 				<AutoFocusInput
 					type="search"
@@ -108,6 +116,7 @@ export class CommandPalette extends Component {
 					value={this.state.search}
 					onInput={this.inputHandler.bind(this)}
 					onKeyUp={this.keyDownHandler.bind(this)}
+					style="width:100%"
 				/>
 				<ul class="command-palette__option-list">
 					{this.state.list.map((item, index) => (

src/components/KeyboardShortcutsModal.jsx

@@ -9,10 +9,10 @@ export function KeyboardShortcutsModal({ show, closeHandler }) {
 			<div class="flex">
 				<div>
 					<h2>Global</h2>
-					<p>
+					{/*<p>
 						<span class="kbd-shortcut__keys">Ctrl/⌘ + Shift + ?</span>
 						<span class="kbd-shortcut__details">See keyboard shortcuts</span>
-					</p>
+					</p>*/}
 					<p>
 						<span class="kbd-shortcut__keys">Ctrl/⌘ + Shift + 5</span>
 						<span class="kbd-shortcut__details">Refresh preview</span>

src/style.css

@@ -395,7 +395,7 @@ a > svg {
 }
 
 *:focus {
-	outline-width: 4px;
+	outline-width: 3px;
 	outline-color: var(--color-button);
 	outline-style: solid;
 	outline-offset: 1px;
@@ -1015,6 +1015,9 @@ body > #demo-frame {
 	.modal--settings > .modal__content {
 		width: 850px;
 	}
+	.modal--command-palette > .modal__content {
+		width: 600px;
+	}
 }
 
 .pledge-modal .modal__content,
@@ -1679,7 +1682,7 @@ body:not(.is-app) .show-when-app {
 
 .help-text {
 	font-size: 0.9em;
-	color: rgba(255, 255, 255, 0.65);
+	color: var(--color-text-dark-1);
 	margin: 5px 0;
 }
 
@@ -1906,6 +1909,8 @@ while the theme CSS file is loading */
 	list-style: none;
 }
 .command-palette__option-row {
+	display: flex;
+	justify-content: space-between;
 	padding: 4px 5px;
 	width: 100%;
 	text-align: left;
@@ -1919,7 +1924,7 @@ while the theme CSS file is loading */
 .command-palette__option-subtitle {
 	color: var(--color-text-dark-1);
 	margin-left: 10px;
-	font-size: 0.8em;
+	font-size: 0.875em;
 }
 
 .preview-dimension {