Better table styling

SU-SWS · Oct 11, 2023 · 0a81d24 · 0a81d24
1 parent cc18ff8
commit 0a81d24
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 8 deletions.
diff --git a/modules/stanford_events/pdb_components/mini-calendar/dist/islands/event-calendar.island.js b/modules/stanford_events/pdb_components/mini-calendar/dist/islands/event-calendar.island.js
diff --git a/modules/stanford_events/pdb_components/mini-calendar/src/event-calendar.island.tsx b/modules/stanford_events/pdb_components/mini-calendar/src/event-calendar.island.tsx
@@ -13,11 +13,12 @@ const MonthNav = styled.nav`
   display: flex;
   justify-content: space-between;
 `
-const Button = styled.button`
+const Button = styled.button<{ $isTile?: boolean }>`
   background: #f4f4f4;
   color: #b1040e;
   cursor: pointer;
   padding: 10px 5px;
+  width: ${props => props.$isTile ? '100%' : 'auto'};
 
   &:hover, &:focus {
     background: #2e2d29;
@@ -52,6 +53,18 @@ const List = styled.ul`
   }
 `
 
+const Table = styled.table`
+  width: 100%;
+  border-spacing: 10px;
+  border-collapse: separate;
+
+  td, th {
+    padding: 0;
+    text-align: center;
+    width: 14.2%;
+  }
+`
+
 const EventCalendar = () => {
   const apiUrl = '/jsonapi/node/stanford_event';
   const nextButtonRef = useRef(null);
@@ -153,8 +166,13 @@ const EventCalendar = () => {
         </Button>
       </MonthNav>
 
-      <table>
-        <caption aria-live="polite">{Moment(currentMonth).format('MMMM YYYY')}</caption>
+      <Table>
+        <caption
+          aria-live="polite"
+          aria-current={Moment(currentMonth).format('MMMM YYYY') === Moment().format('MMMM YYYY') ? 'date' : undefined}
+        >
+          {Moment(currentMonth).format('MMMM YYYY')}
+        </caption>
         <thead>
         <th aria-label="Sunday">Sun</th>
         <th aria-label="Monday">Mon</th>
@@ -181,7 +199,7 @@ const EventCalendar = () => {
           </tr>
         ))}
         </tbody>
-      </table>
+      </Table>
     </div>
   )
 }
@@ -228,7 +246,11 @@ const DayTile = ({date, events}) => {
   if (dayEvents.length) {
     return (
       <OutsideClickHandler onOutsideFocus={closeDialog}>
-        <Button onClick={openDialog} aria-label={Moment(date).format('MMM Do YYYY')}>
+        <Button
+          $isTile
+          onClick={openDialog} aria-label={Moment(date).format('MMM Do YYYY')}
+          aria-current={date.toLocaleDateString() === new Date().toLocaleDateString() ? 'date' : undefined}
+        >
           {date.getDate()}
         </Button>