fix(app): fix focus styles (#488)

* fix(app): change focus style on CloseButton

* fix(app): change shadow color on focus on button in AddQuestionModal

Author: grzegorzpokorski

apps/app/src/components/AddQuestionModal.tsx

@@ -122,10 +122,20 @@ export const AddQuestionModal = (props: ComponentProps<typeof BaseModal>) => {
 				</div>
 				<WysiwygEditor value={content} onChange={setContent} />
 				<BaseModal.Footer>
-					<Button type="submit" variant="brandingInverse" disabled={disabled}>
+					<Button
+						type="submit"
+						variant="brandingInverse"
+						disabled={disabled}
+						className="focus:shadow-primary dark:focus:shadow-white"
+					>
 						{modalData ? "Edytuj" : "Dodaj"} pytanie
 					</Button>
-					<Button type="button" variant="branding" onClick={closeModal}>
+					<Button
+						type="button"
+						variant="branding"
+						onClick={closeModal}
+						className="dark:focus:shadow-white"
+					>
 						Anuluj
 					</Button>
 				</BaseModal.Footer>

apps/app/src/components/CloseButton/CloseButton.tsx

@@ -4,7 +4,7 @@ import { ButtonHTMLAttributes } from "react";
 export const CloseButton = ({ className, ...props }: ButtonHTMLAttributes<HTMLButtonElement>) => (
 	<button
 		className={twMerge(
-			"flex h-8 w-8 appearance-none items-center justify-center rounded-full text-4xl text-violet-200 transition-colors duration-100 hover:bg-primary hover:text-white focus:shadow-[0_0_10px] focus:shadow-primary focus:outline-none dark:hover:bg-violet-700",
+			"flex h-8 w-8 appearance-none items-center justify-center rounded-full text-4xl text-violet-200 transition-colors duration-100 hover:bg-primary hover:text-white focus:shadow-[0_0_10px] focus:shadow-primary focus:outline-none dark:hover:bg-violet-700 dark:focus:shadow-white",
 			className,
 		)}
 		{...props}