fixing some styles

TeaByte · Feb 9, 2024 · fee2e8c · fee2e8c
1 parent 9f2bc13
commit fee2e8c
Show file tree

Hide file tree

Showing 9 changed files with 48 additions and 46 deletions.
diff --git a/components/AboutIcons.tsx 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>
+    );
+}
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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 → static/Images/patternTop.svg b/static/patternTop.svg → static/Images/patternTop.svg
diff --git 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
@@ -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 = "لم يتم إنشاء متغير وتعيين قيمة له";
     }
-} 
+}