changed color of button and removed border on inputs

treyrader11 · Jul 1, 2024 · 223b0cf · 223b0cf
1 parent 60466d8
commit 223b0cf
Show file tree

Hide file tree

Showing 3 changed files with 181 additions and 100 deletions.
diff --git a/src/components/Contact/components/ContactForm/index.jsx b/src/components/Contact/components/ContactForm/index.jsx
@@ -490,7 +490,6 @@ export default function ContactForm({ className }) {
   const [successMessage, setSuccessMessage] = useState("");
   const [errorMessage, setErrorMessage] = useState("");
   const [isActive, setIsActive] = useState(false);
-  // const [isActive, setIsActive] = useState(true);
   const buttonRef = useRef(null);
   const { to, fromTo, set } = gsap;
 
@@ -673,7 +672,7 @@ export default function ContactForm({ className }) {
 
   const dismissMessages = () => {
     setSuccessMessage(undefined);
-    setErrorMessage("");
+    setErrorMessage(undefined);
   };
 
   return (
@@ -736,11 +735,8 @@ export default function ContactForm({ className }) {
             "py-4",
             "px-6",
             "rounded-[30px]",
-            "outline-none",
-            "border-none",
             "resize-none",
-            "focus:outline-purple-400",
-            "outline-[1px]",
+            "focus:outline-secondary",
             "transition-all",
             "duration-300",
             "ease-in-out",
@@ -759,11 +755,64 @@ export default function ContactForm({ className }) {
           disabled={
             !values.name || !values.email || !values.subject || !values.message
           }
-          // onClick={onSubmit}
           ref={buttonRef}
           input={input}
           isActive={isActive}
         />
+        {/* <button
+          className={cn(
+            "[transform:translateZ(0)]",
+            "transition-[opacity,filter]",
+            "duration-[0.25s]",
+            "flex",
+            "justify-center",
+            "items-center",
+            "w-full",
+            "mx-auto",
+            "py-6"
+          )}
+        >
+          <span
+            className={cn(
+              // success determines animation/transform
+              "success",
+              "text-emerald-500",
+              "z-0",
+              "absolute",
+              "inset-x-0",
+              "top-2",
+              "-translate-x-3",
+              "flex",
+              "justify-normal",
+              "items-center",
+              // "[transform:translateX(-3px)_translateZ(0)]",
+              "opacity-0",
+              {
+                "opacity-100 [transform:translateX(-3px)_translateZ(0)]":
+                  isActive,
+              }
+            )}
+          >
+            <svg
+              // This is the check mark
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeDasharray={14}
+              className={cn(
+                // "trails",
+                "stroke-2",
+                "w-6",
+                "stroke-emerald-500",
+                "pointer-events-none"
+                // { " opacity-100": isActive }
+              )}
+              viewBox="0 0 16 16"
+            >
+              <polyline points="3.75 9 7 12 13 5" />
+            </svg>
+            Sent
+          </span>
+        </button> */}
       </form>
 
       <div className="relative">
@@ -808,92 +857,85 @@ export default function ContactForm({ className }) {
   );
 }
 
-const Submit = forwardRef(
-  ({ isActive, input, disabled, isLoading, onClick }, ref) => {
-    return (
-      <button
-        // onClick={onClick}
-        style={{ WebkitTapHighlightColor: "transparent" }}
-        ref={ref}
+const Submit = forwardRef(({ isActive, input, disabled, isLoading }, ref) => {
+  return (
+    <button
+      style={{ WebkitTapHighlightColor: "transparent" }}
+      ref={ref}
+      className={cn(
+        { active: isActive },
+        disabled &&
+          cn("disabled:grayscale-[65%]", "disabled:cursor-not-allowed"),
+        "text-sm",
+        "md:text-base",
+        "relative",
+        "py-2",
+        "min-4-[100px]",
+        "text-center",
+        "text-white",
+        "[transform:translateZ(0)]",
+        "transition-[opacity,filter]",
+        "duration-[0.25s]",
+        "flex",
+        "justify-center",
+        "items-center",
+        "w-full",
+        "mx-auto",
+        "py-6"
+      )}
+      // disabled={!input}
+      // disabled={disabled}
+      type="submit"
+    >
+      <span
+        className={cn("relative", "z-[4]", "flex", "items-center", "gap-2", {
+          "opacity-0": isActive,
+        })}
+      >
+        Send <VscSend />
+      </span>
+      <span
         className={cn(
-          { active: isActive },
-          disabled &&
-            cn("disabled:grayscale-[65%]", "disabled:cursor-not-allowed"),
-          "text-sm",
-          "md:text-base",
-          "relative",
-          "py-2",
-          "min-4-[100px]",
-          "text-center",
-          "text-white",
-          // "rounded-full",
-          "[transform:translateZ(0)]",
-          "transition-[opacity,filter]",
-          "duration-[0.25s]",
+          // success determines animation/transform
+          "success",
+          "text-emerald-500",
+          "z-0",
+          "absolute",
+          "inset-x-0",
+          "top-2",
+          "-translate-x-3",
           "flex",
           "justify-center",
           "items-center",
-          "w-full",
-          "mx-auto",
-          "py-6"
+          "opacity-0",
+          {
+            "opacity-100 [transform:translateX(-3px)_translateZ(0)]": isActive,
+          }
         )}
-        // disabled={!input}
-        // disabled={disabled}
-        type="submit"
       >
-        <span
-          className={cn("relative", "z-[4]", "flex", "items-center", "gap-2", {
-            "opacity-0": isActive,
-          })}
-        >
-          Send <VscSend />
-        </span>
-
-        <span
+        <svg
+          // This is the check mark
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeDasharray={14}
           className={cn(
-            // success determines animation/transform
-            "success",
-            "text-emerald-500",
-            "z-0",
-            "absolute",
-            "inset-x-0",
-            "top-2",
-            "-translate-x-3",
-            "flex",
-            "justify-normal",
-            "items-center",
-            // "[transform:translateX(-3px)_translateZ(0)]",
-            "opacity-0",
-            {
-              "opacity-100 [transform:translateX(-3px)_translateZ(0)]":
-                isActive,
-            }
+            // "trails",
+            "stroke-2",
+            "w-6",
+            "stroke-emerald-500",
+            "pointer-events-none"
+            // { " opacity-100": isActive }
           )}
+          viewBox="0 0 16 16"
         >
-          <svg
-            // This is the check mark
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeDasharray={14}
-            className={cn(
-              // "trails",
-              "stroke-2",
-              "w-6",
-              "stroke-emerald-500",
-              "pointer-events-none"
-              // { " opacity-100": isActive }
-            )}
-            viewBox="0 0 16 16"
-          >
-            <polyline points="3.75 9 7 12 13 5" />
-          </svg>
-          Sent
-        </span>
-        <PaperPlane isActive={isActive} />
-      </button>
-    );
-  }
-);
+          <polyline points="3.75 9 7 12 13 5" />
+        </svg>
+        Sent
+      </span>
+      <PaperPlane isActive={isActive} />
+    </button>
+  );
+});
 
 Submit.displayName = "Submit";
 
@@ -920,3 +962,48 @@ function ResponseIcon({ isSuccess = false, className }) {
     </div>
   );
 }
+
+// function Checkmark({ isActive, className }) {
+//   return (
+//     <div
+//       className={cn(
+//         // success determines animation/transform
+//         "success",
+//         "text-emerald-500",
+//         "z-0",
+//         "absolute",
+//         "inset-x-0",
+//         "top-2",
+//         "-translate-x-3",
+//         "flex",
+//         "justify-normal",
+//         "items-center",
+//         // "[transform:translateX(-3px)_translateZ(0)]",
+//         "opacity-0",
+//         {
+//           "opacity-100 [transform:translateX(-3px)_translateZ(0)]": isActive,
+//         },
+//         className
+//       )}
+//     >
+//       <svg
+//         // This is the check mark
+//         strokeLinecap="round"
+//         strokeLinejoin="round"
+//         strokeDasharray={14}
+//         className={cn(
+//           // "trails",
+//           "stroke-2",
+//           "w-6",
+//           "stroke-emerald-500",
+//           "pointer-events-none"
+//           // { " opacity-100": isActive }
+//         )}
+//         viewBox="0 0 16 16"
+//       >
+//         <polyline points="3.75 9 7 12 13 5" />
+//       </svg>
+//       Sent
+//     </div>
+//   );
+// }
diff --git a/src/components/Input/index.jsx b/src/components/Input/index.jsx
@@ -1,16 +1,10 @@
 import { cn } from "@/lib/utils";
 
-export default function Input({
-  className,
-  //  type,
-  placeholder,
-  ...attributes
-}) {
+export default function Input({ className, placeholder, ...attributes }) {
   return (
     <input
       {...attributes}
       placeholder={placeholder}
-      // type={type}
       className={cn(
         "w-full",
         "py-4",
@@ -19,7 +13,7 @@ export default function Input({
         "border-none",
         "resize-none",
         "bg-dark-400",
-        "focus:outline-purple-400",
+        "focus:outline-secondary",
         "outline-[1px]",
         "transition-all",
         "duration-300",

diff --git a/src/globals.css b/src/globals.css
@@ -137,10 +137,10 @@ body {
   top: calc(2px / -1);
   left: calc(2px / -1);
 
-  background: linear-gradient(to right, purple 0%, purple 100%),
-    linear-gradient(to top, purple 50%, transparent 50%),
-    linear-gradient(to top, purple 50%, transparent 50%),
-    linear-gradient(to right, purple 0%, purple 100%),
+  background: linear-gradient(to right, #934E00 0%, #934E00 100%),
+    linear-gradient(to top, #934E00 50%, transparent 50%),
+    linear-gradient(to top, #934E00 50%, transparent 50%),
+    linear-gradient(to right, #934E00 0%, #934E00 100%),
     linear-gradient(to left, #934e00 0%, #934e00 100%);
   background-size: 100% 2px, 2px 200%, 2px 200%, 0% 2px, 0% 2px;
   background-position: 50% 100%, 0% 0%, 100% 0%, 100% 0%, 0% 0%;
@@ -173,16 +173,16 @@ body {
   }
 
   .newsletter-form {
-    --primary: #8c4ec2;
-    --primary-dark: #6b21a8;
+    --primary: #934E00;
+    --primary-dark: #934E00;
     --primary-darkest: #3b0764;
     --input-placeholder: #a6accd;
     --input-text: #646b8c;
     --border-default: #e1e6f9;
-    --border-active: #8c4ec2;
+    --border-active: #934E00;
     --background: #fff;
     --button-text: #ffffff;
-    --success: #8c4ec2;
+    --success: #934E00;
     --trails: rgb(140, 78, 194, 0.15);
   }