Fix UI inconsistencies, various improvements (#357)

* Make version gray in plugin list

* Settings/store icons together & plugin list fix

* Navigation name/icon improvements

* Decky settings overhaul and other fixes

- Revert the tab icon to a plug
- Rename DeckyFlat function to DeckyIcon
- Add DialogBody to settings pages to improve scrolling
- Add remote debugging settings to the developer settings
- Fix React devtools interactions to work more easily
- Add spacing to React devtools description
- Specify Decky vs. plugin store
- Compact version information by update button
- Add current version to bottom of settings
- Remove unnecessary settings icons
- Change CEF debugger icon to Chrome (bug icon too generic, is Chromium)
- Make buttons/dropdowns in settings have fixed width
- Make download icon act/appear similar to Valve's for Deck

* Final UI adjustments

* Switch plugin settings icon to plug

1 files changed, 7 insertions, 6 deletions

diff --git a/frontend/src/components/TitleView.tsx b/frontend/src/components/TitleView.tsx
index cd1f9eba..7e529d21 100644
--- a/frontend/src/components/TitleView.tsx
+++ b/frontend/src/components/TitleView.tsx
@@ -1,6 +1,7 @@
 import { DialogButton, Focusable, Router, staticClasses } from 'decky-frontend-lib';
 import { CSSProperties, VFC } from 'react';
-import { FaArrowLeft, FaCog, FaStore } from 'react-icons/fa';
+import { BsGearFill } from 'react-icons/bs';
+import { FaArrowLeft, FaStore } from 'react-icons/fa';
 
 import { useDeckyState } from './DeckyState';
 
@@ -26,18 +27,18 @@ const TitleView: VFC = () => {
   if (activePlugin === null) {
     return (
       <Focusable style={titleStyles} className={staticClasses.Title}>
+        <div style={{ marginRight: 'auto', flex: 0.9 }}>Decky</div>
         <DialogButton
           style={{ height: '28px', width: '40px', minWidth: 0, padding: '10px 12px' }}
-          onClick={onSettingsClick}
+          onClick={onStoreClick}
         >
-          <FaCog style={{ marginTop: '-4px', display: 'block' }} />
+          <FaStore style={{ marginTop: '-4px', display: 'block' }} />
         </DialogButton>
-        <div style={{ marginRight: 'auto', flex: 0.9 }}>Decky</div>
         <DialogButton
           style={{ height: '28px', width: '40px', minWidth: 0, padding: '10px 12px' }}
-          onClick={onStoreClick}
+          onClick={onSettingsClick}
         >
-          <FaStore style={{ marginTop: '-4px', display: 'block' }} />
+          <BsGearFill style={{ marginTop: '-4px', display: 'block' }} />
         </DialogButton>
       </Focusable>
     );