fix: color defaults, qr code not showing in carousel, color picker responsiveness (again)

src/components/mii/list/index.tsx

@@ -197,7 +197,7 @@ export default async function MiiList({ searchParams, userId, inLikesPage }: Pro
 						<Carousel
 							images={[
 								`/mii/${mii.id}/image?type=mii`,
-								...(platform === "THREE_DS" ? [`/mii/${mii.id}/image?type=qr-code`] : []),
+								...(mii.platform === "THREE_DS" ? [`/mii/${mii.id}/image?type=qr-code`] : []),
 								...Array.from({ length: mii.imageCount }, (_, index) => `/mii/${mii.id}/image?type=image${index}`),
 							]}
 						/>

src/components/submit-form/mii-editor/color-picker.tsx

@@ -64,7 +64,7 @@ export default function ColorPicker({ disabled, color, setColor, tab = "hair" }:
 
 			{isOpen && (
 				<div
-					className={`absolute inset-0 z-10 w-full p-0.5 bg-orange-100 rounded-lg transition-transform duration-500 overflow-x-auto
+					className={`absolute inset-0 z-10 w-full p-0.5 bg-orange-100 rounded-lg transition-transform duration-500 overflow-x-auto flex
 						 ${isVisible ? "opacity-100" : "opacity-0"}`}
 					style={{
 						transition: isVisible
@@ -72,7 +72,7 @@ export default function ColorPicker({ disabled, color, setColor, tab = "hair" }:
 							: "transform 1000ms cubic-bezier(0.55, 0, 0.45, 1), opacity 300ms",
 					}}
 				>
-					<div className="w-max flex items-center">
+					<div className="w-max flex items-center justify-center grow shrink-0">
 						<div className="mr-8 flex flex-col gap-0.5">
 							{COLORS.slice(getExtraSlice().start, getExtraSlice().end).map((c, i) => {
 								const actualIndex = i + getExtraSlice().start;
@@ -113,7 +113,7 @@ export default function ColorPicker({ disabled, color, setColor, tab = "hair" }:
 							))}
 						</div>
 
-						<button type="button" onClick={close} className="h-full w-16 ml-4 cursor-pointer transition-transform hover:scale-115 active:scale-90">
+						<button type="button" onClick={close} className="h-4/5 w-16 ml-4 cursor-pointer transition-transform hover:scale-115 active:scale-90">
 							<Icon icon={"tabler:chevron-right"} className="text-4xl" />
 						</button>
 					</div>

src/components/submit-form/mii-editor/tabs/eyebrows.tsx

@@ -8,7 +8,7 @@ interface Props {
 }
 
 export default function EyebrowsTab({ instructions }: Props) {
-	const [color, setColor] = useState(0);
+	const [color, setColor] = useState(3);
 
 	return (
 		<>

src/components/submit-form/mii-editor/tabs/eyes.tsx

@@ -21,7 +21,7 @@ export default function EyesTab({ instructions }: Props) {
 	const [tab, setTab] = useState(0);
 
 	// One type/color state per tab
-	const [colors, setColors] = useState<number[]>(Array(TABS.length).fill(0));
+	const [colors, setColors] = useState<number[]>(Array(TABS.length).fill(122));
 
 	const currentTab = TABS[tab];
 

src/components/submit-form/mii-editor/tabs/glasses.tsx

@@ -8,8 +8,8 @@ interface Props {
 }
 
 export default function GlassesTab({ instructions }: Props) {
-	const [ringColor, setRingColor] = useState(0);
-	const [shadesColor, setShadesColor] = useState(0);
+	const [ringColor, setRingColor] = useState(133);
+	const [shadesColor, setShadesColor] = useState(133);
 
 	return (
 		<>

src/components/submit-form/mii-editor/tabs/hair.tsx

@@ -10,7 +10,7 @@ type Tab = "sets" | "bangs" | "back";
 
 export default function HairTab({ instructions }: Props) {
 	const [tab, setTab] = useState<Tab>("sets");
-	const [color, setColor] = useState(0);
+	const [color, setColor] = useState(3);
 	const [subColor, setSubColor] = useState<number | null>(null);
 	const [subColor2, setSubColor2] = useState<number | null>(null);
 	const [style, setStyle] = useState<number | null>(null);

src/components/submit-form/mii-editor/tabs/lips.tsx

@@ -8,7 +8,7 @@ interface Props {
 }
 
 export default function LipsTab({ instructions }: Props) {
-	const [color, setColor] = useState(0);
+	const [color, setColor] = useState(128);
 	const [hasLipstick, setHasLipstick] = useState(false);
 
 	return (

src/components/submit-form/mii-editor/tabs/other.tsx

@@ -23,7 +23,7 @@ export default function OtherTab({ instructions }: Props) {
 	const [isFlipped, setIsFlipped] = useState(false);
 
 	// One type/color state per tab
-	const [colors, setColors] = useState<number[]>(Array(TABS.length).fill(0));
+	const [colors, setColors] = useState<number[]>([0, 0, 0, 0, 0, 0, 139, 0]);
 
 	const currentTab = TABS[tab];
 
@@ -60,7 +60,7 @@ export default function OtherTab({ instructions }: Props) {
 			</div>
 
 			<div className="absolute inset-0 flex flex-col justify-center items-center">
-				<ColorPicker disabled={tab === 0 || tab === 1} color={colors[tab]} setColor={setColor} />
+				<ColorPicker disabled={tab === 0 || tab === 1} color={colors[tab]} setColor={setColor} tab={tab === 6 ? "eyeliner" : "hair"} />
 				<NumberInputs target={instructions.current.other[currentTab.name]} />
 
 				{tab === 3 && (