Merge pull request #416 from StampyAI/tags-css

tags styling
StampyAI · Feb 19, 2024 · 69b663f · 69b663f
2 parents caf7c52 + f0c064d
commit 69b663f
Show file tree

Hide file tree

Showing 9 changed files with 44 additions and 248 deletions.
diff --git a/app/components/Article/article.css b/app/components/Article/article.css
@@ -1,10 +1,6 @@
 article {
   max-width: 47.43vw;
-  margin: auto;
-}
-
-.article-wrapper {
-  padding: var(--spacing-80);
+  margin: 0 auto;
 }
 
 article .meta {

diff --git a/app/components/CategoriesNav/Menu.tsx b/app/components/CategoriesNav/Menu.tsx
@@ -18,23 +18,23 @@ interface CategoriesNavProps {
 export const CategoriesNav = ({categories, activeCategoryId}: CategoriesNavProps) => {
   const [search, onSearch] = useState('')
   return (
-    <div className={styles.categoriesGroup}>
+    <div className={styles.categoriesGroup + ' bordered col-4-5'}>
       <h4>Categories</h4>
-      <SearchInput onChange={onSearch} placeholderText="Filter by keyword" />
+      <div>
+        <SearchInput onChange={onSearch} placeholderText="Filter by keyword" />
+      </div>
       {categories
         .filter((tag) => tag.name.toLowerCase().includes(search.toLowerCase()))
         .map(({tagId, name, questions}) => (
           <Link
-            to={`/tags/${tagId}/${name}`}
             key={tagId}
+            to={`/tags/${tagId}/${name}`}
             className={[
-              styles.categoryAutoLayoutHorizontal,
-              activeCategoryId == tagId ? styles.active : '',
+              styles.categoryTitle,
+              activeCategoryId == tagId ? 'teal-50-background' : '',
             ].join(' ')}
           >
-            <div className={styles.categoryTitle}>
-              {name} ({questions.length})
-            </div>
+            {name} ({questions.length})
           </Link>
         ))}
     </div>

diff --git a/app/components/CategoriesNav/menu.module.css b/app/components/CategoriesNav/menu.module.css
@@ -1,32 +1,12 @@
-.categoryTitle {
-  position: relative;
-  text-align: left;
-  display: inline-flex;
-  align-items: center;
-  padding: 8px 0;
-  cursor: pointer;
-}
-
-.categoryAutoLayoutHorizontal {
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  /*gap: 8px;*/
-  align-items: flex-start;
-  margin: 5px;
-  position: relative;
+.categoriesGroup {
+  padding: var(--spacing-12);
 }
-.categoryAutoLayoutHorizontal.active {
-  background-color: rgba(237.0000010728836, 250.00000029802322, 249.00000035762787, 1);
+.categoriesGroup > * {
+  padding: var(--spacing-16);
 }
-.categoriesGroup {
+.categoryTitle {
+  padding: var(--spacing-24);
+  cursor: pointer;
+  display: inline-block;
   width: 100%;
-  position: relative;
-  height: 100%;
-  text-align: left;
-  font-size: 16px;
-  border-radius: 6px;
-  border: 1px solid var(--colors-cool-grey-200);
-  max-width: 328px;
-  padding: 0 24px;
 }
diff --git a/app/components/Nav/nav.css b/app/components/Nav/nav.css
@@ -1,5 +1,5 @@
 .top-header {
-  padding: var(--spacing-32) var(--spacing-80);
+  padding: var(--spacing-32) 5.56vw;
 }
 .top-nav {
   display: flex;

diff --git a/app/components/SearchInput/input.css b/app/components/SearchInput/input.css
@@ -20,7 +20,6 @@
   font-size: 16px;
   color: var(--colors-cool-grey-600);
   width: 100%;
-  width: 256px;
   transition: width 100ms;
 }
 

diff --git a/app/components/Table/index.tsx b/app/components/Table/index.tsx
@@ -13,10 +13,11 @@ export type ListTableProps = {
    * Browse by category
    */
   elements: ListItem[]
+  className?: string
 }
 
-export const ListTable = ({elements}: ListTableProps) => (
-  <div className={styles.container + ' bordered'}>
+export const ListTable = ({elements, className}: ListTableProps) => (
+  <div className={styles.container + ' bordered' + (className ? ' ' + className : '')}>
     {elements.map(({pageid, title, subtitle, hasIcon}, i) => (
       <Link
         key={`entry-${i}`}

diff --git a/app/newRoot.css b/app/newRoot.css
@@ -158,6 +158,10 @@ h2 {
   color: var(--colors-teal-200);
 }
 
+.teal-50-background {
+  background: var(--colors-teal-50);
+}
+
 /* spacing classes */
 
 .padding-bottom-4 {
@@ -223,6 +227,10 @@ h2 {
   width: 21.46vw;
 }
 
+.col-4-5 {
+  width: 22.78vw;
+}
+
 .col-5 {
   width: 27.99vw;
 }
@@ -317,196 +325,11 @@ ul {
   padding: 0px 13.333vw;
 }
 
-.img-2 {
-  width: 16px;
-  height: 16px;
-}
-
-.main-container-box-table {
-  display: flex;
-  justify-content: space-between;
-  margin-top: var(--spacing-80);
-}
-
-.iconsMagnifyingGlass {
-  width: 16px;
-  position: relative;
-  height: 16px;
-}
-
-.widget-title {
-  margin-block-start: 0;
-  margin-block-end: 0px;
-}
-
-.widget-subtitle {
-  margin: 0;
-  color: var(--text-black);
-}
-
-.widget-header {
-  top: 0;
-  left: 0;
-  font-size: 38px;
-  letter-spacing: -0.01em;
-  line-height: 130%;
-  font-weight: 600;
-  display: inline-block;
-  max-width: 562px;
-  margin-block-end: 38px;
-}
-
-.widget-input {
-  height: 100%;
-  width: calc(100% + 45px);
-  top: 0%;
-  right: 0%;
-  bottom: 0%;
-  left: 0%;
-  border-radius: 6px;
-  background-color: #fff;
-  box-shadow: 0 16px 40px #afb7c233;
-  border: 1px solid var(--colors-cool-grey-200);
-  box-sizing: border-box;
-  letter-spacing: -0.01em;
-  text-align: left;
-  color: var(--colors-cool-grey-600);
-  padding-left: 16px;
-  padding-right: 66px;
-}
-
-.input-label {
-  position: relative;
-  letter-spacing: -0.01em;
-}
-
-.input-horizontal {
-  position: absolute;
-  top: calc(50% - 15px);
-  left: 16px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-start;
-}
-
-.widget-textbox {
-  top: calc(50% - 32px);
-  left: calc(50% - 435px);
-  width: 100%;
-  height: 64px;
-}
-
-.send-button {
-  top: calc(50% - 24px);
-  left: 0;
-  border-radius: 6px;
-  background-color: var(--colors-teal-500);
-  box-shadow: 0 16px 40px #202c590d;
-  width: 48px;
-  height: 48px;
-}
-
-.send-button-icon {
-  position: absolute;
-  inset: 0%;
-  max-width: 100%;
-  overflow: hidden;
-  max-height: 100%;
-}
-
-.send-button-group {
-  position: relative;
-  width: 48px;
-  height: 48px;
-  z-index: 2;
-  left: -18px;
-}
-
-.widget-ask {
-  top: calc(50% + 233px);
-  left: calc(50% - 435px);
-  width: 100%;
-  height: 64px;
-  color: var(--colors-cool-grey-600);
-  display: inline-flex;
-  align-items: center;
-}
-
-.rectangleIcon {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 814px;
-  height: 319px;
-}
-
-.widget-start-conversation {
-  top: 87px;
-  left: 32px;
-  border-radius: 6px;
-  background-color: #fff;
-  box-shadow: 0 16px 40px #202c590d;
-  border: 1px solid var(--colors-cool-grey-200);
-  box-sizing: border-box;
-  height: 56px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  padding: 7px 21px;
-  margin: 16px;
-  width: fit-content;
-}
-
-.widget-conversation-start-header {
-  top: 32px;
-  left: 32px;
-  letter-spacing: -0.01em;
-  color: var(--text-black);
-  margin: 16px;
-}
-
-.widget-chat-group {
-  top: 187px;
-  left: 56px;
-  width: 100%;
-  height: 319px;
-}
-
-.stampyIcon {
-  width: 40px;
-  height: 34.56px;
-  overflow: hidden;
-  margin-bottom: 16px;
-}
-
-.widget-group {
-  margin-top: 108px;
-  width: 60vw;
-  position: relative;
-  height: 594px;
-  text-align: left;
-  color: var(--colors-teal-500);
-}
-
-.chat-message {
-  display: flex;
-  align-items: flex-end;
-}
-
-.chat-incoming-message {
-  background: #f9fafc;
-  width: 100%;
-  border-radius: 6px;
-}
-
-.group-elements {
+.article-container {
   display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-  gap: 10.9vw;
-  margin-left: 5.56vw;
+  padding-left: 5.56vw;
+  padding-right: 2.43vw;
+  padding-top: var(--spacing-40);
 }
 
 .icon-link path {

diff --git a/app/routes/$questionId.tsx b/app/routes/$questionId.tsx
@@ -36,7 +36,7 @@ export default function RenderArticle() {
 
   return (
     <Page>
-      <div className="flex-container flex-double article-wrapper">
+      <div className="article-container">
         {section && <ArticlesNav current={pageid} article={section} path={getPath(pageid)} />}
         <Suspense
           key={pageid}

diff --git a/app/routes/tags.$.tsx b/app/routes/tags.$.tsx
@@ -33,26 +33,23 @@ export default function Tags() {
   }
   return (
     <Page>
-      <div className={'top-margin-large'} />
       <main>
-        <div className={'group-elements'}>
+        <div className="article-container">
           <CategoriesNav
             categories={tags.filter((tag) => tag.questions.length > 0).sort(sortFuncs[sortBy])}
             activeCategoryId={selectedTag.tagId}
           />
 
           {selectedTag === null ? null : (
-            <div>
-              <h1 style={{marginTop: '0px'}}>{selectedTag.name}</h1>
-              {selectedTag.questions.length === 0 ? (
-                <div className={'no-questions'}>No questions found</div>
-              ) : (
-                <p>
-                  {selectedTag.questions.length} pages tagged {`"${selectedTag.name}"`}
-                </p>
-              )}
-              {selectedTag && <ListTable elements={selectedTag.questions} />}
-            </div>
+            <article>
+              <h1 className="padding-bottom-40">{selectedTag.name}</h1>
+              <div className="padding-bottom-24">
+                {selectedTag.questions.length === 0
+                  ? 'No pages found'
+                  : `${selectedTag.questions.length} pages tagged "${selectedTag.name}"`}
+              </div>
+              {selectedTag && <ListTable className="col-8" elements={selectedTag.questions} />}
+            </article>
           )}
         </div>
       </main>