From 436f616fc20a329206fe91248f94fc6adc153ca8 Mon Sep 17 00:00:00 2001
From: Tomoyuki Aota <tomoyukia@gmail.com>
Date: Sat, 19 Oct 2024 11:35:48 +0900
Subject: [PATCH 1/8] Put the details of the information for "By Shooting Time"
 in <mat-expansion-panel>.

---
 src/app/app.module.ts                         |  2 ++
 .../dir-tree-view-sort.service.ts             |  4 +--
 ...iew-sort-shooting-time-info.component.html | 21 ++++++++++------
 ...iew-sort-shooting-time-info.component.scss | 25 +++++++++++++------
 ...-view-sort-shooting-time-info.component.ts |  4 +--
 5 files changed, 37 insertions(+), 19 deletions(-)

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index da03abeb..c8b120df 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -5,6 +5,7 @@ import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatExpansionModule } from '@angular/material/expansion';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
@@ -94,6 +95,7 @@ export function HttpLoaderFactory(http: HttpClient) {
     MatButtonModule,
     MatCheckboxModule,
     MatDialogModule,
+    MatExpansionModule,
     MatFormFieldModule,
     MatIconModule,
     MatInputModule,
diff --git a/src/app/directory-tree-view/dir-tree-view-sort/dir-tree-view-sort.service.ts b/src/app/directory-tree-view/dir-tree-view-sort/dir-tree-view-sort.service.ts
index 07e11f35..4a7b5954 100644
--- a/src/app/directory-tree-view/dir-tree-view-sort/dir-tree-view-sort.service.ts
+++ b/src/app/directory-tree-view/dir-tree-view-sort/dir-tree-view-sort.service.ts
@@ -148,8 +148,8 @@ export class DirTreeViewSortService {
 
   public showShootingTimeInfoDialog() {
     this.dialog.open(DirTreeViewSortShootingTimeInfoComponent, {
-      width: '600px',
-      height: '490px',
+      width: '800px',
+      height: '350px',
       panelClass: 'custom-dialog-container',
       disableClose: false,
       autoFocus: false,
diff --git a/src/app/directory-tree-view/dir-tree-view-sort/shooting-time-info/dir-tree-view-sort-shooting-time-info.component.html b/src/app/directory-tree-view/dir-tree-view-sort/shooting-time-info/dir-tree-view-sort-shooting-time-info.component.html
index f95144dd..85fdbc24 100644
--- a/src/app/directory-tree-view/dir-tree-view-sort/shooting-time-info/dir-tree-view-sort-shooting-time-info.component.html
+++ b/src/app/directory-tree-view/dir-tree-view-sort/shooting-time-info/dir-tree-view-sort-shooting-time-info.component.html
@@ -7,15 +7,22 @@
     </ol>
     Note that folders are sorted by their names since there is no concept of "Shooting Time" of folders.
   </div>
-  <hr>
-  <div class="message-details">
-    <p>Below are details for reference:</p>
+  <mat-expansion-panel (opened)="panelOpenState.set(true)" (closed)="panelOpenState.set(false)">
+    <mat-expansion-panel-header>
+      <mat-panel-description>
+        @if (panelOpenState()) {
+          Below are details for reference:
+        } @else {
+          Click here to read details...
+        }
+      </mat-panel-description>
+    </mat-expansion-panel-header>
     <p>DateTimeOriginal in EXIF is the most trustworthy information about the time when the photo was taken.</p>
     <p>DateTimeOriginal is written in most JPEG/HEIF/TIFF files by most cameras, but sometime it is missing.</p>
-    <p>The modified time always exists for files, and the modified time is often the time when the photo was taken,
-      so the modified time is used when DateTimeOriginal is not available.</p>
-    <p>Also, files other than JPEG/HEIF/TIFF do not have EXIF in the first place, so the modified time is used for such files.</p>
-  </div>
+    <p>The modified time of the file is often the time when the photo was taken,
+      so the modified time is used as an alternative when DateTimeOriginal is missing.</p>
+    <p>Also, files other than JPEG/HEIF/TIFF do not have EXIF  in the first place, so the modified time is always used for such files.</p>
+  </mat-expansion-panel>
 </div>
 <button mat-stroked-button
         mat-dialog-close
diff --git a/src/app/directory-tree-view/dir-tree-view-sort/shooting-time-info/dir-tree-view-sort-shooting-time-info.component.scss b/src/app/directory-tree-view/dir-tree-view-sort/shooting-time-info/dir-tree-view-sort-shooting-time-info.component.scss
index c6579d1f..db94145b 100644
--- a/src/app/directory-tree-view/dir-tree-view-sort/shooting-time-info/dir-tree-view-sort-shooting-time-info.component.scss
+++ b/src/app/directory-tree-view/dir-tree-view-sort/shooting-time-info/dir-tree-view-sort-shooting-time-info.component.scss
@@ -1,8 +1,15 @@
 :host {
-  padding: 30px 30px 0 30px;
+  box-sizing: border-box;
+
+  $dialog-width: 800px;
+  $scroll-bar-area-width: 20px;  // The area for the scrollbar to appear without corrupting the layout
+  width: calc($dialog-width - $scroll-bar-area-width);
+
+  height: 100%;
+  padding: 30px;
 
   display: grid;
-  grid: "message"      auto
+  grid: "message"      1fr
         "close-button" auto
         /auto;
   justify-items: center;
@@ -11,19 +18,21 @@
 }
 
 .message {
-  margin-bottom: 20px;
+  margin: 10px 0 20px 0;
 
   .message-main {
-    margin-bottom: 20px;
+    margin-bottom: 30px;
 
-    ol > li::marker {
-      content:counter(list-item) ")\2003"; // To use brackets for <li>. e.g. 1) 2) 3) instead of 1. 2. 3.
+    li {
+      margin-bottom: 10px;
+
+      &::marker {
+        content:counter(list-item) ")\2003"; // To use brackets for <li>. e.g. 1) 2) 3) instead of 1. 2. 3.
+      }
     }
   }
 
   .message-details {
-    margin-top: 15px;
-
     p {
       margin: 5px 0;
     }
diff --git a/src/app/directory-tree-view/dir-tree-view-sort/shooting-time-info/dir-tree-view-sort-shooting-time-info.component.ts b/src/app/directory-tree-view/dir-tree-view-sort/shooting-time-info/dir-tree-view-sort-shooting-time-info.component.ts
index b1bcd6bc..da06d51e 100644
--- a/src/app/directory-tree-view/dir-tree-view-sort/shooting-time-info/dir-tree-view-sort-shooting-time-info.component.ts
+++ b/src/app/directory-tree-view/dir-tree-view-sort/shooting-time-info/dir-tree-view-sort-shooting-time-info.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, signal } from '@angular/core';
 
 @Component({
   selector: 'app-dir-tree-view-sort-shooting-time-info',
@@ -6,5 +6,5 @@ import { Component } from '@angular/core';
   styleUrl: './dir-tree-view-sort-shooting-time-info.component.scss'
 })
 export class DirTreeViewSortShootingTimeInfoComponent {
-
+  readonly panelOpenState = signal(false);
 }

From 6cc5abfa7a065df9071c51f832d34053094a6239 Mon Sep 17 00:00:00 2001
From: Tomoyuki Aota <tomoyukia@gmail.com>
Date: Sat, 19 Oct 2024 12:28:12 +0900
Subject: [PATCH 2/8] Apply mat-expansion-panel-like-style to the main message
 in DirTreeViewSortShootingTimeInfoComponent.

---
 .../dir-tree-view-sort/dir-tree-view-sort.service.ts |  4 ++--
 ...-tree-view-sort-shooting-time-info.component.scss | 12 ++++++++++--
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/app/directory-tree-view/dir-tree-view-sort/dir-tree-view-sort.service.ts b/src/app/directory-tree-view/dir-tree-view-sort/dir-tree-view-sort.service.ts
index 4a7b5954..856ab20b 100644
--- a/src/app/directory-tree-view/dir-tree-view-sort/dir-tree-view-sort.service.ts
+++ b/src/app/directory-tree-view/dir-tree-view-sort/dir-tree-view-sort.service.ts
@@ -148,8 +148,8 @@ export class DirTreeViewSortService {
 
   public showShootingTimeInfoDialog() {
     this.dialog.open(DirTreeViewSortShootingTimeInfoComponent, {
-      width: '800px',
-      height: '350px',
+      width: '840px', // Need to be the same value used in the SCSS file for DirTreeViewSortShootingTimeInfoComponent
+      height: '360px',
       panelClass: 'custom-dialog-container',
       disableClose: false,
       autoFocus: false,
diff --git a/src/app/directory-tree-view/dir-tree-view-sort/shooting-time-info/dir-tree-view-sort-shooting-time-info.component.scss b/src/app/directory-tree-view/dir-tree-view-sort/shooting-time-info/dir-tree-view-sort-shooting-time-info.component.scss
index db94145b..643ee919 100644
--- a/src/app/directory-tree-view/dir-tree-view-sort/shooting-time-info/dir-tree-view-sort-shooting-time-info.component.scss
+++ b/src/app/directory-tree-view/dir-tree-view-sort/shooting-time-info/dir-tree-view-sort-shooting-time-info.component.scss
@@ -1,12 +1,12 @@
 :host {
   box-sizing: border-box;
 
-  $dialog-width: 800px;
+  $dialog-width: 840px;          // Need to be the same value used in DirTreeViewSortService::showShootingTimeInfoDialog function
   $scroll-bar-area-width: 20px;  // The area for the scrollbar to appear without corrupting the layout
   width: calc($dialog-width - $scroll-bar-area-width);
 
   height: 100%;
-  padding: 30px;
+  padding: 20px 30px;
 
   display: grid;
   grid: "message"      1fr
@@ -17,11 +17,19 @@
   .close-button { grid-area: close-button; }
 }
 
+// Copied from <mat-expansion-panel> using DevTools
+@mixin mat-expansion-panel-like-style {
+  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+  border-radius: 4px;
+}
+
 .message {
   margin: 10px 0 20px 0;
 
   .message-main {
     margin-bottom: 30px;
+    padding: 24px; // Align with the padding of the content within <mat-expansion-panel>
+    @include mat-expansion-panel-like-style;
 
     li {
       margin-bottom: 10px;

From e0e162ea9bc13628c5184066c2705865591b1f23 Mon Sep 17 00:00:00 2001
From: Tomoyuki Aota <tomoyukia@gmail.com>
Date: Sat, 19 Oct 2024 12:37:50 +0900
Subject: [PATCH 3/8] Update the description in mat-panel-description.

---
 .../dir-tree-view-sort-shooting-time-info.component.html        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/directory-tree-view/dir-tree-view-sort/shooting-time-info/dir-tree-view-sort-shooting-time-info.component.html b/src/app/directory-tree-view/dir-tree-view-sort/shooting-time-info/dir-tree-view-sort-shooting-time-info.component.html
index 85fdbc24..2cb76f71 100644
--- a/src/app/directory-tree-view/dir-tree-view-sort/shooting-time-info/dir-tree-view-sort-shooting-time-info.component.html
+++ b/src/app/directory-tree-view/dir-tree-view-sort/shooting-time-info/dir-tree-view-sort-shooting-time-info.component.html
@@ -13,7 +13,7 @@
         @if (panelOpenState()) {
           Below are details for reference:
         } @else {
-          Click here to read details...
+          Read details for reference
         }
       </mat-panel-description>
     </mat-expansion-panel-header>

From 2f20436edc97368ce8305e50b627e87ab6e1dc7b Mon Sep 17 00:00:00 2001
From: Tomoyuki Aota <tomoyukia@gmail.com>
Date: Sat, 19 Oct 2024 12:40:56 +0900
Subject: [PATCH 4/8] Indicate public.

---
 .../dir-tree-view-sort-shooting-time-info.component.ts          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/directory-tree-view/dir-tree-view-sort/shooting-time-info/dir-tree-view-sort-shooting-time-info.component.ts b/src/app/directory-tree-view/dir-tree-view-sort/shooting-time-info/dir-tree-view-sort-shooting-time-info.component.ts
index da06d51e..20f45a45 100644
--- a/src/app/directory-tree-view/dir-tree-view-sort/shooting-time-info/dir-tree-view-sort-shooting-time-info.component.ts
+++ b/src/app/directory-tree-view/dir-tree-view-sort/shooting-time-info/dir-tree-view-sort-shooting-time-info.component.ts
@@ -6,5 +6,5 @@ import { Component, signal } from '@angular/core';
   styleUrl: './dir-tree-view-sort-shooting-time-info.component.scss'
 })
 export class DirTreeViewSortShootingTimeInfoComponent {
-  readonly panelOpenState = signal(false);
+  public readonly panelOpenState = signal(false);
 }

From 65429d03cef897a7150003018715351f98becb79 Mon Sep 17 00:00:00 2001
From: Tomoyuki Aota <tomoyukia@gmail.com>
Date: Sat, 19 Oct 2024 17:45:20 +0900
Subject: [PATCH 5/8] Update DirTreeViewSortShootingTimeInfoComponent with
 header, footer, and simpler body.

---
 src/app/app.module.ts                         |  2 -
 .../dir-tree-view-sort.service.ts             |  2 +-
 ...iew-sort-shooting-time-info.component.html | 53 +++++++++------
 ...iew-sort-shooting-time-info.component.scss | 67 +++++++++++++------
 ...-view-sort-shooting-time-info.component.ts |  2 +-
 5 files changed, 83 insertions(+), 43 deletions(-)

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index c8b120df..da03abeb 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -5,7 +5,6 @@ import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MatExpansionModule } from '@angular/material/expansion';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
@@ -95,7 +94,6 @@ export function HttpLoaderFactory(http: HttpClient) {
     MatButtonModule,
     MatCheckboxModule,
     MatDialogModule,
-    MatExpansionModule,
     MatFormFieldModule,
     MatIconModule,
     MatInputModule,
diff --git a/src/app/directory-tree-view/dir-tree-view-sort/dir-tree-view-sort.service.ts b/src/app/directory-tree-view/dir-tree-view-sort/dir-tree-view-sort.service.ts
index 856ab20b..8c3f438a 100644
--- a/src/app/directory-tree-view/dir-tree-view-sort/dir-tree-view-sort.service.ts
+++ b/src/app/directory-tree-view/dir-tree-view-sort/dir-tree-view-sort.service.ts
@@ -148,7 +148,7 @@ export class DirTreeViewSortService {
 
   public showShootingTimeInfoDialog() {
     this.dialog.open(DirTreeViewSortShootingTimeInfoComponent, {
-      width: '840px', // Need to be the same value used in the SCSS file for DirTreeViewSortShootingTimeInfoComponent
+      width: '800px',
       height: '360px',
       panelClass: 'custom-dialog-container',
       disableClose: false,
diff --git a/src/app/directory-tree-view/dir-tree-view-sort/shooting-time-info/dir-tree-view-sort-shooting-time-info.component.html b/src/app/directory-tree-view/dir-tree-view-sort/shooting-time-info/dir-tree-view-sort-shooting-time-info.component.html
index 2cb76f71..66bdf192 100644
--- a/src/app/directory-tree-view/dir-tree-view-sort/shooting-time-info/dir-tree-view-sort-shooting-time-info.component.html
+++ b/src/app/directory-tree-view/dir-tree-view-sort/shooting-time-info/dir-tree-view-sort-shooting-time-info.component.html
@@ -1,4 +1,7 @@
-<div class="message">
+<div class="dialog-header">
+  Sort By Shooting Time
+</div>
+<div class="dialog-body">
   <div class="message-main">
     When "By Shooting Time" is selected, in order to sort files, this application
     <ol>
@@ -7,25 +10,37 @@
     </ol>
     Note that folders are sorted by their names since there is no concept of "Shooting Time" of folders.
   </div>
-  <mat-expansion-panel (opened)="panelOpenState.set(true)" (closed)="panelOpenState.set(false)">
-    <mat-expansion-panel-header>
-      <mat-panel-description>
-        @if (panelOpenState()) {
-          Below are details for reference:
+
+  <button mat-stroked-button (click)="detailsOpenState.set(!detailsOpenState())">
+    <div class="expand-button-content">
+      <span>
+        @if (detailsOpenState()) {
+          Hide details for reference
         } @else {
           Read details for reference
         }
-      </mat-panel-description>
-    </mat-expansion-panel-header>
-    <p>DateTimeOriginal in EXIF is the most trustworthy information about the time when the photo was taken.</p>
-    <p>DateTimeOriginal is written in most JPEG/HEIF/TIFF files by most cameras, but sometime it is missing.</p>
-    <p>The modified time of the file is often the time when the photo was taken,
-      so the modified time is used as an alternative when DateTimeOriginal is missing.</p>
-    <p>Also, files other than JPEG/HEIF/TIFF do not have EXIF  in the first place, so the modified time is always used for such files.</p>
-  </mat-expansion-panel>
+      </span>
+      <mat-icon [ngClass]="{'expanded-expand-icon': detailsOpenState()}">
+        expand_more
+      </mat-icon>
+    </div>
+  </button>
+
+  @if (detailsOpenState()) {
+    <div class="message-details">
+      <p>Below are details for reference:</p>
+      <p>DateTimeOriginal in EXIF is the most trustworthy information about the time when the photo was taken.</p>
+      <p>DateTimeOriginal is written in most JPEG/HEIF/TIFF files by most cameras, but sometime it is missing.</p>
+      <p>The modified time of the file is often the time when the photo was taken,
+        so the modified time is used as an alternative when DateTimeOriginal is missing.</p>
+      <p>Also, files other than JPEG/HEIF/TIFF do not have EXIF  in the first place, so the modified time is always used for such files.</p>
+    </div>
+  }
+</div>
+<div class="dialog-footer">
+  <button mat-button
+          mat-dialog-close
+          class="close-button">
+    Close
+  </button>
 </div>
-<button mat-stroked-button
-        mat-dialog-close
-        class="close-button">
-  Close
-</button>
diff --git a/src/app/directory-tree-view/dir-tree-view-sort/shooting-time-info/dir-tree-view-sort-shooting-time-info.component.scss b/src/app/directory-tree-view/dir-tree-view-sort/shooting-time-info/dir-tree-view-sort-shooting-time-info.component.scss
index 643ee919..8248db7e 100644
--- a/src/app/directory-tree-view/dir-tree-view-sort/shooting-time-info/dir-tree-view-sort-shooting-time-info.component.scss
+++ b/src/app/directory-tree-view/dir-tree-view-sort/shooting-time-info/dir-tree-view-sort-shooting-time-info.component.scss
@@ -1,35 +1,37 @@
 :host {
   box-sizing: border-box;
-
-  $dialog-width: 840px;          // Need to be the same value used in DirTreeViewSortService::showShootingTimeInfoDialog function
-  $scroll-bar-area-width: 20px;  // The area for the scrollbar to appear without corrupting the layout
-  width: calc($dialog-width - $scroll-bar-area-width);
-
   height: 100%;
-  padding: 20px 30px;
 
   display: grid;
-  grid: "message"      1fr
-        "close-button" auto
-        /auto;
+  grid: "dialog-header" auto
+        "dialog-body"   1fr
+        "dialog-footer" auto
+        /1fr;
   justify-items: center;
-  .message      { grid-area: message;      }
-  .close-button { grid-area: close-button; }
+
+  .dialog-header { grid-area: dialog-header; }
+  .dialog-body   { grid-area: dialog-body;   }
+  .dialog-footer { grid-area: dialog-footer; }
 }
 
-// Copied from <mat-expansion-panel> using DevTools
-@mixin mat-expansion-panel-like-style {
-  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
-  border-radius: 4px;
+.dialog-header {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 10px 20px;
+  border-bottom: 1px solid #7f7f7f;
+  background-color: #eeeeee;
+  font-size: 20px;
 }
 
-.message {
-  margin: 10px 0 20px 0;
+.dialog-body {
+  width: 100%;
+  box-sizing: border-box;
+
+  overflow: auto;
+  padding: 24px;
 
   .message-main {
     margin-bottom: 30px;
-    padding: 24px; // Align with the padding of the content within <mat-expansion-panel>
-    @include mat-expansion-panel-like-style;
 
     li {
       margin-bottom: 10px;
@@ -41,12 +43,37 @@
   }
 
   .message-details {
+    margin-top: 20px;
+
     p {
-      margin: 5px 0;
+      margin: 10px 0;
     }
   }
 }
 
+.expand-button-content {
+  display: flex;
+  gap: 5px;
+  align-items: center;
+  font-weight: normal; // Restore "font-weight: 500" given by mat-button to the default value
+}
+
+.expanded-expand-icon {
+  transform: rotate(180deg);
+}
+
+.dialog-footer {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 10px 20px;
+  border-top: 1px solid #7f7f7f;
+  background-color: #eeeeee;
+  display: flex;
+  justify-content: end;
+}
+
 .close-button {
   width: 80px;
+  background-color: #7f7f7f;
+  color: whitesmoke;
 }
diff --git a/src/app/directory-tree-view/dir-tree-view-sort/shooting-time-info/dir-tree-view-sort-shooting-time-info.component.ts b/src/app/directory-tree-view/dir-tree-view-sort/shooting-time-info/dir-tree-view-sort-shooting-time-info.component.ts
index 20f45a45..84cef848 100644
--- a/src/app/directory-tree-view/dir-tree-view-sort/shooting-time-info/dir-tree-view-sort-shooting-time-info.component.ts
+++ b/src/app/directory-tree-view/dir-tree-view-sort/shooting-time-info/dir-tree-view-sort-shooting-time-info.component.ts
@@ -6,5 +6,5 @@ import { Component, signal } from '@angular/core';
   styleUrl: './dir-tree-view-sort-shooting-time-info.component.scss'
 })
 export class DirTreeViewSortShootingTimeInfoComponent {
-  public readonly panelOpenState = signal(false);
+  public readonly detailsOpenState = signal(false);
 }

From 656541773f8131b748f31ca9185ee8488454b04c Mon Sep 17 00:00:00 2001
From: Tomoyuki Aota <tomoyukia@gmail.com>
Date: Sat, 19 Oct 2024 17:46:38 +0900
Subject: [PATCH 6/8] Update comment.

---
 .../dir-tree-view-sort-shooting-time-info.component.scss        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/directory-tree-view/dir-tree-view-sort/shooting-time-info/dir-tree-view-sort-shooting-time-info.component.scss b/src/app/directory-tree-view/dir-tree-view-sort/shooting-time-info/dir-tree-view-sort-shooting-time-info.component.scss
index 8248db7e..614ad664 100644
--- a/src/app/directory-tree-view/dir-tree-view-sort/shooting-time-info/dir-tree-view-sort-shooting-time-info.component.scss
+++ b/src/app/directory-tree-view/dir-tree-view-sort/shooting-time-info/dir-tree-view-sort-shooting-time-info.component.scss
@@ -55,7 +55,7 @@
   display: flex;
   gap: 5px;
   align-items: center;
-  font-weight: normal; // Restore "font-weight: 500" given by mat-button to the default value
+  font-weight: normal; // Restore "font-weight: 500" given by mat-button to the browser's default value
 }
 
 .expanded-expand-icon {

From 5ee94ee850f7ea5fe064605ffcad5a32e9a657f0 Mon Sep 17 00:00:00 2001
From: Tomoyuki Aota <tomoyukia@gmail.com>
Date: Sat, 19 Oct 2024 18:33:36 +0900
Subject: [PATCH 7/8] Update Close button color. Update the width of the
 details button. Refactoring for SCSS file.

---
 ...-view-sort-shooting-time-info.component.html |  4 ++--
 ...-view-sort-shooting-time-info.component.scss | 17 ++++++-----------
 2 files changed, 8 insertions(+), 13 deletions(-)

diff --git a/src/app/directory-tree-view/dir-tree-view-sort/shooting-time-info/dir-tree-view-sort-shooting-time-info.component.html b/src/app/directory-tree-view/dir-tree-view-sort/shooting-time-info/dir-tree-view-sort-shooting-time-info.component.html
index 66bdf192..966b6e49 100644
--- a/src/app/directory-tree-view/dir-tree-view-sort/shooting-time-info/dir-tree-view-sort-shooting-time-info.component.html
+++ b/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
diff --git a/src/app/directory-tree-view/dir-tree-view-sort/shooting-time-info/dir-tree-view-sort-shooting-time-info.component.scss b/src/app/directory-tree-view/dir-tree-view-sort/shooting-time-info/dir-tree-view-sort-shooting-time-info.component.scss
index 614ad664..ac815b04 100644
--- a/src/app/directory-tree-view/dir-tree-view-sort/shooting-time-info/dir-tree-view-sort-shooting-time-info.component.scss
+++ b/src/app/directory-tree-view/dir-tree-view-sort/shooting-time-info/dir-tree-view-sort-shooting-time-info.component.scss
@@ -1,5 +1,4 @@
 :host {
-  box-sizing: border-box;
   height: 100%;
 
   display: grid;
@@ -7,7 +6,6 @@
         "dialog-body"   1fr
         "dialog-footer" auto
         /1fr;
-  justify-items: center;
 
   .dialog-header { grid-area: dialog-header; }
   .dialog-body   { grid-area: dialog-body;   }
@@ -15,8 +13,6 @@
 }
 
 .dialog-header {
-  width: 100%;
-  box-sizing: border-box;
   padding: 10px 20px;
   border-bottom: 1px solid #7f7f7f;
   background-color: #eeeeee;
@@ -24,9 +20,6 @@
 }
 
 .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;
 }

From ac84b2c351af3a6a42805059007edf76f0825cb3 Mon Sep 17 00:00:00 2001
From: Tomoyuki Aota <tomoyukia@gmail.com>
Date: Sat, 19 Oct 2024 18:42:23 +0900
Subject: [PATCH 8/8] Use fontIcon to follow Angular Material's example code.

---
 .../dir-tree-view-sort-shooting-time-info.component.html      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/directory-tree-view/dir-tree-view-sort/shooting-time-info/dir-tree-view-sort-shooting-time-info.component.html b/src/app/directory-tree-view/dir-tree-view-sort/shooting-time-info/dir-tree-view-sort-shooting-time-info.component.html
index 966b6e49..8108d756 100644
--- a/src/app/directory-tree-view/dir-tree-view-sort/shooting-time-info/dir-tree-view-sort-shooting-time-info.component.html
+++ b/src/app/directory-tree-view/dir-tree-view-sort/shooting-time-info/dir-tree-view-sort-shooting-time-info.component.html
@@ -20,8 +20,8 @@
           Read details for reference
         }
       </span>
-      <mat-icon [ngClass]="{'expanded-expand-icon': detailsOpenState()}">
-        expand_more
+      <mat-icon fontIcon="expand_more"
+                [ngClass]="{'expanded-expand-icon': detailsOpenState()}">
       </mat-icon>
     </div>
   </button>