From a6581be736bc53afbbcae93815baf793b33e4de2 Mon Sep 17 00:00:00 2001 From: Chloe Tanlimco Date: Sat, 29 Aug 2020 23:34:39 -0700 Subject: [PATCH 1/4] added react-big-calendar general format + calendar page --- components/calendar.module.css | 18 + components/calendar.tsx | 40 +++ components/front/details.module.css | 7 - components/front/details.tsx | 2 +- package.json | 2 + pages/_app.tsx | 1 + pages/calendar.tsx | 36 ++ styles/react-big-calendar.css | 513 ++++++++++++++++++++++++++++ 8 files changed, 611 insertions(+), 8 deletions(-) create mode 100644 components/calendar.module.css create mode 100644 components/calendar.tsx create mode 100644 pages/calendar.tsx create mode 100644 styles/react-big-calendar.css diff --git a/components/calendar.module.css b/components/calendar.module.css new file mode 100644 index 0000000..20cc33c --- /dev/null +++ b/components/calendar.module.css @@ -0,0 +1,18 @@ + +.calendar { + margin: 0 10vw; + height: max-content; + max-width: 100vw; +} + +.calendarWrapper { + padding-top: 45px; + vertical-align: top; +} + +@media only screen and (max-width: 768px) { + .calendarWrapper { + display: flex; + width: 100%; + } +} \ No newline at end of file diff --git a/components/calendar.tsx b/components/calendar.tsx new file mode 100644 index 0000000..fa49ee8 --- /dev/null +++ b/components/calendar.tsx @@ -0,0 +1,40 @@ +import styles from './calendar.module.css'; +import { FunctionComponent } from 'react'; +import { Calendar, momentLocalizer } from 'react-big-calendar'; +import moment from 'moment'; + +const localizer = momentLocalizer(moment); +const myEventsList = [ + { + allDay: false, + end: new Date('August 29, 2020 11:13:00'), + start: new Date('August 29, 2020 11:13:00'), + title: 'test', + }, + { + allDay: true, + end: new Date('September 01, 2020 11:13:00'), + start: new Date('September 01, 2020 11:13:00'), + title: 'All Day Event', + }, +]; + +const CalendarSection: FunctionComponent = () => ( + <> +
+
+
+ +
+
+
+ +); + +export default CalendarSection; diff --git a/components/front/details.module.css b/components/front/details.module.css index 59a6e5c..5956d4d 100644 --- a/components/front/details.module.css +++ b/components/front/details.module.css @@ -1,11 +1,4 @@ -.detailsHeading { - font-size: calc(20px + 4vw); - line-height: 6vw; - text-transform: uppercase; - margin: 0; -} - .details { margin: 0 10vw; height: max-content; diff --git a/components/front/details.tsx b/components/front/details.tsx index dd21304..859e7e4 100644 --- a/components/front/details.tsx +++ b/components/front/details.tsx @@ -6,7 +6,7 @@ import styles from './details.module.css'; const Details = () => (
-

Details

+ {/*

Details

*/}

diff --git a/package.json b/package.json index f5e4ac2..2503abe 100644 --- a/package.json +++ b/package.json @@ -10,10 +10,12 @@ "lint:fix": "npm run lint -- --fix" }, "dependencies": { + "moment": "^2.27.0", "next": "^9.5.3-canary.23", "next-compose-plugins": "^2.2.0", "next-optimized-images": "^2.6.2", "react": "16.13.1", + "react-big-calendar": "^0.27.0", "react-dom": "16.13.1", "react-reveal": "^1.2.2" }, diff --git a/pages/_app.tsx b/pages/_app.tsx index ef0ded8..5c57c74 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -2,6 +2,7 @@ import React from 'react'; import App from 'next/app'; import '../styles/global.css'; +import '../styles/react-big-calendar.css'; class MyApp extends App { render() { diff --git a/pages/calendar.tsx b/pages/calendar.tsx new file mode 100644 index 0000000..bfe51cd --- /dev/null +++ b/pages/calendar.tsx @@ -0,0 +1,36 @@ +import Head from 'next/head'; +import Header from '@/components/header'; +import styles from './index.module.css'; +import { NextPage } from 'next'; +import CalendarSection from '@/components/calendar'; + +const Calendar: NextPage = () => { + return ( + <> + + HackSC 2021 - Connect the World + + + +

+
+ + + +
+ + ); +}; + +export default Calendar; diff --git a/styles/react-big-calendar.css b/styles/react-big-calendar.css new file mode 100644 index 0000000..b11e6bf --- /dev/null +++ b/styles/react-big-calendar.css @@ -0,0 +1,513 @@ +@charset "UTF-8"; +.rbc-btn { + color: inherit; + font: inherit; + margin: 0; } + +button.rbc-btn { + overflow: visible; + text-transform: none; + -webkit-appearance: button; + cursor: pointer; } + +button[disabled].rbc-btn { + cursor: not-allowed; } + +button.rbc-input::-moz-focus-inner { + border: 0; + padding: 0; } + +.rbc-calendar { + box-sizing: border-box; + height: 100%; + display: flex; + flex-direction: column; + align-items: stretch; } + +.rbc-calendar *, +.rbc-calendar *:before, +.rbc-calendar *:after { + box-sizing: inherit; } + +.rbc-abs-full, .rbc-row-bg { + overflow: hidden; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; } + +.rbc-ellipsis, .rbc-event-label, .rbc-row-segment .rbc-event-content, .rbc-show-more { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } + +.rbc-rtl { + direction: rtl; } + +.rbc-off-range { + color: #999999; } + +.rbc-off-range-bg { + background: #e6e6e6; } + +.rbc-header { + overflow: hidden; + flex: 1 0 0%; + text-overflow: ellipsis; + white-space: nowrap; + padding: 0 3px; + text-align: center; + vertical-align: middle; + font-weight: bold; + font-size: 90%; + min-height: 0; + border-bottom: 1px solid #DDD; } + .rbc-header + .rbc-header { + border-left: 1px solid #DDD; } + .rbc-rtl .rbc-header + .rbc-header { + border-left-width: 0; + border-right: 1px solid #DDD; } + .rbc-header > a, .rbc-header > a:active, .rbc-header > a:visited { + color: inherit; + text-decoration: none; } + +.rbc-row-content { + position: relative; + user-select: none; + -webkit-user-select: none; + z-index: 4; } + +.rbc-today { + background-color: #eaf6ff; } + +.rbc-toolbar { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + margin-bottom: 10px; + font-size: 16px; } + .rbc-toolbar .rbc-toolbar-label { + flex-grow: 1; + padding: 0 10px; + text-align: center; } + .rbc-toolbar button { + color: #373a3c; + display: inline-block; + margin: 0; + text-align: center; + vertical-align: middle; + background: none; + background-image: none; + border: 1px solid #ccc; + padding: .375rem 1rem; + border-radius: 4px; + line-height: normal; + white-space: nowrap; } + .rbc-toolbar button:active, .rbc-toolbar button.rbc-active { + background-image: none; + box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); + background-color: #e6e6e6; + border-color: #adadad; } + .rbc-toolbar button:active:hover, .rbc-toolbar button:active:focus, .rbc-toolbar button.rbc-active:hover, .rbc-toolbar button.rbc-active:focus { + color: #373a3c; + background-color: #d4d4d4; + border-color: #8c8c8c; } + .rbc-toolbar button:focus { + color: #373a3c; + background-color: #e6e6e6; + border-color: #adadad; } + .rbc-toolbar button:hover { + color: #373a3c; + background-color: #e6e6e6; + border-color: #adadad; } + +.rbc-btn-group { + display: inline-block; + white-space: nowrap; } + .rbc-btn-group > button:first-child:not(:last-child) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; } + .rbc-btn-group > button:last-child:not(:first-child) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; } + .rbc-rtl .rbc-btn-group > button:first-child:not(:last-child) { + border-radius: 4px; + border-top-left-radius: 0; + border-bottom-left-radius: 0; } + .rbc-rtl .rbc-btn-group > button:last-child:not(:first-child) { + border-radius: 4px; + border-top-right-radius: 0; + border-bottom-right-radius: 0; } + .rbc-btn-group > button:not(:first-child):not(:last-child) { + border-radius: 0; } + .rbc-btn-group button + button { + margin-left: -1px; } + .rbc-rtl .rbc-btn-group button + button { + margin-left: 0; + margin-right: -1px; } + .rbc-btn-group + .rbc-btn-group, + .rbc-btn-group + button { + margin-left: 10px; } + +.rbc-event { + border: none; + box-sizing: border-box; + box-shadow: none; + margin: 0; + padding: 2px 5px; + background-color: #3174ad; + border-radius: 5px; + color: #fff; + cursor: pointer; + width: 100%; + text-align: left; } + .rbc-slot-selecting .rbc-event { + cursor: inherit; + pointer-events: none; } + .rbc-event.rbc-selected { + background-color: #265985; } + .rbc-event:focus { + outline: 5px auto #3b99fc; } + +.rbc-event-label { + font-size: 80%; } + +.rbc-event-overlaps { + box-shadow: -1px 1px 5px 0px rgba(51, 51, 51, 0.5); } + +.rbc-event-continues-prior { + border-top-left-radius: 0; + border-bottom-left-radius: 0; } + +.rbc-event-continues-after { + border-top-right-radius: 0; + border-bottom-right-radius: 0; } + +.rbc-event-continues-earlier { + border-top-left-radius: 0; + border-top-right-radius: 0; } + +.rbc-event-continues-later { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; } + +.rbc-row { + display: flex; + flex-direction: row; } + +.rbc-row-segment { + padding: 0 1px 1px 1px; } + +.rbc-selected-cell { + background-color: rgba(0, 0, 0, 0.1); } + +.rbc-show-more { + background-color: rgba(255, 255, 255, 0.3); + z-index: 4; + font-weight: bold; + font-size: 85%; + height: auto; + line-height: normal; } + +.rbc-month-view { + position: relative; + border: 1px solid #DDD; + display: flex; + flex-direction: column; + flex: 1 0 0; + width: 100%; + user-select: none; + -webkit-user-select: none; + height: 100%; } + +.rbc-month-header { + display: flex; + flex-direction: row; } + +.rbc-month-row { + display: flex; + position: relative; + flex-direction: column; + flex: 1 0 0; + flex-basis: 0px; + overflow: hidden; + height: 100%; } + .rbc-month-row + .rbc-month-row { + border-top: 1px solid #DDD; } + +.rbc-date-cell { + flex: 1 1 0; + min-width: 0; + padding-right: 5px; + text-align: right; } + .rbc-date-cell.rbc-now { + font-weight: bold; } + .rbc-date-cell > a, .rbc-date-cell > a:active, .rbc-date-cell > a:visited { + color: inherit; + text-decoration: none; } + +.rbc-row-bg { + display: flex; + flex-direction: row; + flex: 1 0 0; + overflow: hidden; } + +.rbc-day-bg { + flex: 1 0 0%; } + .rbc-day-bg + .rbc-day-bg { + border-left: 1px solid #DDD; } + .rbc-rtl .rbc-day-bg + .rbc-day-bg { + border-left-width: 0; + border-right: 1px solid #DDD; } + +.rbc-overlay { + position: absolute; + z-index: 5; + border: 1px solid #e5e5e5; + background-color: #fff; + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25); + padding: 10px; } + .rbc-overlay > * + * { + margin-top: 1px; } + +.rbc-overlay-header { + border-bottom: 1px solid #e5e5e5; + margin: -10px -10px 5px -10px; + padding: 2px 10px; } + +.rbc-agenda-view { + display: flex; + flex-direction: column; + flex: 1 0 0; + overflow: auto; } + .rbc-agenda-view table.rbc-agenda-table { + width: 100%; + border: 1px solid #DDD; + border-spacing: 0; + border-collapse: collapse; } + .rbc-agenda-view table.rbc-agenda-table tbody > tr > td { + padding: 5px 10px; + vertical-align: top; } + .rbc-agenda-view table.rbc-agenda-table .rbc-agenda-time-cell { + padding-left: 15px; + padding-right: 15px; + text-transform: lowercase; } + .rbc-agenda-view table.rbc-agenda-table tbody > tr > td + td { + border-left: 1px solid #DDD; } + .rbc-rtl .rbc-agenda-view table.rbc-agenda-table tbody > tr > td + td { + border-left-width: 0; + border-right: 1px solid #DDD; } + .rbc-agenda-view table.rbc-agenda-table tbody > tr + tr { + border-top: 1px solid #DDD; } + .rbc-agenda-view table.rbc-agenda-table thead > tr > th { + padding: 3px 5px; + text-align: left; + border-bottom: 1px solid #DDD; } + .rbc-rtl .rbc-agenda-view table.rbc-agenda-table thead > tr > th { + text-align: right; } + +.rbc-agenda-time-cell { + text-transform: lowercase; } + .rbc-agenda-time-cell .rbc-continues-after:after { + content: ' »'; } + .rbc-agenda-time-cell .rbc-continues-prior:before { + content: '« '; } + +.rbc-agenda-date-cell, +.rbc-agenda-time-cell { + white-space: nowrap; } + +.rbc-agenda-event-cell { + width: 100%; } + +.rbc-time-column { + display: flex; + flex-direction: column; + min-height: 100%; } + .rbc-time-column .rbc-timeslot-group { + flex: 1; } + +.rbc-timeslot-group { + border-bottom: 1px solid #DDD; + min-height: 40px; + display: flex; + flex-flow: column nowrap; } + +.rbc-time-gutter, +.rbc-header-gutter { + flex: none; } + +.rbc-label { + padding: 0 5px; } + +.rbc-day-slot { + position: relative; } + .rbc-day-slot .rbc-events-container { + bottom: 0; + left: 0; + position: absolute; + right: 0; + margin-right: 10px; + top: 0; } + .rbc-day-slot .rbc-events-container.rbc-rtl { + left: 10px; + right: 0; } + .rbc-day-slot .rbc-event { + border: 1px solid #265985; + display: flex; + max-height: 100%; + min-height: 20px; + flex-flow: column wrap; + align-items: flex-start; + overflow: hidden; + position: absolute; } + .rbc-day-slot .rbc-event-label { + flex: none; + padding-right: 5px; + width: auto; } + .rbc-day-slot .rbc-event-content { + width: 100%; + flex: 1 1 0; + word-wrap: break-word; + line-height: 1; + height: 100%; + min-height: 1em; } + .rbc-day-slot .rbc-time-slot { + border-top: 1px solid #f7f7f7; } + +.rbc-time-view-resources .rbc-time-gutter, +.rbc-time-view-resources .rbc-time-header-gutter { + position: sticky; + left: 0; + background-color: white; + border-right: 1px solid #DDD; + z-index: 10; + margin-right: -1px; } + +.rbc-time-view-resources .rbc-time-header { + overflow: hidden; } + +.rbc-time-view-resources .rbc-time-header-content { + min-width: auto; + flex: 1 0 0; + flex-basis: 0px; } + +.rbc-time-view-resources .rbc-time-header-cell-single-day { + display: none; } + +.rbc-time-view-resources .rbc-day-slot { + min-width: 140px; } + +.rbc-time-view-resources .rbc-header, +.rbc-time-view-resources .rbc-day-bg { + width: 140px; + flex: 1 1 0; + flex-basis: 0 px; } + +.rbc-time-header-content + .rbc-time-header-content { + margin-left: -1px; } + +.rbc-time-slot { + flex: 1 0 0; } + .rbc-time-slot.rbc-now { + font-weight: bold; } + +.rbc-day-header { + text-align: center; } + +.rbc-slot-selection { + z-index: 10; + position: absolute; + background-color: rgba(0, 0, 0, 0.5); + color: white; + font-size: 75%; + width: 100%; + padding: 3px; } + +.rbc-slot-selecting { + cursor: move; } + +.rbc-time-view { + display: flex; + flex-direction: column; + flex: 1; + width: 100%; + border: 1px solid #DDD; + min-height: 0; } + .rbc-time-view .rbc-time-gutter { + white-space: nowrap; } + .rbc-time-view .rbc-allday-cell { + box-sizing: content-box; + width: 100%; + height: 100%; + position: relative; } + .rbc-time-view .rbc-allday-cell + .rbc-allday-cell { + border-left: 1px solid #DDD; } + .rbc-time-view .rbc-allday-events { + position: relative; + z-index: 4; } + .rbc-time-view .rbc-row { + box-sizing: border-box; + min-height: 20px; } + +.rbc-time-header { + display: flex; + flex: 0 0 auto; + flex-direction: row; } + .rbc-time-header.rbc-overflowing { + border-right: 1px solid #DDD; } + .rbc-rtl .rbc-time-header.rbc-overflowing { + border-right-width: 0; + border-left: 1px solid #DDD; } + .rbc-time-header > .rbc-row:first-child { + border-bottom: 1px solid #DDD; } + .rbc-time-header > .rbc-row.rbc-row-resource { + border-bottom: 1px solid #DDD; } + +.rbc-time-header-cell-single-day { + display: none; } + +.rbc-time-header-content { + flex: 1; + display: flex; + min-width: 0; + flex-direction: column; + border-left: 1px solid #DDD; } + .rbc-rtl .rbc-time-header-content { + border-left-width: 0; + border-right: 1px solid #DDD; } + .rbc-time-header-content > .rbc-row.rbc-row-resource { + border-bottom: 1px solid #DDD; + flex-shrink: 0; } + +.rbc-time-content { + display: flex; + flex: 1 0 0%; + align-items: flex-start; + width: 100%; + border-top: 2px solid #DDD; + overflow-y: auto; + position: relative; } + .rbc-time-content > .rbc-time-gutter { + flex: none; } + .rbc-time-content > * + * > * { + border-left: 1px solid #DDD; } + .rbc-rtl .rbc-time-content > * + * > * { + border-left-width: 0; + border-right: 1px solid #DDD; } + .rbc-time-content > .rbc-day-slot { + width: 100%; + user-select: none; + -webkit-user-select: none; } + +.rbc-current-time-indicator { + position: absolute; + z-index: 3; + left: 0; + right: 0; + height: 1px; + background-color: #74ad31; + pointer-events: none; } From 8872da12cf0e22f473935b24de46a48e33ba2f5a Mon Sep 17 00:00:00 2001 From: Chloe Tanlimco Date: Mon, 31 Aug 2020 17:06:40 -0700 Subject: [PATCH 2/4] removed react calendar libraries - should probably style this at some point --- components/calendar.tsx | 36 +-- package.json | 5 +- pages/_app.tsx | 1 - styles/react-big-calendar.css | 513 ---------------------------------- 4 files changed, 12 insertions(+), 543 deletions(-) delete mode 100644 styles/react-big-calendar.css diff --git a/components/calendar.tsx b/components/calendar.tsx index fa49ee8..1094ee4 100644 --- a/components/calendar.tsx +++ b/components/calendar.tsx @@ -1,36 +1,20 @@ +import React from 'react'; import styles from './calendar.module.css'; -import { FunctionComponent } from 'react'; -import { Calendar, momentLocalizer } from 'react-big-calendar'; -import moment from 'moment'; -const localizer = momentLocalizer(moment); -const myEventsList = [ - { - allDay: false, - end: new Date('August 29, 2020 11:13:00'), - start: new Date('August 29, 2020 11:13:00'), - title: 'test', - }, - { - allDay: true, - end: new Date('September 01, 2020 11:13:00'), - start: new Date('September 01, 2020 11:13:00'), - title: 'All Day Event', - }, -]; - -const CalendarSection: FunctionComponent = () => ( +const CalendarSection = () => ( <>
- + >
diff --git a/package.json b/package.json index 2503abe..0f34a63 100644 --- a/package.json +++ b/package.json @@ -3,19 +3,18 @@ "version": "0.1.0", "private": true, "scripts": { - "dev": "next dev", + "dev": "NODE_OPTIONS='--inspect' next dev", "build": "next build", "start": "next start", "lint": "eslint 'components/**/*' 'pages/**/*' --ext .ts,.tsx", "lint:fix": "npm run lint -- --fix" }, "dependencies": { - "moment": "^2.27.0", "next": "^9.5.3-canary.23", "next-compose-plugins": "^2.2.0", "next-optimized-images": "^2.6.2", + "next-seo": "^4.7.3", "react": "16.13.1", - "react-big-calendar": "^0.27.0", "react-dom": "16.13.1", "react-reveal": "^1.2.2" }, diff --git a/pages/_app.tsx b/pages/_app.tsx index 5c57c74..ef0ded8 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -2,7 +2,6 @@ import React from 'react'; import App from 'next/app'; import '../styles/global.css'; -import '../styles/react-big-calendar.css'; class MyApp extends App { render() { diff --git a/styles/react-big-calendar.css b/styles/react-big-calendar.css deleted file mode 100644 index b11e6bf..0000000 --- a/styles/react-big-calendar.css +++ /dev/null @@ -1,513 +0,0 @@ -@charset "UTF-8"; -.rbc-btn { - color: inherit; - font: inherit; - margin: 0; } - -button.rbc-btn { - overflow: visible; - text-transform: none; - -webkit-appearance: button; - cursor: pointer; } - -button[disabled].rbc-btn { - cursor: not-allowed; } - -button.rbc-input::-moz-focus-inner { - border: 0; - padding: 0; } - -.rbc-calendar { - box-sizing: border-box; - height: 100%; - display: flex; - flex-direction: column; - align-items: stretch; } - -.rbc-calendar *, -.rbc-calendar *:before, -.rbc-calendar *:after { - box-sizing: inherit; } - -.rbc-abs-full, .rbc-row-bg { - overflow: hidden; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; } - -.rbc-ellipsis, .rbc-event-label, .rbc-row-segment .rbc-event-content, .rbc-show-more { - display: block; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; } - -.rbc-rtl { - direction: rtl; } - -.rbc-off-range { - color: #999999; } - -.rbc-off-range-bg { - background: #e6e6e6; } - -.rbc-header { - overflow: hidden; - flex: 1 0 0%; - text-overflow: ellipsis; - white-space: nowrap; - padding: 0 3px; - text-align: center; - vertical-align: middle; - font-weight: bold; - font-size: 90%; - min-height: 0; - border-bottom: 1px solid #DDD; } - .rbc-header + .rbc-header { - border-left: 1px solid #DDD; } - .rbc-rtl .rbc-header + .rbc-header { - border-left-width: 0; - border-right: 1px solid #DDD; } - .rbc-header > a, .rbc-header > a:active, .rbc-header > a:visited { - color: inherit; - text-decoration: none; } - -.rbc-row-content { - position: relative; - user-select: none; - -webkit-user-select: none; - z-index: 4; } - -.rbc-today { - background-color: #eaf6ff; } - -.rbc-toolbar { - display: flex; - flex-wrap: wrap; - justify-content: center; - align-items: center; - margin-bottom: 10px; - font-size: 16px; } - .rbc-toolbar .rbc-toolbar-label { - flex-grow: 1; - padding: 0 10px; - text-align: center; } - .rbc-toolbar button { - color: #373a3c; - display: inline-block; - margin: 0; - text-align: center; - vertical-align: middle; - background: none; - background-image: none; - border: 1px solid #ccc; - padding: .375rem 1rem; - border-radius: 4px; - line-height: normal; - white-space: nowrap; } - .rbc-toolbar button:active, .rbc-toolbar button.rbc-active { - background-image: none; - box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - background-color: #e6e6e6; - border-color: #adadad; } - .rbc-toolbar button:active:hover, .rbc-toolbar button:active:focus, .rbc-toolbar button.rbc-active:hover, .rbc-toolbar button.rbc-active:focus { - color: #373a3c; - background-color: #d4d4d4; - border-color: #8c8c8c; } - .rbc-toolbar button:focus { - color: #373a3c; - background-color: #e6e6e6; - border-color: #adadad; } - .rbc-toolbar button:hover { - color: #373a3c; - background-color: #e6e6e6; - border-color: #adadad; } - -.rbc-btn-group { - display: inline-block; - white-space: nowrap; } - .rbc-btn-group > button:first-child:not(:last-child) { - border-top-right-radius: 0; - border-bottom-right-radius: 0; } - .rbc-btn-group > button:last-child:not(:first-child) { - border-top-left-radius: 0; - border-bottom-left-radius: 0; } - .rbc-rtl .rbc-btn-group > button:first-child:not(:last-child) { - border-radius: 4px; - border-top-left-radius: 0; - border-bottom-left-radius: 0; } - .rbc-rtl .rbc-btn-group > button:last-child:not(:first-child) { - border-radius: 4px; - border-top-right-radius: 0; - border-bottom-right-radius: 0; } - .rbc-btn-group > button:not(:first-child):not(:last-child) { - border-radius: 0; } - .rbc-btn-group button + button { - margin-left: -1px; } - .rbc-rtl .rbc-btn-group button + button { - margin-left: 0; - margin-right: -1px; } - .rbc-btn-group + .rbc-btn-group, - .rbc-btn-group + button { - margin-left: 10px; } - -.rbc-event { - border: none; - box-sizing: border-box; - box-shadow: none; - margin: 0; - padding: 2px 5px; - background-color: #3174ad; - border-radius: 5px; - color: #fff; - cursor: pointer; - width: 100%; - text-align: left; } - .rbc-slot-selecting .rbc-event { - cursor: inherit; - pointer-events: none; } - .rbc-event.rbc-selected { - background-color: #265985; } - .rbc-event:focus { - outline: 5px auto #3b99fc; } - -.rbc-event-label { - font-size: 80%; } - -.rbc-event-overlaps { - box-shadow: -1px 1px 5px 0px rgba(51, 51, 51, 0.5); } - -.rbc-event-continues-prior { - border-top-left-radius: 0; - border-bottom-left-radius: 0; } - -.rbc-event-continues-after { - border-top-right-radius: 0; - border-bottom-right-radius: 0; } - -.rbc-event-continues-earlier { - border-top-left-radius: 0; - border-top-right-radius: 0; } - -.rbc-event-continues-later { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; } - -.rbc-row { - display: flex; - flex-direction: row; } - -.rbc-row-segment { - padding: 0 1px 1px 1px; } - -.rbc-selected-cell { - background-color: rgba(0, 0, 0, 0.1); } - -.rbc-show-more { - background-color: rgba(255, 255, 255, 0.3); - z-index: 4; - font-weight: bold; - font-size: 85%; - height: auto; - line-height: normal; } - -.rbc-month-view { - position: relative; - border: 1px solid #DDD; - display: flex; - flex-direction: column; - flex: 1 0 0; - width: 100%; - user-select: none; - -webkit-user-select: none; - height: 100%; } - -.rbc-month-header { - display: flex; - flex-direction: row; } - -.rbc-month-row { - display: flex; - position: relative; - flex-direction: column; - flex: 1 0 0; - flex-basis: 0px; - overflow: hidden; - height: 100%; } - .rbc-month-row + .rbc-month-row { - border-top: 1px solid #DDD; } - -.rbc-date-cell { - flex: 1 1 0; - min-width: 0; - padding-right: 5px; - text-align: right; } - .rbc-date-cell.rbc-now { - font-weight: bold; } - .rbc-date-cell > a, .rbc-date-cell > a:active, .rbc-date-cell > a:visited { - color: inherit; - text-decoration: none; } - -.rbc-row-bg { - display: flex; - flex-direction: row; - flex: 1 0 0; - overflow: hidden; } - -.rbc-day-bg { - flex: 1 0 0%; } - .rbc-day-bg + .rbc-day-bg { - border-left: 1px solid #DDD; } - .rbc-rtl .rbc-day-bg + .rbc-day-bg { - border-left-width: 0; - border-right: 1px solid #DDD; } - -.rbc-overlay { - position: absolute; - z-index: 5; - border: 1px solid #e5e5e5; - background-color: #fff; - box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25); - padding: 10px; } - .rbc-overlay > * + * { - margin-top: 1px; } - -.rbc-overlay-header { - border-bottom: 1px solid #e5e5e5; - margin: -10px -10px 5px -10px; - padding: 2px 10px; } - -.rbc-agenda-view { - display: flex; - flex-direction: column; - flex: 1 0 0; - overflow: auto; } - .rbc-agenda-view table.rbc-agenda-table { - width: 100%; - border: 1px solid #DDD; - border-spacing: 0; - border-collapse: collapse; } - .rbc-agenda-view table.rbc-agenda-table tbody > tr > td { - padding: 5px 10px; - vertical-align: top; } - .rbc-agenda-view table.rbc-agenda-table .rbc-agenda-time-cell { - padding-left: 15px; - padding-right: 15px; - text-transform: lowercase; } - .rbc-agenda-view table.rbc-agenda-table tbody > tr > td + td { - border-left: 1px solid #DDD; } - .rbc-rtl .rbc-agenda-view table.rbc-agenda-table tbody > tr > td + td { - border-left-width: 0; - border-right: 1px solid #DDD; } - .rbc-agenda-view table.rbc-agenda-table tbody > tr + tr { - border-top: 1px solid #DDD; } - .rbc-agenda-view table.rbc-agenda-table thead > tr > th { - padding: 3px 5px; - text-align: left; - border-bottom: 1px solid #DDD; } - .rbc-rtl .rbc-agenda-view table.rbc-agenda-table thead > tr > th { - text-align: right; } - -.rbc-agenda-time-cell { - text-transform: lowercase; } - .rbc-agenda-time-cell .rbc-continues-after:after { - content: ' »'; } - .rbc-agenda-time-cell .rbc-continues-prior:before { - content: '« '; } - -.rbc-agenda-date-cell, -.rbc-agenda-time-cell { - white-space: nowrap; } - -.rbc-agenda-event-cell { - width: 100%; } - -.rbc-time-column { - display: flex; - flex-direction: column; - min-height: 100%; } - .rbc-time-column .rbc-timeslot-group { - flex: 1; } - -.rbc-timeslot-group { - border-bottom: 1px solid #DDD; - min-height: 40px; - display: flex; - flex-flow: column nowrap; } - -.rbc-time-gutter, -.rbc-header-gutter { - flex: none; } - -.rbc-label { - padding: 0 5px; } - -.rbc-day-slot { - position: relative; } - .rbc-day-slot .rbc-events-container { - bottom: 0; - left: 0; - position: absolute; - right: 0; - margin-right: 10px; - top: 0; } - .rbc-day-slot .rbc-events-container.rbc-rtl { - left: 10px; - right: 0; } - .rbc-day-slot .rbc-event { - border: 1px solid #265985; - display: flex; - max-height: 100%; - min-height: 20px; - flex-flow: column wrap; - align-items: flex-start; - overflow: hidden; - position: absolute; } - .rbc-day-slot .rbc-event-label { - flex: none; - padding-right: 5px; - width: auto; } - .rbc-day-slot .rbc-event-content { - width: 100%; - flex: 1 1 0; - word-wrap: break-word; - line-height: 1; - height: 100%; - min-height: 1em; } - .rbc-day-slot .rbc-time-slot { - border-top: 1px solid #f7f7f7; } - -.rbc-time-view-resources .rbc-time-gutter, -.rbc-time-view-resources .rbc-time-header-gutter { - position: sticky; - left: 0; - background-color: white; - border-right: 1px solid #DDD; - z-index: 10; - margin-right: -1px; } - -.rbc-time-view-resources .rbc-time-header { - overflow: hidden; } - -.rbc-time-view-resources .rbc-time-header-content { - min-width: auto; - flex: 1 0 0; - flex-basis: 0px; } - -.rbc-time-view-resources .rbc-time-header-cell-single-day { - display: none; } - -.rbc-time-view-resources .rbc-day-slot { - min-width: 140px; } - -.rbc-time-view-resources .rbc-header, -.rbc-time-view-resources .rbc-day-bg { - width: 140px; - flex: 1 1 0; - flex-basis: 0 px; } - -.rbc-time-header-content + .rbc-time-header-content { - margin-left: -1px; } - -.rbc-time-slot { - flex: 1 0 0; } - .rbc-time-slot.rbc-now { - font-weight: bold; } - -.rbc-day-header { - text-align: center; } - -.rbc-slot-selection { - z-index: 10; - position: absolute; - background-color: rgba(0, 0, 0, 0.5); - color: white; - font-size: 75%; - width: 100%; - padding: 3px; } - -.rbc-slot-selecting { - cursor: move; } - -.rbc-time-view { - display: flex; - flex-direction: column; - flex: 1; - width: 100%; - border: 1px solid #DDD; - min-height: 0; } - .rbc-time-view .rbc-time-gutter { - white-space: nowrap; } - .rbc-time-view .rbc-allday-cell { - box-sizing: content-box; - width: 100%; - height: 100%; - position: relative; } - .rbc-time-view .rbc-allday-cell + .rbc-allday-cell { - border-left: 1px solid #DDD; } - .rbc-time-view .rbc-allday-events { - position: relative; - z-index: 4; } - .rbc-time-view .rbc-row { - box-sizing: border-box; - min-height: 20px; } - -.rbc-time-header { - display: flex; - flex: 0 0 auto; - flex-direction: row; } - .rbc-time-header.rbc-overflowing { - border-right: 1px solid #DDD; } - .rbc-rtl .rbc-time-header.rbc-overflowing { - border-right-width: 0; - border-left: 1px solid #DDD; } - .rbc-time-header > .rbc-row:first-child { - border-bottom: 1px solid #DDD; } - .rbc-time-header > .rbc-row.rbc-row-resource { - border-bottom: 1px solid #DDD; } - -.rbc-time-header-cell-single-day { - display: none; } - -.rbc-time-header-content { - flex: 1; - display: flex; - min-width: 0; - flex-direction: column; - border-left: 1px solid #DDD; } - .rbc-rtl .rbc-time-header-content { - border-left-width: 0; - border-right: 1px solid #DDD; } - .rbc-time-header-content > .rbc-row.rbc-row-resource { - border-bottom: 1px solid #DDD; - flex-shrink: 0; } - -.rbc-time-content { - display: flex; - flex: 1 0 0%; - align-items: flex-start; - width: 100%; - border-top: 2px solid #DDD; - overflow-y: auto; - position: relative; } - .rbc-time-content > .rbc-time-gutter { - flex: none; } - .rbc-time-content > * + * > * { - border-left: 1px solid #DDD; } - .rbc-rtl .rbc-time-content > * + * > * { - border-left-width: 0; - border-right: 1px solid #DDD; } - .rbc-time-content > .rbc-day-slot { - width: 100%; - user-select: none; - -webkit-user-select: none; } - -.rbc-current-time-indicator { - position: absolute; - z-index: 3; - left: 0; - right: 0; - height: 1px; - background-color: #74ad31; - pointer-events: none; } From 372dc71b1fdccf91e4a613034ce41a5fa07280bd Mon Sep 17 00:00:00 2001 From: Chloe Tanlimco Date: Tue, 1 Sep 2020 12:15:55 -0700 Subject: [PATCH 3/4] reverted package.json --- components/calendar.tsx | 20 +++++++++----------- package.json | 5 +++-- 2 files changed, 12 insertions(+), 13 deletions(-) diff --git a/components/calendar.tsx b/components/calendar.tsx index 1094ee4..a5d25b1 100644 --- a/components/calendar.tsx +++ b/components/calendar.tsx @@ -5,17 +5,15 @@ const CalendarSection = () => ( <>
-
- -
+
diff --git a/package.json b/package.json index f5e4ac2..5edc74a 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "version": "0.1.0", "private": true, "scripts": { - "dev": "next dev", + "dev": "NODE_OPTIONS='--inspect' next dev", "build": "next build", "start": "next start", "lint": "eslint 'components/**/*' 'pages/**/*' --ext .ts,.tsx", @@ -13,6 +13,7 @@ "next": "^9.5.3-canary.23", "next-compose-plugins": "^2.2.0", "next-optimized-images": "^2.6.2", + "next-seo": "^4.7.3", "react": "16.13.1", "react-dom": "16.13.1", "react-reveal": "^1.2.2" @@ -51,4 +52,4 @@ "pre-commit": "lint-staged" } } -} +} \ No newline at end of file From 1ccce8d56eb1c0aac2b53fd4bc26957a222a9f1e Mon Sep 17 00:00:00 2001 From: Chloe Tanlimco Date: Tue, 8 Sep 2020 17:41:12 -0700 Subject: [PATCH 4/4] completely changed it lol --- components/calendar.module.css | 24 ++ components/calendar.tsx | 167 ++++++++++++-- components/front/details.module.css | 1 - package-lock.json | 336 ++++++++++++++++++++-------- package.json | 5 +- webpack.config.js | 5 + 6 files changed, 425 insertions(+), 113 deletions(-) create mode 100644 webpack.config.js diff --git a/components/calendar.module.css b/components/calendar.module.css index d14a0ea..d83a0c3 100644 --- a/components/calendar.module.css +++ b/components/calendar.module.css @@ -16,4 +16,28 @@ display: flex; width: 100%; } + .nodelogo { + display: none; + } +} + +.nodelogo { + left: -120px; + z-index: -1; + position: absolute; + top: 19vh; + transform: rotate(10deg); + max-width: 100vw; + opacity: .15; +} + +.timelineHeader { + font-size: calc(20px + 4vw); + line-height: 6vw; + text-transform: uppercase; + margin-bottom: 0; + background-repeat: no-repeat; + background-position-y: 80%; + width: min-content; + padding-left: var(--gap); } \ No newline at end of file diff --git a/components/calendar.tsx b/components/calendar.tsx index a5d25b1..b7aa52d 100644 --- a/components/calendar.tsx +++ b/components/calendar.tsx @@ -1,22 +1,153 @@ import React from 'react'; import styles from './calendar.module.css'; +import { makeStyles } from '@material-ui/core/styles'; +import Timeline from '@material-ui/lab/Timeline'; +import TimelineItem from '@material-ui/lab/TimelineItem'; +import TimelineSeparator from '@material-ui/lab/TimelineSeparator'; +import TimelineConnector from '@material-ui/lab/TimelineConnector'; +import TimelineContent from '@material-ui/lab/TimelineContent'; +import TimelineOppositeContent from '@material-ui/lab/TimelineOppositeContent'; +import LaptopMacIcon from '@material-ui/icons/LaptopMac'; +import SubjectIcon from '@material-ui/icons/Subject'; +import Typography from '@material-ui/core/Typography'; +import Icon from '@material-ui/core/Icon'; +import hackSC from '../images/logo.png'; +import nodelogo from '../images/nodelogo.png'; -const CalendarSection = () => ( - <> -
-
- -
-
- -); +const useStyles = makeStyles(() => ({ + title: { + fontSize: 'calc(12px + 2vw)', + lineHeight: 'calc(12px + 2.5vw)', + letterSpacing: '1px', + minWidth: '50vw', + font: + '--font-sans: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif', + fontStyle: 'normal', + fontWeight: 'normal', + textTransform: 'uppercase', + }, + date: { + color: 'var(--blue)', + fontSize: 'calc(12px + 1.5vw)', + wordWrap: 'normal', + maxWidth: '20vw', + }, + dot: { + padding: '0px', + margin: '0px', + alignItems: 'center', + justifyContent: 'center', + background: 'transparent', + }, + separator: { + height: 'calc(90px + 10vh)', + }, + line: { + backgroundColor: '#FEDA22', + margin: '10px', + }, + imageIcon: { + maxHeight: 'calc(20px + 4vw)', + maxWidth: 'calc(20px + 4vw)', + alignContent: 'center', + padding: '0px', + margin: '0px', + }, + iconRoot: { + height: 'calc(20px + 4vw)', + width: 'calc(20px + 4vw)', + }, +})); -export default CalendarSection; +export default function CalendarSection() { + const classes = useStyles(); + + return ( + <> +
+

Timeline

+ +
+ + + + + 00.00.00 + + + +
+ +
+ + + + + Applications Released + + + Make sure to subscribe to our mailing list! + + + + + + + 00.00.00 + + + +
+ +
+ + + + + Applications Due + + Application Link: // link + + + + + + 02.19.21 - 02.21.21 + + + +
+ + hack icon + +
+ + + Hackathon! + Online || Free + + + + {/* */} +
+
+ + ); +} +// export default CalendarSection; diff --git a/components/front/details.module.css b/components/front/details.module.css index 54aab36..29ccf2f 100644 --- a/components/front/details.module.css +++ b/components/front/details.module.css @@ -52,7 +52,6 @@ z-index: -2; } - @media only screen and (max-width: 1200px) { .hand { display: none; diff --git a/package-lock.json b/package-lock.json index 3aa64cd..af9e1da 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1380,28 +1380,112 @@ "to-fast-properties": "^2.0.0" } }, - "@emotion/is-prop-valid": { - "version": "0.8.8", - "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz", - "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==", + "@emotion/hash": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz", + "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==" + }, + "@material-ui/core": { + "version": "4.11.0", + "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.11.0.tgz", + "integrity": "sha512-bYo9uIub8wGhZySHqLQ833zi4ZML+XCBE1XwJ8EuUVSpTWWG57Pm+YugQToJNFsEyiKFhPh8DPD0bgupz8n01g==", + "requires": { + "@babel/runtime": "^7.4.4", + "@material-ui/styles": "^4.10.0", + "@material-ui/system": "^4.9.14", + "@material-ui/types": "^5.1.0", + "@material-ui/utils": "^4.10.2", + "@types/react-transition-group": "^4.2.0", + "clsx": "^1.0.4", + "hoist-non-react-statics": "^3.3.2", + "popper.js": "1.16.1-lts", + "prop-types": "^15.7.2", + "react-is": "^16.8.0", + "react-transition-group": "^4.4.0" + } + }, + "@material-ui/icons": { + "version": "4.9.1", + "resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-4.9.1.tgz", + "integrity": "sha512-GBitL3oBWO0hzBhvA9KxqcowRUsA0qzwKkURyC8nppnC3fw54KPKZ+d4V1Eeg/UnDRSzDaI9nGCdel/eh9AQMg==", "requires": { - "@emotion/memoize": "0.7.4" + "@babel/runtime": "^7.4.4" } }, - "@emotion/memoize": { - "version": "0.7.4", - "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", - "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==" + "@material-ui/lab": { + "version": "4.0.0-alpha.56", + "resolved": "https://registry.npmjs.org/@material-ui/lab/-/lab-4.0.0-alpha.56.tgz", + "integrity": "sha512-xPlkK+z/6y/24ka4gVJgwPfoCF4RCh8dXb1BNE7MtF9bXEBLN/lBxNTK8VAa0qm3V2oinA6xtUIdcRh0aeRtVw==", + "requires": { + "@babel/runtime": "^7.4.4", + "@material-ui/utils": "^4.10.2", + "clsx": "^1.0.4", + "prop-types": "^15.7.2", + "react-is": "^16.8.0" + } }, - "@emotion/stylis": { - "version": "0.8.5", - "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz", - "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==" + "@material-ui/styles": { + "version": "4.10.0", + "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.10.0.tgz", + "integrity": "sha512-XPwiVTpd3rlnbfrgtEJ1eJJdFCXZkHxy8TrdieaTvwxNYj42VnnCyFzxYeNW9Lhj4V1oD8YtQ6S5Gie7bZDf7Q==", + "requires": { + "@babel/runtime": "^7.4.4", + "@emotion/hash": "^0.8.0", + "@material-ui/types": "^5.1.0", + "@material-ui/utils": "^4.9.6", + "clsx": "^1.0.4", + "csstype": "^2.5.2", + "hoist-non-react-statics": "^3.3.2", + "jss": "^10.0.3", + "jss-plugin-camel-case": "^10.0.3", + "jss-plugin-default-unit": "^10.0.3", + "jss-plugin-global": "^10.0.3", + "jss-plugin-nested": "^10.0.3", + "jss-plugin-props-sort": "^10.0.3", + "jss-plugin-rule-value-function": "^10.0.3", + "jss-plugin-vendor-prefixer": "^10.0.3", + "prop-types": "^15.7.2" + }, + "dependencies": { + "csstype": { + "version": "2.6.13", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.13.tgz", + "integrity": "sha512-ul26pfSQTZW8dcOnD2iiJssfXw0gdNVX9IJDH/X3K5DGPfj+fUYe3kB+swUY6BF3oZDxaID3AJt+9/ojSAE05A==" + } + } }, - "@emotion/unitless": { - "version": "0.7.5", - "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz", - "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==" + "@material-ui/system": { + "version": "4.9.14", + "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.9.14.tgz", + "integrity": "sha512-oQbaqfSnNlEkXEziDcJDDIy8pbvwUmZXWNqlmIwDqr/ZdCK8FuV3f4nxikUh7hvClKV2gnQ9djh5CZFTHkZj3w==", + "requires": { + "@babel/runtime": "^7.4.4", + "@material-ui/utils": "^4.9.6", + "csstype": "^2.5.2", + "prop-types": "^15.7.2" + }, + "dependencies": { + "csstype": { + "version": "2.6.13", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.13.tgz", + "integrity": "sha512-ul26pfSQTZW8dcOnD2iiJssfXw0gdNVX9IJDH/X3K5DGPfj+fUYe3kB+swUY6BF3oZDxaID3AJt+9/ojSAE05A==" + } + } + }, + "@material-ui/types": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/@material-ui/types/-/types-5.1.0.tgz", + "integrity": "sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A==" + }, + "@material-ui/utils": { + "version": "4.10.2", + "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.10.2.tgz", + "integrity": "sha512-eg29v74P7W5r6a4tWWDAAfZldXIzfyO1am2fIsC39hdUUHm/33k6pGOKPbgDjg/U/4ifmgAePy/1OjkKN6rFRw==", + "requires": { + "@babel/runtime": "^7.4.4", + "prop-types": "^15.7.2", + "react-is": "^16.8.0" + } }, "@mrmlnc/readdir-enhanced": { "version": "2.2.1", @@ -1582,8 +1666,7 @@ "@types/prop-types": { "version": "15.7.3", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz", - "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==", - "dev": true + "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==" }, "@types/q": { "version": "1.5.4", @@ -1595,7 +1678,6 @@ "version": "16.9.48", "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.48.tgz", "integrity": "sha512-4ykBVswgYitPGMXFRxJCHkxJDU2rjfU3/zw67f8+dB7sNdVJXsrwqoYxz/stkAucymnEEbRPFmX7Ce5Mc/kJCw==", - "dev": true, "requires": { "@types/prop-types": "*", "csstype": "^3.0.2" @@ -1610,6 +1692,14 @@ "@types/react": "*" } }, + "@types/react-transition-group": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.0.tgz", + "integrity": "sha512-/QfLHGpu+2fQOqQaXh8MG9q03bFENooTb/it4jr5kKaZlDQfWvjqWZg48AwzPVMBHlRuTRAY7hRHCEOXz5kV6w==", + "requires": { + "@types/react": "*" + } + }, "@typescript-eslint/eslint-plugin": { "version": "3.10.1", "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-3.10.1.tgz", @@ -2251,17 +2341,6 @@ "object.assign": "^4.1.0" } }, - "babel-plugin-styled-components": { - "version": "1.11.1", - "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.11.1.tgz", - "integrity": "sha512-YwrInHyKUk1PU3avIRdiLyCpM++18Rs1NgyMXEAQC33rIXs/vro0A+stf4sT0Gf22Got+xRWB8Cm0tw+qkRzBA==", - "requires": { - "@babel/helper-annotate-as-pure": "^7.0.0", - "@babel/helper-module-imports": "^7.0.0", - "babel-plugin-syntax-jsx": "^6.18.0", - "lodash": "^4.17.11" - } - }, "babel-plugin-syntax-jsx": { "version": "6.18.0", "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz", @@ -2946,11 +3025,6 @@ } } }, - "camelize": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz", - "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=" - }, "caniuse-lite": { "version": "1.0.30001118", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001118.tgz", @@ -3171,6 +3245,11 @@ "mimic-response": "^1.0.0" } }, + "clsx": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz", + "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==" + }, "coa": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/coa/-/coa-2.0.2.tgz", @@ -3447,11 +3526,6 @@ "urix": "^0.1.0" } }, - "css-color-keywords": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", - "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=" - }, "css-loader": { "version": "3.5.3", "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-3.5.3.tgz", @@ -3551,16 +3625,6 @@ "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==", "dev": true }, - "css-to-react-native": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz", - "integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==", - "requires": { - "camelize": "^1.0.0", - "css-color-keywords": "^1.0.0", - "postcss-value-parser": "^4.0.2" - } - }, "css-tree": { "version": "1.0.0-alpha.37", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz", @@ -3571,6 +3635,15 @@ "source-map": "^0.6.1" } }, + "css-vendor": { + "version": "2.0.8", + "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.8.tgz", + "integrity": "sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==", + "requires": { + "@babel/runtime": "^7.8.3", + "is-in-browser": "^1.0.2" + } + }, "css-what": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/css-what/-/css-what-3.3.0.tgz", @@ -3645,8 +3718,7 @@ "csstype": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.3.tgz", - "integrity": "sha512-jPl+wbWPOWJ7SXsWyqGRk3lGecbar0Cb0OvZF/r/ZU011R4YqiRehgkQ9p4eQfo9DSDLqLL3wHwfxeJiuIsNag==", - "dev": true + "integrity": "sha512-jPl+wbWPOWJ7SXsWyqGRk3lGecbar0Cb0OvZF/r/ZU011R4YqiRehgkQ9p4eQfo9DSDLqLL3wHwfxeJiuIsNag==" }, "currently-unhandled": { "version": "0.4.1", @@ -3968,6 +4040,15 @@ "esutils": "^2.0.2" } }, + "dom-helpers": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.0.tgz", + "integrity": "sha512-Ru5o9+V8CpunKnz5LGgWXkmrH/20cGKwcHwS4m73zIvs54CN9epEmT/HLqFJW3kXpakAFkEdzgy1hzlJe3E4OQ==", + "requires": { + "@babel/runtime": "^7.8.7", + "csstype": "^3.0.2" + } + }, "dom-serializer": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.0.1.tgz", @@ -5546,6 +5627,11 @@ } } }, + "hyphenate-style-name": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz", + "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==" + }, "icss-utils": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-4.1.1.tgz", @@ -5875,6 +5961,11 @@ "is-extglob": "^2.1.1" } }, + "is-in-browser": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz", + "integrity": "sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU=" + }, "is-natural-number": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/is-natural-number/-/is-natural-number-4.0.1.tgz", @@ -6095,6 +6186,84 @@ "minimist": "^1.2.5" } }, + "jss": { + "version": "10.4.0", + "resolved": "https://registry.npmjs.org/jss/-/jss-10.4.0.tgz", + "integrity": "sha512-l7EwdwhsDishXzqTc3lbsbyZ83tlUl5L/Hb16pHCvZliA9lRDdNBZmHzeJHP0sxqD0t1mrMmMR8XroR12JBYzw==", + "requires": { + "@babel/runtime": "^7.3.1", + "csstype": "^3.0.2", + "is-in-browser": "^1.1.3", + "tiny-warning": "^1.0.2" + } + }, + "jss-plugin-camel-case": { + "version": "10.4.0", + "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.4.0.tgz", + "integrity": "sha512-9oDjsQ/AgdBbMyRjc06Kl3P8lDCSEts2vYZiPZfGAxbGCegqE4RnMob3mDaBby5H9vL9gWmyyImhLRWqIkRUCw==", + "requires": { + "@babel/runtime": "^7.3.1", + "hyphenate-style-name": "^1.0.3", + "jss": "10.4.0" + } + }, + "jss-plugin-default-unit": { + "version": "10.4.0", + "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.4.0.tgz", + "integrity": "sha512-BYJ+Y3RUYiMEgmlcYMLqwbA49DcSWsGgHpVmEEllTC8MK5iJ7++pT9TnKkKBnNZZxTV75ycyFCR5xeLSOzVm4A==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.4.0" + } + }, + "jss-plugin-global": { + "version": "10.4.0", + "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.4.0.tgz", + "integrity": "sha512-b8IHMJUmv29cidt3nI4bUI1+Mo5RZE37kqthaFpmxf5K7r2aAegGliAw4hXvA70ca6ckAoXMUl4SN/zxiRcRag==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.4.0" + } + }, + "jss-plugin-nested": { + "version": "10.4.0", + "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.4.0.tgz", + "integrity": "sha512-cKgpeHIxAP0ygeWh+drpLbrxFiak6zzJ2toVRi/NmHbpkNaLjTLgePmOz5+67ln3qzJiPdXXJB1tbOyYKAP4Pw==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.4.0", + "tiny-warning": "^1.0.2" + } + }, + "jss-plugin-props-sort": { + "version": "10.4.0", + "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.4.0.tgz", + "integrity": "sha512-j/t0R40/2fp+Nzt6GgHeUFnHVY2kPGF5drUVlgkcwYoHCgtBDOhTTsOfdaQFW6sHWfoQYgnGV4CXdjlPiRrzwA==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.4.0" + } + }, + "jss-plugin-rule-value-function": { + "version": "10.4.0", + "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.4.0.tgz", + "integrity": "sha512-w8504Cdfu66+0SJoLkr6GUQlEb8keHg8ymtJXdVHWh0YvFxDG2l/nS93SI5Gfx0fV29dO6yUugXnKzDFJxrdFQ==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.4.0", + "tiny-warning": "^1.0.2" + } + }, + "jss-plugin-vendor-prefixer": { + "version": "10.4.0", + "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.4.0.tgz", + "integrity": "sha512-DpF+/a+GU8hMh/948sBGnKSNfKkoHg2p9aRFUmyoyxgKjOeH9n74Ht3Yt8lOgdZsuWNJbPrvaa3U4PXKwxVpTQ==", + "requires": { + "@babel/runtime": "^7.3.1", + "css-vendor": "^2.0.8", + "jss": "10.4.0" + } + }, "jsx-ast-utils": { "version": "2.4.1", "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-2.4.1.tgz", @@ -7740,6 +7909,11 @@ "ts-pnp": "^1.1.6" } }, + "popper.js": { + "version": "1.16.1-lts", + "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1-lts.tgz", + "integrity": "sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA==" + }, "posix-character-classes": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz", @@ -8067,6 +8241,17 @@ "prop-types": "^15.5.10" } }, + "react-transition-group": { + "version": "4.4.1", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz", + "integrity": "sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==", + "requires": { + "@babel/runtime": "^7.5.5", + "dom-helpers": "^5.0.1", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2" + } + }, "read-pkg": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz", @@ -8471,14 +8656,6 @@ "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==" }, - "sass": { - "version": "1.26.10", - "resolved": "https://registry.npmjs.org/sass/-/sass-1.26.10.tgz", - "integrity": "sha512-bzN0uvmzfsTvjz0qwccN1sPm2HxxpNI/Xa+7PlUEMS+nQvbyuEK7Y0qFqxlPHhiNHb1Ze8WQJtU31olMObkAMw==", - "requires": { - "chokidar": ">=2.0.0 <4.0.0" - } - }, "sass-loader": { "version": "8.0.2", "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-8.0.2.tgz", @@ -8626,11 +8803,6 @@ "kind-of": "^6.0.2" } }, - "shallowequal": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", - "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==" - }, "shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", @@ -9239,33 +9411,6 @@ "schema-utils": "^2.6.6" } }, - "styled-components": { - "version": "5.1.1", - "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.1.1.tgz", - "integrity": "sha512-1ps8ZAYu2Husx+Vz8D+MvXwEwvMwFv+hqqUwhNlDN5ybg6A+3xyW1ECrAgywhvXapNfXiz79jJyU0x22z0FFTg==", - "requires": { - "@babel/helper-module-imports": "^7.0.0", - "@babel/traverse": "^7.4.5", - "@emotion/is-prop-valid": "^0.8.8", - "@emotion/stylis": "^0.8.4", - "@emotion/unitless": "^0.7.4", - "babel-plugin-styled-components": ">= 1", - "css-to-react-native": "^3.0.0", - "hoist-non-react-statics": "^3.0.0", - "shallowequal": "^1.1.0", - "supports-color": "^5.5.0" - }, - "dependencies": { - "supports-color": { - "version": "5.5.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", - "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", - "requires": { - "has-flag": "^3.0.0" - } - } - } - }, "styled-jsx": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-3.3.0.tgz", @@ -9596,6 +9741,11 @@ "setimmediate": "^1.0.4" } }, + "tiny-warning": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz", + "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==" + }, "to-arraybuffer": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz", diff --git a/package.json b/package.json index 884149a..6ff942d 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,9 @@ "lint:fix": "npm run lint -- --fix" }, "dependencies": { + "@material-ui/core": "^4.11.0", + "@material-ui/icons": "^4.9.1", + "@material-ui/lab": "^4.0.0-alpha.56", "next": "^9.5.3-canary.23", "next-compose-plugins": "^2.2.0", "next-optimized-images": "^2.6.2", @@ -53,4 +56,4 @@ "pre-commit": "lint-staged" } } -} \ No newline at end of file +} diff --git a/webpack.config.js b/webpack.config.js new file mode 100644 index 0000000..3f43021 --- /dev/null +++ b/webpack.config.js @@ -0,0 +1,5 @@ +// webpack.config.js +{ + /\.svg$/; + ['@svgr/webpack']; +}