rename primary color

src/components/layout/desktop-side-nav.tsx

@@ -55,7 +55,7 @@ export default function DesktopSideNav(props: Omit<FlexProps, "children">) {
               aria-label="Write Note"
               title="Write Note"
               onClick={() => openModal()}
-              colorScheme="brand"
+              colorScheme="primary"
               size="lg"
               isDisabled={account.readonly}
             >
@@ -64,7 +64,7 @@ export default function DesktopSideNav(props: Omit<FlexProps, "children">) {
           </>
         )}
         {!account && (
-          <Button as={RouterLink} to="/login" state={{ from: location.pathname }} colorScheme="brand" w="full">
+          <Button as={RouterLink} to="/login" state={{ from: location.pathname }} colorScheme="primary" w="full">
             Login
           </Button>
         )}

src/components/layout/mobile-bottom-nav.tsx

@@ -39,7 +39,7 @@ export default function MobileBottomNav(props: Omit<FlexProps, "children">) {
             openModal();
           }}
           variant="solid"
-          colorScheme="brand"
+          colorScheme="primary"
           isDisabled={account?.readonly ?? true}
         />
         <IconButton

src/components/layout/mobile-side-drawer.tsx

@@ -45,7 +45,7 @@ export default function MobileSideDrawer({ ...props }: Omit<DrawerProps, "childr
           <NavItems />
           <Box h="2" />
           {!account && (
-            <Button as={RouterLink} to="/login" colorScheme="brand">
+            <Button as={RouterLink} to="/login" colorScheme="primary">
               Login
             </Button>
           )}

src/components/lightbox-provider.tsx

@@ -109,7 +109,7 @@ function EventSlideHeader({ event, ...props }: { event: NostrEvent } & Omit<Flex
       <UserLink pubkey={event.pubkey} isTruncated fontWeight="bold" fontSize="lg" />
       <UserDnsIdentityIcon pubkey={event.pubkey} onlyIcon />
       <Spacer />
-      <Button as={RouterLink} to={`/n/${encoded}`} colorScheme="brand" size="sm">
+      <Button as={RouterLink} to={`/n/${encoded}`} colorScheme="primary" size="sm">
         View Note
       </Button>
     </Flex>

src/components/note/components/repost-button.tsx

@@ -84,7 +84,7 @@ export function RepostButton({ event }: { event: NostrEvent }) {
               <Button variant="ghost" size="sm" mr={2} onClick={onClose}>
                 Cancel
               </Button>
-              <Button colorScheme="brand" variant="solid" onClick={handleClick} size="sm" isLoading={loading}>
+              <Button colorScheme="primary" variant="solid" onClick={handleClick} size="sm" isLoading={loading}>
                 Repost
               </Button>
             </ModalFooter>

src/components/reaction-picker.tsx

@@ -67,7 +67,7 @@ export default function ReactionPicker({ onSelect }: ReactionPickerProps) {
         />
         <Flex>
           <Input placeholder="🔥" display="inline" size="sm" minW="2rem" w="5rem" />
-          <Button variant="solid" colorScheme="brand" size="sm">
+          <Button variant="solid" colorScheme="primary" size="sm">
             Add
           </Button>
         </Flex>

src/components/relay-selection/relay-selection-modal.tsx

@@ -102,7 +102,7 @@ export default function RelaySelectionModal({
             Cancel
           </Button>
           <Button
-            colorScheme="brand"
+            colorScheme="primary"
             onClick={() => {
               onSubmit(newSelected);
               onClose();

src/components/timeline-page/generic-note-timeline/index.tsx

@@ -106,7 +106,7 @@ function GenericNoteTimeline({ timeline }: { timeline: TimelineLoader }) {
         <Box h="0" overflow="visible" w="full" zIndex={100} display="flex" position="relative">
           <Button
             onClick={() => setLatest(timeline.timeline.value[0].created_at + 10)}
-            colorScheme="brand"
+            colorScheme="primary"
             size="lg"
             mx="auto"
             w={["50%", null, "30%"]}

src/components/timeline-page/timeline-action-and-status.tsx

@@ -20,7 +20,7 @@ export default function TimelineActionAndStatus({ timeline }: { timeline: Timeli
   }
 
   return (
-    <Button onClick={() => timeline.loadMore()} flexShrink={0} size="lg" mx="auto" colorScheme="brand" my="4">
+    <Button onClick={() => timeline.loadMore()} flexShrink={0} size="lg" mx="auto" colorScheme="primary" my="4">
       Load More
     </Button>
   );

src/components/user-follow-button.tsx

@@ -140,7 +140,7 @@ export const UserFollowButton = ({ pubkey, showLists, ...props }: UserFollowButt
   if (showLists) {
     return (
       <Menu closeOnSelect={false}>
-        <MenuButton as={Button} colorScheme="brand" {...props} rightIcon={<ArrowDownSIcon />} isDisabled={isDisabled}>
+        <MenuButton as={Button} colorScheme="primary" {...props} rightIcon={<ArrowDownSIcon />} isDisabled={isDisabled}>
           {isFollowing ? "Unfollow" : "Follow"}
         </MenuButton>
         <MenuList>
@@ -174,13 +174,13 @@ export const UserFollowButton = ({ pubkey, showLists, ...props }: UserFollowButt
     );
   } else if (isFollowing) {
     return (
-      <Button onClick={handleUnfollow} colorScheme="brand" icon={<UnfollowIcon />} isDisabled={isDisabled} {...props}>
+      <Button onClick={handleUnfollow} colorScheme="primary" icon={<UnfollowIcon />} isDisabled={isDisabled} {...props}>
         Unfollow
       </Button>
     );
   } else {
     return (
-      <Button onClick={handleFollow} colorScheme="brand" icon={<FollowIcon />} isDisabled={isDisabled} {...props}>
+      <Button onClick={handleFollow} colorScheme="primary" icon={<FollowIcon />} isDisabled={isDisabled} {...props}>
         Follow
       </Button>
     );

src/helpers/regexp.ts

@@ -3,7 +3,7 @@ export const getMatchNostrLink = () =>
 export const getMatchHashtag = () => /(^|[^\p{L}])#([\p{L}\p{N}]+)/gu;
 export const getMatchLink = () =>
   /https?:\/\/([a-zA-Z0-9\.\-]+\.[a-zA-Z]+)([\p{Letter}\p{Number}&\.-\/\?=#\-@%\+_,:!]*)/gu;
-export const getMatchEmoji = () => /:([a-zA-Z0-9_]+):/gi;
+export const getMatchEmoji = () => /:([a-zA-Z0-9_-]+):/gi;
 
 // read more https://www.regular-expressions.info/unicode.html#category
 export function stripInvisibleChar(str?: string) {

src/providers/mute-modal-provider.tsx

@@ -281,7 +281,7 @@ function UnmuteModal({ onClose }: Omit<ModalProps, "children">) {
               <MenuItem onClick={() => extendAll(dayjs().add(1, "week").unix())}>1 Week</MenuItem>
             </MenuList>
           </Menu>
-          <Button colorScheme="brand" onClick={unmuteAll}>
+          <Button colorScheme="primary" onClick={unmuteAll}>
             Unmute all
           </Button>
         </ModalFooter>

src/providers/require-current-account.tsx

@@ -32,7 +32,7 @@ export default function RequireCurrentAccount({ children }: { children: JSX.Elem
           as={Link}
           to="/login"
           state={{ from: location.pathname }}
-          colorScheme="brand"
+          colorScheme="primary"
           rightIcon={<ExternalLinkIcon />}
         >
           Login

src/theme/index.ts

@@ -1,4 +1,4 @@
-import { extendTheme } from "@chakra-ui/react";
+import { extendTheme, Theme, DeepPartial } from "@chakra-ui/react";
 import { containerTheme } from "./container";
 
 const breakpoints = ["sm", "md", "lg", "xl", "2xl"] as const;
@@ -6,7 +6,7 @@ const breakpoints = ["sm", "md", "lg", "xl", "2xl"] as const;
 export default function createTheme(primaryColor: string = "#8DB600", maxBreakpoint?: (typeof breakpoints)[number]) {
   const theme = extendTheme({
     colors: {
-      brand: {
+      primary: {
         50: primaryColor,
         100: primaryColor,
         200: primaryColor,
@@ -22,7 +22,7 @@ export default function createTheme(primaryColor: string = "#8DB600", maxBreakpo
     components: {
       Container: containerTheme,
     },
-  });
+  } as DeepPartial<Theme>);
 
   // if maxBreakpoint is set, set all breakpoints above it to a large number so they are never reached
   if (maxBreakpoint && breakpoints.includes(maxBreakpoint)) {

src/views/emoji-packs/components/create-modal.tsx

@@ -70,7 +70,7 @@ export default function EmojiPackCreateModal({ onClose, ...props }: Omit<ModalPr
           <Button mr="2" onClick={onClose}>
             Cancel
           </Button>
-          <Button colorScheme="brand" type="submit">
+          <Button colorScheme="primary" type="submit">
             Create
           </Button>
         </ModalFooter>

src/views/emoji-packs/emoji-pack.tsx

@@ -53,7 +53,13 @@ function AddEmojiForm({ onAdd }: { onAdd: (values: { name: string; url: string }
 
   return (
     <Flex as="form" gap="2" onSubmit={submit}>
-      <Input placeholder="name" {...register("name", { required: true })} autoComplete="off" />
+      <Input
+        placeholder="name"
+        {...register("name", { required: true })}
+        pattern="^[a-zA-Z0-9_-]+$"
+        autoComplete="off"
+        title="emoji name, can not contain spaces"
+      />
       <Input placeholder="https://example.com/emoji.png" {...register("url", { required: true })} autoComplete="off" />
       {previewURL && <Image aspectRatio={1} h="10" src={previewURL} />}
       <Button flexShrink={0} type="submit">
@@ -132,7 +138,7 @@ function EmojiPackPage({ pack }: { pack: NostrEvent }) {
           {isAuthor && (
             <>
               {!editing && (
-                <Button colorScheme="brand" onClick={startEdit}>
+                <Button colorScheme="primary" onClick={startEdit}>
                   Edit
                 </Button>
               )}
@@ -184,7 +190,7 @@ function EmojiPackPage({ pack }: { pack: NostrEvent }) {
           <Button ml="auto" onClick={cancelEdit}>
             Cancel
           </Button>
-          <Button colorScheme="brand" onClick={saveEdit}>
+          <Button colorScheme="primary" onClick={saveEdit}>
             Save
           </Button>
         </Flex>

src/views/emoji-packs/index.tsx

@@ -81,7 +81,7 @@ export default function EmojiPacksView() {
           Emoji pack manager
         </Button>
         {account && (
-          <Button colorScheme="brand" onClick={createModal.onOpen}>
+          <Button colorScheme="primary" onClick={createModal.onOpen}>
             Create Emoji pack
           </Button>
         )}

src/views/lists/components/new-list-modal.tsx

@@ -92,7 +92,7 @@ export default function NewListModal({
           </FormControl>
           <ButtonGroup ml="auto">
             <Button onClick={onClose}>Cancel</Button>
-            <Button colorScheme="brand" type="submit" isLoading={formState.isSubmitting}>
+            <Button colorScheme="primary" type="submit" isLoading={formState.isSubmitting}>
               Create
             </Button>
           </ButtonGroup>

src/views/lists/index.tsx

@@ -39,7 +39,7 @@ function ListsPage() {
         >
           Listr
         </Button>
-        <Button leftIcon={<PlusCircleIcon />} onClick={newList.onOpen} colorScheme="brand">
+        <Button leftIcon={<PlusCircleIcon />} onClick={newList.onOpen} colorScheme="primary">
           New List
         </Button>
       </Flex>

src/views/login/nip05.tsx

@@ -133,7 +133,7 @@ export default function LoginNip05View() {
         <Button variant="link" onClick={() => navigate("../")}>
           Back
         </Button>
-        <Button colorScheme="brand" ml="auto" type="submit" isDisabled={!pubkey}>
+        <Button colorScheme="primary" ml="auto" type="submit" isDisabled={!pubkey}>
           Login
         </Button>
       </Flex>

src/views/login/npub.tsx

@@ -54,7 +54,7 @@ export default function LoginNpubView() {
         <Button variant="link" onClick={() => navigate("../")}>
           Back
         </Button>
-        <Button colorScheme="brand" ml="auto" type="submit">
+        <Button colorScheme="primary" ml="auto" type="submit">
           Login
         </Button>
       </Flex>

src/views/login/nsec.tsx

@@ -146,7 +146,7 @@ export default function LoginNsecView() {
         <Button ml="auto" onClick={generateNewKey}>
           Generate New
         </Button>
-        <Button colorScheme="brand" type="submit">
+        <Button colorScheme="primary" type="submit">
           Login
         </Button>
       </Flex>

src/views/login/start.tsx

@@ -67,7 +67,7 @@ export default function LoginStartView() {
           <AlertDescription>There are bugs and things will break.</AlertDescription>
         </Box>
       </Alert>
-      <Button onClick={loginWithExtension} colorScheme="brand">
+      <Button onClick={loginWithExtension} colorScheme="primary">
         Use browser extension (NIP-07)
       </Button>
       <Button as={RouterLink} to="./nip05" state={location.state}>

src/views/map/index.tsx

@@ -156,7 +156,7 @@ export default function MapView() {
           <Button flexShrink={0} onClick={() => navigate(-1)}>
             Back
           </Button>
-          <Button colorScheme="brand" onClick={setCellsFromMap} flex={1}>
+          <Button colorScheme="primary" onClick={setCellsFromMap} flex={1}>
             Search this area
           </Button>
         </Flex>

src/views/note/components/reply-form.tsx

@@ -133,7 +133,7 @@ export default function ReplyForm({ item, onCancel, onSubmitted }: ReplyFormProp
           <UserAvatarStack label="Notify" pubkeys={notifyPubkeys} />
           <ButtonGroup size="sm" ml="auto">
             <Button onClick={onCancel}>Cancel</Button>
-            <Button type="submit" colorScheme="brand" size="sm">
+            <Button type="submit" colorScheme="primary" size="sm">
               Submit
             </Button>
           </ButtonGroup>

src/views/notifications/index.tsx

@@ -113,7 +113,7 @@ function NotificationsPage() {
   return (
     <IntersectionObserverProvider callback={callback}>
       <VerticalPageLayout>
-        <Tabs isLazy colorScheme="brand">
+        <Tabs isLazy colorScheme="primary">
           <TabList overflowX="auto" overflowY="hidden">
             <Tab>Replies</Tab>
             <Tab>Mentions</Tab>

src/views/profile/edit.tsx

@@ -179,7 +179,7 @@ const MetadataForm = ({ defaultValues, onSubmit }: MetadataFormProps) => {
           Download Backup
         </Button>
         <Button onClick={() => reset()}>Reset</Button>
-        <Button colorScheme="brand" isLoading={isSubmitting} type="submit">
+        <Button colorScheme="primary" isLoading={isSubmitting} type="submit">
           Update
         </Button>
       </Flex>

src/views/relays/components/add-custom-modal.tsx

@@ -94,7 +94,7 @@ export default function AddCustomRelayModal({
             <Button variant="ghost" onClick={props.onClose}>
               Cancel
             </Button>
-            <Button colorScheme="brand" onClick={() => safeUrl && onSubmit(safeUrl)} isDisabled={!safeUrl}>
+            <Button colorScheme="primary" onClick={() => safeUrl && onSubmit(safeUrl)} isDisabled={!safeUrl}>
               Add
             </Button>
           </ButtonGroup>

src/views/relays/index.tsx

@@ -49,7 +49,7 @@ export default function RelaysView() {
         <Button as={RouterLink} to="/relays/reviews">
           Browse Reviews
         </Button>
-        <Button colorScheme="brand" onClick={addRelayModal.onOpen}>
+        <Button colorScheme="primary" onClick={addRelayModal.onOpen}>
           Add Custom
         </Button>
       </Flex>

src/views/relays/relay/index.tsx

@@ -65,7 +65,7 @@ function RelayPage({ relay }: { relay: string }) {
       </Flex>
       <RelayMetadata url={relay} extended />
       {info?.supported_nips && <SupportedNIPs nips={info?.supported_nips} />}
-      <Tabs display="flex" flexDirection="column" flexGrow="1" isLazy colorScheme="brand">
+      <Tabs display="flex" flexDirection="column" flexGrow="1" isLazy colorScheme="primary">
         <TabList overflowX="auto" overflowY="hidden" flexShrink={0}>
           <Tab>Reviews</Tab>
           <Tab>Notes</Tab>
@@ -76,7 +76,7 @@ function RelayPage({ relay }: { relay: string }) {
             <Flex gap="2">
               <PeopleListSelection />
               {!showReviewForm.isOpen && (
-                <Button colorScheme="brand" ml="auto" mb="2" onClick={showReviewForm.onOpen}>
+                <Button colorScheme="primary" ml="auto" mb="2" onClick={showReviewForm.onOpen}>
                   Write review
                 </Button>
               )}

src/views/relays/relay/relay-review-form.tsx

@@ -56,7 +56,7 @@ export default function RelayReviewForm({
       <Textarea {...register("content")} rows={5} placeholder="A short description of your experience with the relay" />
       <Flex gap="2" ml="auto">
         <Button onClick={onClose}>Cancel</Button>
-        <Button type="submit" colorScheme="brand">
+        <Button type="submit" colorScheme="primary">
           Submit
         </Button>
       </Flex>

src/views/settings/index.tsx

@@ -50,7 +50,7 @@ export default function SettingsView() {
           ml="auto"
           isLoading={form.formState.isLoading || form.formState.isValidating || form.formState.isSubmitting}
           isDisabled={!form.formState.isDirty}
-          colorScheme="brand"
+          colorScheme="primary"
           type="submit"
         >
           Save Settings

src/views/streams/stream/stream-chat/stream-chat-form.tsx

@@ -81,7 +81,7 @@ export default function ChatMessageForm({ stream, hideZapButton }: { stream: Par
               if (file) uploadImage(file);
             }}
           />
-          <Button colorScheme="brand" type="submit" isLoading={formState.isSubmitting}>
+          <Button colorScheme="primary" type="submit" isLoading={formState.isSubmitting}>
             Send
           </Button>
         </Flex>

src/views/user/components/header.tsx

@@ -42,7 +42,7 @@ export default function Header({
             aria-label="Edit profile"
             title="Edit profile"
             size="sm"
-            colorScheme="brand"
+            colorScheme="primary"
             onClick={() => navigate("/profile")}
           />
         )}

src/views/user/index.tsx

@@ -115,7 +115,7 @@ const UserView = () => {
             isLazy
             index={activeTab}
             onChange={(v) => navigate(tabs[v].path, { replace: true })}
-            colorScheme="brand"
+            colorScheme="primary"
             h="full"
           >
             <TabList overflowX="auto" overflowY="hidden" flexShrink={0}>