refactored agenda card on desktop

ucsddesignco · Nov 7, 2024 · 97f61a2 · 97f61a2
1 parent abd59a7
commit 97f61a2
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 91 deletions.
diff --git a/src/components/About/Agenda/Agenda.scss b/src/components/About/Agenda/Agenda.scss
@@ -6,6 +6,23 @@
     font-size: 30px;
     font-weight: bold;
   }
+
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-inline: 4rem;
+    margin-block: 15%;
+    max-width: 35vw;
+    transform: rotate(-0.5deg);
+
+    td {
+      border: 2px solid #ffffff;
+      text-align: center;
+      font-size: 25px;
+      color: #ffffff;
+      padding-block: 1.5rem;
+    }
+  }
 }
 
 @media only screen and (max-width: 468px) {

diff --git a/src/components/About/Agenda/Agenda.tsx b/src/components/About/Agenda/Agenda.tsx
@@ -60,58 +60,29 @@ export default function Agenda() {
             fill="white"
           />
         </g>
-        {times.map((time, index) => (
-          <g key={time}>
-            {/* Left cell for time */}
-            <rect
-              x="100"
-              y={130 + index * 50}
-              width="300"
-              height="50"
-              stroke="#FFFFFF"
-              strokeWidth="2"
-            />
-            <text
-              x="250"
-              y={155 + index * 50}
-              fontSize="14px"
-              fill="#FFFFFF"
-              fontFamily="Arial"
-              textAnchor="middle"
-              dominantBaseline="middle"
-            >
-              {time}
-            </text>
-
-            {/* Right cell for event */}
-            <rect
-              x="400"
-              y={130 + index * 50}
-              width="300"
-              height="50"
-              stroke="#FFFFFF"
-              strokeWidth="2"
-            />
-            <text
-              x="550"
-              y={155 + index * 50}
-              fontSize="14px"
-              fill="#FFFFFF"
-              fontFamily="Arial"
-              textAnchor="middle"
-              dominantBaseline="middle"
-            >
-              {events[index]}
-            </text>
-          </g>
-        ))}
+        <foreignObject width="100%" height="500">
+          <table>
+            <thead />
+            <tbody>
+              {times.map((time, index) => (
+                <tr key={time}>
+                  <td>
+                    <p>{time}</p>
+                  </td>
+                  <td>
+                    <p>{events[index]}</p>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </foreignObject>
       </svg>
       <svg
         width="323"
         height="436"
         viewBox="0 0 323 436"
         fill="none"
-        xmlns="http://www.w3.org/2000/svg"
         className="mobile-agenda-card"
       >
         <path
@@ -133,51 +104,19 @@ export default function Agenda() {
             <h3 className="mobile-title">Wednesday, Nov 13 | 12-5pm PST</h3>
           </div>
         </foreignObject>
-        {times.map((time, index) => (
-          <g key={time}>
-            {/* Left cell for time */}
-            <rect
-              x="25"
-              y={75 + index * 50}
-              width="125"
-              height="50"
-              stroke="#FFFFFF"
-              strokeWidth="2"
-            />
-            <text
-              x="85"
-              y={100 + index * 50}
-              fontSize="12px"
-              fill="#FFFFFF"
-              fontFamily="Arial"
-              textAnchor="middle"
-              dominantBaseline="middle"
-            >
-              {time}
-            </text>
-
-            {/* Right cell for event */}
-            <rect
-              x="150"
-              y={75 + index * 50}
-              width="150"
-              height="50"
-              stroke="#FFFFFF"
-              strokeWidth="2"
-            />
-            <text
-              x="225"
-              y={100 + index * 50}
-              fontSize="12px"
-              fill="#FFFFFF"
-              fontFamily="Arial"
-              textAnchor="middle"
-              dominantBaseline="middle"
-            >
-              {events[index]}
-            </text>
-          </g>
-        ))}
+        <foreignObject x="25" y="75" width="300" height="500">
+          <table>
+            <thead />
+            <tbody>
+              {times.map((time, index) => (
+                <tr key={time}>
+                  <td>{time}</td>
+                  <td>{events[index]}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </foreignObject>
       </svg>
     </div>
   );