From eb5007b8e5d994b3b1bbb7b198a205b693323463 Mon Sep 17 00:00:00 2001
From: ksw2000 <13825170+ksw2000@users.noreply.github.com>
Date: Sun, 20 Oct 2024 12:12:46 +0800
Subject: [PATCH] update styles

---
 src/app/app.component.css               | 35 ++++++++++++++++++++-----
 src/app/app.component.html              |  8 +++---
 src/app/schedule/schedule-dialog.css    |  9 +++++++
 src/app/schedule/schedule.component.css |  5 +++-
 4 files changed, 46 insertions(+), 11 deletions(-)

diff --git a/src/app/app.component.css b/src/app/app.component.css
index 5a0a878..8596e65 100644
--- a/src/app/app.component.css
+++ b/src/app/app.component.css
@@ -6,14 +6,16 @@ mat-toolbar {
     left: 0px;
 }
 
-mat-drawer{
+mat-drawer {
     position: fixed;
     z-index: 11;
     top: 0px;
     left: 0px;
+    width: 250px;
+    padding: 20px 10px;
 }
 
-mat-drawer mat-nav-list{
+mat-drawer mat-nav-list {
     padding-top: var(--mat-toolbar-standard-height);
 }
 
@@ -29,7 +31,7 @@ mat-drawer-container {
         padding-top: var(--mat-toolbar-mobile-height);
     }
 
-    mat-drawer mat-nav-list{
+    mat-drawer mat-nav-list {
         padding-top: var(--mat-toolbar-mobile-height);
     }
 }
@@ -38,9 +40,28 @@ mat-drawer-container {
     flex: 1 1 auto;
 }
 
-mat-drawer {
-    width: 250px;
-    padding: 20px 10px;
+a.logo-button {
+    display: block;
+    height: 25px;
+}
+
+a.logo-button img {
+    height: 100%;
+}
+
+.highlight-tab-link {
+    border-radius: 5px;
+    background-color: var(--blue-500);
+    transition: background-color 750ms var(--default-transition-timing-function);
+}
+
+.highlight-tab-link:hover {
+    background-color: #7caeff;
+}
+
+::ng-deep .highlight-tab-link .mdc-tab__text-label {
+    color: #fff!important;
+    font-weight: bold;
 }
 
 main {
@@ -57,7 +78,7 @@ footer {
     background-color: #e0e0e0;
 }
 
-#footer-container {
+.footer-container {
     padding: 20px 10px 5px;
     margin: 0px auto;
     width: 100%;
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 62497af..81bc375 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -4,14 +4,16 @@
     <mat-icon *ngIf="!drawer.opened">menu</mat-icon>
     <mat-icon *ngIf="drawer.opened">close</mat-icon>
   </button>
-  <img style="height: 25px;" src="./assets/df24-nav-logo.png" alt="GDG DevFest 2024">
+  <a class="logo-button" routerLink="/">
+    <img src="./assets/df24-nav-logo.png" alt="GDG DevFest 2024">
+  </a>
   <span class="toolbar-spacer"></span>
   <nav mat-tab-nav-bar [tabPanel]="tabPanel" class="hide-when-screen-smaller-than-900px">
     <a *ngFor="let link of links" mat-tab-link [routerLink]="link.link" routerLinkActive="mat-tab-link-active"
       #rla="routerLinkActive" [active]="rla.isActive" [routerLinkActiveOptions]="{exact: link.exact}">
       {{link.name}}
     </a>
-    <a mat-tab-link>購買票卷</a>
+    <a mat-tab-link class="highlight-tab-link">購買票卷</a>
   </nav>
 </mat-toolbar>
 
@@ -29,7 +31,7 @@
       <router-outlet />
     </main>
     <footer>
-      <div id="footer-container" class="max-width">
+      <div class="footer-container max-width">
         <img src="./assets/df24-footer-logo.png" style="height: 30px;">
         <p class="footer-box-title">跟隨我們</p>
         <div class="footer-button-group">
diff --git a/src/app/schedule/schedule-dialog.css b/src/app/schedule/schedule-dialog.css
index 8ac89a0..f5d7e14 100644
--- a/src/app/schedule/schedule-dialog.css
+++ b/src/app/schedule/schedule-dialog.css
@@ -9,6 +9,10 @@ mat-dialog-content p {
     color: #717171;
 }
 
+ul.speaker-list a.speaker-avatar-link {
+    height: 60px;
+}
+
 ul.speaker-list img {
     width: 60px;
     height: 60px;
@@ -16,4 +20,9 @@ ul.speaker-list img {
 
 ul.speaker-list p {
     margin: 10px;
+}
+
+.speaker-name{
+    color: var(--black-02);
+    font-weight: bold;
 }
\ No newline at end of file
diff --git a/src/app/schedule/schedule.component.css b/src/app/schedule/schedule.component.css
index 05cffb8..e5aac89 100644
--- a/src/app/schedule/schedule.component.css
+++ b/src/app/schedule/schedule.component.css
@@ -25,7 +25,7 @@
 }
 
 .schedule-time {
-    color: var(--halftone-red);
+    color: var(--blue-500);
     font-size: 1.3rem;
     margin: 20px 0px 5px;
     letter-spacing: 3px;
@@ -54,6 +54,8 @@ ul.speaker-list li {
 
 ul.speaker-list a.speaker-avatar-link {
     margin-right: 10px;
+    display: block;
+    height: 40px;
 }
 
 ul.speaker-list img {
@@ -61,6 +63,7 @@ ul.speaker-list img {
     height: 40px;
     border-radius: 50%;
     transition: box-shadow 750ms var(--default-transition-timing-function);
+    background-color: var(--pastel-green);
 }
 
 ul.speaker-list img:hover {