From bae5f1979f900eece184ef58d354b38570af2bbb Mon Sep 17 00:00:00 2001
From: tombui99 <tom.quang.bui@gmai.com>
Date: Wed, 6 Mar 2024 12:46:49 +0700
Subject: [PATCH] Fixed UI case study page

---
 ui/src/containers/CaseStudy.svelte | 28 +++++++++++++++++++---------
 ui/src/global.scss                 |  6 ++++++
 2 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/ui/src/containers/CaseStudy.svelte b/ui/src/containers/CaseStudy.svelte
index 0e25b045..10238105 100644
--- a/ui/src/containers/CaseStudy.svelte
+++ b/ui/src/containers/CaseStudy.svelte
@@ -1,6 +1,7 @@
 <script>
   import { navigateTo } from "svelte-router-spa";
 </script>
+
 <div class="container mx-auto">
   <div class="bg-white shadow-lg rounded px-8 pt-6 pb-8 mb-4 flex flex-col">
     <article class="markdown-body">
@@ -43,7 +44,7 @@
           Hence, we had to categorize the custom rules according to each framework, discerning which rules are applicable to Gatsby or NextJS, with the aim of mitigating false positive.
         </li>
       </ul> 
-      <div style="display: inline-flex">
+      <div class="logo">
         <a href="https://ssw.com.au/">
           <img width="129" alt="image" src="/images/SSW-Logo.png">
         </a>
@@ -70,13 +71,22 @@
         />
       </a>
       <p><strong>Figure: Scan result on SSW Rules without any broken link and code errors/warnings</strong></p>
-      <h3>Want to find and fix your website code problems?
-      </h3>
-      <button 
-        type="button"
-        on:click={() => {navigateTo("/")}} 
-        class="bgred hover:bg-red-800 text-white font-semibold py-2 px-4 border hover:border-transparent rounded"
-      >Get Started with CodeAuditor</button>
+      <div class="mt-20 mb-20">
+        <h3>Want to find and fix your website code problems?
+        </h3>
+        <button 
+          type="button"
+          on:click={() => {navigateTo("/")}} 
+          class="bgred hover:bg-red-800 text-white font-semibold py-2 px-4 border hover:border-transparent rounded"
+        >Get Started with CodeAuditor</button>
+      </div>
+      <div></div>
     </article>
   </div>
-</div>
\ No newline at end of file
+</div>
+
+<style>
+  .markdown-body a {
+    color: #cc4141
+  }
+</style>
\ No newline at end of file
diff --git a/ui/src/global.scss b/ui/src/global.scss
index 7c7a51c0..18700cd7 100644
--- a/ui/src/global.scss
+++ b/ui/src/global.scss
@@ -144,3 +144,9 @@ button:focus {
   transition: opacity 0.2s ease;
   z-index: 3000;
 }
+
+.logo {
+  display: flex; 
+  justify-content: space-around; 
+  margin: 2rem 0
+}