Add Close Button in Calendar

Author: fikzzzy

src/components/DateRangePicker/index.jsx

@@ -574,18 +574,29 @@ function DateRangePicker(props) {
               preview={preview}
               onPreviewChange={onPreviewChange}
             />
-            <button
-              type="button"
-              styleName="reset-button"
-              onClick={() => {
-                onDateRangePickerChange({
-                  startDate: null,
-                  endDate: null,
-                });
-              }}
-            >
-              Reset
-            </button>
+            <div styleName="calendar-footer">
+              <button
+                type="button"
+                styleName="calendar-button"
+                onClick={() => {
+                  onDateRangePickerChange({
+                    startDate: null,
+                    endDate: null,
+                  });
+                }}
+              >
+                Reset
+              </button>
+              <button
+                type="button"
+                styleName="calendar-button"
+                onClick={() => {
+                  setIsComponentVisible(false);
+                }}
+              >
+                Close
+              </button>
+            </div>
           </div>
         )}
       </div>

src/components/DateRangePicker/style.scss

@@ -391,6 +391,7 @@ $darkGreen: #0AB88A;;
   z-index: 10;
 
   @include phone {
+    width: 100vw;
     position: fixed;
     top: 0;
     left: 0;
@@ -402,7 +403,15 @@ $darkGreen: #0AB88A;;
     border-radius: 0;
   }
 
-  .reset-button {
+  .calendar-footer {
+    width: 100%;
+
+    @include phone {
+      padding: 0 20px;
+    }
+  }
+
+  .calendar-button {
     @include roboto-bold;
 
     width: 71px;
@@ -421,7 +430,7 @@ $darkGreen: #0AB88A;;
       height: 26px;
       line-height: 27px;
       font-size: 12px;
-      margin: 20px 12px 0;
+      margin: 0 12px 0;
     }
   }
 }