/communities second QA fixes

thunderstore-io · Oct 8, 2024 · 685e9a1 · 685e9a1
1 parent a14c9e2
commit 685e9a1
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 48 deletions.
diff --git a/apps/cyberstorm-remix/app/communities/SearchAndOrder.module.css b/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;
   }
 }
diff --git a/apps/cyberstorm-remix/app/communities/communities.tsx b/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}>

diff --git a/apps/cyberstorm-remix/cyberstorm/navigation/DevelopersDropDown.tsx b/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>

diff --git a/packages/cyberstorm/src/components/SkeletonBox/SkeletonBox.module.css b/packages/cyberstorm/src/components/SkeletonBox/SkeletonBox.module.css
@@ -1,24 +1,24 @@
 .root {
   display: flex;
   border-radius: var(--border-radius--4);
-  background: #191b38;
+  background: hsl(236deg 36% 36% / 0.24);
   animation: pulse 2s infinite;
 }
 
 @keyframes pulse {
   0% {
-    background-color: #191b38;
+    opacity: 1;
   }
 
   25% {
-    background-color: #191b387c;
+    opacity: 0.25;
   }
 
   75% {
-    background-color: #191b387c;
+    opacity: 0.75;
   }
 
   100% {
-    background-color: #191b38;
+    opacity: 1;
   }
 }
diff --git a/packages/cyberstorm/src/newComponents/TextInput/TextInput.module.css b/packages/cyberstorm/src/newComponents/TextInput/TextInput.module.css
@@ -55,11 +55,12 @@
 }
 
 .textInput:hover {
-  --border-color: var(--color-surface-alpha--6);
+  --input-background-color: var(--color-surface-alpha--6);
+  --border-color: var(--color-surface-alpha--10);
 }
 
 .textInput:focus-within {
-  --input-text-color: var(--color-text--default);
+  --input-text-color: var(--color-primary);
   --input-background-color: var(--color-black);
   --border-color: var(--color-7);
 }
@@ -119,13 +120,14 @@
 .leftIcon {
   position: absolute;
   margin: var(--space--10) var(--space--16);
-  color: var(--color-accent);
+  color: var(--color-tertiary);
   pointer-events: none;
 }
 
 .rightIcon {
   position: absolute;
   padding: var(--space--14) var(--space--16);
+  color: var(--color-secondary);
 }
 
 .clearValueButton {

diff --git a/packages/cyberstorm/src/newComponents/TextInput/TextInput.tsx b/packages/cyberstorm/src/newComponents/TextInput/TextInput.tsx
@@ -7,7 +7,7 @@ import {
 import { classnames } from "../../utils/utils";
 import { Frame } from "../../primitiveComponents/Frame/Frame";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faCircleXmark } from "@fortawesome/free-solid-svg-icons";
+import { faXmark } from "@fortawesome/free-solid-svg-icons";
 import { Actionable } from "../../primitiveComponents/Actionable/Actionable";
 import { colors, variants } from "../../primitiveComponents/utils/utils";
 import { NewIcon } from "../..";
@@ -91,7 +91,7 @@ export const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
             aria-label="Clear search input"
           >
             <NewIcon csMode="inline" noWrapper>
-              <FontAwesomeIcon icon={faCircleXmark} />
+              <FontAwesomeIcon icon={faXmark} />
             </NewIcon>
           </Actionable>
         ) : null}