From a101ad5de24335c6a565af086aeeb49bd683d736 Mon Sep 17 00:00:00 2001
From: Baba Kamyljanov <babakamyljanov@ssw.com.au>
Date: Thu, 12 Dec 2024 16:24:08 +0800
Subject: [PATCH 01/10] add link to profile page in dropdown menu

---
 src/components/dropdown-card/dropdown-card.js | 12 +++++++++++-
 src/components/dropdown-icon/dropdown-icon.js |  2 +-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/dropdown-card/dropdown-card.js b/src/components/dropdown-card/dropdown-card.js
index a091fede6..24fed0dd6 100644
--- a/src/components/dropdown-card/dropdown-card.js
+++ b/src/components/dropdown-card/dropdown-card.js
@@ -1,9 +1,10 @@
 import React from 'react';
+import { navigate } from 'gatsby';
 import PropTypes from 'prop-types';
 import { useAuth0 } from '@auth0/auth0-react';
 import GitHubIcon from '-!svg-react-loader!../../images/github.svg';
 
-const DropdownCard = () => {
+const DropdownCard = ({ setOpen }) => {
   const { logout, user } = useAuth0();
   return (
     <>
@@ -19,6 +20,15 @@ const DropdownCard = () => {
           </a>
         </div>
         <hr />
+        <button
+          className="dropdown-user-btn-container"
+          onClick={() => {
+            setOpen(false);
+            navigate('/profile');
+          }}
+        >
+          Your Profile
+        </button>
         <button
           className="dropdown-signout-btn-container"
           onClick={() => {
diff --git a/src/components/dropdown-icon/dropdown-icon.js b/src/components/dropdown-icon/dropdown-icon.js
index 294e60b54..152bc8a06 100644
--- a/src/components/dropdown-icon/dropdown-icon.js
+++ b/src/components/dropdown-icon/dropdown-icon.js
@@ -20,7 +20,7 @@ const DropdownIcon = () => {
   return (
     <div className="dropdown" ref={drop}>
       <DropdownBadge onClick={() => setOpen((open) => !open)} />
-      {open && <DropdownCard />}
+      {open && <DropdownCard setOpen={setOpen} />}
     </div>
   );
 };

From 360ba38cbadb1cb52ac47dbbdbe2433b7d9fc1cf Mon Sep 17 00:00:00 2001
From: Baba Kamyljanov <babakamyljanov@ssw.com.au>
Date: Thu, 12 Dec 2024 16:24:43 +0800
Subject: [PATCH 02/10] added profile page to gatsby node

---
 gatsby-node.js | 8 ++++++++
 site-config.js | 1 +
 2 files changed, 9 insertions(+)

diff --git a/gatsby-node.js b/gatsby-node.js
index 16d1564dd..a63ea42db 100644
--- a/gatsby-node.js
+++ b/gatsby-node.js
@@ -1,3 +1,4 @@
+const siteConfig = require('./site-config');
 const { createFilePath } = require('gatsby-source-filesystem');
 const appInsights = require('applicationinsights');
 const WebpackAssetsManifest = require('webpack-assets-manifest');
@@ -237,6 +238,13 @@ exports.createPages = async ({ graphql, actions }) => {
         isPermanent: true,
       });
     });
+
+    const profilePage = require.resolve('./src/pages/profile.js');
+    createPage({
+      path: `${siteConfig.pathPrefix}/people/`,
+      matchPath: `${siteConfig.pathPrefix}/people/:gitHubUsername`,
+      component: profilePage,
+    });
   });
 };
 
