a

mattsrobot · Jan 2, 2024 · 2bec18a · 2bec18a
1 parent 4394740
commit 2bec18a
Show file tree

Hide file tree

Showing 27 changed files with 64 additions and 63 deletions.
diff --git a/app/components/channel-header.jsx b/app/components/channel-header.jsx
@@ -10,7 +10,7 @@ export default function ChannelHeader(props) {
             <Flex direction="row" justify="between" className='wk-fullwidth'>
                 <Text weight="bold" size="3">{channel.name}</Text>
                 <div style={{flexGrow: 1}} />
-                <TextField.Root size="1" className='wk-searchbar' radius="large">
+                <TextField.Root size="1" className='wk-searchbar' radius="full">
                     <TextField.Slot>
                         <MagnifyingGlassIcon height="16" width="16" />
                     </TextField.Slot>

diff --git a/app/components/channel-message.jsx b/app/components/channel-message.jsx
@@ -274,11 +274,11 @@ export default function ChannelMessage(props) {
                                                                         </ContextMenu.Content>
                                                                     </ContextMenu.Root>
                                                                     <Flex gap="3" justify="end">
-                                                                        <Button onClick={() => window.open(e.url, "_blank")} variant="solid" color="gray">
+                                                                        <Button radius='full' onClick={() => window.open(e.url, "_blank")} variant="solid" color="gray">
                                                                             Download
                                                                         </Button>
                                                                         <Dialog.Close className='rt-reset'>
-                                                                            <Button variant="solid" color="gray" highContrast>
+                                                                            <Button radius='full' variant="solid" color="gray" highContrast>
                                                                                 Close
                                                                             </Button>
                                                                         </Dialog.Close>
@@ -363,8 +363,8 @@ export default function ChannelMessage(props) {
                     </Flex>
                 </Flex>
                 <Flex direction="row" gap="4" ml="9" pt="1">
-                    <Button size="1" variant='ghost' onClick={handleEdit}>Save</Button>
-                    <Button size="1" variant='ghost' color="gray" onClick={() => setEditing(false)}>Cancel</Button>
+                    <Button radius='full' size="1" variant='ghost' onClick={handleEdit}>Save</Button>
+                    <Button radius='full' size="1" variant='ghost' color="gray" onClick={() => setEditing(false)}>Cancel</Button>
                 </Flex>
             </Flex>
         </section>;

diff --git a/app/components/channel-replybox.jsx b/app/components/channel-replybox.jsx
@@ -1,7 +1,7 @@
 import { IconButton, Text, TextArea, Flex, Button } from '@radix-ui/themes';
 import { useFetcher } from "@remix-run/react";
 import { useState, useCallback, useEffect, useRef } from "react";
-import { CrossCircledIcon, CameraIcon, TrashIcon, FileIcon } from '@radix-ui/react-icons';
+import { CrossCircledIcon, CameraIcon, TrashIcon, FileIcon, PlusIcon } from '@radix-ui/react-icons';
 import { Image } from "@unpic/react";
 import useAutosizeTextArea from './useAutosizeTextArea';
 import './styles.channel-replybox.css';
@@ -198,8 +198,8 @@ export default function ChannelReplybox(props) {
                     <span style={{ flexGrow: 1, height: 0, backgroundColor: "transparent" }} />
                     <IconButton onClick={handleCancelReply} radius='full' size="2" variant='ghost' color='gray' aria-label="Cancel reply"><CrossCircledIcon /></IconButton>
                 </section>}
-                <IconButton className='wk-plus-button' onClick={handleClickFileUpload} radius='full' size="2" variant='ghost' color='gray' aria-label="Add attachment">
-                    <CameraIcon />
+                <IconButton className='wk-plus-button' onClick={handleClickFileUpload} radius='full' size="1" variant='ghost' color='gray' aria-label="Add attachment">
+                    <PlusIcon color='var(--gray-11)' />
                 </IconButton>
                 <TextArea
                     ref={textAreaRef}

diff --git a/app/components/community-menu.jsx b/app/components/community-menu.jsx
@@ -441,22 +441,22 @@ function ChannelsList(props) {
                 <Popover.Content>
                     <Flex direction="column" gap="3">
                         {manageCommunity && <Box>
-                            <Link prefetch='intent' to={`/s/${community.handle}/settings/overview`} aria-label="Community settings" className='rt-reset rt-BaseButton rt-Button rt-r-size-1 rt-variant-solid'>
+                            <Link prefetch='intent' to={`/s/${community.handle}/settings/overview`} aria-label="Community settings" className='rt-reset rt-BaseButton rt-Button rt-r-size-1 rt-variant-solid' data-radius="full">
                                 Community settings
                             </Link>
                         </Box>}
                         {canInvite && <Box>
-                            <Button variant='solid' size="1" color='green' onClick={toggleInviteOpen} aria-label="Invite people">
+                            <Button radius='full' variant='solid' size="1" color='green' onClick={toggleInviteOpen} aria-label="Invite people">
                                 Invite people
                             </Button>
                         </Box>}
                         {!me && <Box>
-                            <Button size="1" variant="solid" color="green" onClick={handleJoinCommunity} aria-label="Join community">
+                            <Button radius='full' size="1" variant="solid" color="green" onClick={handleJoinCommunity} aria-label="Join community">
                                 Join community
                             </Button>
                         </Box>}
                         {!serverOwner && manageCommunity && <Box>
-                            <Button size="1" variant="soft" color="red" onClick={handleLeaveCommunity} aria-label="Leave community">
+                            <Button radius='full' size="1" variant="soft" color="red" onClick={handleLeaveCommunity} aria-label="Leave community">
                                 Leave community
                             </Button>
                         </Box>}
@@ -505,7 +505,7 @@ function ChannelsList(props) {
                                 <ContextMenu.Item onSelect={toggleCreateGroupOpen}>Create group</ContextMenu.Item>
                             </>}
                             {canInvite && <ContextMenu.Item onSelect={toggleInviteOpen} color='green'>Invite people</ContextMenu.Item>}
-                            {manageCommunity && <Link prefetch='intent' to={`/s/${community.handle}/settings/overview`} className='rt-reset' aria-label="Community settings">
+                            {manageCommunity && <Link prefetch='intent' to={`/s/${community.handle}/settings/overview`} className='rt-reset' aria-label="Community settings" data-radius="full">
                                 <ContextMenu.Item color='blue'>Community settings</ContextMenu.Item>
                             </Link>}
                         </> :
@@ -522,10 +522,10 @@ function ChannelsList(props) {
             <div className='wk-user-connection'>
                 {!me ?
                     <Flex direction="column" p="3" m="0" gap="2">
-                        <Link prefetch='intent' to='/signup' aria-label="Signup to Wikid" className='rt-reset rt-BaseButton rt-Button rt-variant-ghost rt-r-size-2'>
+                        <Link prefetch='intent' to='/signup' aria-label="Signup to Wikid" className='rt-reset rt-BaseButton rt-Button rt-variant-ghost rt-r-size-2' data-radius="full">
                             <Text size="2">Signup to Wikid</Text>
                         </Link>
-                        <Link prefetch='intent' to='/login' aria-label="Login" className='rt-reset rt-BaseButton rt-Button rt-variant-ghost rt-r-size-2'>
+                        <Link prefetch='intent' to='/login' aria-label="Login" className='rt-reset rt-BaseButton rt-Button rt-variant-ghost rt-r-size-2' data-radius="full">
                             <Text size="2">Login</Text>
                         </Link>
                     </Flex> :
@@ -564,8 +564,8 @@ function ChannelsList(props) {
                                 </TextField.Root>
                                 <Box grow="1">
                                     <Flex gap="3" mt="3" justify="between">
-                                        <Link prefetch='intent' aria-label="User preferences" to="/u/settings" className='rt-reset rt-BaseButton rt-Button rt-r-size-1 rt-variant-solid'>User preferences</Link>
-                                        <Link prefetch='intent' aria-label="Logout" to="/logout" className='rt-reset rt-BaseButton rt-Button rt-r-size-1 rt-variant-soft' data-accent-color="red">Logout</Link>
+                                        <Link prefetch='intent' aria-label="User preferences" to="/u/settings" className='rt-reset rt-BaseButton rt-Button rt-r-size-1 rt-variant-solid' data-radius="full">User preferences</Link>
+                                        <Link prefetch='intent' aria-label="Logout" to="/logout" className='rt-reset rt-BaseButton rt-Button rt-r-size-1 rt-variant-soft' data-accent-color="red" data-radius="full">Logout</Link>
                                     </Flex>
                                 </Box>
                             </Flex>

diff --git a/app/components/confirm-delete-channel-dialog.jsx b/app/components/confirm-delete-channel-dialog.jsx
@@ -60,11 +60,11 @@ export default function ConfirmDeleteChannelDialog(props) {
             </Flex>
             <Flex gap="3" mt="4" justify="end">
                 <Dialog.Close>
-                    <Button disabled={isBusy} variant="soft" color="gray">
+                    <Button radius='full' disabled={isBusy} variant="soft" color="gray">
                         Cancel
                     </Button>
                 </Dialog.Close>
-                <Button color="red" disabled={isBusy} onClick={handleDelete}>Delete</Button>
+                <Button radius='full' color="red" disabled={isBusy} onClick={handleDelete}>Delete</Button>
             </Flex>
         </Dialog.Content>
     );

diff --git a/app/components/confirm-delete-group-dialog.jsx b/app/components/confirm-delete-group-dialog.jsx
@@ -61,11 +61,11 @@ export default function ConfirmDeleteGroupDialog(props) {
             </Flex>
             <Flex gap="3" mt="4" justify="end">
                 <Dialog.Close>
-                    <Button disabled={isBusy} variant="soft" color="gray">
+                    <Button radius='full' disabled={isBusy} variant="soft" color="gray">
                         Cancel
                     </Button>
                 </Dialog.Close>
-                <Button color="red" disabled={isBusy} onClick={handleDelete}>Delete</Button>
+                <Button radius='full' color="red" disabled={isBusy} onClick={handleDelete}>Delete</Button>
             </Flex>
         </Dialog.Content>
     );

diff --git a/app/components/context-save-toolbar.jsx b/app/components/context-save-toolbar.jsx
@@ -33,8 +33,8 @@ export default function ContextSaveToolbar(props) {
                 </Box>
                 <div style={{ flexGrow: 1 }} />
                 <Flex gap="4" direction="row" align="center">
-                    <Button color='gray' variant="ghost" onClick={discard}>Discard</Button>
-                    <Button onClick={save}>Save</Button>
+                    <Button radius='full' color='gray' variant="ghost" onClick={discard}>Discard</Button>
+                    <Button radius='full' onClick={save}>Save</Button>
                 </Flex>
             </nav>
         </motion.div>

diff --git a/app/components/create-channel-dialog.jsx b/app/components/create-channel-dialog.jsx
@@ -84,11 +84,11 @@ export default function CreateChannelDialog(props) {
             </Flex>
             <Flex gap="3" mt="4" justify="end">
                 <Dialog.Close>
-                    <Button disabled={isCreating} variant="soft" color="gray">
+                    <Button radius='full' disabled={isCreating} variant="soft" color="gray">
                         Cancel
                     </Button>
                 </Dialog.Close>
-                <Button disabled={!valid || isCreating} onClick={handleCreateChannel}>Create</Button>
+                <Button radius='full' disabled={!valid || isCreating} onClick={handleCreateChannel}>Create</Button>
             </Flex>
         </Dialog.Content>
     );

diff --git a/app/components/create-community-dialog.jsx b/app/components/create-community-dialog.jsx
@@ -123,11 +123,11 @@ export default function CreateCommunityDialog() {
             </Flex>
             <Flex gap="3" mt="4" justify="end">
             <Dialog.Close>
-                <Button disabled={navigation.state == "submitting"} variant="soft" color="gray">
+                <Button radius='full' disabled={navigation.state == "submitting"} variant="soft" color="gray">
                     Cancel
                 </Button>
             </Dialog.Close>
-            <Button disabled={!valid || navigation.state == "submitting"} onClick={handleCreateCommmunity}>Create</Button>
+            <Button radius='full' disabled={!valid || navigation.state == "submitting"} onClick={handleCreateCommmunity}>Create</Button>
             </Flex>
         </Dialog.Content>
     );

diff --git a/app/components/create-group-dialog.jsx b/app/components/create-group-dialog.jsx
@@ -85,11 +85,11 @@ export default function CreateGroupDialog(props) {
             </Flex>
             <Flex gap="3" mt="4" justify="end">
                 <Dialog.Close>
-                    <Button disabled={isCreating} variant="soft" color="gray">
+                    <Button radius='full' disabled={isCreating} variant="soft" color="gray">
                         Cancel
                     </Button>
                 </Dialog.Close>
-                <Button disabled={!valid || isCreating} onClick={handleCreateGroup}>Create</Button>
+                <Button radius='full' disabled={!valid || isCreating} onClick={handleCreateGroup}>Create</Button>
             </Flex>
         </Dialog.Content>
     );

diff --git a/app/components/create-invite-dialog.jsx b/app/components/create-invite-dialog.jsx
@@ -79,7 +79,7 @@ export default function CreateInviteDialog(props) {
                             </IconButton>
                         </TextField.Slot>
                     </TextField.Root>
-                    <Button disabled={isCreating} onClick={handleCreateInvite}>Create link</Button>
+                    <Button radius='full' disabled={isCreating} onClick={handleCreateInvite}>Create link</Button>
                 </Flex>
                 <Flex direction="row" gap="2" align="center">
                     <Text as="label" size="2">
@@ -91,7 +91,7 @@ export default function CreateInviteDialog(props) {
             </Flex>
             <Flex gap="3" mt="4" justify="end">
                 <Dialog.Close>
-                    <Button disabled={isCreating} variant="soft" color="gray">
+                    <Button radius='full' disabled={isCreating} variant="soft" color="gray">
                         Close
                     </Button>
                 </Dialog.Close>

diff --git a/app/components/edit-channel-dialog.jsx b/app/components/edit-channel-dialog.jsx
@@ -94,11 +94,11 @@ export default function EditChannelDialog(props) {
             </Flex>
             <Flex gap="3" mt="4" justify="end">
             <Dialog.Close>
-                <Button disabled={isCreating} variant="soft" color="gray">
+                <Button radius='full' disabled={isCreating} variant="soft" color="gray">
                     Cancel
                 </Button>
             </Dialog.Close>
-            <Button disabled={!valid || isCreating} onClick={handleEditChannel}>Edit</Button>
+            <Button radius='full' disabled={!valid || isCreating} onClick={handleEditChannel}>Edit</Button>
             </Flex>
         </Dialog.Content>
     );

diff --git a/app/components/edit-group-dialog.jsx b/app/components/edit-group-dialog.jsx
@@ -84,11 +84,11 @@ export default function EditGroupDialog(props) {
             </Flex>
             <Flex gap="3" mt="4" justify="end">
                 <Dialog.Close>
-                    <Button disabled={isCreating} variant="soft" color="gray">
+                    <Button radius='full' disabled={isCreating} variant="soft" color="gray">
                         Cancel
                     </Button>
                 </Dialog.Close>
-                <Button disabled={!valid || isCreating} onClick={handleEdit}>Edit</Button>
+                <Button radius='full' disabled={!valid || isCreating} onClick={handleEdit}>Edit</Button>
             </Flex>
         </Dialog.Content>
     );

diff --git a/app/components/styles.channel-replybox.css b/app/components/styles.channel-replybox.css
@@ -12,12 +12,12 @@
 
 .wk-channel-replybox div {
     border: 1px solid var(--gray-a4);
-    border-radius: max(var(--radius-3), var(--radius-full));
 }
 
 .wk-channel-replybox textarea {
     background-color: var(--gray-3);
-    padding-right: 40px;
+    padding-right: 35px;
+    padding-left: 35px;
 }
 
 .wk-reply-to {
@@ -35,14 +35,16 @@
 }
 
 .wk-plus-button {
+    background-color: var(--gray-a7);
     position: absolute;
-    right: 20px;
-    top: 9px;
+    left: 10px;
+    bottom: 25.5px;
     z-index: 1;
 }
 
 .wk-reply-box-inner {
     min-height: unset;
+    border-radius: 17px;
 }
 
 .wk-reply-image-container {

diff --git a/app/components/styles.channel-users.css b/app/components/styles.channel-users.css
@@ -8,7 +8,6 @@
   padding: var(--space-4);
   overflow-y: auto;
   scrollbar-width: none;
-  -webkit-app-region: drag;
 }
 
 .wk-channel-users::-webkit-scrollbar {

diff --git a/app/root.jsx b/app/root.jsx
@@ -70,7 +70,7 @@ function App() {
         <Links />
       </head>
       <body>
-        <Theme grayColor="gray" panelBackground="translucent" scaling="100%">
+        <Theme grayColor="gray" panelBackground="translucent" scaling="100%" accentColor="blue">
           <Toast.Provider swipeDirection="right">
             <WebsocketContext.Provider value={{ sendJsonMessage: sendJsonMessage, lastJsonMessage: lastJsonMessage }}>
               <Outlet />

diff --git a/app/routes/c.$handle._index.jsx b/app/routes/c.$handle._index.jsx
@@ -88,12 +88,12 @@ export default function Community() {
                     {!!data?.authorized ? <Dialog.Root>
                         <label>
                             <Dialog.Trigger>
-                                <Button>Claim this community</Button>
+                                <Button radius='full'>Claim this community</Button>
                             </Dialog.Trigger>
                         </label>
                         <CreateCommunityDialog />
                     </Dialog.Root> : <Link href='/signup'>
-                        <Button>Claim this community</Button>
+                        <Button radius='full'>Claim this community</Button>
                     </Link>}
                 </Flex>
 

diff --git a/app/routes/c.get-started.jsx b/app/routes/c.get-started.jsx
@@ -74,7 +74,7 @@ export default function GetStarted() {
         <Flex direction="column" gap="0" className="wk-main-content">
             <nav className='wk-heading-smol'>
                 <Flex direction="row" align="center" justify="center" p="0" style={{ width: "100%" }}>
-                    <TextField.Root>
+                    <TextField.Root radius='full'>
                         <TextField.Slot>
                             <MagnifyingGlassIcon height="16" width="16" />
                         </TextField.Slot>
@@ -102,12 +102,12 @@ export default function GetStarted() {
                         {!!(data?.me) ? <Dialog.Root>
                             <label>
                                 <Dialog.Trigger>
-                                    <Button>Create community</Button>
+                                    <Button radius='full'>Create community</Button>
                                 </Dialog.Trigger>
                             </label>
                             <CreateCommunityDialog />
                         </Dialog.Root> : <Link href='/signup'>
-                            <Button>Create community</Button>
+                            <Button radius='full'>Create community</Button>
                         </Link>}
                     </Flex>
                 </Card>