Align calendar styling with rest of UI (#3514)

* Align calendar styling wit rest of UI

* spacing

* h1 padding

packages/page-calendar/src/Day.tsx

@@ -49,19 +49,21 @@ function Day ({ className, date, hasNextDay, now, scheduled, setNextDay, setPrev
 
   return (
     <div className={className}>
-      <div className='dayHeader'>
-        <Button
-          icon='chevron-left'
-          isDisabled={isToday}
-          onClick={setPrevDay}
-        />
+      <h1>
         <div>{date.getDate()} {monthRef.current[date.getMonth()]} {date.getFullYear()} {isToday && <DayTime />}</div>
-        <Button
-          icon='chevron-right'
-          isDisabled={!hasNextDay}
-          onClick={setNextDay}
-        />
-      </div>
+        <Button.Group>
+          <Button
+            icon='chevron-left'
+            isDisabled={isToday}
+            onClick={setPrevDay}
+          />
+          <Button
+            icon='chevron-right'
+            isDisabled={!hasNextDay}
+            onClick={setNextDay}
+          />
+        </Button.Group>
+      </h1>
       <div className='hoursContainer'>
         {HOURS.map((hour, index): React.ReactNode =>
           <DayHour
@@ -80,7 +82,6 @@ function Day ({ className, date, hasNextDay, now, scheduled, setNextDay, setPrev
 
 export default React.memo(styled(Day)`
   flex: 1;
-  margin-right: 1rem;
 
   .dayHeader {
     align-items: center;
@@ -89,8 +90,4 @@ export default React.memo(styled(Day)`
     justify-content: space-between;
     padding: 1rem 1.5rem 0;
   }
-
-  .hoursContainer {
-    margin-top: 1.25em;
-  }
 `);

packages/page-calendar/src/DayHour.tsx

@@ -82,7 +82,7 @@ export default React.memo(styled(DayHour)`
     line-height: 1;
     min-width: 5.5rem;
     opacity: 0.5;
-    padding: 0.25rem 1rem;
+    padding: 0.5rem 1rem;
     text-align: right;
     text-transform: uppercase;
     z-index: 1;

packages/page-calendar/src/Month.tsx

@@ -43,20 +43,22 @@ function Month ({ className, hasNextMonth, lastDay, now, scheduled, setDay, setN
 
   return (
     <div className={className}>
-      <div className={`calendar ${startClass}`}>
-        <div className='monthIndicator'>
+      <h1>
+        <div>{monthRef.current[dateMonth.getMonth()]} {dateMonth.getFullYear()}</div>
+        <Button.Group>
           <Button
             icon='chevron-left'
             isDisabled={isNowYear && (isOlderMonth || isNowMonth)}
             onClick={setPrevMonth}
           />
-          <div>{monthRef.current[dateMonth.getMonth()]} {dateMonth.getFullYear()}</div>
           <Button
             icon='chevron-right'
             isDisabled={!hasNextMonth}
             onClick={setNextMonth}
           />
-        </div>
+        </Button.Group>
+      </h1>
+      <div className={`calendar ${startClass}`}>
         <div className='dayOfWeek'>
           {dayOfWeekRef.current.map((day): React.ReactNode => (
             <div key={day}>{t(day)}</div>
@@ -83,9 +85,10 @@ function Month ({ className, hasNextMonth, lastDay, now, scheduled, setDay, setN
 export default React.memo(styled(Month)`
   flex: 0;
   max-width: max-content;
-  padding: 1rem 1.5rem;
 
   .calendar {
+    padding: 1.5rem 1.5rem 1rem;
+
     .dateGrid,
     .dayOfWeek {
       display: grid;
@@ -105,8 +108,6 @@ export default React.memo(styled(Month)`
     &.startSat .dateGrid .day:first-child { grid-column: 7 }
 
     .dayOfWeek {
-      margin-top: 1.25em;
-
       > * {
         font-size: 0.7em;
         font-weight: 500;

packages/page-calendar/src/index.tsx

@@ -116,14 +116,6 @@ function CalendarApp ({ basePath, className }: Props): React.ReactElement<Props>
         />
       </header>
       <div className='calendarFlex'>
-        <Day
-          date={dateState.dateSelected}
-          hasNextDay={hasNextDay}
-          now={now}
-          scheduled={scheduled}
-          setNextDay={_nextDay}
-          setPrevDay={_prevDay}
-        />
         <Month
           hasNextMonth={hasNextMonth}
           lastDay={lastDay}
@@ -134,6 +126,14 @@ function CalendarApp ({ basePath, className }: Props): React.ReactElement<Props>
           setPrevMonth={_prevMonth}
           state={dateState}
         />
+        <Day
+          date={dateState.dateSelected}
+          hasNextDay={hasNextDay}
+          now={now}
+          scheduled={scheduled}
+          setNextDay={_nextDay}
+          setPrevDay={_prevDay}
+        />
       </div>
     </main>
   );
@@ -146,9 +146,30 @@ export default React.memo(styled(CalendarApp)`
     flex-wrap: nowrap;
 
     > div {
-      background-color: #fff;
-      border: 1px solid #ddd;
-      border-radius: 0.25rem;
+      &+div {
+        margin-left: 1.5rem;
+      }
+
+      > div {
+        background-color: #fff;
+        border: 1px solid #ddd;
+        border-radius: 0.25rem;
+      }
+
+      .ui--Button-Group {
+        margin-top: 0;
+      }
+    }
+
+    h1 {
+      align-items: center;
+      display: flex;
+      justify-content: space-between;
+      padding: 0 0 0 1rem;
+
+      .ui--Button {
+        font-size: 1rem;
+      }
     }
   }
 `);