diff --git a/site-config.js b/site-config.js
index 16eb9a725..f39841aa8 100644
--- a/site-config.js
+++ b/site-config.js
@@ -6,6 +6,7 @@ const titles = {
   '/user/': `User Rules`,
   '/orphaned/': `Orphaned Rules`,
   '/archived/': `Archived Rules`,
+  '/profile/': `Profile`,
 };
 
 module.exports = {

From 26f055fe6c09d2d61e967ce09d39049be4f765c4 Mon Sep 17 00:00:00 2001
From: Baba Kamyljanov <babakamyljanov@ssw.com.au>
Date: Thu, 12 Dec 2024 18:02:48 +0800
Subject: [PATCH 03/10] added profile pages for bookmarks

---
 .../profile-content/profile-content.js        | 225 ++++++++++++++++++
 .../profile-filter-menu.js                    |  52 ++++
 src/pages/profile.js                          | 106 +++++++++
 3 files changed, 383 insertions(+)
 create mode 100644 src/components/profile-content/profile-content.js
 create mode 100644 src/components/profile-filter-menu/profile-filter-menu.js
 create mode 100644 src/pages/profile.js

diff --git a/src/components/profile-content/profile-content.js b/src/components/profile-content/profile-content.js
new file mode 100644
index 000000000..f08250a19
--- /dev/null
+++ b/src/components/profile-content/profile-content.js
@@ -0,0 +1,225 @@
+import BookmarkIcon from '-!svg-react-loader!../../images/bookmarkIcon.svg';
+import { useAuth0 } from '@auth0/auth0-react';
+import {
+  faArrowCircleRight,
+  faBook,
+  faFileLines,
+  faQuoteLeft,
+} from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Link } from 'gatsby';
+import MD from 'gatsby-custom-md';
+import PropTypes from 'prop-types';
+import React, { useEffect, useRef, useState } from 'react';
+import useAppInsights from '../../hooks/useAppInsights';
+import { GetBookmarksForUser, RemoveBookmark } from '../../services/apiService';
+import { useAuthService } from '../../services/authService';
+import GreyBox from '../greybox/greybox';
+import { Filter } from '../profile-filter-menu/profile-filter-menu';
+import RadioButton from '../radio-button/radio-button';
+
+const ProfileContent = (props) => {
+  const [bookmarkedRules, setBookmarkedRules] = useState([]);
+  const [change, setChange] = useState(0);
+  const [viewStyle, setViewStyle] = useState('titleOnly');
+  const { user, isAuthenticated } = useAuth0();
+  const { fetchIdToken } = useAuthService();
+  const { trackException } = useAppInsights();
+  const handleOptionChange = (e) => {
+    setViewStyle(e.target.value);
+  };
+
+  async function onRemoveClick(ruleGuid) {
+    const jwt = await fetchIdToken();
+    if (
+      isAuthenticated &&
+      window.confirm('Are you sure you want to remove this tag?')
+    ) {
+      if (props.filter == Filter.Bookmarks) {
+        RemoveBookmark({ ruleGuid: ruleGuid, UserId: user.sub }, jwt)
+          .then(() => {
+            setChange(change + 1);
+            props.setState(props.state + 1);
+          })
+          .catch((err) => {
+            trackException(err, 3);
+          });
+      }
+    }
+  }
+
+  function getBookmarkList() {
+    GetBookmarksForUser(user.sub)
+      .then((success) => {
+        const allRules = props.data.allMarkdownRemark.nodes;
+        const bookmarkedGuids =
+          success.bookmarkedRules.size != 0
+            ? success.bookmarkedRules.map((r) => r.ruleGuid)
+            : null;
+        const bookmarkedRulesMap = allRules.filter((value) =>
+          bookmarkedGuids.includes(value.frontmatter.guid)
+        );
+        const bookmarkedRulesSpread = bookmarkedRulesMap.map((r) => ({
+          ...r.frontmatter,
+          excerpt: r.excerpt,
+          htmlAst: r.htmlAst,
+        }));
+        setBookmarkedRules(bookmarkedRulesSpread);
+        props.setBookmarkedRulesCount(bookmarkedRulesSpread.length);
+      })
+      .catch((err) => {
+        trackException(err, 3);
+      });
+  }
+
+  useEffect(() => {
+    if (isAuthenticated) {
+      getBookmarkList();
+    }
+  }, [isAuthenticated, props.filter, change, props.state]);
+
+  return (
+    <>
+      <div className="border-b border-solid border-b-gray-100 grid grid-cols-1 gap-5 p-4 text-center lg:grid-cols-5">
+        <div></div>
+        <RadioButton
+          id="customRadioInline1"
+          name="customRadioInline1"
+          value="titleOnly"
+          selectedOption={viewStyle}
+          handleOptionChange={handleOptionChange}
+          labelText="View titles only"
+          icon={faQuoteLeft}
+        />
+        <RadioButton
+          id="customRadioInline3"
+          name="customRadioInline1"
+          value="blurb"
+          selectedOption={viewStyle}
+          handleOptionChange={handleOptionChange}
+          labelText="Show blurb"
+          icon={faFileLines}
+        />
+        <RadioButton
+          id="customRadioInline2"
+          name="customRadioInline1"
+          value="all"
+          selectedOption={viewStyle}
+          handleOptionChange={handleOptionChange}
+          labelText="Gimme everything!"
+          icon={faBook}
+        />
+      </div>
+      {bookmarkedRules ? (
+        <RuleList
+          rules={props.filter == Filter.Bookmarks ? bookmarkedRules : null}
+          viewStyle={viewStyle}
+          state={props.state}
+          type={props.filter == Filter.Bookmarks ? 'bookmark' : ''}
+          onRemoveClick={onRemoveClick}
+        />
+      ) : (
+        <p className="no-content-message">Loading...</p>
+      )}
+    </>
+  );
+};
+ProfileContent.propTypes = {
+  data: PropTypes.object.isRequired,
+  filter: PropTypes.number.isRequired,
+  setState: PropTypes.func.isRequired,
+  state: PropTypes.number.isRequired,
+  setBookmarkedRulesCount: PropTypes.func.isRequired,
+};
+
+const RuleList = ({ rules, viewStyle, type, onRemoveClick, state }) => {
+  const linkRef = useRef();
+  const iconClass = type.replace(/\s+/g, '-');
+  const components = {
+    greyBox: GreyBox,
+  };
+
+  useEffect(() => {}, [state]);
+
+  return (
+    <>
+      {rules.length == 0 ? (
+        <>
+          <div className="no-content-message">
+            <p className="no-tagged-message">
+              {type == 'bookmark'
+                ? 'No bookmarks? Use them to save rules for later!'
+                : ''}
+            </p>
+          </div>
+        </>
+      ) : (
+        <div className="p-12">
+          <ol className="rule-number">
+            {rules.map((rule) => {
+              return (
+                <li key={rule.guid}>
+                  <section className="rule-content-title pl-2 pb-4">
+                    <div className="heading-container">
+                      <h2 className={`rule-heading-${iconClass}`}>
+                        <Link ref={linkRef} to={`/${rule.uri}`}>
+                          {rule.title}
+                        </Link>
+                      </h2>
+                      {type == 'bookmark' ? (
+                        <>
+                          <button
+                            className="remove-item"
+                            onClick={() => onRemoveClick(rule.guid)}
+                          >
+                            <BookmarkIcon
+                              className="profile-bookmark-icon"
+                              color="#cc4141"
+                            />
+                          </button>
+                        </>
+                      ) : (
+                        ''
+                      )}
+                    </div>
+                  </section>
+                  <section
+                    className={`rule-content px-4 mb-4 pb-4
+                            ${viewStyle === 'blurb' ? 'visible' : 'hidden'}`}
+                  >
+                    <div dangerouslySetInnerHTML={{ __html: rule.excerpt }} />
+                    <p className="pt-5 pb-0">
+                      <Link
+                        ref={linkRef}
+                        to={`/${rule.uri}`}
+                        title={`Read more about ${rule.title}`}
+                      >
+                        <FontAwesomeIcon icon={faArrowCircleRight} /> Read more
+                      </Link>
+                    </p>
+                  </section>
+                  <section
+                    className={`rule-content px-4 mb-4
+                            ${viewStyle === 'all' ? 'visible' : 'hidden'}`}
+                  >
+                    <MD components={components} htmlAst={rule.htmlAst} />
+                  </section>
+                </li>
+              );
+            })}
+          </ol>
+        </div>
+      )}
+    </>
+  );
+};
+
+RuleList.propTypes = {
+  rules: PropTypes.array.isRequired,
+  viewStyle: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired,
+  onRemoveClick: PropTypes.func.isRequired,
+  state: PropTypes.number,
+};
+
+export default ProfileContent;
diff --git a/src/components/profile-filter-menu/profile-filter-menu.js b/src/components/profile-filter-menu/profile-filter-menu.js
new file mode 100644
index 000000000..11ca25feb
--- /dev/null
+++ b/src/components/profile-filter-menu/profile-filter-menu.js
@@ -0,0 +1,52 @@
+import BookmarkIcon from '-!svg-react-loader!../../images/bookmarkIcon.svg';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const ProfileFilterMenu = ({
+  selectedFilter,
+  setSelectedFilter,
+  bookmarkedRulesCount,
+}) => {
+  return (
+    <>
+      <div className="filter-menu">
+        <button
+          className="menu-item"
+          style={
+            selectedFilter == Filter.Bookmarks
+              ? {
+                  gridColumn: 1,
+                  borderBottom: '0.25rem solid #cc4141',
+                  paddingBottom: '0.25rem',
+                }
+              : { gridColumn: 1 }
+          }
+          onClick={() => {
+            setSelectedFilter(Filter.Bookmarks);
+          }}
+        >
+          Bookmarks
+          <BookmarkIcon
+            className={
+              selectedFilter != Filter.Bookmarks
+                ? 'filter-menu-bookmark-icon'
+                : 'filter-menu-bookmark-icon-pressed'
+            }
+          />
+          <div className="mx-1">{bookmarkedRulesCount ?? 0}</div>
+        </button>
+      </div>
+    </>
+  );
+};
+
+ProfileFilterMenu.propTypes = {
+  selectedFilter: PropTypes.number.isRequired,
+  setSelectedFilter: PropTypes.func.isRequired,
+  bookmarkedRulesCount: PropTypes.number,
+};
+
+export const Filter = {
+  Bookmarks: 0,
+};
+export default ProfileFilterMenu;
diff --git a/src/pages/profile.js b/src/pages/profile.js
new file mode 100644
index 000000000..681f74ead
--- /dev/null
+++ b/src/pages/profile.js
@@ -0,0 +1,106 @@
+import GitHubIcon from '-!svg-react-loader!../images/github.svg';
+import { useAuth0 } from '@auth0/auth0-react';
+import { graphql, useStaticQuery } from 'gatsby';
+import PropTypes from 'prop-types';
+import React, { useState } from 'react';
+import Breadcrumb from '../components/breadcrumb/breadcrumb';
+import ProfileBadge from '../components/profile-badge/profile-badge';
+import ProfileContent from '../components/profile-content/profile-content';
+import ProfileFilterMenu from '../components/profile-filter-menu/profile-filter-menu';
+
+const Profile = ({ data }) => {
+  const [selectedFilter, setSelectedFilter] = useState(0);
+  const [state, setState] = useState(0);
+  const [bookmarkedRulesCount, setBookmarkedRulesCount] = useState();
+  const { user, isAuthenticated } = useAuth0();
+
+  if (isAuthenticated) {
+    return (
+      <>
+        <Breadcrumb breadcrumbText="Profile" />
+        <div className="rule-category rounded">
+          <section className="mb-20 pb-2 rounded">
+            <div className="profile-header rounded-t">
+              <div className="grid-container profile-container-responsive">
+                <div className="profile-image">
+                  <ProfileBadge size="6.25rem" />
+                </div>
+                <div className="profile-large-name">
+                  {isAuthenticated ? user.name : ''}
+                </div>
+                <a
+                  className="github-link"
+                  href={`https://www.github.com/${user.nickname}`}
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  <GitHubIcon className="profile-github-icon" />
+                  GitHub account
+                </a>
+              </div>
+              <ProfileFilterMenu
+                selectedFilter={selectedFilter}
+                setSelectedFilter={setSelectedFilter}
+                bookmarkedRulesCount={bookmarkedRulesCount}
+                change={state}
+              />
+            </div>
+            <div>
+              <ProfileContent
+                data={data}
+                filter={selectedFilter}
+                setState={setState}
+                state={state}
+                setBookmarkedRulesCount={setBookmarkedRulesCount}
+              />
+            </div>
+          </section>
+        </div>
+      </>
+    );
+  } else {
+    return (
+      <p className="text-xl no-content-message">
+        Please first login to view profile
+      </p>
+    );
+  }
+};
+Profile.propTypes = {
+  data: PropTypes.object.isRequired,
+};
+
+function ProfileWithQuery(props) {
+  const data = useStaticQuery(graphql`
+    query ProfilePageQuery {
+      allMarkdownRemark(filter: { frontmatter: { type: { eq: "rule" } } }) {
+        nodes {
+          excerpt(format: HTML, pruneLength: 500)
+          frontmatter {
+            title
+            uri
+            guid
+            authors {
+              title
+            }
+          }
+          htmlAst
+        }
+      }
+    }
+  `);
+
+  return <Profile data={data} {...props} />;
+}
+
+ProfilePage.propTypes = {
+  props: PropTypes.any,
+};
+
+export default function ProfilePage({ props }) {
+  return (
+    <>
+      <ProfileWithQuery {...props} />
+    </>
+  );
+}

