From fee2e8cc6e5a87b8f068dc30e4e10086b63fc1df Mon Sep 17 00:00:00 2001
From: teabyte <yazan4code@gmail.com>
Date: Fri, 9 Feb 2024 20:21:49 +0300
Subject: [PATCH] fixing some styles

---
 components/AboutIcons.tsx          | 25 +++++++++++++++++++++++++
 components/Drawer.tsx              |  2 +-
 islands/Editor.tsx                 | 12 ++++++------
 islands/ThemeToggle.tsx            |  2 +-
 routes/about.tsx                   | 25 ++-----------------------
 routes/index.tsx                   |  8 +++++---
 static/{ => Images}/patternTop.svg |  0
 static/styles.css                  | 11 +++--------
 testcases/variables/intro.js       |  9 +++++----
 9 files changed, 48 insertions(+), 46 deletions(-)
 create mode 100644 components/AboutIcons.tsx
 rename static/{ => Images}/patternTop.svg (100%)

diff --git a/components/AboutIcons.tsx b/components/AboutIcons.tsx
new file mode 100644
index 0000000..845e467
--- /dev/null
+++ b/components/AboutIcons.tsx
@@ -0,0 +1,25 @@
+import IconBrandTelegram from "https://deno.land/x/tabler_icons_tsx@0.0.5/tsx/brand-telegram.tsx";
+import IconBrandGithub from "https://deno.land/x/tabler_icons_tsx@0.0.5/tsx/brand-github.tsx";
+
+export default function AboutIcons() {
+    return (
+        <div class="flex gap-2 justify-center">
+            <a
+                class="hover:opacity-75"
+                target="_blank"
+                title="تلغرام منصه نخله"
+                href="https://t.me/NakhlahJS"
+            >
+                <IconBrandTelegram />
+            </a>
+            <a
+                class="hover:opacity-75"
+                target="_blank"
+                title="سورس منصه نخله"
+                href="https://github.com/TeaByte/NakhlahJS"
+            >
+                <IconBrandGithub />
+            </a>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/components/Drawer.tsx b/components/Drawer.tsx
index 06dd660..44b548e 100644
--- a/components/Drawer.tsx
+++ b/components/Drawer.tsx
@@ -18,7 +18,7 @@ export default function Drawer(
       <div class="drawer-content">
         <label
           for="my-drawer-4"
-          class="drawer-button btn ghost-color"
+          class="drawer-button btn btn-active"
         >
           <IconLayoutSidebarLeftCollapse aria-hidden="true" />
         </label>
diff --git a/islands/Editor.tsx b/islands/Editor.tsx
index 555aa8d..4bc6884 100644
--- a/islands/Editor.tsx
+++ b/islands/Editor.tsx
@@ -41,6 +41,7 @@ export default function Editor(props: EditorProps) {
     window.editor.setValue("");
     setOutput("");
   }
+
   function handleCodeTest() {
     setTesting(true);
     const code: string = window.editor.getValue() || "";
@@ -158,19 +159,18 @@ export default function Editor(props: EditorProps) {
             تشغيل
           </button>
           <button
-            class="btn ghost-color grow"
+            class="btn btn-active grow"
             onClick={handleCodeClear}
           >
             مسح
           </button>
           <button
-            class={`btn grow border-0 ${
-              isTestPassed === undefined
-                ? "ghost-color"
-                : isTestPassed
+            class={`btn grow border-0 ${isTestPassed === undefined
+              ? "btn-active"
+              : isTestPassed
                 ? "btn-info bg-success hover:bg-[#9bc27a]"
                 : "btn-info bg-error hover:bg-[#ff6868]"
-            }`}
+              }`}
             onClick={handleCodeTest}
             disabled={testing}
           >
diff --git a/islands/ThemeToggle.tsx b/islands/ThemeToggle.tsx
index a971053..3c1ed25 100644
--- a/islands/ThemeToggle.tsx
+++ b/islands/ThemeToggle.tsx
@@ -41,7 +41,7 @@ export default function ThemeToggle() {
   };
 
   return (
-    <label class="swap swap-rotate btn ghost-color">
+    <label class="swap swap-rotate btn btn-active">
       <input
         type="checkbox"
         onChange={handleThemeChange}
diff --git a/routes/about.tsx b/routes/about.tsx
index 8d0d412..5d16bfb 100644
--- a/routes/about.tsx
+++ b/routes/about.tsx
@@ -1,9 +1,7 @@
 import { Head } from "$fresh/runtime.ts";
+import AboutIcons from "@/components/AboutIcons.tsx";
 import Footer from "../components/Footer.tsx";
 
-import IconBrandTelegram from "https://deno.land/x/tabler_icons_tsx@0.0.5/tsx/brand-telegram.tsx";
-import IconBrandGithub from "https://deno.land/x/tabler_icons_tsx@0.0.5/tsx/brand-github.tsx";
-
 export default function AboutPage() {
   return (
     <>
@@ -110,26 +108,7 @@ export default function AboutPage() {
                 </span>
               </p>
             </div>
-
-            <div class="flex gap-2">
-              <a
-                class="hover:opacity-75"
-                target="_blank"
-                title="تلغرام منصه نخله"
-                href="https://t.me/NakhlahJS"
-              >
-                <IconBrandTelegram />
-              </a>
-              <a
-                class="hover:opacity-75"
-                target="_blank"
-                title="سورس منصه نخله"
-                href="https://github.com/TeaByte/NakhlahJS"
-              >
-                <IconBrandGithub />
-              </a>
-            </div>
-
+            <AboutIcons />
             <a title="العودى الى الصفحة الرئيسية" href="/" class="underline">
               العودى الى الصفحة الرئيسية
             </a>
diff --git a/routes/index.tsx b/routes/index.tsx
index 9c6f6c3..ff42a18 100644
--- a/routes/index.tsx
+++ b/routes/index.tsx
@@ -6,6 +6,7 @@ import Footer from "../components/Footer.tsx";
 import { getNumberOfCourses } from "@/utils/course.ts";
 
 import IconArrowBigRightLines from "https://deno.land/x/tabler_icons_tsx@0.0.5/tsx/arrow-big-right-lines.tsx";
+import AboutIcons from "@/components/AboutIcons.tsx";
 
 interface Props {
   total: number;
@@ -41,7 +42,7 @@ export default function BlogIndexPage(
       </Head>
       <main className="h-[90vh] relative">
         <section class="w-fulloverflow-hidden">
-          <div class="container relative w-full px-8 pt-16 mx-auto lg:px-4 z-[999]">
+          <div class="container relative w-full px-8 pt-16 mx-auto lg:px-4 z-[5]">
             <div class="flex flex-col w-full mb-12 text-center">
               <h1 class="mb-4 text-6xl font-bold tracking-tighter lg:text-6xl">
                 <span class="text-yellow-500 font-bold">JS</span>
@@ -55,15 +56,16 @@ export default function BlogIndexPage(
                 مبتكرة وتفاعلية. يحتوي الموقع على سلسله دروس تفاعليه مع اختبارات
                 قصيره لتعزيز فهمك وتفاعلك.
               </p>
-              <div class="rounded-lg mt-4">
+              <div class="rounded-lg mt-4 mb-2">
                 <a
                   href="/courses"
-                  class="btn bg-base-content text-base-100 hover:bg-base-200 hover:text-base-content rounded-lg"
+                  class="px-8 text-lg btn bg-base-content text-base-100 hover:bg-base-200 hover:text-base-content rounded-box"
                 >
                   <IconArrowBigRightLines class="ml-2" />
                   ابدأ الآن
                 </a>
               </div>
+              <AboutIcons />
             </div>
           </div>
           <div className="bg-center text-blue-500 bg-no-repeat bg-cover bg-patternTop h-full w-full absolute bottom-0 left-0">
diff --git a/static/patternTop.svg b/static/Images/patternTop.svg
similarity index 100%
rename from static/patternTop.svg
rename to static/Images/patternTop.svg
diff --git a/static/styles.css b/static/styles.css
index 3413ecf..99d1e47 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -7,11 +7,6 @@
   --rounded-btn: 0.2rem;
 }
 
-.ghost-color {
-  background-color: oklch(var(--bc)/0.2) !important;
-  border-color: transparent !important;
-}
-
 .nav {
   border-color: oklch(var(--bc)/0.2) !important;
 }
@@ -199,11 +194,11 @@ body::-moz-scrollbar-thumb {
   cursor: pointer;
 }
 
-/* Ladning page and course page background images */
-[data-theme="dim"] .bg-patternTop, [data-theme="dim"] .bg-waves {
+/* Ladning page background image */
+[data-theme="dim"] {
   filter: invert(91%) sepia(9%) saturate(664%) hue-rotate(161deg) brightness(90%) contrast(84%);
 }
 
 .bg-patternTop {
-  background-image: url(../patternTop.svg);
+  background-image: url(../Images/patternTop.svg);
 }
diff --git a/testcases/variables/intro.js b/testcases/variables/intro.js
index 361ee3f..fbb21e9 100644
--- a/testcases/variables/intro.js
+++ b/testcases/variables/intro.js
@@ -1,16 +1,17 @@
-// check if code contain any var declaration
-const regex = /var\s+(\w+)\s*(?:=.*)?\s*;\s*/;
+const regex = /var\s+(\w+)\s*(?:=\s*[^;]+)?\s*;\s*/;
 if (!regex.test(code)) {
     isPass = false;
     msg = "لم يتم إنشاء متغير وتعيين قيمة له";
 } else {
     const matches = code.match(regex);
     const varName = matches[1];
-    if (code.includes(varName + " = ")) {
+    const assignRegex = new RegExp(varName + "\\s*=\\s*[^;]+;");
+
+    if (assignRegex.test(code)) {
         isPass = true;
         msg = "اجابة صحيحة";
     } else {
         isPass = false;
         msg = "لم يتم إنشاء متغير وتعيين قيمة له";
     }
-} 
+}
\ No newline at end of file