Update Close button color. Update the width of the details button. Re…

…factoring for SCSS file.

src/app/directory-tree-view/dir-tree-view-sort/shooting-time-info/dir-tree-view-sort-shooting-time-info.component.html

@@ -11,8 +11,8 @@
     Note that folders are sorted by their names since there is no concept of "Shooting Time" of folders.
   </div>
 
-  <button mat-stroked-button (click)="detailsOpenState.set(!detailsOpenState())">
-    <div class="expand-button-content">
+  <button mat-stroked-button class="details-button" (click)="detailsOpenState.set(!detailsOpenState())">
+    <div class="details-button-content">
       <span>
         @if (detailsOpenState()) {
           Hide details for reference

src/app/directory-tree-view/dir-tree-view-sort/shooting-time-info/dir-tree-view-sort-shooting-time-info.component.scss

@@ -1,32 +1,25 @@
 :host {
-  box-sizing: border-box;
   height: 100%;
 
   display: grid;
   grid: "dialog-header" auto
         "dialog-body"   1fr
         "dialog-footer" auto
         /1fr;
-  justify-items: center;
 
   .dialog-header { grid-area: dialog-header; }
   .dialog-body   { grid-area: dialog-body;   }
   .dialog-footer { grid-area: dialog-footer; }
 }
 
 .dialog-header {
-  width: 100%;
-  box-sizing: border-box;
   padding: 10px 20px;
   border-bottom: 1px solid #7f7f7f;
   background-color: #eeeeee;
   font-size: 20px;
 }
 
 .dialog-body {
-  width: 100%;
-  box-sizing: border-box;
-
   overflow: auto;
   padding: 24px;
 
@@ -51,7 +44,11 @@
   }
 }
 
-.expand-button-content {
+.details-button {
+  width: 255px;
+}
+
+.details-button-content {
   display: flex;
   gap: 5px;
   align-items: center;
@@ -63,8 +60,6 @@
 }
 
 .dialog-footer {
-  width: 100%;
-  box-sizing: border-box;
   padding: 10px 20px;
   border-top: 1px solid #7f7f7f;
   background-color: #eeeeee;
@@ -74,6 +69,6 @@
 
 .close-button {
   width: 80px;
-  background-color: #7f7f7f;
+  background-color: #999999;
   color: whitesmoke;
 }