From 685e9a1de2e391b5813e260f07812484538ce179 Mon Sep 17 00:00:00 2001 From: Oksamies Date: Tue, 8 Oct 2024 12:53:13 +0300 Subject: [PATCH] /communities second QA fixes --- .../app/communities/SearchAndOrder.module.css | 12 ++++---- .../app/communities/communities.tsx | 30 ------------------- .../navigation/DevelopersDropDown.tsx | 2 +- .../SkeletonBox/SkeletonBox.module.css | 10 +++---- .../TextInput/TextInput.module.css | 8 +++-- .../src/newComponents/TextInput/TextInput.tsx | 4 +-- 6 files changed, 18 insertions(+), 48 deletions(-) diff --git a/apps/cyberstorm-remix/app/communities/SearchAndOrder.module.css b/apps/cyberstorm-remix/app/communities/SearchAndOrder.module.css index c9da7c9f5..8c812e592 100644 --- 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 index 8f7a40a9d..527686632 100644 --- 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={} csColor="cyber-green" - rootClasses={searchAndOrderStyles.searchInput} id="communitiesSearchInput" /> @@ -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 (
diff --git a/apps/cyberstorm-remix/cyberstorm/navigation/DevelopersDropDown.tsx b/apps/cyberstorm-remix/cyberstorm/navigation/DevelopersDropDown.tsx index e3a2c8c6d..cfabcafcf 100644 --- a/apps/cyberstorm-remix/cyberstorm/navigation/DevelopersDropDown.tsx +++ b/apps/cyberstorm-remix/cyberstorm/navigation/DevelopersDropDown.tsx @@ -24,7 +24,7 @@ export function DevelopersDropDown() { } csVariant="default" - csColor="surface-alpha" + csColor="surface" rootClasses={styles.root} > diff --git a/packages/cyberstorm/src/components/SkeletonBox/SkeletonBox.module.css b/packages/cyberstorm/src/components/SkeletonBox/SkeletonBox.module.css index 69dbec02a..5ff22ce96 100644 --- 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 index 9216b0b1a..66caef3de 100644 --- 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 index d502aacbf..2272c6971 100644 --- 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( aria-label="Clear search input" > - + ) : null}