style tweaks

src/components/common/SegmentedControl.tsx

@@ -1,31 +1,33 @@
 import {
   Box,
   Flex,
-  HStack,
   RadioProps,
   Text,
   UseRadioGroupProps,
   chakra,
+  useBreakpointValue,
   useColorModeValue,
   useRadio,
   useRadioGroup,
 } from "@chakra-ui/react"
 import { motion } from "framer-motion"
-import { useId } from "react"
+import { useId, useMemo } from "react"
 
 type SegmentedControlOption = {
   label: string
   value: unknown
 }
 type Props<TOption extends SegmentedControlOption> = {
   options: TOption[]
+  size?: "md" | "sm"
   onChange?: (nextValue: TOption["value"]) => void
   value?: TOption["value"]
   defaultValue?: TOption["value"]
 } & Omit<UseRadioGroupProps, "onChange" | "value" | "defaultValue">
 
 const SegmentedControl = <TOption extends SegmentedControlOption>({
   options,
+  size = "md",
   ...useRadioGroupProps
 }: Props<TOption>) => {
   const bgColor = useColorModeValue("white", "blackAlpha.300")
@@ -39,15 +41,27 @@ const SegmentedControl = <TOption extends SegmentedControlOption>({
 
   const uid = useId()
 
+  const height = useMemo(() => {
+    switch (size) {
+      case "md":
+        return { base: "fit", md: 10 }
+      case "sm":
+        return { base: "fit", md: 9 }
+      default:
+        return { base: "fit", md: 10 }
+    }
+  }, [size])
+
   return (
-    <HStack
+    <Flex
       width="full"
+      flexDirection={{ base: "column", md: "row" }}
       borderWidth={borderWidth}
       bgColor={bgColor}
       borderRadius="lg"
-      height={10}
+      height={height}
       padding={1}
-      spacing={1}
+      gap={1}
       {...getRootProps()}
     >
       {options.map((option) => (
@@ -57,9 +71,10 @@ const SegmentedControl = <TOption extends SegmentedControlOption>({
           {...getRadioProps({ value: option.value })}
           label={option.label}
           value={option.value as any}
+          size={size}
         />
       ))}
-    </HStack>
+    </Flex>
   )
 }
 
@@ -68,16 +83,25 @@ const MotionBox = motion(Box)
 const SegmentedControlButton = ({
   uid,
   label,
+  size = "md",
   ...useRadioProps
-}: SegmentedControlOption & RadioProps & { uid: string }) => {
+}: SegmentedControlOption & RadioProps & { uid: string; size?: "md" | "sm" }) => {
   const { state, getInputProps, getRadioProps, htmlProps } = useRadio(useRadioProps)
 
   const inputProps = getInputProps({})
 
   const activeBgColor = useColorModeValue("blackAlpha.100", "whiteAlpha.200")
 
+  const isMobile = useBreakpointValue({ base: true, md: false })
+
   return (
-    <chakra.label {...htmlProps} cursor="pointer" position="relative" h={8} w="full">
+    <chakra.label
+      {...htmlProps}
+      cursor="pointer"
+      position="relative"
+      h={size === "sm" ? 7 : 8}
+      w="full"
+    >
       <input {...inputProps} hidden />
 
       {state.isChecked && (
@@ -91,13 +115,13 @@ const SegmentedControlButton = ({
             duration: 0.2,
           }}
           // Don't animate on the Y axis
-          style={{ originY: "0px" }}
+          style={isMobile ? {} : { originY: "0px" }}
         />
       )}
       <Flex
         alignItems="center"
         justifyContent="center"
-        h={8}
+        h={size === "sm" ? 7 : 8}
         borderRadius="md"
         w="full"
         fontWeight="medium"
@@ -106,7 +130,6 @@ const SegmentedControlButton = ({
           outline: "none",
           boxShadow: "outline",
         }}
-        color={!state.isChecked ? "GrayText" : ""}
         {...getRadioProps()}
         onKeyDown={(e) => {
           if (e.code === "Enter" || e.code === "Space") {
@@ -122,7 +145,12 @@ const SegmentedControlButton = ({
         textAlign="center"
         px={2}
       >
-        <Text as="span" noOfLines={1}>
+        <Text
+          as="span"
+          noOfLines={1}
+          fontSize={size}
+          colorScheme={!state.isChecked ? "gray" : ""}
+        >
           {label}
         </Text>
       </Flex>

src/rewards/Token/DynamicRewardModal.tsx

@@ -91,7 +91,7 @@ const DynamicRewardModal = ({
     onClose: editOnClose,
     onOpen: editOnOpen,
   } = useDisclosure()
-  const footerBg = useColorModeValue("blackAlpha.100", "blackAlpha.600")
+  const footerBg = useColorModeValue("blackAlpha.100", "blackAlpha.400")
 
   return (
     <>

src/solutions/AddSolutionsButton.tsx

@@ -10,6 +10,7 @@ import {
   ModalOverlay,
   SimpleGrid,
   Text,
+  useBreakpointValue,
   useDisclosure,
 } from "@chakra-ui/react"
 import { Plus } from "@phosphor-icons/react"
@@ -30,6 +31,7 @@ import useGuild from "components/[guild]/hooks/useGuild"
 import { usePostHogContext } from "components/_app/PostHogProvider"
 import Button from "components/common/Button"
 import CardMotionWrapper from "components/common/CardMotionWrapper"
+import ControlledSelect from "components/common/ControlledSelect"
 import DiscardAlert from "components/common/DiscardAlert"
 import { Modal } from "components/common/Modal"
 import SegmentedControl from "components/common/SegmentedControl"
@@ -41,6 +43,7 @@ import { FormProvider, useController, useForm, useWatch } from "react-hook-form"
 import rewards, { modalSizeForPlatform } from "rewards"
 import { AddRewardPanelLoadingSpinner } from "rewards/components/AddRewardPanelLoadingSpinner"
 import { PlatformName, PlatformType } from "types"
+import pluralize from "utils/pluralize"
 import SolutionCard from "./SolutionCard"
 import {
   SolutionCardData,
@@ -141,6 +144,8 @@ const AddSolutionsButton = () => {
 
   const { startSessionRecording } = usePostHogContext()
 
+  const isMobile = useBreakpointValue({ base: true, md: false })
+
   const [AddPanel, setAddPanel] = useState<JSX.Element>()
 
   const onSelectReward = (platform: PlatformName) => {
@@ -212,10 +217,14 @@ const AddSolutionsButton = () => {
         {step === "HOME" && (
           <ModalContent>
             <ModalCloseButton />
-            <ModalHeader fontFamily={"inherit"} fontSize={"inherit"}>
+            <ModalHeader
+              fontFamily={"inherit"}
+              fontSize={"inherit"}
+              pr={{ base: 8, sm: 12 }}
+            >
               <Heading
                 as="h1"
-                mb={3}
+                mb={4}
                 fontSize={{ base: "2xl", md: "3xl", lg: "4xl" }}
                 fontFamily="display"
                 textAlign={"center"}
@@ -224,18 +233,17 @@ const AddSolutionsButton = () => {
                 Guild Solutions
               </Heading>
 
-              <Text
-                colorScheme="gray"
-                fontWeight="semibold"
-                mb="8"
-                textAlign={"center"}
-              >
-                Short description if needed.
-              </Text>
-
-              <SearchBar {...{ search, setSearch }} mb={3} />
+              <SearchBar {...{ search, setSearch }} mb={{ base: 2, md: 3 }} />
               <FormProvider {...categoryFormMethods}>
-                <SegmentedControl options={categories} {...categoryField} />
+                {isMobile ? (
+                  <ControlledSelect name="category" options={categories} />
+                ) : (
+                  <SegmentedControl
+                    options={categories}
+                    {...categoryField}
+                    size="sm"
+                  />
+                )}
               </FormProvider>
             </ModalHeader>
 
@@ -355,18 +363,24 @@ const Category = ({
     <>
       <section>
         <HStack mb={3}>
-          <Heading textColor={"GrayText"} fontSize={"large"} fontWeight={"medium"}>
+          <Heading
+            as="h2"
+            color={"GrayText"}
+            fontSize={"xs"}
+            fontWeight={"bold"}
+            textTransform={"uppercase"}
+          >
             {heading}
           </Heading>
           {!!searchQuery && (
-            <Text color={"GrayText"} fontWeight={"normal"}>
-              ({filteredItems.length} results)
+            <Text colorScheme="gray" fontWeight={"normal"} fontSize={"xs"}>
+              ({pluralize(filteredItems.length, "result", true)})
             </Text>
           )}
         </HStack>
         <SimpleGrid
           columns={{ base: 1, md: 2 }}
-          gap={{ base: 4, md: 5 }}
+          gap={{ base: 2, md: 3 }}
           mb={filteredItems.length === 0 ? 2 : 8}
         >
           {filteredItems.map((item, index) => (

src/solutions/SolutionCard.tsx

@@ -1,5 +1,4 @@
 import {
-  Box,
   Circle,
   HStack,
   Heading,
@@ -9,7 +8,6 @@ import {
 } from "@chakra-ui/react"
 import DisplayCard from "components/common/DisplayCard"
 import Image from "next/image"
-import { transparentize } from "utils/transparentize"
 
 export type Props = {
   title: string
@@ -37,12 +35,12 @@ const SolutionCard = ({
       <DisplayCard
         boxShadow={"none"}
         bg={cardBg}
+        outline="1px solid"
+        outlineColor={outlineColor}
+        outlineOffset="-1px"
         px={4}
         py={4}
         position="relative"
-        outline="1px solid white"
-        outlineColor={outlineColor}
-        outlineOffset="-1px"
         onClick={onClick}
         zIndex={2}
         _before={{
@@ -60,42 +58,14 @@ const SolutionCard = ({
           transition: "0.3s",
           filter: `blur(2px) saturate(70%)`,
         }}
-        _after={{
-          transition: "0.3s",
-          opacity: 0,
-          content: `""`,
-          position: "absolute",
-          top: 0,
-          left: 0,
-          width: "100%",
-          height: "100%",
-          bg: `linear-gradient(to top, ${transparentize(
-            cardBg,
-            1
-          )}, ${transparentize(cardBg, 0)} 66%)`,
-        }}
         _hover={{
           _before: {
             opacity: 0.25,
             filter: `blur(0) saturate(100%)`,
-          },
-          _after: {
-            opacity: 1,
+            transform: `scale(1.02)`,
           },
         }}
       >
-        <Box
-          position="absolute"
-          top={0}
-          left={0}
-          right={0}
-          bottom={0}
-          outline="1px solid"
-          outlineColor={outlineColor}
-          outlineOffset="-1px"
-          zIndex={3}
-          rounded={"2xl"}
-        />
         <Stack spacing={3} zIndex={1} justifyContent={"space-between"} h={"100%"}>
           <HStack gap={3}>
             <Circle
@@ -107,8 +77,8 @@ const SolutionCard = ({
               <Image src={imageUrl} alt="Guild logo" fill sizes="3rem" />
             </Circle>
             <Heading
-              fontSize="lg"
-              fontWeight="semibold"
+              fontSize={"normal"}
+              fontWeight="bold"
               letterSpacing="wide"
               maxW="full"
               noOfLines={1}
@@ -117,7 +87,7 @@ const SolutionCard = ({
             </Heading>
           </HStack>
           {description && (
-            <Text colorScheme="gray" lineHeight={1.33} fontSize={"lg"}>
+            <Text colorScheme="gray" lineHeight={1.33}>
               {description}
             </Text>
           )}

src/theme/components/modal.ts

@@ -18,6 +18,7 @@ const styles = {
       },
       dialog: {
         borderTopRadius: "xl",
+        backgroundColor: c === "dark" && darkBgColor,
         borderBottomRadius: { base: 0, sm: "xl" },
         overflow: "hidden",
         marginTop: "auto",