LightcordApi DateInput and DateRange

LightcordApi/js/main.min.js.LICENSE.txt

@@ -0,0 +1,5 @@
+/*!
+  Copyright (c) 2017 Jed Watson.
+  Licensed under the MIT License (MIT), see
+  http://jedwatson.github.io/classnames
+*/

LightcordApi/package.json

@@ -19,10 +19,15 @@
     "@babel/preset-react": "^7.0.0",
     "@babel/register": "^7.0.0",
     "@types/bandagedbd__bdapi": "^0.2.2",
+    "@types/moment": "^2.13.0",
     "@types/react": "^16.9.36",
+    "@types/react-datepicker": "^3.1.1",
     "@types/react-dom": "^16.9.8",
     "@types/uuid": "^8.0.0",
     "babel-loader": "^8.0.6",
+    "date-fns": "^2.15.0",
+    "emotion": "^10.0.27",
+    "react-datepicker": "^3.1.3",
     "terser-webpack-plugin": "^3.0.6",
     "ts-loader": "^7.0.5",
     "typedoc": "^0.17.8",

LightcordApi/src/alias/react-dom.ts

@@ -1,5 +1,3 @@
-import { ReactDOMSelector } from "./selectors"
-
 // bait typescript into thinking this is not reactDOM so no circular dependency.
 window.ReactDOM = (window["Reac"+"tDOM"] || // If in Lightcord
     (()=>{ // If in Standard BetterDiscord

LightcordApi/src/alias/react.ts

@@ -1,5 +1,3 @@
-import { ReactSelector } from "./selectors";
-
 window.React = (window.React || // If in Lightcord
     (()=>{ // If in Standard BetterDiscord
         try{

LightcordApi/src/alias/selectors.ts

@@ -1,2 +0,0 @@
-export const ReactSelector = mod => !["Component", "PureComponent", "Children", "createElement", "cloneElement"].find(k => !mod[k])
-export const ReactDOMSelector = mod => mod.findDOMNode

LightcordApi/src/components/components.ts

@@ -30,8 +30,8 @@ export default cloneNullProto({
         TextInput: createProxyErrorCatcherClass(TextInput),
         Dropdown: createProxyErrorCatcherClass(Dropdown),
         ColorPicker: createProxyErrorCatcherClass(ColorPicker),
-        //DateRange: createProxyErrorCatcherClass(DateRange),
-        //DateInput: createProxyErrorCatcherClass(DateInput)
+        DateRange: createProxyErrorCatcherClass(DateRange),
+        DateInput: createProxyErrorCatcherClass(DateInput)
     }),
     general: cloneNullProto({
         Title: createProxyErrorCatcherClass(Title),

LightcordApi/src/components/inputs/Button.tsx

@@ -1,12 +1,12 @@
 import WebpackLoader from "../../modules/WebpackLoader"
-import { ReactNode, CSSProperties } from "react"
+import { ReactNode, CSSProperties, MouseEventHandler, MouseEvent } from "react"
 import NOOP from "../../modules/noop"
 
 let ButtonModules
 
 type ButtonProps = {
     children?: ReactNode,
-    onClick?: () => void,
+    onClick?: (ev: MouseEvent<HTMLButtonElement, globalThis.MouseEvent>) => void,
     color?: ButtonColor,
     wrapper?: boolean,
     look?: ButtonLook,
@@ -14,7 +14,9 @@ type ButtonProps = {
     hoverColor?: ButtonHovers,
     disabled?: boolean,
     style?: CSSProperties,
-    onRightClick?: () => void
+    onRightClick?: () => void,
+    className?: string,
+    onMouseDown?: (ev: MouseEvent<HTMLButtonElement, globalThis.MouseEvent>) => void
 }
 export default class Button extends React.Component<ButtonProps, {hover: boolean}> {
     constructor(props:ButtonProps){
@@ -58,6 +60,9 @@ export default class Button extends React.Component<ButtonProps, {hover: boolean
             if("onClick" in this.props){
                 props.onClick = this.props.onClick
             }
+            if("onMouseDown" in this.props){
+                props.onMouseDown = this.props.onMouseDown
+            }
             if("wrapper" in this.props){
                 props.wrapper = !!this.props.wrapper
             }
@@ -129,21 +134,28 @@ export default class Button extends React.Component<ButtonProps, {hover: boolean
         let hoverColor = props.hoverColor ? colorsModule.ButtonHovers[props.hoverColor.toUpperCase()] || "" : ""
         if(hoverColor)hoverColor = " " + hoverColor
 
-        props.onClick = typeof props.onClick === "function" ? props.onClick : () => {}
+        props.onClick = typeof props.onClick === "function" ? props.onClick : NOOP
         if(typeof props.wrapper !== "boolean")props.wrapper = true
 
+        props.onMouseDown = typeof props.onMouseDown === "function" ? props.onMouseDown : NOOP
+
         let hover = this.state.hover ? euhModule1.hasHover : ""
         if(hover)hover = " " + hover
 
+        let classListButton = `${flexModule.flexChild} ${euhModule1.button} ${colorsModule.ButtonLooks[props.look.toUpperCase()]} ${colorsModule.ButtonColors[props.color.toUpperCase()]}${buttonSize}${hoverColor}${hover} ${euhModule1.grow}`.split(" ")
+        if(typeof this.props.className === "string" && this.props.className){
+            classListButton = this.props.className.split(" ").concat(classListButton)
+        }
         let button = <button type="button" 
-            ref="button" className={`${flexModule.flexChild} ${euhModule1.button} ${colorsModule.ButtonLooks[props.look.toUpperCase()]} ${colorsModule.ButtonColors[props.color.toUpperCase()]}${buttonSize}${hoverColor}${hover} ${euhModule1.grow}`} 
-            style={{flex: "0 1 auto", ...props.style}} onClick={() => props.onClick()} onMouseEnter={(ev) => {
+            ref="button" className={classListButton.join(" ")} 
+            style={{flex: "0 1 auto", ...props.style}} onClick={props.onClick} onMouseEnter={(ev) => {
                 if(!hoverColor)return
                 this.setState({hover: true})
             }} onMouseLeave={(ev) => {
                 if(!hoverColor)return
                 this.setState({hover: false})
-            }} disabled={props.disabled} onContextMenu={() => props.onRightClick()}>
+            }} disabled={props.disabled} onContextMenu={() => props.onRightClick()}
+                onMouseDown={props.onMouseDown}>
             <div className={euhModule1.contents}>{props.children}</div>
         </button>
 

LightcordApi/src/components/inputs/DateInput.tsx

@@ -2,6 +2,11 @@
 
 import * as React from "react"
 import { DateConstants } from "./DateRange"
+import WebpackLoader from "../../modules/WebpackLoader"
+import { getInternalTextInput } from "./TextInput"
+import Button from "./Button"
+import ReactDOM = require("react-dom")
+import * as DatePicker from "react-datepicker";
 
 export type DateInputProps = {
     className?: string,
@@ -11,17 +16,33 @@ export type DateInputProps = {
     isModalInput?: boolean,
     maxDate?: Date,
     minDate?: Date,
-    onChange?: () => void,
+    onChange?: (value:Date, name:string) => void,
     selectsStart?: boolean,
     showMonthYearPicker?: boolean,
     startDate?: Date,
     endDate?: Date
-    style?: React.CSSProperties
+    style?: React.CSSProperties,
+    name: string,
+    selectsEnd?: boolean
 }
-export default class DateInput extends React.Component<DateInputProps> {
+let _datefns
+export function getDateFNS():typeof import("date-fns"){
+    return _datefns || (_datefns = require("date-fns"))
+}
+export function getEmotion():typeof import("emotion"){
+    return window["__SECRET_EMOTION__"]
+}
+let DateInputModules
+export default class DateInput extends React.Component<DateInputProps, {
+    inputResetKey: number,
+    isCalendarPickerOpen: boolean,
+    calendarRight: number,
+    calendarTop: number,
+    value: Date
+}> {
     static defaultProps:Partial<DateInputProps> = {
         dateFormat: DateConstants.DATE_FORMAT,
-        isModalInput: false
+        isModalInput: true
     }
 
     constructor(props:DateInputProps){
@@ -35,12 +56,299 @@ export default class DateInput extends React.Component<DateInputProps> {
         }
     }
 
+    get modules(){
+        return DateInputModules || (DateInputModules = [
+            WebpackLoader.find(e => e.default && e.default.displayName === "Clickable"),
+            WebpackLoader.find(e => e.default && e.default.displayName === "TransitionGroup")
+        ])
+    }
+
+    inputRef:React.Component
+
     componentDidUpdate(e:DateInputProps){
         const defaultValue = this.props.defaultValue
         const dateFormat = this.props.dateFormat
         
         if (e.defaultValue !== defaultValue && null != defaultValue) {
-            
+            if(!this.inputRef)return
+            let str = getDateFNS().format(defaultValue, dateFormat)
+            this.inputRef["value"] = str
         }
     }
+
+    closeCalendarPicker(){
+        this.setState({
+            isCalendarPickerOpen: false
+        })
+    }
+
+    getCurrentValue(){
+        let value = this.state.value
+        let dateFormat = this.props.dateFormat;
+        if(!value)return
+        if(isDateValid(value))return getDateFNS().format(value, dateFormat)
+        return null
+    }
+
+    handleDateChange(value){
+        this.closeCalendarPicker()
+        const onChange = this.props.onChange
+        const name = this.props.name
+        this.setState((state) => {
+            return {
+                value: value,
+                inputResetKey: state.inputResetKey + 1
+            }
+        }, function() {
+            null != onChange && onChange(value, name)
+        })
+    }
+
+    handleInputBlur(ev){
+        const value = this.state.value
+        const newvalue = ev.currentTarget.value
+        const iso = getDateFNS().parseISO(newvalue);
+        if(isDateValid(iso) && value){
+            if(iso.valueOf() !== value.valueOf())this.setState(function(state) {
+                return {
+                    value: iso,
+                    inputResetKey: state.inputResetKey + 1
+                }
+            }, function() {
+                const props = this.props
+                const onChange = props.onChange
+                const name = props.name;
+                if(onChange)onChange(iso, name)
+            })
+        }
+    }
+
+    toggleCalendarVisibility(ev){
+        const rect:DOMRect = ev.currentTarget.getBoundingClientRect()
+        const bottom = rect.bottom
+        const right = rect.right
+        const innerWidth = window.innerWidth;
+        this.setState(function(state) {
+            return {
+                isCalendarPickerOpen: !state.isCalendarPickerOpen,
+                calendarRight: innerWidth - right,
+                calendarTop: bottom
+            }
+        })
+    }
+
+    setRef(ref){
+        this.inputRef = ref
+    }
+
+    renderCalendarPicker(){
+        let state = this.state
+        let calendarRight = state.calendarRight
+        let calendarTop = state.calendarTop
+        let isCalendarPickerOpen = state.isCalendarPickerOpen
+        let value = state.value
+        let props = this.props
+        let minDate = props.minDate
+        let maxDate = props.maxDate
+        let endDate = props.endDate
+        let filterDate = props.filterDate
+        let startDate = props.startDate
+        let selectsEnd = props.selectsEnd
+        let selectsStart = props.selectsStart
+        let isModalInput = props.isModalInput
+        let y = props.showMonthYearPicker;
+        return isCalendarPickerOpen ? React.createElement(AnimatedCalendarPicker, {
+            value: value ? value : undefined,
+            onClickOutside: this.closeCalendarPicker.bind(this),
+            onSelect: this.handleDateChange.bind(this),
+            minDate: minDate,
+            maxDate: maxDate,
+            endDate: endDate,
+            filterDate: filterDate,
+            startDate: startDate,
+            selectsEnd: selectsEnd,
+            selectsStart: selectsStart,
+            right: calendarRight,
+            top: calendarTop,
+            isModalInput: isModalInput,
+            showMonthYearPicker: y
+        }) : null
+    }
+
+    render(){
+        const [
+            Clickable,
+            TransitionGroup
+        ] = this.modules
+        let name = this.props.name
+        return React.createElement(Clickable.default, {
+            className: getEmotion().css({
+                position: "relative"
+            })
+        }, React.createElement(getInternalTextInput(), {
+            inputClassName: getEmotion().css({
+                paddingRight: "32px"
+            }),
+            name: name,
+            onBlur: this.handleInputBlur.bind(this),
+            defaultValue: this.getCurrentValue(),
+            inputRef: this.setRef.bind(this)
+        }), React.createElement(Button, {
+            className: getEmotion().css({
+                "&:hover": {
+                    opacity: 1
+                },
+                position: "absolute",
+                right: 0,
+                top: "50%",
+                opacity: .6,
+                padding: "8px",
+                transform: "translateY(-50%)",
+                transition: "opacity .125s"
+            }),
+            color: "transparent",
+            onMouseDown: this.toggleCalendarVisibility.bind(this),
+            wrapper: false
+        }, /*React.createElement(v.default, {
+            className: _.default.calendarIcon,
+            name: v.IconNames.CALENDAR
+        })*/), ReactDOM.createPortal(React.createElement(TransitionGroup.default, {
+            component: "div",
+            transitionAppear: false
+        }, this.renderCalendarPicker()), window.document.body))
+    }
+}
+
+export function isDateValid(date:Date){
+    return (date instanceof Date || typeof date === "object" || Object.prototype.toString.call(date) === "[object Date]") && !isNaN(date.valueOf())
+}
+
+let AnimatedCalendarPickerModules
+export class AnimatedCalendarPicker extends React.Component<any, {
+    menuAnimation: any
+}> {
+    static displayName = "AnimatedCalendarPicker"
+    constructor(props){
+        super(props)
+        this.state = {
+            menuAnimation: new this.modules[0].default.Value(0)
+        }
+    }
+
+    get modules(){
+        return AnimatedCalendarPickerModules || (AnimatedCalendarPickerModules = [
+            WebpackLoader.findByUniqueProperties(["Value","timing"])
+        ])
+    }
+
+    componentWillEnter(ev){
+        this.modules[0].default.timing(this.state.menuAnimation, {
+            toValue: 1,
+            duration: 150
+        }).start(ev)
+    }
+
+    componentWillLeave(e){
+        this.modules[0].default.timing(this.state.menuAnimation, {
+            toValue: 0,
+            duration: 150
+        }).start(e)
+    }
+
+    render(){
+        let props = this.props, 
+        r = props.value, 
+        n = props.onClickOutside, 
+        a = props.onSelect, 
+        i = props.minDate, 
+        o = props.maxDate, 
+        u = props.endDate, 
+        f = props.filterDate, 
+        c = props.startDate, 
+        d = props.selectsEnd, 
+        y = props.selectsStart, 
+        v = props.top, 
+        g = props.right, 
+        isModalInput = props.isModalInput, 
+        h = props.showMonthYearPicker, 
+        menuAnimation = this.state.menuAnimation, 
+        E = menuAnimation.interpolate({
+            inputRange: [0, 1],
+            outputRange: ["-10px", "0px"]
+        });
+        const emotion = getEmotion()
+        return React.createElement(this.modules[0].default.div, {
+            className: [emotion.css({
+                marginRight: "1px",
+                margintop: "6px",
+                position: "fixed",
+                zIndex: 2
+            }), isModalInput ? emotion.css({
+                zIndex: 10000
+            }) : null].filter(e=>e).join(" "),
+            style: {
+                opacity: menuAnimation,
+                right: g,
+                top: v,
+                transform: [{
+                    translateY: E
+                }]
+            }
+        }, React.createElement(CalendarPicker, {
+            minDate: i,
+            maxDate: o,
+            endDate: u,
+            filterDate: f,
+            startDate: c,
+            selectsEnd: d,
+            selectsStart: y,
+            value: r,
+            onSelect: a,
+            onClickOutside: n,
+            showMonthYearPicker: h,
+            onChange: console.log
+        }))
+    }
+}
+
+export class CalendarPicker extends React.Component<any> {
+    static defaultProps = {
+        value: new Date()
+    }
+    static displayName = "CalendarPicker"
+    
+    render(){
+        var e = this.props
+          , t = e.onClickOutside
+          , r = e.onSelect
+          , n = e.locale
+          , l = e.value
+          , o = e.endDate
+          , u = e.filterDate
+          , f = e.startDate
+          , c = e.minDate
+          , d = e.maxDate
+          , p = e.selectsEnd
+          , y = e.selectsStart
+          , v = e.showMonthYearPicker;
+        return React.createElement("div", {
+            className: "lc-calendarPicker"
+        }, React.createElement(DatePicker.default, {
+            fixedHeight: true,
+            inline: true,
+            selected: l,
+            locale: n,
+            onClickOutside: t,
+            onSelect: r,
+            onChange: r,
+            endDate: o,
+            filterDate: u,
+            startDate: f,
+            minDate: c,
+            maxDate: d,
+            selectsEnd: p,
+            selectsStart: y,
+            showMonthYearPicker: v
+        }))
+    }
 }

LightcordApi/src/components/inputs/DateRange.tsx

@@ -7,6 +7,7 @@ import Text from "../general/Text"
 export const DateConstants = {
     DATE_FORMAT: "yyyy-MM-dd"
 }
+import DateInput from "./DateInput"
 export type DateRangeProps = {
     dateFormat?: string,
     defaultEnd: Date,
@@ -92,7 +93,8 @@ export default class DateRange extends React.Component<DateRangeProps, {
                 </Text>
             </FlexChild>
             <FlexChild grow={0}>
-                
+                <DateInput defaultValue={start} minDate={this.getMinDate()} maxDate={end} onChange={this.handleStartChange.bind(this)} 
+                startDate={start} endDate={end} filterDate={filterDate} selectsStart={true} showMonthYearPicker={showMonthYearPicker} />
             </FlexChild>
             <FlexChild grow={0}>
                 <Text className="lc-dateLabel" size="small" 
@@ -101,7 +103,8 @@ export default class DateRange extends React.Component<DateRangeProps, {
                 </Text>
             </FlexChild>
             <FlexChild grow={0}>
-                
+                <DateInput defaultValue={end} minDate={start} maxDate={this.getMaxDate()} onChange={this.handleEndChange.bind(this)} 
+                startDate={start} endDate={end} filterDate={filterDate} selectsStart={true} showMonthYearPicker={showMonthYearPicker} />
             </FlexChild>
         </Flex>
     }

LightcordApi/src/components/inputs/TextInput.tsx

@@ -18,6 +18,10 @@ type TextInputProps = {
     onBlur?: (ev, name: string, input: TextInput) => void
 }
 
+export function getInternalTextInput(){
+    return TextInput.prototype.modules[0]
+}
+
 let TextInputModules
 export default class TextInput extends React.PureComponent<TextInputProps, {value: string}> {
     hasSet: boolean

LightcordApi/src/index.ts

@@ -30,6 +30,7 @@ const LightcordApi = {
 
 declare global {
     var React:typeof import("react")
+    var ReactDOM: typeof import("react-dom")
     interface Window {
         /**
          * Lightcord is only availlaible in Lightcord (native)
@@ -45,7 +46,9 @@ declare global {
             get(ids: [number|((mod:any)=>boolean)], modules?:any[]):any
         },
         BdApi: typeof bandagedbdApi.BdApi,
-        EDApi: typeof bandagedbdApi.BdApi
+        EDApi: typeof bandagedbdApi.BdApi,
+        ReactDOM: typeof import("react-dom"),
+        React:typeof import("react")
     }
     var Lightcord:LightcordGlobal
     var BdApi: typeof bandagedbdApi.BdApi

modules/discord_desktop_core/core/app/BetterDiscord/lightcord.css

@@ -262,3 +262,761 @@
 .lc-dateWrapper {
   padding-top: 8px
 }
+
+
+/*CalendarPicker*/
+.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle,.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle,.react-datepicker__month-read-view--down-arrow,.react-datepicker__year-read-view--down-arrow {
+  margin-left: -8px;
+  position: absolute
+}
+
+.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle,.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle:before,.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle,.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle:before,.react-datepicker__month-read-view--down-arrow,.react-datepicker__month-read-view--down-arrow:before,.react-datepicker__year-read-view--down-arrow,.react-datepicker__year-read-view--down-arrow:before {
+  -webkit-box-sizing: content-box;
+  box-sizing: content-box;
+  position: absolute;
+  border: 8px solid transparent;
+  height: 0;
+  width: 1px
+}
+
+.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle:before,.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle:before,.react-datepicker__month-read-view--down-arrow:before,.react-datepicker__year-read-view--down-arrow:before {
+  content: "";
+  z-index: -1;
+  border-width: 8px;
+  left: -8px;
+  border-bottom-color: #aeaeae
+}
+
+.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {
+  top: 0;
+  margin-top: -8px
+}
+
+.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle,.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle:before {
+  border-top: none;
+  border-bottom-color: #f0f0f0
+}
+
+.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle:before {
+  top: -1px;
+  border-bottom-color: #aeaeae
+}
+
+.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle,.react-datepicker__month-read-view--down-arrow,.react-datepicker__year-read-view--down-arrow {
+  bottom: 0;
+  margin-bottom: -8px
+}
+
+.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle,.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle:before,.react-datepicker__month-read-view--down-arrow,.react-datepicker__month-read-view--down-arrow:before,.react-datepicker__year-read-view--down-arrow,.react-datepicker__year-read-view--down-arrow:before {
+  border-bottom: none;
+  border-top-color: #fff
+}
+
+.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle:before,.react-datepicker__month-read-view--down-arrow:before,.react-datepicker__year-read-view--down-arrow:before {
+  bottom: -1px;
+  border-top-color: #aeaeae
+}
+
+.react-datepicker-wrapper {
+  display: inline-block
+}
+
+.react-datepicker {
+  font-size: .8rem;
+  background-color: #fff;
+  color: #000;
+  border: 1px solid #aeaeae;
+  border-radius: .3rem;
+  display: inline-block;
+  position: relative
+}
+
+.react-datepicker__triangle {
+  position: absolute;
+  left: 50px
+}
+
+.react-datepicker-popper {
+  z-index: 1
+}
+
+.react-datepicker-popper[data-placement^=bottom] {
+  margin-top: 10px
+}
+
+.react-datepicker-popper[data-placement^=top] {
+  margin-bottom: 6px
+}
+
+.react-datepicker-popper[data-placement^=right] {
+  margin-left: 8px
+}
+
+.react-datepicker-popper[data-placement^=right] .react-datepicker__triangle {
+  left: auto;
+  right: 42px
+}
+
+.react-datepicker-popper[data-placement^=left] {
+  margin-right: 8px
+}
+
+.react-datepicker-popper[data-placement^=left] .react-datepicker__triangle {
+  left: 42px;
+  right: auto
+}
+
+.react-datepicker__header {
+  text-align: center;
+  background-color: #f0f0f0;
+  border-bottom: 1px solid #aeaeae;
+  border-top-left-radius: .3rem;
+  border-top-right-radius: .3rem;
+  padding-top: 8px;
+  position: relative
+}
+
+.react-datepicker__month-dropdown-container--scroll,.react-datepicker__month-dropdown-container--select,.react-datepicker__year-dropdown-container--scroll,.react-datepicker__year-dropdown-container--select {
+  display: inline-block;
+  margin: 0 2px
+}
+
+.react-datepicker__current-month {
+  margin-top: 0;
+  color: #000;
+  font-weight: 700;
+  font-size: .944rem
+}
+
+.react-datepicker__navigation {
+  line-height: 1.7rem;
+  text-align: center;
+  cursor: pointer;
+  position: absolute;
+  top: 10px;
+  width: 0;
+  border: .45rem solid transparent;
+  z-index: 1
+}
+
+.react-datepicker__navigation--previous {
+  left: 10px;
+  border-right-color: #ccc
+}
+
+.react-datepicker__navigation--previous:hover {
+  border-right-color: #b3b2b2
+}
+
+.react-datepicker__navigation--next {
+  right: 10px;
+  border-left-color: #ccc
+}
+
+.react-datepicker__navigation--next:hover {
+  border-left-color: #b3b2b2
+}
+
+.react-datepicker__navigation--years {
+  position: relative;
+  top: 0;
+  display: block;
+  margin-left: auto;
+  margin-right: auto
+}
+
+.react-datepicker__navigation--years-previous {
+  top: 4px;
+  border-top-color: #ccc
+}
+
+.react-datepicker__navigation--years-previous:hover {
+  border-top-color: #b3b2b2
+}
+
+.react-datepicker__navigation--years-upcoming {
+  top: -4px;
+  border-bottom-color: #ccc
+}
+
+.react-datepicker__navigation--years-upcoming:hover {
+  border-bottom-color: #b3b2b2
+}
+
+.react-datepicker__month-container {
+  display: inline;
+  float: left
+}
+
+.react-datepicker__month {
+  margin: .4rem;
+  text-align: center
+}
+
+.react-datepicker__week-number {
+  color: #ccc;
+  display: inline-block;
+  width: 1.7rem;
+  line-height: 1.7rem;
+  text-align: center;
+  margin: .166rem
+}
+
+.react-datepicker__week-number.react-datepicker__week-number--clickable {
+  cursor: pointer
+}
+
+.react-datepicker__week-number.react-datepicker__week-number--clickable:hover {
+  border-radius: .3rem;
+  background-color: #f0f0f0
+}
+
+.react-datepicker__day,.react-datepicker__day-name {
+  color: #000;
+  display: inline-block;
+  width: 1.7rem;
+  line-height: 1.7rem;
+  text-align: center;
+  margin: .166rem
+}
+
+.react-datepicker__day {
+  cursor: pointer
+}
+
+.react-datepicker__day:hover {
+  border-radius: .3rem;
+  background-color: #f0f0f0
+}
+
+.react-datepicker__day--today {
+  font-weight: 700
+}
+
+.react-datepicker__day--highlighted {
+  border-radius: .3rem;
+  background-color: #3dcc4a;
+  color: #fff
+}
+
+.react-datepicker__day--highlighted:hover {
+  background-color: #32be3f
+}
+
+.react-datepicker__day--highlighted-custom-1 {
+  color: #f0f
+}
+
+.react-datepicker__day--highlighted-custom-2 {
+  color: green
+}
+
+.react-datepicker__day--in-range,.react-datepicker__day--in-selecting-range,.react-datepicker__day--selected {
+  border-radius: .3rem;
+  background-color: #216ba5;
+  color: #fff
+}
+
+.react-datepicker__day--in-range:hover,.react-datepicker__day--in-selecting-range:hover,.react-datepicker__day--selected:hover {
+  background-color: #1d5d90
+}
+
+.react-datepicker__day--keyboard-selected {
+  border-radius: 0;
+  background-color: var(--blurple);
+  color: #fff
+}
+
+.react-datepicker__day--keyboard-selected:hover {
+  background-color: #1d5d90
+}
+
+.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range) {
+  background-color: rgba(33,107,165,.5)
+}
+
+.react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range) {
+  background-color: #f0f0f0;
+  color: #000
+}
+
+.react-datepicker__day--disabled {
+  cursor: default;
+  color: #ccc
+}
+
+.react-datepicker__day--disabled:hover {
+  background-color: transparent
+}
+
+.react-datepicker__input-container {
+  position: relative;
+  display: inline-block
+}
+
+.react-datepicker__month-read-view,.react-datepicker__year-read-view {
+  border: 1px solid transparent;
+  border-radius: .3rem
+}
+
+.react-datepicker__month-read-view:hover,.react-datepicker__year-read-view:hover {
+  cursor: pointer
+}
+
+.react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,.react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,.react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,.react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow {
+  border-top-color: #b3b2b2
+}
+
+.react-datepicker__month-read-view--down-arrow,.react-datepicker__year-read-view--down-arrow {
+  border-top-color: #ccc;
+  float: right;
+  margin-left: 20px;
+  top: 8px;
+  position: relative;
+  border-width: .45rem
+}
+
+.react-datepicker__month-dropdown,.react-datepicker__year-dropdown {
+  background-color: #f0f0f0;
+  position: absolute;
+  width: 50%;
+  left: 25%;
+  top: 30px;
+  z-index: 1;
+  text-align: center;
+  border-radius: .3rem;
+  border: 1px solid #aeaeae
+}
+
+.react-datepicker__month-dropdown:hover,.react-datepicker__year-dropdown:hover {
+  cursor: pointer
+}
+
+.react-datepicker__month-dropdown--scrollable,.react-datepicker__year-dropdown--scrollable {
+  height: 150px;
+  overflow-y: scroll
+}
+
+.react-datepicker__month-option,.react-datepicker__year-option {
+  line-height: 20px;
+  width: 100%;
+  display: block;
+  margin-left: auto;
+  margin-right: auto
+}
+
+.react-datepicker__month-option:first-of-type,.react-datepicker__year-option:first-of-type {
+  border-top-left-radius: .3rem;
+  border-top-right-radius: .3rem
+}
+
+.react-datepicker__month-option:last-of-type,.react-datepicker__year-option:last-of-type {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  border-bottom-left-radius: .3rem;
+  border-bottom-right-radius: .3rem
+}
+
+.react-datepicker__month-option:hover,.react-datepicker__year-option:hover {
+  background-color: #ccc
+}
+
+.react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,.react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming {
+  border-bottom-color: #b3b2b2
+}
+
+.react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,.react-datepicker__year-option:hover .react-datepicker__navigation--years-previous {
+  border-top-color: #b3b2b2
+}
+
+.react-datepicker__month-option--selected,.react-datepicker__year-option--selected {
+  position: absolute;
+  left: 15px
+}
+
+.react-datepicker__close-icon {
+  background-color: transparent;
+  border: 0;
+  cursor: pointer;
+  display: inline-block;
+  height: 0;
+  outline: 0;
+  padding: 0;
+  vertical-align: middle
+}
+
+.react-datepicker__close-icon:after {
+  background-color: #216ba5;
+  border-radius: 50%;
+  bottom: 0;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  color: #fff;
+  content: "\D7";
+  cursor: pointer;
+  font-size: 12px;
+  height: 16px;
+  width: 16px;
+  line-height: 1;
+  margin: -8px auto 0;
+  padding: 2px;
+  position: absolute;
+  right: 7px;
+  text-align: center;
+  top: 50%
+}
+
+.react-datepicker__today-button {
+  background: #f0f0f0;
+  border-top: 1px solid #aeaeae;
+  cursor: pointer;
+  text-align: center;
+  font-weight: 700;
+  padding: 5px 0;
+  clear: left
+}
+
+.react-datepicker__portal {
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0,0,0,.8);
+  left: 0;
+  top: 0;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  z-index: 2147483647
+}
+
+.react-datepicker__portal .react-datepicker__day,.react-datepicker__portal .react-datepicker__day-name {
+  width: 3rem;
+  line-height: 3rem
+}
+
+@media (max-height: 550px),(max-width:400px) {
+  .react-datepicker__portal .react-datepicker__day,.react-datepicker__portal .react-datepicker__day-name {
+      width:2rem;
+      line-height: 2rem
+  }
+}
+
+.react-datepicker__portal .react-datepicker__current-month {
+  font-size: 1.44rem
+}
+
+.react-datepicker__portal .react-datepicker__navigation {
+  border: .81rem solid transparent
+}
+
+.react-datepicker__portal .react-datepicker__navigation--previous {
+  border-right-color: #ccc
+}
+
+.react-datepicker__portal .react-datepicker__navigation--previous:hover {
+  border-right-color: #b3b2b2
+}
+
+.react-datepicker__portal .react-datepicker__navigation--next {
+  border-left-color: #ccc
+}
+
+.react-datepicker__portal .react-datepicker__navigation--next:hover {
+  border-left-color: #b3b2b2
+}
+
+.lc-calendarPicker {
+  min-width: 320px
+}
+
+.lc-calendarPicker button {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background-color: transparent;
+}
+
+.lc-calendarPicker .react-datepicker {
+  border: none;
+  padding: 20px
+}
+
+.lc-calendarPicker .react-datepicker__month-container {
+  width: 300px
+}
+
+.lc-calendarPicker .react-datepicker__day--in-range,.lc-calendarPicker .react-datepicker__day--in-selecting-range,.lc-calendarPicker .react-datepicker__day--selected,.lc-calendarPicker .react-datepicker__month--in-range,.lc-calendarPicker .react-datepicker__month--in-selecting-range,.lc-calendarPicker .react-datepicker__month--selected {
+  border-radius: 0
+}
+
+.lc-calendarPicker .react-datepicker__header {
+  padding-top: 0;
+  border-bottom: 0
+}
+
+.lc-calendarPicker .react-datepicker-year-header,.lc-calendarPicker .react-datepicker__current-month {
+  margin: 0 0 10px;
+  padding: 0 0 20px;
+  border-bottom: 1px solid;
+  font-size: 13px;
+  line-height: 20px;
+  font-weight: 600;
+  text-transform: uppercase;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none
+}
+
+.lc-calendarPicker .react-datepicker-year-header {
+  margin-bottom: 24px
+}
+
+.lc-calendarPicker .react-datepicker__navigation.react-datepicker__navigation--next,.lc-calendarPicker .react-datepicker__navigation.react-datepicker__navigation--previous {
+  top: 20px;
+  left: 20px;
+  width: 18px;
+  height: 18px;
+  border: 1px solid;
+  border-radius: 2px;
+  background-repeat: no-repeat;
+  background-size: 6px 12px;
+  background-position: 50%;
+  -webkit-transform: rotate(180deg);
+  transform: rotate(180deg);
+  font-size: 0
+}
+
+.lc-calendarPicker .react-datepicker__navigation.react-datepicker__navigation--next.react-datepicker__navigation--next,.lc-calendarPicker .react-datepicker__navigation.react-datepicker__navigation--previous.react-datepicker__navigation--next {
+  left: auto;
+  right: 20px;
+  -webkit-transform: rotate(0deg);
+  transform: rotate(0deg)
+}
+
+.lc-calendarPicker .react-datepicker__month {
+  margin: 0
+}
+
+.lc-calendarPicker .react-datepicker__week:first-of-type>.react-datepicker__day:first-of-type {
+  border-radius: 3px 0 0
+}
+
+.lc-calendarPicker .react-datepicker__week:first-of-type>.react-datepicker__day:last-of-type {
+  border-radius: 0 3px 0 0
+}
+
+.lc-calendarPicker .react-datepicker__week:last-of-type>.react-datepicker__day {
+  border-bottom: 1px solid #dcddde
+}
+
+.lc-calendarPicker .react-datepicker__week:last-of-type>.react-datepicker__day:first-of-type {
+  border-radius: 0 0 0 3px
+}
+
+.lc-calendarPicker .react-datepicker__week:last-of-type>.react-datepicker__day:last-of-type {
+  border-radius: 0 0 3px
+}
+
+.lc-calendarPicker .react-datepicker__week>.react-datepicker__day:last-of-type {
+  border-right: 1px solid
+}
+
+.lc-calendarPicker .react-datepicker__day-names {
+  margin-bottom: 10px
+}
+
+.lc-calendarPicker .react-datepicker__day-name {
+  width: 40px;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1em;
+  text-transform: uppercase;
+  margin: 0
+}
+
+.lc-calendarPicker .react-datepicker__day {
+  position: relative;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  margin: 0;
+  width: 40px;
+  height: 40px;
+  line-height: 40px;
+  border-top: 1px solid;
+  border-left: 1px solid
+}
+
+.lc-calendarPicker .react-datepicker__day.react-datepicker__day--in-range:hover,.lc-calendarPicker .react-datepicker__day.react-datepicker__day--selected:hover,.lc-calendarPicker .react-datepicker__day:hover {
+  border-radius: 0
+}
+
+.lc-calendarPicker .react-datepicker__day.react-datepicker__day--in-range,.lc-calendarPicker .react-datepicker__day.react-datepicker__day--in-selecting-range,.lc-calendarPicker .react-datepicker__day.react-datepicker__day--selected {
+  background: none;
+  border-radius: 0
+}
+
+.lc-calendarPicker .react-datepicker__day.react-datepicker__day--in-range:after,.lc-calendarPicker .react-datepicker__day.react-datepicker__day--in-selecting-range:after,.lc-calendarPicker .react-datepicker__day.react-datepicker__day--selected:after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 3px
+}
+
+.lc-calendarPicker .react-datepicker__monthPicker {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column
+}
+
+.lc-calendarPicker .react-datepicker__month-wrapper {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 1;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto
+}
+
+.lc-calendarPicker .react-datepicker__month-wrapper:last-child .react-datepicker__month-text {
+  border-bottom: 1px solid #18191c
+}
+
+.lc-calendarPicker .react-datepicker__month-text {
+  position: relative;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  margin: 0;
+  width: 100%;
+  height: 56px;
+  line-height: 56px;
+  border-top: 1px solid;
+  border-left: 1px solid
+}
+
+.lc-calendarPicker .react-datepicker__month-text:last-child {
+  border-right: 1px solid
+}
+
+.lc-calendarPicker .react-datepicker__month-text.react-datepicker__day--in-range:hover,.lc-calendarPicker .react-datepicker__month-text.react-datepicker__day--selected:hover,.lc-calendarPicker .react-datepicker__month-text:hover {
+  border-radius: 0
+}
+
+.lc-calendarPicker .react-datepicker__month-text.react-datepicker__month--in-range,.lc-calendarPicker .react-datepicker__month-text.react-datepicker__month--in-selecting-range,.lc-calendarPicker .react-datepicker__month-text.react-datepicker__month--selected {
+  background: none;
+  border-radius: 0
+}
+
+.lc-calendarPicker .react-datepicker__month-text.react-datepicker__month--in-range:after,.lc-calendarPicker .react-datepicker__month-text.react-datepicker__month--in-selecting-range:after,.lc-calendarPicker .react-datepicker__month-text.react-datepicker__month--selected:after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 3px
+}
+
+.lc-calendarPicker .react-datepicker__day--disabled,.lc-calendarPicker .react-datepicker__day--outside-month {
+  font-weight: 500
+}
+
+.lc-calendarPicker .react-datepicker__month--in-range:not(.react-datepicker__month--in-selecting-range):not(.react-datepicker__month--disabled),.lc-calendarPicker .react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range):not(.react-datepicker__day--disabled) {
+  color: #f6f6f7
+}
+
+.lc-calendarPicker .react-datepicker {
+  background-color: #36393f;
+  -webkit-box-shadow: 0 0 10px #18191c,0 2px 2px #202225;
+  box-shadow: 0 0 10px #18191c,0 2px 2px #202225
+}
+
+.lc-calendarPicker .react-datepicker__header {
+  background-color: #36393f;
+  border-color: rgba(24,25,28,.2)
+}
+
+.lc-calendarPicker .react-datepicker-year-header,.lc-calendarPicker .react-datepicker__current-month {
+  border-bottom-color: rgba(24,25,28,.3);
+  color: #f6f6f7
+}
+
+.lc-calendarPicker .react-datepicker__navigation.react-datepicker__navigation--next,.lc-calendarPicker .react-datepicker__navigation.react-datepicker__navigation--previous {
+  border-color: #18191c;
+  background-image: url(/assets/7619529e87dad31fd2ae83d9b9583e49.svg)
+}
+
+.lc-calendarPicker .react-datepicker__week:last-of-type .react-datepicker__day {
+  border-bottom-color: #18191c
+}
+
+.lc-calendarPicker .react-datepicker__week .react-datepicker__day:last-of-type {
+  border-right-color: #18191c
+}
+
+.lc-calendarPicker .react-datepicker__day-name {
+  color: rgba(246,246,247,.6)
+}
+
+.lc-calendarPicker .react-datepicker__day {
+  border-top-color: #18191c;
+  border-left-color: #18191c;
+  color: #f6f6f7
+}
+
+.lc-calendarPicker .react-datepicker__day.react-datepicker__day--selected:hover,.lc-calendarPicker .react-datepicker__day:hover {
+  color: #fff;
+  background-color: #7289da
+}
+
+.lc-calendarPicker .react-datepicker__day.react-datepicker__day--disabled,.lc-calendarPicker .react-datepicker__day.react-datepicker__day--disabled:hover {
+  background-color: #2f3136;
+  color: rgba(246,246,247,.3)
+}
+
+.lc-calendarPicker .react-datepicker__day.react-datepicker__day--in-range:after,.lc-calendarPicker .react-datepicker__day.react-datepicker__day--in-selecting-range:after,.lc-calendarPicker .react-datepicker__day.react-datepicker__day--selected:after {
+  background-color: #7289da
+}
+
+.lc-calendarPicker .react-datepicker__month-text {
+  border-color: #18191c;
+  color: #f6f6f7;
+  cursor: pointer
+}
+
+.lc-calendarPicker .react-datepicker__month-text:last-child {
+  border-right-color: #18191c
+}
+
+.lc-calendarPicker .react-datepicker__month-text.react-datepicker__day--selected:hover,.lc-calendarPicker .react-datepicker__month-text:hover {
+  color: #fff;
+  background-color: #7289da
+}
+
+.lc-calendarPicker .react-datepicker__month-text.react-datepicker__month--disabled,.lc-calendarPicker .react-datepicker__month-text.react-datepicker__month--disabled:hover {
+  background-color: #2f3136;
+  color: rgba(246,246,247,.3)
+}
+
+.lc-calendarPicker .react-datepicker__month-text.react-datepicker__month--in-range:after,.lc-calendarPicker .react-datepicker__month-text.react-datepicker__month--in-selecting-range:after,.lc-calendarPicker .react-datepicker__month-text.react-datepicker__month--selected:after {
+  background-color: #7289da
+}
+
+.lc-calendarPicker .react-datepicker__month--disabled,.lc-calendarPicker .react-datepicker__month--outside-month {
+  background-color: #2f3136;
+  color: rgba(246,246,247,.3);
+  cursor: unset
+}