update shortcut design

src/components/apps/app-pill.module.css

@@ -60,7 +60,16 @@
 }
 
 .Index {
-  font-size: 1.5rem;
-  color: rgba(255, 255, 255, 0.3);
-  font-family: var(--font-accent);
+  position: absolute;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  bottom: 0;
+  font-size: var(--mantine-font-size-xs);
+  right: 1rem;
+  color: var(--color-secondary);
+
+  .Shortcut {
+    font-family: var(--font-accent);
+  }
 }

src/components/apps/app-pill.tsx

@@ -5,6 +5,7 @@ import { settingsAtom } from '~/atoms';
 import { AppDefinition } from '~/types';
 
 import style from './app-pill.module.css';
+import { IconKeyboard } from '@tabler/icons-react';
 
 export type AppPillProps = AppDefinition;
 
@@ -32,13 +33,17 @@ export function AppPill({
           <span className={style.Url}>{url.split('://')[1].split('/')[0]}</span>
         </div>
         <Flex align="center" gap={4} justify="flex-end" style={{ marginLeft: 'auto' }}>
-          {shortcut && <div className={style.Index}>{shortcut}</div>}
           {showLocations && location && (
             <Badge size="xs" color="gray.8" className={style.Badge}>
               {location}
             </Badge>
           )}
         </Flex>
+        {shortcut && (
+          <div className={style.Index}>
+            <IconKeyboard size={16} /> <span className={style.Shortcut}>{shortcut}</span>
+          </div>
+        )}
       </Anchor>
     </div>
   );

src/styles/index.css

@@ -1,6 +1,6 @@
 :root {
   --color-text: #eee;
-  --color-secondary: #ddd;
+  --color-secondary: #bbb;
   --color-bg-dark: rgba(0, 0, 0, 0.6);
   --color-bg-darker: rgba(0, 0, 0, 0.9);