chore: style contact table

bcgov · Dec 19, 2024 · a2de9cd · a2de9cd
1 parent 00e5776
commit a2de9cd
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 42 deletions.
diff --git a/frontend/src/components/RecResource/Contact.tsx b/frontend/src/components/RecResource/Contact.tsx
@@ -2,18 +2,29 @@ const Contact = () => {
   return (
     <section>
       <h2 className="section-heading">Contact</h2>
-      <table className="table">
-        <tbody>
-          <tr>
-            <th>Site Operator</th>
-            <td>Placeholder</td>
-          </tr>
-          <tr>
-            <th>Phone</th>
-            <td>Placeholder</td>
-          </tr>
-        </tbody>
-      </table>
+      <figure className="table">
+        <table>
+          <tbody>
+            <tr>
+              <th>Site Operator</th>
+              <td>
+                <p>Placeholder</p>
+              </td>
+            </tr>
+            <tr>
+              <th>
+                General questions and feedback for Recreation Sites & Trails BC
+              </th>
+              <td>
+                <p>We answer emails weekdays from 9 am to 5 pm Pacific Time.</p>
+                <p>
+                  <a href="">Contact Us</a>
+                </p>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </figure>
     </section>
   );
 };

diff --git a/frontend/src/styles/components/RecResource.scss b/frontend/src/styles/components/RecResource.scss
@@ -1,12 +1,11 @@
 @import '@/styles/variables.scss';
 
-main {
-  max-width: 100vw;
-  padding: 0;
-}
-
 .rec-resource-container {
-  with: 100%;
+  width: 100%;
+
+  section {
+    margin-bottom: 64px;
+  }
 }
 
 .bg-container {
@@ -31,19 +30,3 @@ main {
     margin-left: 8px;
   }
 }
-
-h2.section-heading {
-  position: relative;
-  padding-bottom: 2rem;
-  &:after {
-    position: absolute;
-    content: '';
-    height: 3px;
-    bottom: 9px;
-    margin: 0;
-    left: 0;
-    right: 0;
-    width: 5rem;
-    background: #fdb813;
-  }
-}
diff --git a/frontend/src/styles/global.scss b/frontend/src/styles/global.scss
@@ -70,6 +70,7 @@ main {
   flex-grow: 1;
   margin: 0 auto;
   min-height: 100%;
+  padding: 0;
 }
 
 .line {
@@ -90,3 +91,64 @@ h1,
 h2 {
   color: $colorBlue;
 }
+
+h2.section-heading {
+  position: relative;
+  padding-bottom: 2rem;
+  &:after {
+    position: absolute;
+    content: '';
+    height: 3px;
+    bottom: 9px;
+    margin: 0;
+    left: 0;
+    right: 0;
+    width: 5rem;
+    background: #fdb813;
+  }
+}
+
+tr,
+th,
+td {
+  padding: 1rem;
+}
+
+figure.table {
+  color: $colorGrey;
+  table {
+    width: 100%;
+    tr {
+      &:first-of-type {
+        th,
+        td {
+          border-top: 1px solid $colorGreyLight;
+        }
+      }
+      & > :first-child {
+        background: $colorBrownLight;
+      }
+    }
+    th,
+    td {
+      border-bottom: 1px solid $colorGreyLight;
+    }
+    th {
+      background: $colorBrownLight;
+    }
+  }
+
+  &.horizontal-heading {
+    overflow-x: auto;
+    table {
+      min-width: 600px;
+    }
+    &::-webkit-scrollbar {
+      height: 5px;
+    }
+    &::-webkit-scrollbar-thumb {
+      background-color: rgba($colorBlack, 0.2);
+      border-radius: 5px;
+    }
+  }
+}
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
@@ -16,14 +16,7 @@
     "strictNullChecks": true,
     "noEmit": true,
     "jsx": "react-jsx",
-    "types": [
-      "vite/client",
-      "vitest/globals",
-      "cypress",
-      "node",
-      "cypress-file-upload",
-      "@testing-library/cypress"
-    ],
+    "types": ["vite/client", "vitest/globals", "node"],
     "baseUrl": "./",
     "paths": {
       "@": ["src"],