feat: style overhaul

client/package.json

@@ -50,6 +50,7 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@types/react-select": "^5.0.1",
     "@types/webappsec-credential-management": "^0.6.8"
   }
 }

client/src/components/App.tsx

@@ -1,17 +1,18 @@
 import React, { useEffect, useState } from "react";
 import { ToastContainer } from "react-toastify";
-import { toast } from "react-toastify";
 import axios from "axios";
 
 import Footer from "./Footer";
 import Form from "./Form";
+import Header from "./Header";
 
-import "../styles/App.css";
-
-import { BASE_URL } from "../utils";
+import { useThrottledToast } from "../hooks/useThrottledToast";
+import { BASE_URL } from "../utils/constants";
 
 const App: React.FC = () => {
-  const [version, setVersion] = useState<string>("");
+  const [version, setVersion] = useState<string | null>(null);
+
+  const throttledToast = useThrottledToast();
 
   useEffect(() => {
     const getStatus = async () => {
@@ -26,26 +27,19 @@ const App: React.FC = () => {
       } catch (error) {
         console.error(error);
 
-        toast.error(
+        throttledToast(
           "There seems to be an issue with the server. Try again later.",
-          {
-            position: "top-right",
-            autoClose: 5000,
-            hideProgressBar: false,
-            closeOnClick: true,
-            pauseOnHover: true,
-            draggable: true,
-            progress: undefined,
-          }
+          "error"
         );
       }
     };
 
     getStatus();
-  }, []);
+  }, [throttledToast]);
 
   return (
-    <div className="flex flex-col items-center">
+    <div className="flex flex-col items-center justify-center min-h-screen">
+      <Header />
       <Form />
       <Footer version={version} />
       <ToastContainer />

client/src/components/CountryCode.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import Select from "react-select";
+import Select, { StylesConfig } from "react-select";
 import { getCountries, getCountryCallingCode } from "libphonenumber-js";
 
 const countries = getCountries();
@@ -9,6 +9,56 @@ interface CountryOption {
   label: string;
 }
 
+// TODO(michaelfromyeg): move this
+export const customStyles: StylesConfig<CountryOption, false> = {
+  control: (provided, state) => ({
+    ...provided,
+    backgroundColor: "transparent",
+    color: "white",
+    borderColor: "white",
+    boxShadow: "none",
+    ":hover": {
+      borderColor: "white",
+    },
+    ...(state.isFocused && {
+      borderColor: "white",
+      boxShadow: "none",
+    }),
+  }),
+  input: (provided) => ({
+    ...provided,
+    color: "white",
+  }),
+  menu: (provided) => ({
+    ...provided,
+    backgroundColor: "#1e1e1e",
+  }),
+  option: (provided, state) => ({
+    ...provided,
+    backgroundColor: state.isSelected ? "#373737" : "transparent",
+    color: "white",
+    "&:hover": {
+      backgroundColor: "#003e54", // "#2a2a2a",
+    },
+  }),
+  placeholder: (provided) => ({
+    ...provided,
+    color: "white",
+  }),
+  singleValue: (provided) => ({
+    ...provided,
+    color: "white",
+  }),
+  indicatorsContainer: (provided) => ({
+    ...provided,
+    color: "white",
+  }),
+  indicatorSeparator: (provided) => ({
+    ...provided,
+    backgroundColor: "transparent",
+  }),
+};
+
 interface Props {
   setCountryCode: Function;
 }
@@ -29,32 +79,30 @@ const CountryCodeSelect: React.FC<Props> = (props: Props) => {
         label: `${countryCode} (+${phoneCode})`,
       };
     });
+
     setCountryOptions(options);
   }, []);
 
   const handleChange = (option: CountryOption | null) => {
     setSelectedOption(option);
 
     if (option) {
-      console.log(option.value);
       setCountryCode(option.value);
     }
   };
 
   return (
     <>
-      <label
-        htmlFor="countryCode"
-        className="block text-sm font-medium text-gray-700"
-      >
-        Country Code
+      <label htmlFor="countryCode" className="block mb-2 text-sm">
+        Country Code*
       </label>
       <Select
         id="countryCode"
         value={selectedOption}
         onChange={handleChange}
         options={countryOptions}
-        className="basic-single mb-4"
+        className="basic-single mb-3"
+        styles={customStyles}
         classNamePrefix="select"
         placeholder="Select Country"
       />

client/src/components/Download.tsx

@@ -18,12 +18,27 @@ const Download: React.FC<Props> = (props) => {
   };
 
   return (
-    <button
-      className="w-full py-2 mb-4 text-white bg-blue-500 rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
-      onClick={handleDownload}
-    >
-      Download your video
-    </button>
+    <>
+      <video
+        controls
+        playsInline
+        muted
+        disablePictureInPicture
+        disableRemotePlayback
+        loop
+        autoPlay
+      >
+        <source src={href} type="video/mp4" /> Your browser does not support the
+        video tag. The download button should work though!
+      </video>
+
+      <button
+        className="w-full mt-6 p-2 bg-white text-[#0f0f0f] font-semibold rounded-md disabled:opacity-50 disabled:cursor-not-allowed"
+        onClick={handleDownload}
+      >
+        Download your video
+      </button>
+    </>
   );
 };
 

client/src/components/Footer.tsx

@@ -1,42 +1,61 @@
 import React from "react";
 
 interface Props {
-  version: string;
+  version: string | null;
 }
 
 const Footer: React.FC<Props> = (props: Props) => {
   const { version } = props;
 
   return (
-    <footer className="text-center">
-      <div className="flex justify-center items-center space-x-1">
-        <div className="mb-0">a project from Michael DeMarco</div>
-        <span>|</span>
+    <footer className="flex flex-col justify-center items-center gap-4 mt-6">
+      <div className="text-center text-white">
+        <p className="max-w-sm">
+          If you get an error, refresh the page and try again. If errors
+          persist, feel free to{" "}
+          <a
+            href="https://github.com/michaelfromyeg/bereal-wrapped/issues/new"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            make an issue on GitHub
+          </a>
+          .
+        </p>
+      </div>
+      <div className="flex flex-row justify-center items-center space-x-1 text-white">
+        <a
+          className="text-link hover:text-link-dark focus:outline-none focus:ring-2 focus:ring-link focus:ring-opacity-50"
+          href="https://michaeldemar.co"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          by Michael DeMarco
+        </a>
+        <span>•</span>
         <a
+          className="text-link hover:text-link-dark focus:outline-none focus:ring-2 focus:ring-link focus:ring-opacity-50"
+          href="https://buymeacoffee.com/michaelfromyeg"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          buy me a coffee
+        </a>
+        <span>•</span>
+        <a
+          className="text-link hover:text-link-dark focus:outline-none focus:ring-2 focus:ring-link focus:ring-opacity-50"
           href="https://github.com/michaelfromyeg/bereal-wrapped"
           target="_blank"
           rel="noopener noreferrer"
-          className="hover:text-blue-300"
         >
           GitHub
         </a>
         {version && (
           <>
-            <span>|</span>
+            <span>•</span>
             <div className="mb-0">version {version}</div>
           </>
         )}
-        {/*
-          <span>|</span>
-          <a
-            href="https://yourdonationlink.com"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="hover:text-blue-300"
-          >
-            Donate
-          </a>
-        */}
       </div>
     </footer>
   );