jordanopensource · thread-koder · Jun 19, 2025 · May 11, 2025 · May 13, 2025 · May 13, 2025
diff --git a/assets/css/global.css b/assets/css/global.css
@@ -1,5 +1,5 @@
 body {
-  @apply antialiased m-0;
+  @apply antialiased m-0 px-20 max-lg:px-5;
   @apply font-LTZarid;
 }
 
@@ -14,10 +14,6 @@ a::selection {
   @apply underline;
 }
 
-a {
-  @apply text-sm;
-}
-
 button,
 a {
   @apply font-IBMPlexSansArabic;
@@ -52,7 +48,7 @@ a {
 /* Homepage */
 main {
   section {
-    @apply py-20 max-sm:py-5;
+    @apply py-20 max-lg:py-10;
     &:not(:first-child) {
       @apply border-nuha-fushia-300 border-t-2;
     }
@@ -61,6 +57,10 @@ main {
     @apply grid grid-cols-1 lg:grid-cols-2 place-items-center  items-start lg:gap-x-14 gap-y-8;
   }
 }
+.hero-grid {
+  @apply grid grid-cols-3 max-lg:grid-cols-1;
+  @apply place-items-start gap-12;
+}
 
 .article {
   h1,
@@ -93,3 +93,8 @@ ol {
 blockquote {
   @apply ps-4 my-4 border-s-2 border-s-nuha-grey-200;
 }
+
+textarea, input[type="text"] {
+  @apply border-2 border-nuha-grey-200 rounded-md p-3;
+  @apply focus:outline-nuha-fushia-300;
+}
diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
@@ -4,21 +4,24 @@
 
 @layer base {
   h1 {
-    @apply text-7xl;
+    @apply text-7xl max-lg:text-6xl;
   }
   h2 {
-    @apply text-4xl;
+    @apply text-4xl max-lg:text-3xl;
   }
   h3 {
-    @apply text-3xl;
+    @apply text-3xl max-lg:text-2xl;
   }
   h4 {
-    @apply text-2xl;
+    @apply text-2xl max-lg:text-lg;
   }
   h5 {
-    @apply text-xl;
+    @apply text-xl max-lg:text-base;
   }
   h6 {
-    @apply text-lg;
+    @apply text-lg max-lg:text-base;
+  }
+  h1, h2, h3, h4, h5, h6 {
+    @apply max-lg:font-semibold;
   }
 }
diff --git a/assets/images/hero-logo.svg b/assets/images/hero-logo.svg
diff --git a/assets/images/icons/burger-menu.svg b/assets/images/icons/burger-menu.svg
diff --git a/public/close-icon.svg → assets/images/icons/close-icon.svg b/public/close-icon.svg → assets/images/icons/close-icon.svg
diff --git a/assets/images/icons/mdi_github.svg b/assets/images/icons/mdi_github.svg
diff --git a/assets/images/meth-hero.svg b/assets/images/meth-hero.svg
diff --git a/components/Charts/Legend.vue b/components/Charts/Legend.vue
@@ -8,7 +8,7 @@
       class="legend-item"
     >
       <div
-        class="w-6 aspect-square h-full"
+        class="w-6 h-6 aspect-square"
         :style="`background-color: ${item.color};`"
       ></div>
       <div class="flex flex-col">

diff --git a/components/Charts/Pie.vue b/components/Charts/Pie.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="h-full w-full mb-10">
-    <div ref="chart" class="chart-container">
+    <div class="chart-container">
+      <div ref="chart"></div>
       <ChartsLegend v-if="showLegend" :data="data" />
     </div>
     <slot name="caption" />
@@ -70,7 +71,7 @@
 
 <style lang="postcss" scoped>
   .chart-container {
-    @apply flex flex-row-reverse justify-center items-center gap-8 max-sm:flex-col-reverse;
-    @apply p-8 h-full border-y-2 border-nuha-grey-100 border-opacity-50;
+    @apply flex flex-row justify-center items-center gap-8 max-sm:flex-col;
+    @apply lg:p-8 h-full border-y-2 border-nuha-grey-100 border-opacity-50;
   }
 </style>
diff --git a/components/Dashboard/Hero.vue b/components/Dashboard/Hero.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="grid grid-cols-1 md:grid-cols-2 items-top gap-5 my-5 lg:my-20">
+  <div class="hero-grid">
     <h1>{{ t('dashboard.title') }}</h1>
-    <p class="text-4xl">{{ t('dashboard.description') }}</p>
+    <p class="text-4xl col-span-2 max-lg:text-3xl lg:px-8">
+      {{ t('dashboard.description') }}
+    </p>
   </div>
 </template>
 
 <script setup lang="ts">
   const { t } = useI18n()
 </script>
-
-<style scoped lang="postcss"></style>
diff --git a/components/Dashboard/Result.vue b/components/Dashboard/Result.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="mb-20">
-    <div class="grid grid-cols-1 lg:grid-cols-2 mt-10 mb-20 gap-y-10">
+  <div class="mb-20 p-4">
+    <div class="grid grid-cols-1 lg:grid-cols-2 mb-20 gap-10">
       <h2 class="text-4xl">{{ t('predictionResult.title') }}</h2>
-      <div v-if="!isSingleComment">
+      <div v-if="!isSingleComment" class="font-IBMPlexSansArabic text-lg flex flex-col gap-4">
         <p>
           {{ t('predictionResult.fileName') }}
           <span class="text-nuha-fushia">
@@ -15,10 +15,16 @@
             {{ importedRows }}
           </span>
         </p>
-        <button @click="downloadResults" class="download-btn">
+        <UiButton
+          @click="downloadResults"
+          variant="outline"
+          class="w-fit"
+        >
           {{ t('data.downloadResults') }}
-          <div class="arrow-icon rotate-90"></div>
-        </button>
+          <template #icon>
+            <IconDownload class="[&_path]:fill-current"/>
+          </template>
+        </UiButton>
       </div>
       <div v-else>
         <p class="text-xl">
@@ -31,11 +37,12 @@
     </div>
     <div v-if="!isSingleComment">
       <div
-        class="w-full grid grid-cols-2 max-lg:grid-cols-1 gap-20 justify-center items-center mb-20"
+        class="w-full grid grid-cols-2 max-lg:grid-cols-1 gap-10 justify-center items-center mb-20"
       >
         <ChartsPie
           :data="chartData"
-          :size="300"
+          :size="width > 768 ? 300 : 150"
+          :max-width="150"
           show-legend
         >
           <template #caption>
@@ -62,7 +69,7 @@
 
       <div class="block w-full my-10">
         <div class="flex justify-between items-center py-5">
-          <h5>{{ t('predictionResult.details') }}:</h5>
+          <h2>{{ t('predictionResult.details') }}:</h2>
         </div>
         <el-table
           :data="commentData"
@@ -144,8 +151,9 @@
 </template>
 
 <script setup lang="ts">
-  import { get } from '@vueuse/core'
+  import { get, useWindowSize } from '@vueuse/core'
   const { t } = useI18n()
+  const { width } = useWindowSize()
 
   const props = defineProps({
     predictionData: Object as PropType<{
@@ -215,67 +223,41 @@
     @apply rtl:!text-right;
   }
 
-  button.btn-prev,
-  button.btn-next {
-    @apply rtl:!rotate-180;
-  }
-
-  .download-btn {
-    @apply border p-3 max-h-9 flex items-center justify-center text-lg;
-    @apply border-nuha-fushia-300;
-    @apply bg-nuha-white text-nuha-fushia-300;
-    @apply hover:bg-nuha-fushia-300 hover:text-nuha-white;
-  }
-  .download-btn:hover .arrow-icon {
-    @apply bg-[url('/icons/arrow-right-white.svg')];
-  }
-  .arrow-icon {
-    @apply w-5 h-5 transform text-black;
-    @apply bg-[url('/icons/arrow-right.svg')] bg-cover;
-  }
-
   /* Results Table Styling */
-  table, tbody, td {
-    @apply max-sm:inline !bg-nuha-white text-black text-xl;
+  table {
+    @apply max-sm:inline !bg-white text-xl;
   }
   tr {
-    @apply max-sm:flex flex-col max-sm:!p-1 max-sm:pb-4 max-sm:!mx-4 max-sm:!my-4;
-    @apply !bg-nuha-white;
     @apply max-sm:border-b-2 border-nuha-grey-200 border-dashed border-opacity-50;
     td {
-      @apply !py-8 max-sm:!py-2;
       @apply !border-0 !border-nuha-grey-100;
       @apply !border-dotted !border-b max-sm:border-opacity-50;
 
       &:last-child {
         @apply max-sm:!border-0;
       }
-
-      &.comment-text div.cell {
-        direction: rtl;
-        text-align: right;
-      }
     }
   }
+  .comment-text .cell {
+    direction: rtl;
+    text-align: right;
+  }
   table.el-table__header {
     @apply max-sm:hidden;
     @apply border-t-2 border-nuha-grey-100;
     thead {
       th {
-        @apply !bg-nuha-white !py-4;
+        @apply !py-4;
         @apply !border-0 !border-b-2 !border-dotted !border-nuha-grey border-opacity-70;
       }
     }
   }
   .el-table .cell {
     @apply break-normal;
   }
-  .table-container {
-    @apply !bg-transparent;
-  }
   .el-pagination.is-background .btn-next,
   .el-pagination.is-background .btn-prev,
   .el-pagination.is-background li {
-    @apply !bg-transparent font-IBMPlexSansArabic !text-sm;
+    @apply font-IBMPlexSansArabic !text-sm;
   }
 </style>
diff --git a/components/Dashboard/Upload/File.vue b/components/Dashboard/Upload/File.vue
@@ -1,21 +1,27 @@
 <template>
-  <div class="flex flex-col gap-6">
-    <p class="leading-none">{{ t('dashboard.steps.step2.descriptionFile') }}</p>
+  <div class="w-fit max-lg:w-full">
+    <div class="mb-4">{{ t('dashboard.steps.step2.descriptionFile') }}</div>
 
     <div class="flex gap-4 items-center flex-wrap">
-      <label class="btn select-file" for="file-upload"
-        >{{
-          !file
-            ? t('dashboard.fileUpload.selectFile')
-            : `${t('dashboard.fileUpload.selected')}: ${file.name}`
-        }}
-        <span class="mt-1 ms-1 rtl:rotate-180">￫</span>
-      </label>
+      <UiButton @click="() => clickUpload()" variant="outline" class="max-lg:w-full">
+        <label for="file-upload" class="cursor-pointer">
+          {{
+            !file
+              ? t('dashboard.fileUpload.selectFile')
+              : `${t('dashboard.fileUpload.selected')}: ${file.name}`
+          }}
+        </label>
+        <template #icon>
+          <IconUploadFile class="[&_path]:fill-current" />
+        </template>
+      </UiButton>
 
-      <button @click="downloadTemplate" class="btn">
+      <UiButton @click="downloadTemplate" variant="ghost" class="max-lg:w-full">
         {{ t('dashboard.fileUpload.downloadTempalte') }}
-        <span class="mt-1 ms-1 rtl:rotate-180">￫</span>
-      </button>
+        <template #icon>
+          <IconDownload class="[&_path]:fill-current" />
+        </template>
+      </UiButton>
     </div>
   </div>
 
@@ -58,18 +64,9 @@
     a.download = 'template.csv'
     a.click()
   }
-</script>
 
-<style lang="postcss" scoped>
-  .btn {
-    @apply border p-3 flex items-center justify-center text-lg max-h-9;
-    @apply border-nuha-fushia-300;
-    @apply text-nuha-fushia-300 font-IBMPlexSansArabic;
-    @apply hover:bg-nuha-fushia-200;
-  }
-  .select-file {
-    @apply cursor-pointer;
-    @apply !bg-nuha-fushia-300 text-nuha-white;
-    @apply hover:!bg-nuha-fushia-200 hover:!text-nuha-fushia-300;
+  function clickUpload() {
+    const fileInput = document.getElementById('file-upload') as HTMLInputElement
+    fileInput.click()
   }
-</style>
+</script>