Merge branch 'develop' of github.com:typeofweb/polskifrontend into table

Author: typeofweb

components/UpdateBlogSection/UpdateBlogForm.tsx

@@ -28,6 +28,10 @@ export const UpdateBlogForm = memo<Props>(({ blogId }) => {
   const [isValid, setIsValid] = useState(false);
   const formRef = useRef<HTMLFormElement | null>(null);
 
+  useEffect(() => {
+    setIsValid(formRef.current?.checkValidity() ?? false);
+  }, [fields]);
+
   useEffect(() => {
     if (queryStatus === 'success' && blog) {
       setFields(blog);
@@ -36,7 +40,6 @@ export const UpdateBlogForm = memo<Props>(({ blogId }) => {
 
   const handleChange: ChangeEventHandler<HTMLInputElement> = useCallback(({ currentTarget }) => {
     setFields((fields) => ({ ...fields, [currentTarget.name]: currentTarget.value }));
-    setIsValid(formRef.current?.checkValidity() ?? false);
   }, []);
 
   const handleInputCheckboxChange: ChangeEventHandler<HTMLInputElement> = useCallback(
@@ -118,7 +121,6 @@ export const UpdateBlogForm = memo<Props>(({ blogId }) => {
           name="isPublic"
           onChange={handleInputCheckboxChange}
           type="checkbox"
-          required
         />
         Czy blog ma być pokazany na stronie?
       </label>

components/UpdateBlogSection/updateBlogForm.module.scss

@@ -41,6 +41,11 @@
     display: flex;
     margin-right: 0.75rem;
   }
+
+  &:read-only {
+    background-color: var(--reddish-white);
+    border: 1px solid var(--reddish-white);
+  }
 }
 
 .submitButton {

global.scss

@@ -9,6 +9,7 @@
   --gray-text: #757575;
   --gray-dark-border: #999999;
   --white: #ffffff;
+  --reddish-white: #faf9f8;
   --black: #000000;
   --black-lighter: #{lighten(#000000, 20%)};
   --error-color: #f16262;