client: slight touches

Author: 0l1v3rr

client/src/components/layout/Header.tsx

@@ -12,8 +12,8 @@ const Header = () => {
       <div className="border-t border-gh-border pt-2">
         <h1 className="text-xl text-gh-text">Create your tech-stack card</h1>
         <p className="text-[.8rem] text-gh-text-secondary">
-          Create your Tech Stack card in a few easy steps using our{" "}
-          <span className="font-semibold text-gh-lime">options wizard</span>!
+          Create your Tech Stack card in a{" "}
+          <span className="font-semibold text-gh-lime">few easy steps</span>!
         </p>
       </div>
     </div>

client/src/components/ui/ColorInput.tsx

@@ -59,7 +59,7 @@ const ColorInput = forwardRef<HTMLInputElement, ColorInputProps>(
 
         <div
           className={cn(
-            "color-input absolute right-0 top-[-630%] z-30 flex translate-x-[77%] flex-col gap-1 overflow-hidden rounded-md border border-gh-border bg-gh-bg shadow-md transition-all duration-150",
+            "color-input absolute right-0 top-[-630%] z-30 flex translate-x-[77%] flex-col gap-1 overflow-hidden rounded-md border border-gh-border bg-gh-bg shadow-popup transition-all duration-150",
             isPickerActive
               ? "pointer-events-auto opacity-100"
               : "pointer-events-none opacity-0"

client/src/components/ui/FormWrapper.tsx

@@ -28,7 +28,7 @@ const FormWrapper = ({ title, children, className, ...props }: Props) => {
         e.currentTarget.reportValidity();
         nextPage();
       }}
-      className="h-full w-full rounded-md border border-gh-border"
+      className="h-full w-full rounded-md border border-gh-border shadow-card"
       {...props}
     >
       <div className="flex select-none items-center gap-4 rounded-tl-md rounded-tr-md border-b border-gh-border bg-gh-bg-secondary px-4 py-3 leading-none">

client/src/components/ui/PopupContainer.tsx

@@ -22,7 +22,7 @@ const PopupContainer = ({ isOpen, closePopup, children }: Props) => {
 
       <div
         className={cn(
-          "fixed left-1/2 top-1/2 z-50 flex w-96 -translate-x-1/2 -translate-y-1/2 flex-col gap-2 overflow-hidden rounded-md border border-gh-border bg-gh-bg shadow-sm transition-all duration-150",
+          "fixed left-1/2 top-1/2 z-50 flex w-96 -translate-x-1/2 -translate-y-1/2 flex-col gap-2 overflow-hidden rounded-md border border-gh-border bg-gh-bg shadow-popup transition-all duration-150",
           isOpen
             ? "pointer-events-auto scale-100 select-auto opacity-100"
             : "pointer-events-none scale-50 select-none opacity-0"

client/src/components/ui/Select.tsx

@@ -78,8 +78,8 @@ const Select: FC<SelectProps> = ({
 
       <div
         className={cn(
-          "absolute left-0 top-10 border border-gh-border bg-gh-bg-secondary",
-          "z-50 w-full overflow-hidden rounded-md shadow-md transition-all duration-100",
+          "absolute left-0 top-10 border border-gh-border bg-gh-bg-secondary shadow-popup",
+          "z-50 w-full overflow-hidden rounded-md transition-all duration-100",
           isActive
             ? "pointer-events-auto opacity-100"
             : "pointer-events-none opacity-0"

client/tailwind.config.js

@@ -36,6 +36,10 @@ export default {
         segoe: ["Segoe UI", "Tahoma", "Geneva", "Verdana", "sans-serif"],
         dejavu: ["DejaVu Sans", "sans-serif"],
       },
+      boxShadow: {
+        popup: "0 2px 10px rgba(0,0,0,.5)",
+        card: "1px 3px 10px rgba(0,0,0,.25)",
+      },
     },
   },
   plugins: [],