Merge pull request #20 from Parrit/ux_pass

darcie style pairing
Parrit · Jan 15, 2025 · 4d71adb · 4d71adb
2 parents 5c49fcf + 23f5ca4
commit 4d71adb
Show file tree

Hide file tree

Showing 8 changed files with 32 additions and 56 deletions.
diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml
@@ -30,16 +30,11 @@ jobs:
         id: netlify
         with:
           site_name: "parrit"
+          max_timeout: 180
 
       - name: Run Playwright tests
         run: URL=${{steps.netlify.outputs.url}} npx playwright test
 
-      # - name: Check filesystem for test results
-      #   if: ${{ !cancelled() }}
-      #   run: |
-      #     ls -ls
-      #     ls -la playwright-report/
-
       - name: Upload HTML report
         uses: actions/upload-artifact@v4
         if: ${{ !cancelled() }}

diff --git a/app/routes/project.$projectId/components/ui/BannerView.tsx b/app/routes/project.$projectId/components/ui/BannerView.tsx
@@ -22,7 +22,10 @@ export const BannerView: React.FC = () => {
     <div>
       <div className="ReactModal__Overlay" />
       <div className="fixed inset-0 flex items-center justify-center z-2">
-        <div className="relative bg-white rounded-lg shadow-lg p-8 max-w-3xl mx-auto">
+        <div
+          className="relative rounded-lg shadow-lg p-8 max-w-3xl mx-auto"
+          style={{ backgroundColor: "#E8F7FA" }}
+        >
           <div className="form-header">
             <button
               className="form-cancel float-right"
@@ -32,7 +35,10 @@ export const BannerView: React.FC = () => {
             </button>
           </div>
           <div className="flex items-center justify-center space-x-4">
-            <div className="flex items-center justify-center w-3/4 h-48 border-4 border-yellow-200 rounded-full">
+            <div
+              className="flex items-center justify-center w-3/4 h-48 border-4 border-yellow-200 bg-white"
+              style={{ borderRadius: "100%" }}
+            >
               <h2 className="text-5xl font-extrabold text-gray-600 text-center font-overlock">
                 {nextBanner.title}
               </h2>
@@ -50,7 +56,7 @@ export const BannerView: React.FC = () => {
           </div>
           <Button
             data-testid="banner-action"
-            className="button-red mt-6 px-20 py-4 float-left font-overlock text-2xl font-bold"
+            className="button-green mt-6 px-20 py-4 float-left font-overlock text-2xl font-extrabold"
             onClick={() => {
               acknowledgeBanner(nextBanner);
               if (nextBanner.action_url) {
@@ -60,7 +66,7 @@ export const BannerView: React.FC = () => {
           >
             {nextBanner.action_text}
           </Button>
-          <p className="mt-4 float-left">
+          <p className="mt-4 float-left text-xs">
             Have questions or interested in volunteering? Send a note to:{" "}
             <a
               href="mailto:[email protected]"

diff --git a/app/routes/project.$projectId/components/ui/Footer.tsx b/app/routes/project.$projectId/components/ui/Footer.tsx
@@ -4,7 +4,7 @@ import "~/styles/footer.css";
 export const Footer: React.FC = () => {
   return (
     <footer>
-      <div className="fake-copyright">copyright Parrit 2024</div>
+      <div className="fake-copyright">© Parrit 2025</div>
       <div className="footer-links">
         <a
           target="_blank"

diff --git a/app/routes/project.$projectId/components/ui/Header.tsx b/app/routes/project.$projectId/components/ui/Header.tsx
@@ -23,6 +23,16 @@ export const Header: React.FC = () => {
             DONATE
           </a>
         </h3>
+
+        <h3 className="feedback">
+          <a
+            href="https://goo.gl/forms/ZGqUyZDEDSWqZVBP2"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            feedback
+          </a>
+        </h3>
         <Form method="DELETE" action="/logout">
           <h3>
             <button
@@ -34,15 +44,6 @@ export const Header: React.FC = () => {
             </button>
           </h3>
         </Form>
-        <h3 className="feedback">
-          <a
-            href="https://goo.gl/forms/ZGqUyZDEDSWqZVBP2"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            feedback
-          </a>
-        </h3>
         <h3
           data-testid="historyButton"
           className={classes}

diff --git a/app/routes/project.$projectId/contexts/ProjectContext.tsx b/app/routes/project.$projectId/contexts/ProjectContext.tsx
@@ -102,8 +102,12 @@ export const ProjectProvider: React.FC<Props> = (props) => {
   useEffect(() => {
     if (historyFetcher.data && historyFetcher.state === "idle") {
       setPairingArrangements(historyFetcher.data);
+      if (pairingHistoryWorking) {
+        setSystemAlert("Hello. We just recorded your pairs.");
+      }
       setPairingHistoryWorking(false);
     }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [historyFetcher.data, historyFetcher.state]);
 
   useEffect(() => {
@@ -130,22 +134,6 @@ export const ProjectProvider: React.FC<Props> = (props) => {
     }
   }, [bannersFetcher.data, bannersFetcher.state]);
 
-  useEffect(() => {
-    if (
-      mutator.formAction === `/project/${projectId}/history` &&
-      mutator.data &&
-      mutator.state !== "submitting"
-    ) {
-      setSystemAlert("Hello. We just recorded your pairs.");
-    }
-  }, [
-    mutator.data,
-    mutator.formAction,
-    mutator.state,
-    projectId,
-    setSystemAlert,
-  ]);
-
   const nextBanner = useMemo(() => banners.at(0), [banners]);
 
   const findPairingBoardByRole = (role: Role): PairingBoard | undefined =>
@@ -325,8 +313,6 @@ export const ProjectProvider: React.FC<Props> = (props) => {
     );
   };
 
-  console.log("Project", project);
-
   const value = {
     findPairingBoardByRole,
     findPairingBoardByPerson,

diff --git a/app/styles/header.css b/app/styles/header.css
@@ -127,7 +127,7 @@ header .links > * {
     margin-left: 20px;
   }
 
-  header .links > *:hover {
+  header h3 *:hover {
     color: #58595b;
   }
 

diff --git a/app/styles/images/parrit-head.svg b/app/styles/images/parrit-head.svg
diff --git a/app/styles/inputs.css b/app/styles/inputs.css
@@ -43,7 +43,6 @@ h3 {
   min-height: 50px;
   border: none;
   border-radius: 3px;
-  font: normal normal 400 30px Raleway;
   font-size: 18px;
   color: white;
   letter-spacing: 0.5px;