Standardize UI heading colors, add global strong tag styling, and refine the Intro component's layout

Author: robertpiosik

packages/ui/src/components/editor/BuyMeACoffee/BuyMeACoffee.module.scss

@@ -1,7 +1,7 @@
 .container {
   display: flex;
   flex-direction: column;
-  gap: var(--padding-16px);
+  gap: var(--padding-14px);
 }
 
 .donations {
@@ -10,7 +10,7 @@
   gap: var(--padding-10px);
 
   &__heading {
-    opacity: var(--dimmed-opacity);
+    color: var(--vscode-descriptionForeground);
   }
 
   &__heading_container {

packages/ui/src/components/editor/Configurations/Configurations.module.scss

@@ -11,7 +11,7 @@
   gap: var(--padding-8px);
 
   &__title {
-    opacity: var(--dimmed-opacity);
+    color: var(--vscode-descriptionForeground);
   }
 }
 

packages/ui/src/components/editor/Presets/Presets.module.scss

@@ -11,7 +11,7 @@
   gap: var(--padding-8px);
 
   &__left {
-    opacity: var(--dimmed-opacity);
+    color: var(--vscode-descriptionForeground);
   }
 }
 

packages/ui/src/styles/global.scss

@@ -37,3 +37,7 @@ a {
 a:focus {
   outline: none;
 }
+
+strong {
+  font-weight: 600;
+}

packages/vscode/src/view/frontend/intro/Intro/Intro.module.scss

@@ -8,20 +8,42 @@
 .inner {
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
   align-items: center;
   gap: var(--padding-24px);
   height: 100%;
   width: 100%;
-  padding: var(--padding-10px) var(--padding-12px) var(--padding-12px);
+  padding: var(--padding-5px) var(--padding-12px) var(--padding-12px);
 }
 
 .top {
   display: flex;
   flex-direction: column;
-  gap: var(--padding-12px);
+  gap: var(--padding-10px);
   width: 100%;
 
+  &__header {
+    display: flex;
+    align-items: center;
+    gap: var(--padding-4px);
+    width: 100%;
+
+    &__home {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: var(--border-radius-5px);
+      --size: 20px;
+      width: var(--size);
+      height: var(--size);
+      color: var(--vscode-icon-foreground);
+    }
+
+    &__text {
+      font-weight: 600;
+      color: var(--vscode-icon-foreground);
+    }
+  }
+
   &__enter-buttons {
     display: flex;
     flex-direction: column;
@@ -37,6 +59,7 @@
   text-align: center;
   gap: var(--padding-8px);
   font-size: var(--font-size-12px);
+  margin-top: auto;
   user-select: text;
   width: 100%; // For easier text selection
 

packages/vscode/src/view/frontend/intro/Intro/Intro.tsx

@@ -26,6 +26,12 @@ export const Intro: React.FC<Props> = (props) => {
       <Scrollable>
         <div className={styles.inner}>
           <div className={styles.top}>
+            <div className={styles['top__header']}>
+              <div className={styles['top__header__home']}>
+                <span className="codicon codicon-home" />
+              </div>
+              <span className={styles['top__header__text']}>Home</span>
+            </div>
             <div className={styles['top__enter-buttons']}>
               <Enter
                 label="Open View: New chat"
@@ -42,10 +48,13 @@ export const Intro: React.FC<Props> = (props) => {
                 donations={donations}
                 is_fetching={is_fetching}
                 are_donations_visible={props.are_donations_visible}
-                on_toggle_donations_visibility={props.on_toggle_donations_visibility}
+                on_toggle_donations_visibility={
+                  props.on_toggle_donations_visibility
+                }
               />
             </div>
           </div>
+
           <div className={styles.bottom}>
             <div className={styles.bottom__links}>
               <div>
@@ -62,6 +71,7 @@ export const Intro: React.FC<Props> = (props) => {
           </div>
         </div>
       </Scrollable>
+
       <div className={styles.footer}>
         <div className={styles.footer__left}>
           <a href="https://codeweb.chat/">Docs ↗</a>