Remove header home icon and adjust header and tab padding

- instead of 'home' icon, place an oversized 'code web chat logo'
- from header remove left side. merge right into parent, set justify content cneter

├── apps
│   └── editor
│       └── src
│           └── views
│               └── prompt
│                   └── frontend
│                       └── Home
│                           ├── Home.module.scss
│                           └── Home.tsx
└── packages
    └── ui
        └── src
            └── components
                └── editor
                    └── common
                        └── Icon
                            └── Icon.tsx

Author: robertpiosik

apps/editor/src/views/prompt/frontend/Home/Home.module.scss

@@ -9,17 +9,17 @@
     inset: 0;
     display: flex;
     align-items: center;
-    justify-content: space-between;
-    gap: 12px;
-    padding: 0 12px;
+    justify-content: center;
+    gap: 4px;
+    padding: 0 22px;
     opacity: 1;
     transform: translateY(0);
     transition:
       transform var(--transition-duration-250) var(--transition-timing-function),
       opacity var(--transition-duration-250) var(--transition-timing-function);
 
     :global([data-modern-ui='true']) & {
-      padding: 0 10px;
+      padding: 0 20px;
     }
 
     &--hidden {
@@ -29,23 +29,6 @@
     }
   }
 
-  &__left {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 5px;
-    --size: 20px;
-    width: var(--size);
-    height: var(--size);
-    color: var(--vscode-icon-foreground);
-  }
-
-  &__right {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-  }
-
   &__targets {
     position: absolute;
     inset: 0;

apps/editor/src/views/prompt/frontend/Home/Home.tsx

@@ -142,23 +142,18 @@ export const Home: React.FC<Props> = (props) => {
           })}
           ref={container_ref}
         >
-          <div className={styles['header__left']}>
-            <span className="codicon codicon-home" />
-          </div>
-          <div className={styles['header__right']}>
-            <CompactableActionButton
-              label={discord_label}
-              href="https://discord.gg/KJySXsrSX5"
-              icon="DISCORD"
-              is_compact={compact_step >= 1}
-            />
-            <CompactableActionButton
-              label={coffee_label}
-              on_click={props.on_donate_click}
-              codicon="coffee"
-              is_compact={compact_step >= 2}
-            />
-          </div>
+          <CompactableActionButton
+            label={discord_label}
+            href="https://discord.gg/KJySXsrSX5"
+            icon="DISCORD"
+            is_compact={compact_step >= 1}
+          />
+          <CompactableActionButton
+            label={coffee_label}
+            on_click={props.on_donate_click}
+            codicon="coffee"
+            is_compact={compact_step >= 2}
+          />
         </div>
 
         <div

packages/ui/src/components/editor/prompt/Tabs/Tabs.module.scss

@@ -20,7 +20,7 @@
   &__tab {
     @include accent-font;
     font-size: 16px;
-    padding: 4px 8px 3px 8px;
+    padding: 4px 10px 3px 10px;
     display: flex;
     align-items: center;
     text-transform: none;