ADD New Pre-Commit hooks and Formatting code

frontend/app/components/CardList/CardList.jsx

@@ -3,7 +3,8 @@ import { ReleaseCard } from "@/app/components/ReleaseCard/ReleaseCard";
 export const CardList = (props) => {
   return props.data.map((item) => {
     return (
-      <ReleaseCard key={item.id}
+      <ReleaseCard
+        key={item.id}
         id={item.id}
         title={item.title_ru}
         poster={item.image}

frontend/app/components/ColorPicker/ColorPicker.jsx

@@ -20,37 +20,40 @@ export const ColorPicker = (props) => {
   const [mode, setMode] = useState(ui("mode"));
 
   return (
-      <dialog className="active left round bottom small" style={{blockSize: "unset"}}>
-        <h5>Выбор темы</h5>
-        <div className="grid center-align">
-          {colors.map((item) => {
-            return (
-              <button
-                key={item.color}
-                className={`circle border small ${item.color} s2`}
-                onClick={() => props.theme(item.hex)}
-              ></button>
-            );
-          })}
-        </div>
-        <div className="medium-divider"></div>
-        <nav>
-          <button
-            className={`circle small transparent`}
-            onClick={() => {
-              props.mode();
-              setMode(ui("mode"));
-            }}
-          >
-            {mode == "light" ? <i>dark_mode</i> : <i>light_mode</i>}
-          </button>
-          <button
-            className={`circle small transparent `}
-            onClick={() => props.setColorPicker(!props.colorPicker)}
-          >
-            <i>close</i>
-          </button>
-        </nav>
-      </dialog>
+    <dialog
+      className="active left round bottom small"
+      style={{ blockSize: "unset" }}
+    >
+      <h5>Выбор темы</h5>
+      <div className="grid center-align">
+        {colors.map((item) => {
+          return (
+            <button
+              key={item.color}
+              className={`circle border small ${item.color} s2`}
+              onClick={() => props.theme(item.hex)}
+            ></button>
+          );
+        })}
+      </div>
+      <div className="medium-divider"></div>
+      <nav>
+        <button
+          className={`circle small transparent`}
+          onClick={() => {
+            props.mode();
+            setMode(ui("mode"));
+          }}
+        >
+          {mode == "light" ? <i>dark_mode</i> : <i>light_mode</i>}
+        </button>
+        <button
+          className={`circle small transparent `}
+          onClick={() => props.setColorPicker(!props.colorPicker)}
+        >
+          <i>close</i>
+        </button>
+      </nav>
+    </dialog>
   );
 };

frontend/app/components/ColorPicker/ColorPicker.module.css

@@ -1,9 +1,9 @@
-.radiquum-pink{
-    background-color: #ffc8ff !important;
+.radiquum-pink {
+  background-color: #ffc8ff !important;
 }
-.fuxigen-blue{
-    background-color: #0087c7 !important;
+.fuxigen-blue {
+  background-color: #0087c7 !important;
+}
+.anixart-red {
+  background-color: #e54040 !important;
 }
-.anixart-red{
-    background-color: #e54040 !important;
-}

frontend/app/components/LogInNeeded/LogInNeeded.jsx

@@ -4,12 +4,10 @@ import Link from "next/link";
 
 export const LogInNeeded = (props) => {
   return (
-      <div className="absolute padding error center middle round">
-        <i className="extra">no_accounts</i>
-        <h5>Требуется авторизация</h5>
-        <p>
-          Для доступа к этой вкладке требуется авторизация в аккаунте anixart
-        </p>
-      </div>
+    <div className="absolute padding error center middle round">
+      <i className="extra">no_accounts</i>
+      <h5>Требуется авторизация</h5>
+      <p>Для доступа к этой вкладке требуется авторизация в аккаунте anixart</p>
+    </div>
   );
 };

frontend/app/components/NavigationRail/NavigationRail.jsx

@@ -60,7 +60,6 @@ export const NavigationRail = (props) => {
       >
         <i>palette</i>
       </button>
-
     </nav>
   );
 };

frontend/app/components/ReleaseCard/ReleaseCard.jsx

@@ -5,11 +5,18 @@ import Link from "next/link";
 export const ReleaseCard = (props) => {
   return (
     <Link href={`/release/${props.id}`} className="s3">
-      <article className="no-padding round fill" style={{width: 284, height: 508}}>
+      <article
+        className="no-padding round fill"
+        style={{ width: 284, height: 508 }}
+      >
         <img className="responsive large top-round" src={props.poster} />
         <div className="padding">
-          <h6>{`${props.title.substring(0, 36)}${[...props.title].length > 36 ? "..." : ""}`}</h6>
-          <p>{`${props.description}${[...props.description].length > 160 ? "..." : ""}`}</p>
+          <h6>{`${props.title.substring(0, 36)}${
+            [...props.title].length > 36 ? "..." : ""
+          }`}</h6>
+          <p>{`${props.description}${
+            [...props.description].length > 160 ? "..." : ""
+          }`}</p>
         </div>
       </article>
     </Link>