Calendar styles and server hydrogen assets

public/styles/styles.css

@@ -1,3 +1,13 @@
+/* apply a natural box layout model to all elements, but allowing components to change */
+html {
+  box-sizing: border-box;
+}
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
 /* Based on .SessionView from Hydrogen */
 .ArchiveView {
   /* this takes into account whether or not the url bar is hidden on mobile
@@ -61,8 +71,26 @@
 }
 
 .CalendarView_dayLink {
+  display: inline-block;
+  width: 100%;
+  padding: 2px 5px;
+
+  text-decoration: none;
+}
+
+.CalendarView_dayLink:hover {
+  background-color: rgba(141, 151, 165, 0.1);
 }
 
 .CalendarView_dayLink_active {
-  background-color: #f00;
+  background-color: #0dbd8b;
+  color: #ffffff;
+}
+
+.CalendarView_dayLink_active:hover {
+  background-color: #0a8f69;
+}
+
+.CalendarView_dayLink_disabled {
+  opacity: 0.5;
 }

server/routes/install-routes.js

@@ -3,6 +3,7 @@
 const assert = require('assert');
 const path = require('path');
 const urlJoin = require('url-join');
+const express = require('express');
 const asyncHandler = require('../lib/express-async-handler');
 const StatusError = require('../lib/status-error');
 
@@ -58,11 +59,18 @@ function parseArchiveRangeFromReq(req) {
 }
 
 function installRoutes(app) {
+  // We have to disable no-missing-require lint because it doesn't take into
+  // account `package.json`. `exports`, see
+  // https://github.com/mysticatea/eslint-plugin-node/issues/255
+  // eslint-disable-next-line node/no-missing-require
+  app.use(express.static(path.dirname(require.resolve('hydrogen-view-sdk/assets/'))));
+
   app.get('/hydrogen-styles.css', async function (req, res) {
     res.set('Content-Type', 'text/css');
     res.sendFile(require.resolve('hydrogen-view-sdk/style.css'));
   });
 
+  // Our own archive app styles
   app.get('/styles.css', async function (req, res) {
     res.set('Content-Type', 'text/css');
     res.sendFile(path.join(__dirname, '../../public/styles/styles.css'));

shared/CalendarView.js

@@ -101,6 +101,7 @@ class CalendarView extends TemplateView {
                     t.li(
                       {
                         className: { CalendarView_day: true },
+                        // Offset the first day of the month to the proper day of the week
                         style: i === 0 ? `grid-column-start: ${gridColumnStart};` : null,
                       },
                       [
@@ -109,6 +110,7 @@ class CalendarView extends TemplateView {
                             className: {
                               CalendarView_dayLink: true,
                               CalendarView_dayLink_active: isActive,
+                              CalendarView_dayLink_disabled: isDayInFuture,
                             },
                             // Disable navigation to future days
                             href: isDayInFuture ? null : vm.linkForDate(dayNumberDate),

shared/RightPanelContentView.js

@@ -15,7 +15,7 @@ class RightPanelContentView extends TemplateView {
       [
         t.div('test'),
         t.input({
-          type: 'date',
+          type: 'month',
           value: vm.calendarViewModel.activeDate.toISOString().split('T')[0],
         }),
         t.view(new CalendarView(vm.calendarViewModel)),