finished styling, added filters to main page

src/components/Article/ArticleParts/InteractionButtons/ArticleInteractionButtons.tsx

@@ -89,68 +89,43 @@ export function ArticleInteractionButtons({
                   hover:bg-blue-500
                   active:bg-blue-700    
                   focus:shadow-lg shadow-blue-500
-                  p-2 rounded"
+                  p-2 rounded
+                  flex flex-row space-x-2
+                  "
       >
         <SVGFiletext className="w-6 fill-white stroke-white" />
-        {emphasis === "high" && <Typography>{t("readFile")}</Typography>}
+        {emphasis === "high" && <Typography fontWeightVariant="semibold" className="text-white">{t("readFile")}</Typography>}
       </div>
     </Link>
   );
   /* ----------------------------- Download button ---------------------------- */
   const downLoadButton = (
-    <Button emphasis={emphasis}>
+    <Button emphasis="low" className="px-2 space-x-2">
       <Button.Icon>
-        <SVGDownload className="w-6 fill-white stroke-white" />
+        <SVGDownload className="w-6 fill-gray-900 stroke-gray-900" />
       </Button.Icon>
-      {emphasis === "high" && <Typography>{t("download")}</Typography>}
+      {emphasis === "high" && <Typography fontWeightVariant="semibold" className="text-gray-900">{t("download")}</Typography>}
     </Button>
   );
 
-  /* ------------------------------ Share button ------------------------------ */
+  /* ------------------------------- Cite button ------------------------------ */
 
-  const shareButton = (
+  const citeButton = (
-    <Button emphasis={emphasis}>
+    <Button emphasis="low" className="px-2 space-x-2">
       <Button.Icon>
-        <SVGShare className="w-6 fill-white stroke-white" />
+        <SVGCite className="w-6 fill-gray-900 stroke-gray-900" />
       </Button.Icon>
-      {emphasis === "high" && <Typography>{t("share")}</Typography>}
+      {emphasis === "high" && <Typography fontWeightVariant="semibold" className="text-gray-900">{t("cite")}</Typography>}
     </Button>
   );
 
-  const fileInteractionButtons = interactionButtonsStore.map((button) => {
-    return button.title === "Read file" ? (
-      <Link to={`/article/content/${articleID}`}>
-        <Button
-          emphasis={button.buttonEmphasis === "high" ? "high" : "low"}
-          className="h-max px-2 mr-2"
-        >
-          <Button.Icon>
-            {React.cloneElement(button.icon, {
-              className: button.iconClassName,
-            })}
-          </Button.Icon>
-          {emphasis === "high" ? <Typography>{button.title}</Typography> : null}
-        </Button>
-      </Link>
-    ) : (
-      <Button
-        emphasis={button.buttonEmphasis === "high" ? "high" : "low"}
-        className="h-max px-2 mr-2"
-      >
-        <Button.Icon>
-          {React.cloneElement(button.icon, { className: button.iconClassName })}
-        </Button.Icon>
-        {emphasis === "high" ? <Typography>{button.title}</Typography> : null}
-      </Button>
-    );
-  });
-
   return (
-    <div className="flex flex-row">
+    <div className="flex flex-row space-x-2">
-      {emphasis === "low" && !children ? abstractButton : null}
+      {emphasis != "high" && abstractButton}
       {readFileButton}
-      {children ? children : fileInteractionButtons}
+      {downLoadButton}
-      <ShareButton linktoCopy={`/article/content/${articleID}`}></ShareButton>
+      {citeButton}
+      <ShareButton emphasis={emphasis} linktoCopy={`/article/content/${articleID}`} />
     </div>
   );
 }

src/components/Article/ArticleParts/InteractionButtons/ArticleShareButton.tsx

@@ -35,11 +35,11 @@ export function ShareButton({ emphasis, linktoCopy }: Props) {
   return (
     <Popover className="relative">
       <Popover.Button>
-        <Button emphasis="low" className="px-2">
+        <Button emphasis="low" className="px-2 space-x-2">
           <Button.Icon>
             <SVGShare className="w-6 fill-gray-900 stroke-gray-900" />
           </Button.Icon>
-          {emphasis === "high" && <Typography>{t("share")}</Typography>}
+          {emphasis === "high" && <Typography fontWeightVariant="semibold" className="text-gray-900">{t("share")}</Typography>}
         </Button>
       </Popover.Button>
 

src/pages/SearchResultsPage.tsx

@@ -3,9 +3,6 @@ import BaseLayout from "components/BaseLayout";
 import { SearchSection } from "components/SearchSection";
 import { ColumnLayout } from "components/layouts/ThreeColumn/ColumnLayout";
 import { SearchResultSection } from "components/SearchResultsSection";
-import { useSearchStoreImplementation } from "searchResults/data/searchStoreImplementation";
-import { useSearchViewModel } from "searchResults/controller/searchResultsViewModel";
-import { Loader } from "components/Loader/Loader";
 import Fiter from "components/Filters/Filter";
 
 export const SearchResultsPage = () => {
@@ -14,7 +11,7 @@ export const SearchResultsPage = () => {
       <SearchSection />
       <ColumnLayout>
         <ColumnLayout.Left>
-          <div className="h-98 w-[300px]"></div>
+          <div className="h-98 w-[300px] border rounded my-5"><Fiter /></div>
         </ColumnLayout.Left>
         <ColumnLayout.Main>
           <SearchResultSection />

src/searchResults/data/searchService.ts

@@ -10,7 +10,7 @@ const searchEndpoint = "/papers/search";
 async function search(request: string): Promise<SearchResults> {
   try {
     const response = await integratorApiClient.get<SearchResultsDTO>(
-      // searchEndpoint + `?query=` + request + `&limit=10&offset=0`
+      // searchEndpoint + `?query=` + request 
       "https://run.mocky.io/v3/ea705665-2479-4039-8b81-412e011fc145"
     );
     const dto = response.data;