Footer, Select and Search improvements

thunderstore-io · Sep 18, 2024 · ffc1785 · ffc1785
1 parent ce72a4f
commit ffc1785
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 16 deletions.
diff --git a/apps/cyberstorm-remix/app/communities/SearchAndOrder.module.css b/apps/cyberstorm-remix/app/communities/SearchAndOrder.module.css
@@ -43,4 +43,8 @@
   .searchFilters > span {
     display: none;
   }
+
+  .searchInput {
+    max-width: 100%;
+  }
 }
diff --git a/packages/cyberstorm/src/components/Footer/Footer.module.css b/packages/cyberstorm/src/components/Footer/Footer.module.css
@@ -72,18 +72,18 @@
 
 .footnoteInner {
   display: flex;
-  justify-content: flex-end;
+  justify-content: center;
   width: 100%;
   max-width: 80rem;
   margin-inline: auto;
   padding-inline: var(--space--24);
 }
 
 .nav {
-  display: grid;
-  flex: 1;
-  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
-  column-gap: var(--space--32);
+  display: flex;
+  gap: var(--space--40);
+  justify-content: center;
+  width: 100%;
 }
 
 .navSection {
@@ -97,7 +97,6 @@
   flex-direction: column;
   gap: var(--space--32);
   max-width: 100%;
-  padding-right: 3.125rem;
 }
 
 .adText {
@@ -205,4 +204,24 @@
   .footnote {
     padding-block-end: var(--space--32);
   }
+
+  .nav {
+    gap: 7rem;
+    justify-content: flex-start;
+  }
+
+  .footnoteInner {
+    justify-content: flex-end;
+  }
+
+  .ad {
+    padding-right: 3.125rem;
+  }
+}
+
+@media (max-width: 23.25rem) {
+  .nav {
+    flex-flow: wrap;
+    justify-content: flex-start;
+  }
 }
diff --git a/packages/cyberstorm/src/variants/Select/Select.module.css b/packages/cyberstorm/src/variants/Select/Select.module.css
@@ -38,6 +38,16 @@
   justify-content: space-between;
 }
 
+.trigger {
+  justify-content: space-between;
+}
+
+.iconAndLabel {
+  display: flex;
+  gap: var(--gap--16);
+  align-items: center;
+}
+
 @keyframes fade-in {
   from {
     opacity: 0;

diff --git a/packages/cyberstorm/src/variants/Select/Select.tsx b/packages/cyberstorm/src/variants/Select/Select.tsx
@@ -62,17 +62,19 @@ export function Select<T extends string>(props: SelectProps<T>) {
           csColor="surface"
           csTextStyles={["fontSizeS", "fontWeightBold", "lineHeightAuto"]}
           aria-label={forwardedProps["aria-label"]}
-          rootClasses={forwardedProps.rootClasses}
+          rootClasses={classnames(styles.trigger, forwardedProps.rootClasses)}
         >
-          {selectedOption?.leftIcon ? (
-            <NewIcon csMode="inline" noWrapper csVariant="accent">
-              {selectedOption?.leftIcon}
-            </NewIcon>
-          ) : null}
-          {selectedOption?.label ?? placeholder}
-          {!selectedOption?.label && !selectedOption?.leftIcon
-            ? selectedOption?.value
-            : null}
+          <span className={styles.iconAndLabel}>
+            {selectedOption?.leftIcon ? (
+              <NewIcon csMode="inline" noWrapper csVariant="accent">
+                {selectedOption?.leftIcon}
+              </NewIcon>
+            ) : null}
+            {selectedOption?.label ?? placeholder}
+            {!selectedOption?.label && !selectedOption?.leftIcon
+              ? selectedOption?.value
+              : null}
+          </span>
           {icon}
         </NewButton>
       </Trigger>