From 233195ce1d3768d77e5608bccd2d98b48da1bd15 Mon Sep 17 00:00:00 2001
From: yvmunayev <yvmunayev@gmail.com>
Date: Fri, 27 Nov 2020 18:19:19 -0500
Subject: [PATCH 1/3] feat: highlight current date (today) in Calendar

---
 src/components/Calendar/day.js                |  3 ++
 src/components/Calendar/readme.md             | 25 ++++++++++++
 src/components/Calendar/styled/dayButton.js   | 38 ++++++++++++++++++-
 .../Calendar/styled/rangeHighlight.js         |  6 +++
 4 files changed, 71 insertions(+), 1 deletion(-)

diff --git a/src/components/Calendar/day.js b/src/components/Calendar/day.js
index 9bae9b11a..8e2d0d3ff 100644
--- a/src/components/Calendar/day.js
+++ b/src/components/Calendar/day.js
@@ -35,6 +35,7 @@ function DayComponent(props) {
     const buttonRef = useRef();
     const isRangeStartDate = useRangeStartDate(date, currentRange);
     const isRangeEndDate = useRangeEndDate(date, currentRange);
+    const isToday = isSameDay(date, new Date());
 
     useEffect(() => {
         if (useAutoFocus && buttonRef.current && tabIndex !== -1) {
@@ -58,6 +59,7 @@ function DayComponent(props) {
                 isLastInRange={isRangeEndDate}
                 isFirstDayOfWeek={isFirstDayOfWeek}
                 isLastDayOfWeek={isLastDayOfWeek}
+                isToday={isToday}
             >
                 <StyledDayButton
                     ref={buttonRef}
@@ -71,6 +73,7 @@ function DayComponent(props) {
                     onFocus={privateOnFocus}
                     onBlur={privateOnBlur}
                     isWithinRange={isWithinRange}
+                    isToday={isToday}
                 >
                     {day}
                 </StyledDayButton>
diff --git a/src/components/Calendar/readme.md b/src/components/Calendar/readme.md
index 8db67810b..d5b0daa21 100644
--- a/src/components/Calendar/readme.md
+++ b/src/components/Calendar/readme.md
@@ -154,3 +154,28 @@ const calendarContainerStyles = {
         </div>
     </div>
 ```
+
+##### Today
+
+```js
+import React from 'react';
+import { Card, Calendar } from 'react-rainbow-components';
+
+const initialState = { date: new Date() };
+const calendarContainerStyles = {
+    width: '28rem',
+    height: '27rem',
+};
+
+    <div>
+        <div className="rainbow-align-content_center rainbow-p-vertical_xx-large rainbow-p-horizontal_medium">
+            <Card style={calendarContainerStyles} className="rainbow-p-around_large">
+                <Calendar
+                    id="calendar-11"
+                    value={state.date}
+                    onChange={value => setState({ date: value })}
+                />
+            </Card>
+        </div>
+    </div>
+```
diff --git a/src/components/Calendar/styled/dayButton.js b/src/components/Calendar/styled/dayButton.js
index 9f2b6727d..6623909a8 100644
--- a/src/components/Calendar/styled/dayButton.js
+++ b/src/components/Calendar/styled/dayButton.js
@@ -18,7 +18,8 @@ const StyledDayButton = attachThemeAttrs(styled.button)`
     text-transform: none;
     appearance: button;
     border: 1px solid transparent;
-
+    position: relative;
+    
     ${props =>
         !props.isHovered &&
         `
@@ -40,6 +41,41 @@ const StyledDayButton = attachThemeAttrs(styled.button)`
         line-height: 36px;
     }
 
+    ${props =>
+        props.isToday &&
+        `
+        &::after {
+            content: '';
+            height: 3px;
+            width: 3px;
+            position: absolute;
+            top: 28px;
+            left: 17px;
+            border-radius: 50%;
+            background: ${
+                props.isSelected || props.isHovered
+                    ? props.palette.getContrastText(props.palette.brand.main)
+                    : props.palette.brand.main
+            };
+        }
+
+        
+    `}
+
+    ${props =>
+        props.isSelected &&
+        props.isToday &&
+        `
+            &:hover,
+            &:focus,
+            &:active {
+                &::after {
+                    top: 27px;
+                    left: 16px;
+                }
+            }
+        `};
+
     ${props =>
         props.isSelected &&
         `
diff --git a/src/components/Calendar/styled/rangeHighlight.js b/src/components/Calendar/styled/rangeHighlight.js
index 7d4529de6..3099e2f80 100644
--- a/src/components/Calendar/styled/rangeHighlight.js
+++ b/src/components/Calendar/styled/rangeHighlight.js
@@ -20,6 +20,12 @@ const StyledRangeHighlight = attachThemeAttrs(styled.div).attrs(props => {
         margin: 3px auto;
     }
 
+    ${props =>
+        props.isToday &&
+        `
+        color: ${props.palette.brand.main};
+    `}
+
     ${props =>
         props.isVisible &&
         `

From 9d3b56de304357a380721fff86010eb208071182 Mon Sep 17 00:00:00 2001
From: yvmunayev <yvmunayev@gmail.com>
Date: Tue, 1 Dec 2020 13:03:35 -0500
Subject: [PATCH 2/3] fix remove example

---
 src/components/Calendar/readme.md | 25 -------------------------
 1 file changed, 25 deletions(-)

diff --git a/src/components/Calendar/readme.md b/src/components/Calendar/readme.md
index d5b0daa21..8db67810b 100644
--- a/src/components/Calendar/readme.md
+++ b/src/components/Calendar/readme.md
@@ -154,28 +154,3 @@ const calendarContainerStyles = {
         </div>
     </div>
 ```
-
-##### Today
-
-```js
-import React from 'react';
-import { Card, Calendar } from 'react-rainbow-components';
-
-const initialState = { date: new Date() };
-const calendarContainerStyles = {
-    width: '28rem',
-    height: '27rem',
-};
-
-    <div>
-        <div className="rainbow-align-content_center rainbow-p-vertical_xx-large rainbow-p-horizontal_medium">
-            <Card style={calendarContainerStyles} className="rainbow-p-around_large">
-                <Calendar
-                    id="calendar-11"
-                    value={state.date}
-                    onChange={value => setState({ date: value })}
-                />
-            </Card>
-        </div>
-    </div>
-```

From bd1504ca33b53a27a3e655a1f1795ba2b367cdaa Mon Sep 17 00:00:00 2001
From: TahimiLeonBravo <tahimi@nexxtway.com>
Date: Tue, 1 Dec 2020 13:28:04 -0600
Subject: [PATCH 3/3] fix: some styles

---
 src/components/Calendar/styled/dayButton.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/Calendar/styled/dayButton.js b/src/components/Calendar/styled/dayButton.js
index 6623909a8..6e6501d42 100644
--- a/src/components/Calendar/styled/dayButton.js
+++ b/src/components/Calendar/styled/dayButton.js
@@ -44,13 +44,15 @@ const StyledDayButton = attachThemeAttrs(styled.button)`
     ${props =>
         props.isToday &&
         `
+        font-weight: 900;
+
         &::after {
             content: '';
-            height: 3px;
-            width: 3px;
+            height: 4px;
+            width: 4px;
             position: absolute;
             top: 28px;
-            left: 17px;
+            left: 16px;
             border-radius: 50%;
             background: ${
                 props.isSelected || props.isHovered