Feature/app improvement

src/app/App.tsx

@@ -11,7 +11,10 @@ import LanguageProvider from '@shared/Context/LanguageContext';
 
 const App = () => {
   useEffect(() => {
-    const isLightTheme = localStorage.getItem(localStorageKeys.LIGHT_THEME);
+    const isLightTheme =
+      localStorage.getItem(localStorageKeys.LIGHT_THEME) ||
+      (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches);
+
     if (isLightTheme) {
       colorThemeSwitcher.setLight();
     }

src/components/Editor/lib/submitRequest.ts

@@ -6,7 +6,7 @@ async function sumbitRequest(currEndpoint: string, query: string, variables: str
 	const isHeadersEmpty = typeof headers !== 'string' || headers.trim().length === 0;
 	const headersToParse = isHeadersEmpty ? DEFAULT_HEADERS : headers;
 
-	if (!isHeadersEmpty && isValidJson(headersToParse)) {
+	if (!isHeadersEmpty && !isValidJson(headersToParse)) {
 		const msg = 'Invalid headers';
 		return msg; // TODO maybe show toaster instead
 	}

src/components/Footer/Footer.tsx

@@ -1,23 +1,23 @@
 import { FC, HTMLAttributes } from 'react';
 
-import ghIcon from '@assets/github.svg';
 import rsLogo from '@assets/rs_school.svg';
 import cn from '@shared/lib/helpers/cn';
+import GithubIcon from '@shared/ui/GithubIcon';
 
 const Footer: FC<HTMLAttributes<HTMLElement>> = ({ className }) => {
   return (
     <footer className={cn('grid items-center justify-center justify-items-center gap-1.5 text-on-surface', className)}>
       <div className="flex gap-3">
-        <a href="https://github.com/Quiddlee" className="flex gap-[7px]">
-          <img src={ghIcon} alt="" />
+        <a href="https://github.com/Quiddlee" className="flex items-center gap-[7px]">
+          <GithubIcon />
           <span>Quiddle</span>
         </a>
-        <a href="https://github.com/Tedzury" className="flex gap-[7px]">
-          <img src={ghIcon} alt="" />
+        <a href="https://github.com/Tedzury" className="flex items-center gap-[7px]">
+          <GithubIcon />
           <span>Tedzury</span>
         </a>
-        <a href="https://github.com/barrydilan" className="flex gap-[7px]">
-          <img src={ghIcon} alt="" />
+        <a href="https://github.com/barrydilan" className="flex items-center gap-[7px]">
+          <GithubIcon />
           <span>Barrydilan</span>
         </a>
       </div>

src/components/ViewList/context/ViewProvider.tsx

@@ -145,11 +145,16 @@ const ViewProvider = ({ children }: PropsWithChildren) => {
     const currView = views.find((view) => view.id === activeView);
 
     if (!currView) return;
-    if (!readUrl(urlParams.QUERY) || readUrl(urlParams.HEADERS) || readUrl(urlParams.VARIABLES)) return;
-
-    const query = readUrl(urlParams.QUERY) ?? '';
-    const headers = readUrl(urlParams.HEADERS) ?? '';
-    const variables = readUrl(urlParams.VARIABLES) ?? '';
+    if (
+      readUrl(urlParams.QUERY) === null ||
+      readUrl(urlParams.HEADERS) === null ||
+      readUrl(urlParams.VARIABLES) === null
+    )
+      return;
+
+    const query = readUrl(urlParams.QUERY);
+    const headers = readUrl(urlParams.HEADERS);
+    const variables = readUrl(urlParams.VARIABLES);
 
     currView.query = query;
     currView.headers = headers;

src/pages/LoginPage.tsx

@@ -56,7 +56,7 @@ export default function LoginPage() {
   }
 
   return (
-    <section className="grid h-screen w-full flex-col items-center justify-center gap-6 py-4 sm:mx-5 sm:py-8">
+    <section className="grid h-screen w-full animate-fade-in-section flex-col items-center justify-center gap-6 py-4 ease-emphasized-decelerate sm:mx-5 sm:py-8">
       <article
         ref={containerRef}
         className="h-full max-h-[524px] w-full overflow-auto rounded-[30px] bg-surface-container px-7 py-[60px] sm:min-w-[560px] sm:px-20"

src/pages/SignUpPage.tsx

@@ -53,7 +53,7 @@ export default function SignUpPage() {
   }
 
   return (
-    <section className="grid h-screen w-full items-center justify-center gap-6 py-4 sm:mx-5 sm:py-8">
+    <section className="grid h-screen w-full animate-fade-in-section items-center justify-center gap-6 py-4 ease-emphasized-decelerate sm:mx-5 sm:py-8">
       <article
         ref={containerRef}
         className="h-full max-h-[524px] w-full overflow-auto rounded-[30px] bg-surface-container px-7 py-[60px] sm:min-w-[560px] sm:px-20"

src/shared/ui/GithubIcon.tsx

@@ -0,0 +1,16 @@
+const GithubIcon = () => {
+  return (
+    <svg
+      className="fill-inherit"
+      width="11"
+      height="12"
+      viewBox="0 0 11 12"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M5.49966 0.50141C2.46247 0.50141 0 3.02615 0 6.14014C0 8.63175 1.57565 10.7449 3.76108 11.4906C4.03606 11.5427 4.13712 11.3679 4.13712 11.2192C4.13712 11.0846 4.13162 10.6405 4.12955 10.1697C2.59928 10.5109 2.27686 9.50434 2.27686 9.50434C2.02662 8.85236 1.6664 8.67897 1.6664 8.67897C1.1673 8.32867 1.70421 8.33642 1.70421 8.33642C2.25623 8.37589 2.54703 8.91721 2.54703 8.91721C3.03787 9.77923 3.83395 9.52972 4.14743 9.38593C4.19693 9.02153 4.33923 8.77272 4.49666 8.63175C3.27505 8.48937 1.99088 8.00585 1.99088 5.84481C1.99088 5.22948 2.20605 4.72623 2.55734 4.33152C2.50028 4.18914 2.31192 3.6161 2.61027 2.83937C2.61027 2.83937 3.07225 2.68783 4.12337 3.41734C4.56197 3.29258 5.03219 3.22985 5.49966 3.22773C5.96713 3.22985 6.43804 3.29258 6.87732 3.41734C7.92707 2.68783 8.38835 2.83937 8.38835 2.83937C8.6874 3.6161 8.49972 4.18984 8.44266 4.33152C8.79533 4.72623 9.00844 5.22948 9.00844 5.84481C9.00844 8.01078 7.72152 8.48726 6.49716 8.62682C6.69446 8.80162 6.87045 9.14487 6.87045 9.67068C6.87045 10.4249 6.86426 11.0324 6.86426 11.2178C6.86426 11.3679 6.96325 11.5434 7.24236 11.4885C9.42641 10.742 11 8.62893 11 6.13873C11 3.02474 8.53753 0.5 5.50034 0.5L5.49966 0.50141Z" />
+    </svg>
+  );
+};
+
+export default GithubIcon;