Merge pull request #20 from utat-ss/add-logo

Add logo and update styling

Author: DM1122

Diff for: client/src/app/app.component.html

@@ -1,3 +1,7 @@
+<div id="title">
+    <img src="assets/utat-treeviz-logo.png" style="object-fit: contain; object-position: left;" height="100%" width="100%"/> 
+</div>
+
 <div style="display: flex; flex-grow: grow">
     <app-node-directory [model]="model" [selectedNode]="selectedNode" [visibleList]="visibleList" (nodeClicked)="setSelectedNode($event)"></app-node-directory>
     <app-org-chart [model]="model" [selectedNode]="selectedNode" [visibleList]="visibleList" (nodeClicked)="setSelectedNode($event)"></app-org-chart>

Diff for: client/src/app/app.component.sass

@@ -3,8 +3,6 @@
     position: absolute
     font-family: Sans-Serif
     font-weight: bold
-    width: 50vw
+    height: 70px
+    width: 20vw
     z-index: 10
-    margin: 1vh 1vh
-    padding: 3vh 3vh
-    border: #000 solid 2px

Diff for: client/src/app/components/filter/filter.component.sass

@@ -1,5 +1,9 @@
 mat-form-field, #form button
-    margin: 1em
+    margin-left: 1em
+    margin-top: 1em
 
-#active-filters
-    margin: 1em
+#container
+    margin-left: 20vw
+    margin-top: -5vh
+    position: absolute
+    z-index: 10    

Diff for: client/src/app/components/inspector/inspector.component.sass

@@ -1,9 +1,8 @@
 #container 
     overflow: auto
-    height: 98.5vh
+    height: 80vh
     margin: 0%
     padding: 3% 1% 0 1%
-    border: #000 solid 1px
 
 mat-form-field
     width: 100%

Diff for: client/src/app/components/node-directory/node-directory.component.html

@@ -1,3 +1,3 @@
 <div id="app-node-directory"></div>
-<input type="text" placeholder="Search for a requirement" size="26px" [(ngModel)]="searchText" (keyup.enter)="searchNodes()" (keydown)="onKeyDown($event)" [style.color]="hasMatchingNodes ? '' : 'red'">
+<input type="text" placeholder="Search for a requirement" style="width: 20vw;" [(ngModel)]="searchText" (keyup.enter)="searchNodes()" (keydown)="onKeyDown($event)" [style.color]="hasMatchingNodes ? '' : 'red'">
 <button (click)="clearSearch()" style="width: 99px; height: 20px;">Clear Search</button>

Diff for: client/src/app/components/node-directory/node-directory.component.sass

@@ -3,8 +3,7 @@
     margin-right: auto
     margin-top: 0
     width: 20vw
-    height: 97vh
-    border: 1px solid black
+    height: 80vh
 
 #expandAllButton
     background-color: #ADD8E6

Diff for: client/src/app/components/org-chart/org-chart.component.sass

@@ -1,8 +1,7 @@
 #app-org-chart
     background: whitesmoke
     width: 60vw
-    height: 99.5vh
-    border: 1px solid black
+    height: 80vh
     margin-right: 0
     margin-left: auto
     margin-top: 0