From 350c7d88be6af2b1a0ad08e475f1776bd1bfb39c Mon Sep 17 00:00:00 2001
From: Baba Kamyljanov <babakamyljanov@ssw.com.au>
Date: Thu, 12 Dec 2024 18:06:09 +0800
Subject: [PATCH 04/10] added styles

---
 src/style.css | 145 +++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 144 insertions(+), 1 deletion(-)

diff --git a/src/style.css b/src/style.css
index 88909b5c1..879a66573 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1426,6 +1426,26 @@ div.bad-example {
   margin: 0.15rem 0.2rem 0 0;
 }
 
+.dropdown-user-btn-container:before {
+  content: "\f007";
+  font-family: FontAwesome;
+  font-size: 1.5rem !important;
+  margin: 0rem 1rem;
+}
+
+.dropdown-user-btn-container {
+  color: #666666;
+  display: flex;
+  align-items: center;
+  margin-left: 0;
+  margin-bottom: 0.5rem;
+  font-size: 0.9rem;
+}
+
+.dropdown-user-btn-container:hover {
+  @apply text-ssw-red !important;
+}
+
 .dropdown-signout-btn-container:before {
   content: "\f08b";
   font-family: FontAwesome;
@@ -1471,6 +1491,18 @@ div.bad-example {
   color: #333333;
 }
 
+/* Profile Page */
+.no-content-message {
+  text-align: center;
+  margin: 2rem auto;
+}
+
+.profile-header {
+  background-color: #f5f5f5;
+  padding: 3rem;
+  height: auto;
+}
+
 .profile-container-img:hover {
   opacity: 0.8;
   cursor: pointer;
@@ -1483,10 +1515,35 @@ div.bad-example {
   height: 6.25rem;
 }
 
+.profile-github-icon {
+  margin: 0.2rem 0.25rem 0 0;
+}
+
+.profile-image {
+  grid-row-start: 1;
+  grid-row-end: 3;
+}
+
 @media screen and (max-width: 600px) {
   .rule-content {
     padding: 1rem;
   }
+  .profile-image {
+    visibility: hidden;
+    grid-column: 1;
+    height: 0
+  }
+  .profile-bookmark-icon {
+    display: none !important;
+  }
+  .profile-large-name {
+    grid-column: 1;
+  }
+  .profile-github-icon {
+    margin: 0.2rem 0 0 0;
+    height: 1rem;
+    width: 1.8rem;
+  }
   .github-link {
     grid-column: 1 !important;
     padding-top: 0.75rem;
@@ -1497,10 +1554,15 @@ div.bad-example {
     justify-items: center;
     justify-content: center;
   }
+  .profile-container-responsive {
+    justify-items: start;
+    justify-content: start;
+  }
   .rule-content-title {
     padding: 0 !important;
   }
 }
+
 @media screen and (max-width: 1024px) {
   .radio-button-1 {
     grid-column: unset !important;
@@ -1511,6 +1573,30 @@ div.bad-example {
   .radio-button-3 {
     grid-column: unset !important;
   }
+  .profile-large-name {
+    font-size: 1.75rem !important;
+  }
+}
+
+@media screen and (max-width: 800px) {
+  .filter-menu {
+    grid-template-columns: auto !important;
+    margin-left: auto;
+    margin-right: auto;
+    left: 0 !important;
+    top: 2rem !important;
+  }
+  .menu-item {
+    grid-column: 1 !important;
+  }
+  .profile-header {
+    height: auto;
+  }
+}
+
+.profile-large-name {
+  font-size: 1.75rem;
+  grid-row: 1;
 }
 
 .github-link {
@@ -1529,6 +1615,15 @@ div.bad-example {
   opacity: 0.8;
 }
 
+.filter-menu {
+  top: 3rem;
+  position: relative;
+  display: grid;
+  grid-template-columns: auto; 
+  column-gap: 1rem;
+  justify-content: start;
+}
+
 .radio-button-1 {
   grid-column: 2;
 }
@@ -1539,8 +1634,33 @@ div.bad-example {
   grid-column: 4;
 }
 
+.menu-item {
+  padding: 0 0.5rem 0.5rem;
+  text-align: center;
+  position: relative;
+  display: flex;
+  margin: auto;
+  white-space: nowrap;
+}
+ 
+.menu-item:hover {
+  padding: 0 0.5rem 0.25rem;
+  border-bottom: 0.25rem solid #CC4141;
+  cursor: pointer;
+}
+ 
+.menu-item:hover .filter-menu-bookmark-icon {
+  @apply text-ssw-red; 
+}
+ 
+.bookmarks-item:after {
+  padding-left: 0.5rem;
+  font-family: FontAwesome;
+}
+
 .heading-container {
-  display: inline-flex;
+  display: flex;
+  justify-content: space-between;
   background: #f5f5f5;
   border-left: 2px solid #cc4141; 
   width: 100%;
@@ -1553,6 +1673,23 @@ div.bad-example {
   margin: 0.5rem 0.8rem;
 }
 
+.profile-bookmark-icon {
+  height: 2rem;
+  font-size: 1.8rem !important;
+  margin: auto auto auto 0;
+}
+
+.filter-menu-bookmark-icon, .filter-menu-bookmark-icon-pressed {
+  margin: auto;
+  margin-right: -0.5rem;
+  height: 1rem;
+  width: 1.8rem;
+}
+
+.filter-menu-bookmark-icon-pressed {
+  @apply text-ssw-red; 
+}
+
 .rule-heading-love:after {
   content: '\f004';
   font-family: FontAwesome;
@@ -1587,6 +1724,12 @@ div.bad-example {
   margin-top: 10px;
 }
 
+.no-tagged-message:before {
+  font-family: FontAwesome;
+  content: '\f00d';
+  margin-right: 0.5rem;
+}
+
 .error-text {
   @apply text-ssw-red; 
 }

From ee203437abfe12c619072a0e4365832266618bb4 Mon Sep 17 00:00:00 2001
From: Baba Kamyljanov <babakamyljanov@ssw.com.au>
Date: Fri, 13 Dec 2024 11:45:40 +0800
Subject: [PATCH 05/10] fix eslint error

---
 src/components/footer/footer.js | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/footer/footer.js b/src/components/footer/footer.js
index 4d2fdc404..9fdf9225b 100644
--- a/src/components/footer/footer.js
+++ b/src/components/footer/footer.js
@@ -1,8 +1,3 @@
-import React from 'react';
-import preval from 'preval.macro';
-import moment from 'moment';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faHeart } from '@fortawesome/free-solid-svg-icons';
 import {
   faFacebook,
   faInstagram,
@@ -11,8 +6,13 @@ import {
   faTiktok,
   faYoutube,
 } from '@fortawesome/free-brands-svg-icons';
-import { pathPrefix } from '../../../site-config';
+import { faHeart } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import moment from 'moment';
+import preval from 'preval.macro';
+import React from 'react';
 import GitHubButton from 'react-github-btn';
+import { pathPrefix } from '../../../site-config';
 
 const buildTimestamp = preval`module.exports = new Date().getTime();`;
 
@@ -33,8 +33,8 @@ const Footer = () => {
               rel="noreferrer"
               className="action-button-label footer-greybar-link"
             >
-              Star us on GitHub
-            </a>{' '}.
+              Star us on GitHub.
+            </a>{' '}
           </span>
           <GitHubButton
             href="https://github.com/SSWConsulting/SSW.Rules"

From afddf40303b281f3bc9c28454f85b46065cd795c Mon Sep 17 00:00:00 2001
From: Baba Kamyljanov <babakamyljanov@ssw.com.au>
Date: Mon, 16 Dec 2024 11:56:13 +0800
Subject: [PATCH 06/10] fix "remove bookmark" and responsive styling

---
 .../profile-content/profile-content.js        | 99 +++++++++----------
 src/style.css                                 | 26 +----
 2 files changed, 50 insertions(+), 75 deletions(-)

diff --git a/src/components/profile-content/profile-content.js b/src/components/profile-content/profile-content.js
index f08250a19..c5a538205 100644
--- a/src/components/profile-content/profile-content.js
+++ b/src/components/profile-content/profile-content.js
@@ -31,10 +31,7 @@ const ProfileContent = (props) => {
 
   async function onRemoveClick(ruleGuid) {
     const jwt = await fetchIdToken();
-    if (
-      isAuthenticated &&
-      window.confirm('Are you sure you want to remove this tag?')
-    ) {
+    if (isAuthenticated) {
       if (props.filter == Filter.Bookmarks) {
         RemoveBookmark({ ruleGuid: ruleGuid, UserId: user.sub }, jwt)
           .then(() => {
@@ -134,7 +131,6 @@ ProfileContent.propTypes = {
 
 const RuleList = ({ rules, viewStyle, type, onRemoveClick, state }) => {
   const linkRef = useRef();
-  const iconClass = type.replace(/\s+/g, '-');
   const components = {
     greyBox: GreyBox,
   };
@@ -158,53 +154,56 @@ const RuleList = ({ rules, viewStyle, type, onRemoveClick, state }) => {
           <ol className="rule-number">
             {rules.map((rule) => {
               return (
-                <li key={rule.guid}>
-                  <section className="rule-content-title pl-2 pb-4">
-                    <div className="heading-container">
-                      <h2 className={`rule-heading-${iconClass}`}>
-                        <Link ref={linkRef} to={`/${rule.uri}`}>
-                          {rule.title}
-                        </Link>
-                      </h2>
-                      {type == 'bookmark' ? (
-                        <>
-                          <button
-                            className="remove-item"
-                            onClick={() => onRemoveClick(rule.guid)}
-                          >
-                            <BookmarkIcon
-                              className="profile-bookmark-icon"
-                              color="#cc4141"
-                            />
-                          </button>
-                        </>
-                      ) : (
-                        ''
-                      )}
-                    </div>
-                  </section>
-                  <section
-                    className={`rule-content px-4 mb-4 pb-4
+                <div key={rule.guid} className="mb-3">
+                  <li key={rule.guid}>
+                    <section className="rule-content-title sm:pl-2">
+                      <div className="rule-header-container justify-between">
+                        <h2 className="flex flex-col justify-center">
+                          <Link ref={linkRef} to={`/${rule.uri}`}>
+                            {rule.title}
+                          </Link>
+                        </h2>
+                        {type == 'bookmark' ? (
+                          <div className="profile-rule-buttons flex flex-col justify-center">
+                            <button
+                              className="tooltip"
+                              onClick={() => onRemoveClick(rule.guid)}
+                            >
+                              <BookmarkIcon className="bookmark-icon-pressed" />
+                              <span className="tooltiptext">
+                                Remove Bookmark
+                              </span>
+                            </button>
+                          </div>
+                        ) : (
+                          ''
+                        )}
+                      </div>
+                    </section>
+                    <section
+                      className={`rule-content px-4 mb-4 pb-4
                             ${viewStyle === 'blurb' ? 'visible' : 'hidden'}`}
-                  >
-                    <div dangerouslySetInnerHTML={{ __html: rule.excerpt }} />
-                    <p className="pt-5 pb-0">
-                      <Link
-                        ref={linkRef}
-                        to={`/${rule.uri}`}
-                        title={`Read more about ${rule.title}`}
-                      >
-                        <FontAwesomeIcon icon={faArrowCircleRight} /> Read more
-                      </Link>
-                    </p>
-                  </section>
-                  <section
-                    className={`rule-content px-4 mb-4
+                    >
+                      <div dangerouslySetInnerHTML={{ __html: rule.excerpt }} />
+                      <p className="pt-5 pb-0">
+                        <Link
+                          ref={linkRef}
+                          to={`/${rule.uri}`}
+                          title={`Read more about ${rule.title}`}
+                        >
+                          <FontAwesomeIcon icon={faArrowCircleRight} /> Read
+                          more
+                        </Link>
+                      </p>
+                    </section>
+                    <section
+                      className={`rule-content px-4 mb-4
                             ${viewStyle === 'all' ? 'visible' : 'hidden'}`}
-                  >
-                    <MD components={components} htmlAst={rule.htmlAst} />
-                  </section>
-                </li>
+                    >
+                      <MD components={components} htmlAst={rule.htmlAst} />
+                    </section>
+                  </li>
+                </div>
               );
             })}
           </ol>
diff --git a/src/style.css b/src/style.css
index 879a66573..a361f2dcb 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1295,7 +1295,7 @@ div.bad-example {
   display: flex;
 }
 
-.rule-buttons .tooltiptext {
+.rule-buttons .tooltiptext, .profile-rule-buttons .tooltip .tooltiptext {
   left: -20px;
   margin-bottom: 1rem;
 }
@@ -1533,9 +1533,6 @@ div.bad-example {
     grid-column: 1;
     height: 0
   }
-  .profile-bookmark-icon {
-    display: none !important;
-  }
   .profile-large-name {
     grid-column: 1;
   }
@@ -1658,27 +1655,6 @@ div.bad-example {
   font-family: FontAwesome;
 }
 
-.heading-container {
-  display: flex;
-  justify-content: space-between;
-  background: #f5f5f5;
-  border-left: 2px solid #cc4141; 
-  width: 100%;
-}
-
-.heading-container h2 {
-  padding: 0 0 0 0.7rem;
-  background: none;
-  border-left: none;
-  margin: 0.5rem 0.8rem;
-}
-
-.profile-bookmark-icon {
-  height: 2rem;
-  font-size: 1.8rem !important;
-  margin: auto auto auto 0;
-}
-
 .filter-menu-bookmark-icon, .filter-menu-bookmark-icon-pressed {
   margin: auto;
   margin-right: -0.5rem;

From 0d8621ca300ff7d0e98e18a07351cb56f5dd5cad Mon Sep 17 00:00:00 2001
From: Baba Kamyljanov <babakamyljanov@ssw.com.au>
Date: Tue, 17 Dec 2024 10:35:40 +0800
Subject: [PATCH 07/10] delete comment

---
 src/style.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/style.css b/src/style.css
index a361f2dcb..e673e7d65 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1491,7 +1491,6 @@ div.bad-example {
   color: #333333;
 }
 
-/* Profile Page */
 .no-content-message {
   text-align: center;
   margin: 2rem auto;

From d1951f3408f2b48d846a20f8ce33cd66aa16c1bb Mon Sep 17 00:00:00 2001
From: Baba Kamyljanov <babakamyljanov@ssw.com.au>
Date: Wed, 18 Dec 2024 15:39:29 +0800
Subject: [PATCH 08/10] fixed user dropdown style as per feedback

---
 src/components/dropdown-card/dropdown-card.js | 29 +++++++++----------
 src/style.css                                 | 26 ++++++++++++-----
 2 files changed, 33 insertions(+), 22 deletions(-)

diff --git a/src/components/dropdown-card/dropdown-card.js b/src/components/dropdown-card/dropdown-card.js
index 24fed0dd6..3223a093a 100644
--- a/src/components/dropdown-card/dropdown-card.js
+++ b/src/components/dropdown-card/dropdown-card.js
@@ -1,25 +1,23 @@
-import React from 'react';
+import { useAuth0 } from '@auth0/auth0-react';
 import { navigate } from 'gatsby';
 import PropTypes from 'prop-types';
-import { useAuth0 } from '@auth0/auth0-react';
-import GitHubIcon from '-!svg-react-loader!../../images/github.svg';
+import React from 'react';
 
 const DropdownCard = ({ setOpen }) => {
   const { logout, user } = useAuth0();
   return (
     <>
       <div className="dropdown-list">
-        <div className="dropdown-userinfo-container">
-          <p className="dropdown-username">@{user.nickname}</p>
-          <a
-            className="github-link"
-            href={`https://www.github.com/${user.nickname}`}
-          >
-            <GitHubIcon className="dropdown-github-icon" />
-            Manage GitHub Account
-          </a>
-        </div>
-        <hr />
+        <p className="dropdown-username">@{user.nickname}</p>
+        <button
+          className="dropdown-github-btn-container"
+          onClick={() => {
+            setOpen(false);
+            window.open(`https://www.github.com/${user.nickname}`);
+          }}
+        >
+          GitHub Profile
+        </button>
         <button
           className="dropdown-user-btn-container"
           onClick={() => {
@@ -27,8 +25,9 @@ const DropdownCard = ({ setOpen }) => {
             navigate('/profile');
           }}
         >
-          Your Profile
+          SSW.Rules Profile
         </button>
+        <hr />
         <button
           className="dropdown-signout-btn-container"
           onClick={() => {
diff --git a/src/style.css b/src/style.css
index e673e7d65..e8672cb17 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1410,20 +1410,32 @@ div.bad-example {
   right: -2rem;
 }
 
-.dropdown-userinfo-container {
-  margin: 1rem 1rem !important;
-}
-
 .dropdown-username {
+  margin: 1rem 1rem !important;
   font-weight: bold;
   color: black;
   word-wrap: break-word;
   font-size: 1.18rem !important;
-  padding-bottom: 0.7rem;
 }
 
-.dropdown-github-icon {
-  margin: 0.15rem 0.2rem 0 0;
+.dropdown-github-btn-container:before {
+  content: "\f09b";
+  font-family: FontAwesome;
+  font-size: 1.5rem !important;
+  margin: 0rem 1rem;
+}
+
+.dropdown-github-btn-container {
+  color: #666666;
+  display: flex;
+  align-items: center;
+  margin-left: 0;
+  margin-bottom: 0.5rem;
+  font-size: 0.9rem;
+}
+
+.dropdown-github-btn-container:hover {
+  @apply text-ssw-red !important;
 }
 
 .dropdown-user-btn-container:before {

From 6218488422e000fb10b0dcb2bd0715f3ae273b6f Mon Sep 17 00:00:00 2001
From: Baba Kamyljanov <babakamyljanov@ssw.com.au>
Date: Wed, 18 Dec 2024 15:57:00 +0800
Subject: [PATCH 09/10] simplified dropdown styling classes

---
 src/components/dropdown-card/dropdown-card.js |  6 +--
 src/style.css                                 | 48 +++++--------------
 2 files changed, 14 insertions(+), 40 deletions(-)

diff --git a/src/components/dropdown-card/dropdown-card.js b/src/components/dropdown-card/dropdown-card.js
index 3223a093a..96f89a1ea 100644
--- a/src/components/dropdown-card/dropdown-card.js
+++ b/src/components/dropdown-card/dropdown-card.js
@@ -10,7 +10,7 @@ const DropdownCard = ({ setOpen }) => {
       <div className="dropdown-list">
         <p className="dropdown-username">@{user.nickname}</p>
         <button
-          className="dropdown-github-btn-container"
+          className="dropdown-btn dropdown-icon dropdown-github-icon"
           onClick={() => {
             setOpen(false);
             window.open(`https://www.github.com/${user.nickname}`);
@@ -19,7 +19,7 @@ const DropdownCard = ({ setOpen }) => {
           GitHub Profile
         </button>
         <button
-          className="dropdown-user-btn-container"
+          className="dropdown-btn dropdown-icon dropdown-user-icon"
           onClick={() => {
             setOpen(false);
             navigate('/profile');
@@ -29,7 +29,7 @@ const DropdownCard = ({ setOpen }) => {
         </button>
         <hr />
         <button
-          className="dropdown-signout-btn-container"
+          className="dropdown-btn dropdown-icon dropdown-signout-icon"
           onClick={() => {
             logout({ returnTo: process.env.AUTH0_REDIRECT_URI });
           }}
diff --git a/src/style.css b/src/style.css
index e8672cb17..f68c7fee2 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1418,14 +1418,7 @@ div.bad-example {
   font-size: 1.18rem !important;
 }
 
-.dropdown-github-btn-container:before {
-  content: "\f09b";
-  font-family: FontAwesome;
-  font-size: 1.5rem !important;
-  margin: 0rem 1rem;
-}
-
-.dropdown-github-btn-container {
+.dropdown-btn {
   color: #666666;
   display: flex;
   align-items: center;
@@ -1434,48 +1427,29 @@ div.bad-example {
   font-size: 0.9rem;
 }
 
-.dropdown-github-btn-container:hover {
+.dropdown-btn:hower {
   @apply text-ssw-red !important;
 }
 
-.dropdown-user-btn-container:before {
-  content: "\f007";
-  font-family: FontAwesome;
+.dropdown-icon:before {
   font-size: 1.5rem !important;
+  width: 22px !important;
   margin: 0rem 1rem;
 }
 
-.dropdown-user-btn-container {
-  color: #666666;
-  display: flex;
-  align-items: center;
-  margin-left: 0;
-  margin-bottom: 0.5rem;
-  font-size: 0.9rem;
+.dropdown-github-icon:before {
+  content: "\f09b";
+  font-family: FontAwesome;
 }
 
-.dropdown-user-btn-container:hover {
-  @apply text-ssw-red !important;
+.dropdown-user-icon:before {
+  content: "\f007";
+  font-family: FontAwesome;
 }
 
-.dropdown-signout-btn-container:before {
+.dropdown-signout-icon:before {
   content: "\f08b";
   font-family: FontAwesome;
-  font-size: 1.5rem !important;
-  margin: 0 1rem;
-}
-
-.dropdown-signout-btn-container {
-  color: #666666;
-  display: flex;
-  align-items: center;
-  margin-left: 0;
-  margin-bottom: 1rem;
-  font-size: 0.9rem;
-}
-
-.dropdown-signout-btn-container:hover {
-  @apply text-ssw-red !important;
 }
 
 .dropdown-badge {

From 62820822c23e83d627a638a83398ea29ff57a583 Mon Sep 17 00:00:00 2001
From: Baba Kamyljanov <babakamyljanov@ssw.com.au>
Date: Wed, 18 Dec 2024 16:04:19 +0800
Subject: [PATCH 10/10] fixed padding in mobile view

---
 src/pages/profile.js | 2 +-
 src/style.css        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/profile.js b/src/pages/profile.js
index 681f74ead..5183d010c 100644
--- a/src/pages/profile.js
+++ b/src/pages/profile.js
@@ -35,7 +35,7 @@ const Profile = ({ data }) => {
                   rel="noreferrer"
                 >
                   <GitHubIcon className="profile-github-icon" />
-                  GitHub account
+                  GitHub Profile
                 </a>
               </div>
               <ProfileFilterMenu
diff --git a/src/style.css b/src/style.css
index f68c7fee2..c681a60de 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1572,7 +1572,7 @@ div.bad-example {
     grid-column: 1 !important;
   }
   .profile-header {
-    height: auto;
+    padding: 2rem;
   }
 }