From 1da29178a859b5253fd847681365121b5f1b581e Mon Sep 17 00:00:00 2001
From: vato007 <contact@michaelpivato.dev>
Date: Fri, 28 Jun 2024 22:07:07 +0930
Subject: [PATCH] Style file tree sidebar

---
 src/app/app.component.scss                 |  3 ++-
 src/app/file-tree/file-tree.component.html |  2 ++
 src/app/file-tree/file-tree.component.scss | 11 +++++++++++
 src/styles.scss                            |  5 +++--
 4 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index d80ee9d..7ecb782 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -16,7 +16,8 @@ mat-sidenav-container {
   height: 100%;
 }
 
-.mat-sidenav.mat-drawer-end {
+.mat-sidenav.mat-drawer-end,
+.mat-sidenav {
   padding: var(--mat-sidenav-container-shape);
 }
 
diff --git a/src/app/file-tree/file-tree.component.html b/src/app/file-tree/file-tree.component.html
index 16ebc35..8ac7f37 100644
--- a/src/app/file-tree/file-tree.component.html
+++ b/src/app/file-tree/file-tree.component.html
@@ -2,6 +2,7 @@
   <mat-tree-node
     *matTreeNodeDef="let node"
     matTreeNodePadding
+    matTreeNodePaddingIndent="24px"
     (click)="fileSelected.emit(node.file)"
   >
     <button mat-icon-button disabled></button>
@@ -11,6 +12,7 @@
     <button
       mat-icon-button
       matTreeNodePadding
+      matTreeNodePaddingIndent="24px"
       [attr.aria-label]="'Toggle ' + node.file.name"
     >
       <mat-icon class="mat-icon-rtl-mirror">
diff --git a/src/app/file-tree/file-tree.component.scss b/src/app/file-tree/file-tree.component.scss
index 5d4e87f..3b60b7c 100644
--- a/src/app/file-tree/file-tree.component.scss
+++ b/src/app/file-tree/file-tree.component.scss
@@ -1,3 +1,14 @@
 :host {
   display: block;
+  border-radius: var(--mat-sidenav-container-shape);
+  padding: var(--mat-sidenav-container-shape);
+  height: 100%;
+  box-sizing: border-box;
+  transition: background-color 100ms linear;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.mat-tree {
+  background-color: transparent;
 }
diff --git a/src/styles.scss b/src/styles.scss
index 53042d6..82ae672 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -8,7 +8,8 @@
     background-color: mat.get-theme-color($theme, tertiary-container);
   }
 
-  app-proto-definition-selector {
+  app-proto-definition-selector,
+  app-file-tree {
     background-color: mat.get-theme-color($theme, secondary-container);
     transition: background-color 100ms linear;
   }
@@ -36,7 +37,7 @@ body {
 }
 body {
   margin: 0;
-  font-family: "Roboto";
+  font: mat.get-theme-typography(theme.$rose-theme, body-medium, font);
   --mat-tree-node-min-height: 24px;
   --mat-tree-node-text-size: 14px;
   --mdc-icon-button-state-layer-size: 24px;