#42: created related tags section for article results page

Author: Darren52BT

frontend/src/Components/ArticleResult/SideSections/ArticleResultSideSection.scss

@@ -0,0 +1,31 @@
+@import "bootstrap/scss/bootstrap-grid.scss";
+@import "bootstrap/scss/grid";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/mixins";
+@import "bootstrap/scss/functions";
+@import "../../../scss/variables";
+
+
+.article-results-side-section-title {
+  margin-bottom: 1rem;
+  font-size: calc(0.8rem + 0.5vw);
+  font-weight: 600;
+  @include media-breakpoint-up(sm) {
+    font-size: calc(1.2rem + 0.5vw);
+  }
+}
+
+.article-results-section-content {
+  padding-left: 10px;
+}
+
+@include color-mode(light) {
+  .article-results-side-section-title {
+    color: $primary-text-light;
+  }
+}
+@include color-mode(dark) {
+  .article-results-side-section-title {
+    color: $primary-text-dark;
+  }
+}

frontend/src/Components/ArticleResult/SideSections/RelatedTopicTags/RelatedTopicTags.jsx

@@ -0,0 +1,31 @@
+import "./RelatedTopicTags.scss";
+import "../ArticleResultSideSection.scss";
+//tags : array of tag objects
+export default function RelatedTags({ tags }) {
+  return (
+    <div
+      className="article-results-side-section"
+      id="related-topic-tags-section"
+    >
+      <h3
+        id="related-topic-tags-section-title"
+        className="article-results-side-section-title"
+      >
+        Related Topics
+      </h3>
+      <div className="article-results-section-content related-topic-tags-container">
+        {tags.map((tag) => {
+          return (
+            <span
+              key={tag.label}
+              id={tag.label + "-topic"}
+              className="related-topic-tag"
+            >
+              {tag.label}
+            </span>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

frontend/src/Components/ArticleResult/SideSections/RelatedTopicTags/RelatedTopicTags.scss

@@ -0,0 +1,36 @@
+@import "bootstrap/scss/bootstrap-grid.scss";
+@import "bootstrap/scss/grid";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/mixins";
+@import "bootstrap/scss/functions";
+@import "../../../../scss/variables";
+.related-topic-tag {
+  background: $related-topic-tag-bg;
+  color: white;
+  border-radius: 20px;
+  padding: 5px 8px;
+  white-space: nowrap;
+  font-weight: 600;
+  font-size: calc(0.5rem + 0.1vw);
+  @include media-breakpoint-up(sm) {
+    font-size: calc(0.7rem + 0.1vw);
+  }
+
+  &:hover {
+    filter: brightness(1.2);
+    cursor: pointer;
+  }
+
+  &:active {
+    filter: brightness(0.8);
+    position: relative;
+    top: 1px;
+    cursor: auto;
+  }
+}
+
+.related-topic-tags-container {
+  display: flex;
+  flex-flow: wrap;
+  gap: 10px 8px;
+}

frontend/src/pages/ArticleList.jsx

@@ -1,8 +1,13 @@
 import { useEffect, useState } from "react";
-import { Card, Stack } from "react-bootstrap";
 import { useParams, useSearchParams } from "react-router-dom";
-import LinkedDescriptionBox from "../Components/LinkedDescriptionBox.jsx";
+import RelatedTags from "../Components/ArticleResult/SideSections/RelatedTopicTags/RelatedTopicTags.jsx";
 import ArticleResultsList from "../Components/ArticleResults/ArticleResultsList.jsx";
+const dummy_topic_tags = [
+  { label: "Deep Learning" },
+  { label: "Artifical Intelligence" },
+  { label: "Computer Vision" },
+  { label: "Data Science" },
+];
 const dummmy_articles = [
   {
     id: 1,
@@ -23,6 +28,7 @@ const dummmy_articles = [
     isBookmarked: false,
   },
 ];
+
 export default function ArticleList({}) {
   const [articles, setArticles] = useState(dummmy_articles);
   const [searchParams, setSearchParams] = useSearchParams();
@@ -78,6 +84,7 @@ export default function ArticleList({}) {
 
   return (
     <div className="flex-grow-1">
+      <RelatedTags tags={dummy_topic_tags} />
       <ArticleResultsList
         articles={dummmy_articles}
         bookmarkTogglerCreator={bookmarkTogglerCreator}

frontend/src/scss/variables/_variables-universal.scss

@@ -5,6 +5,9 @@ $link-text: #2c6ae1;
 $header-footer-bg: #312f2f;
 $header-text: #f4e4bb;
 
+//Related Topic Tags
+$related-topic-tag-bg: #2c6ae1;
+
 //popover
 $popover-header-bg: #063ba1;
 $popover-body-bg: #2c6ae1;
@@ -19,8 +22,8 @@ $settings-article-search-bar: #d5d5d5;
 
 //Sign Pages
 $sign-page-title: #366092;
-$welcome-section-link: #4E8AD1;
-$sign-input-placeholder: #6B6565;
+$welcome-section-link: #4e8ad1;
+$sign-input-placeholder: #6b6565;
 
 //fonts
 @font-face {