client: the new card now supports auto as a value

Author: 0l1v3rr

client/src/components/form/PageSix.tsx

@@ -11,12 +11,16 @@ const PageSix = () => {
     <FormWrapper title="Badges">
       <P>
         On this page you can customize the most important part of the card: the
-        badges. You set the number of lines you want on the previous page.
+        badges. You have already set the number of lines you want on the
+        previous page.
       </P>
 
       <Quote variant="Info">
-        You can drag and drop the badges to rearrange them or double-click to
-        delete them.
+        &minus; You can drag and drop the badges to rearrange them or
+        double-click to delete them.
+        <br />
+        &minus; To infer the original icon color, you can type "auto" instead of
+        picking a color from the color picker.
       </Quote>
 
       {card.lines.map((line) => (

client/src/components/lines/NewBadge.tsx

@@ -86,14 +86,16 @@ const NewBadge = ({ addBadge }: Props) => {
           value={color}
           onChange={(e) => setColor(e.target.value)}
           setColor={(c) => setColor(c)}
-          placeholder={file === null ? "#58a6ff" : ""}
+          placeholder={file === null ? "#58a6ff" : "auto"}
+          canBeAuto={true}
         />
       </InputWrapper>
 
       <Button
         disabled={
           !(file === null
-            ? HEX_COLOR_REGEX.test(color) && ICON_REGEX.test(icon)
+            ? (HEX_COLOR_REGEX.test(color) || color.toLowerCase() === "auto") &&
+              ICON_REGEX.test(icon)
             : true)
         }
         aria-label="Add Badge"

client/src/components/ui/ColorInput.tsx

@@ -11,10 +11,22 @@ import { BsArrowRepeat } from "react-icons/bs";
 interface ColorInputProps
   extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
   setColor: (color: string) => void;
+  canBeAuto?: boolean;
 }
 
 const ColorInput = forwardRef<HTMLInputElement, ColorInputProps>(
-  ({ className, required, value = "", disabled, setColor, ...props }, ref) => {
+  (
+    {
+      className,
+      required,
+      value = "",
+      disabled,
+      setColor,
+      canBeAuto = false,
+      ...props
+    },
+    ref
+  ) => {
     value = value.toString();
 
     const [isPickerActive, setIsPickerActive] = useState(false);
@@ -33,7 +45,9 @@ const ColorInput = forwardRef<HTMLInputElement, ColorInputProps>(
           onFocus={() => setIsPickerActive(true)}
           type="text"
           required={required}
-          pattern={`^${required ? "" : "[]{0}|"}#[a-fA-F0-9]{6}$`}
+          pattern={`^${required ? "" : "[]{0}|"}${
+            canBeAuto ? "auto|" : ""
+          }#[a-fA-F0-9]{6}$`}
           className={cn(
             "z-10 rounded-br-none rounded-tr-none [border-right:none!important]",
             isPickerActive ? "outline-2 outline-gh-blue" : ""

client/src/const.ts

@@ -1,6 +1,6 @@
 import { Card } from "./types";
 
-export const ICON_REGEX = /^[a-zA-Z-_ ]{2,32}$/;
+export const ICON_REGEX = /^[a-zA-Z-_. ]{2,32}$/;
 export const HEX_COLOR_REGEX = /#[a-fA-F0-9]{6}$/;
 export const INITIAL_CARD: Card = {
   title: "My Tech Stack",