/communities second QA fixes

Author: Oksamies

.gitignore

@@ -1,3 +1,4 @@
 .idea
 /node_modules/
 **/yarn-error.log
+.npmrc

apps/cyberstorm-remix/app/communities/SearchAndOrder.module.css

@@ -7,13 +7,9 @@
 
 .searchTextInput {
   display: flex;
+  flex: 1;
   flex-direction: column;
   gap: var(--space--8);
-  width: 50%;
-}
-
-.searchInput {
-  max-width: 26.25rem;
 }
 
 .searchFilters {
@@ -43,8 +39,10 @@
   .searchFilters > span {
     display: none;
   }
+}
 
-  .searchInput {
-    max-width: 100%;
+@media (width > 40rem) {
+  .searchTextInput {
+    max-width: 26.25rem;
   }
 }

apps/cyberstorm-remix/app/communities/communities.tsx

@@ -145,7 +145,6 @@ export default function CommunitiesPage() {
               clearValue={() => setSearchValue("")}
               leftIcon={<FontAwesomeIcon icon={faSearch} />}
               csColor="cyber-green"
-              rootClasses={searchAndOrderStyles.searchInput}
               id="communitiesSearchInput"
             />
           </div>
@@ -171,38 +170,9 @@ export default function CommunitiesPage() {
   );
 }
 
-function comparePackageCount(a: Community, b: Community) {
-  if (a.total_package_count < b.total_package_count) {
-    return 1;
-  }
-  if (a.total_package_count > b.total_package_count) {
-    return -1;
-  }
-  return 0;
-}
-
 function CommunitiesList(props: { communitiesData: Communities }) {
   const { communitiesData } = props;
 
-  const topDogs: Community[] = [];
-  communitiesData.results.reduce((prevCommunity, currentCommunity) => {
-    if (topDogs.length > 4) {
-      topDogs.sort(comparePackageCount);
-      const lastDog = topDogs.at(-1);
-      if (
-        (lastDog ? lastDog.total_package_count : 0) <
-        currentCommunity.total_package_count
-      ) {
-        topDogs.pop();
-        topDogs.push(currentCommunity);
-      }
-    } else {
-      topDogs.push(currentCommunity);
-    }
-    return topDogs;
-  }, topDogs);
-  const flatDogs = topDogs.map((community) => community.identifier);
-
   if (communitiesData.results.length > 0) {
     return (
       <div className={communitiesListStyles.root}>

apps/cyberstorm-remix/cyberstorm/navigation/DesktopLoginPopover.tsx

@@ -14,12 +14,6 @@ import { classnames } from "@thunderstore/cyberstorm/src/utils/utils";
 import { buildAuthLoginUrl } from "cyberstorm/utils/ThunderstoreAuth";
 import { faDiscord, faGithub } from "@fortawesome/free-brands-svg-icons";
 
-import styles from "./Navigation.module.css";
-import { Modal, NewButton, NewIcon } from "@thunderstore/cyberstorm";
-import { LoginList } from "./LoginList";
-import { faArrowRightToBracket } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
 export function DesktopLoginPopover() {
   return (
     <Modal

apps/cyberstorm-remix/cyberstorm/navigation/DevelopersDropDown.tsx

@@ -24,7 +24,7 @@ export function DevelopersDropDown() {
           </NewButton>
         }
         csVariant="default"
-        csColor="surface-alpha"
+        csColor="surface"
         rootClasses={styles.root}
       >
         <NewDropDownItem>

apps/cyberstorm-remix/cyberstorm/navigation/MobileUserPopoverContent.tsx

@@ -5,6 +5,7 @@ import styles from "./Navigation.module.css";
 import {
   Avatar,
   Menu,
+  NewButton,
   NewIcon,
   NewLink,
   NewText,
@@ -36,17 +37,17 @@ export function MobileUserPopoverContent(props: { user: CurrentUser }) {
         </div>
       }
       controls={
-        <button
+        <NewButton
           {...{
             popovertarget: "mobileNavAccount",
             popovertargetaction: "close",
           }}
-          className={styles.popoverCloseButton}
-        >
-          <NewIcon csMode="inline" csVariant="tertiary" noWrapper>
-            <FontAwesomeIcon icon={faLongArrowLeft} />
-          </NewIcon>
-        </button>
+          aria-label="Back"
+          mode="iconButton"
+          csSize="m"
+          csVariant="tertiaryDimmed"
+          icon={faLongArrowLeft}
+        />
       }
     >
       {user.username ? (

apps/cyberstorm-remix/cyberstorm/navigation/Navigation.module.css

@@ -68,11 +68,9 @@
 
 .mobileNavMenuDevelopersButton {
   display: flex;
-  gap: 1rem;
   align-items: center;
   align-self: stretch;
   justify-content: space-between;
-  padding: 1rem;
   color: var(--color-primary);
   background: transparent;
 }
@@ -96,6 +94,14 @@ button.mobileNavItem {
   background: transparent;
 }
 
+.mobileNavItem:active {
+  color: var(--color-cyber-green--5);
+}
+
+.mobileNavItem:hover {
+  color: var(--color-secondary);
+}
+
 .mobileNavItemIcon {
   height: 1.375rem;
 }
@@ -123,14 +129,6 @@ button.mobileNavItem {
   width: 100%;
 }
 
-.mobileNavPopoverListLink {
-  display: flex;
-  gap: 1rem;
-  align-items: center;
-  align-self: stretch;
-  padding: 1rem;
-}
-
 .popoverCloseButton {
   width: 2.75rem;
   height: 2.875rem;
@@ -252,3 +250,23 @@ button.mobileNavItem {
   display: flex;
   gap: 1rem;
 }
+
+.divider {
+  align-self: stretch;
+  height: 1px;
+  margin: var(--space--16) var(--space--8);
+  background: var(--color-surface--7);
+}
+
+.navMenuItem {
+  display: flex;
+  gap: var(--gap--16);
+  align-items: center;
+  align-self: stretch;
+  padding: var(--space--16);
+  border-radius: var(--border-radius--8);
+}
+
+.navMenuItem:hover {
+  background: var(--color-surface--9);
+}