From 91a2da907d4b5df971cf74b973298be3ce2a0e5b Mon Sep 17 00:00:00 2001
From: mohammadamer <m.amer@live.com>
Date: Sun, 3 Oct 2021 00:48:50 +0300
Subject: [PATCH] Update

Update year view to look nicer and highlight today in year view like the other calendar views.
---
 .../calendar/components/Year.module.scss      | 80 ++++++++++---------
 1 file changed, 41 insertions(+), 39 deletions(-)

diff --git a/samples/react-calendar/src/webparts/calendar/components/Year.module.scss b/samples/react-calendar/src/webparts/calendar/components/Year.module.scss
index 0b59269f9..3f4ae415c 100644
--- a/samples/react-calendar/src/webparts/calendar/components/Year.module.scss
+++ b/samples/react-calendar/src/webparts/calendar/components/Year.module.scss
@@ -4,50 +4,52 @@
   display: flex;
   flex-wrap: wrap;
   overflow-y: auto;
-}
 
-.month {
-  margin: 5px 10px 15px 10px;
-}
+  .month {
+    margin: 5px 10px 15px 10px;
 
-.monthName {
-  color: $ms-color-themeDark;
-  font-weight: bold;
-  margin-bottom: 10px;
-}
+    .monthName {
+      color: $ms-color-themePrimary;
+      font-weight: bold;
+      margin-bottom: 10px;
+    }
 
-.day {
-  display: inline-block;
-  width: 30px;
-  height: 30px;
-  text-align: center;
-  line-height: 30px;
-  border: dotted 1px;
-  border-radius: 50%;
-  transform: scale(0.9, 0.9);
-}
+    .day {
+      display: inline-block;
+      width: 30px;
+      height: 30px;
+      text-align: center;
+      line-height: 30px;
+      border: dotted 1px;
+      border-radius: 50%;
+      transform: scale(0.9, 0.9);
+    }
 
-.date {
-  width: 30px;
-  height: 30px;
-  background: white;
-  border-radius: 50px;
-  border: none;
-  outline: none;
-}
+    .date {
+      width: 30px;
+      height: 30px;
+      border-radius: 50px;
+      border: none;
+      outline: none;
 
-.date.inMonth:hover {
-  cursor: pointer;
-  background: $ms-color-themeDark;
-  color: white;
-  font-weight: bold;
-}
+      &.inMonth {
+        &:hover {
+          cursor: pointer;
+          background: $ms-color-themePrimary;
+          color: white;
+          font-weight: bold;
+        }
+      }
 
-.today {
-  background: $ms-color-themeDark;
-}
+      &.today {
+        background: $ms-color-themePrimary;
+        color: white;
+      }
 
-.date.prevMonth,
-.date.nextMonth {
-  color: grey;
+      .date.prevMonth,
+      .date.nextMonth {
+        color: grey;
+      }
+    }
+  }
 }