fix: wraft issues

apps/web/.eslintrc.js

@@ -93,7 +93,7 @@ module.exports = {
                 position: 'after',
               },
               {
-                pattern: '@hooks/**',
+                pattern: 'hooks/**',
                 group: 'internal',
                 position: 'after',
               },

apps/web/src/components/Auth/SignupForm.tsx

@@ -4,6 +4,7 @@ import { useForm } from 'react-hook-form';
 import toast from 'react-hot-toast';
 import { Flex, Box, Button, Text, Field, InputText } from '@wraft/ui';
 import { BrandLogoIcon } from '@wraft/icon';
+import styled from '@emotion/styled';
 
 import Link from 'common/NavLink';
 import ErrorMessages from 'common/ErrorMessages';
@@ -12,6 +13,89 @@ import { postAPI } from 'utils/models';
 
 import WaitlistPrompt from './WaitlistPrompt';
 
+const NameFields = styled(Flex)`
+  display: flex;
+  flex-direction: row;
+  gap: 16px;
+  margin-bottom: 24px;
+
+  @media (max-width: 768px) {
+    flex-direction: column;
+  }
+`;
+
+const ResponsiveLogo = styled(BrandLogoIcon)`
+  width: 7rem;
+  height: 3rem;
+
+  @media (max-width: 768px) {
+    width: 5rem;
+    height: 2rem;
+  }
+
+  @media (max-width: 480px) {
+    width: 5rem;
+    height: 1.8rem;
+  }
+`;
+
+const LogoWrapper = styled(Box)`
+  position: absolute;
+  top: 80px;
+  left: 80px;
+
+  @media (max-width: 1024px) {
+    top: 60px;
+    left: 40px;
+  }
+
+  @media (max-width: 768px) {
+    position: relative;
+    top: 0;
+    left: 0;
+    display: flex;
+    justify-content: flex-start;
+    width: 100%;
+    padding-left: 16px;
+    margin-bottom: 24px;
+  }
+
+  @media (max-width: 480px) {
+    padding-left: 12px;
+    margin-bottom: 20px;
+  }
+`;
+
+const FormCard = styled(Flex)`
+  width: 500px;
+  flex-direction: column;
+  background: white;
+  border-radius: 12px;
+  padding: 32px;
+
+  @media (max-width: 768px) {
+    width: 100%;
+    max-width: 90%;
+  }
+
+  @media (max-width: 480px) {
+    max-width: 95%;
+    padding: 20px;
+  }
+`;
+
+const PageWrapper = styled(Flex)`
+  justify-content: center;
+  align-items: flex-start;
+  padding: 6rem;
+
+  @media (max-width: 768px) {
+    flex-direction: column;
+    align-items: center;
+    padding: 2rem 1rem;
+  }
+`;
+
 const SignupForm = () => {
   const {
     register,
@@ -21,6 +105,7 @@ const SignupForm = () => {
     mode: 'onSubmit',
     resolver: zodResolver(SignUpSchema),
   });
+
   const [showSuccess, setShowSuccess] = useState(false);
   const homePageUrl = process.env.homePageUrl || '/';
 
@@ -48,24 +133,22 @@ const SignupForm = () => {
       {showSuccess ? (
         <WaitlistPrompt />
       ) : (
-        <Flex justify="center" p="5xl">
-          <Box position="absolute" top="80px" left="80px">
+        <PageWrapper>
+          <LogoWrapper>
             <Link href={homePageUrl}>
               <Box color="gray.0" fill="gray.1200">
-                <BrandLogoIcon width="7rem" height="3rem" />
+                <ResponsiveLogo />
               </Box>
             </Link>
-          </Box>
-          <Flex
-            variant="card"
-            w="500px"
-            justifySelf="center"
-            direction="column">
+          </LogoWrapper>
+
+          <FormCard variant="card">
             <Text as="h3" mb="48px" color="gray.1200" fontSize="3xl">
               Join Wraft
             </Text>
+
             <Box as="form" onSubmit={handleSubmit(onSubmit)}>
-              <Flex gap="16px" marginBottom="24px">
+              <NameFields>
                 <Box flexGrow="1">
                   <Field
                     label="First Name"
@@ -88,8 +171,9 @@ const SignupForm = () => {
                     />
                   </Field>
                 </Box>
-              </Flex>
-              <Box marginBottom="32px">
+              </NameFields>
+
+              <Box mt="-sm" mb="30px">
                 <Field label="Email" required error={errors?.email?.message}>
                   <InputText
                     type="email"
@@ -100,6 +184,7 @@ const SignupForm = () => {
               </Box>
               <Button type="submit">Join waitlist</Button>
             </Box>
+
             <Box borderBottom="1px solid" borderColor="border" my="36px" />
             <Flex gap="8px" mt="12px" mb="4px" alignItems="center">
               <Text as="p">Already joined?</Text>
@@ -113,8 +198,8 @@ const SignupForm = () => {
                 <Text color="primary">Privacy Policy.</Text>
               </Link>
             </Text>
-          </Flex>
-        </Flex>
+          </FormCard>
+        </PageWrapper>
       )}
     </>
   );

apps/web/src/components/DocumentView/DocumentSidebar/ContentInfoBlock.tsx

@@ -142,7 +142,10 @@ export const EditMenus = ({ id, nextState }: EditMenuProps) => {
         />
       </Modal>
 
-      <Modal ariaLabel="Confirm Block" open={isMailPopupOpen}>
+      <Modal
+        ariaLabel="Confirm Block"
+        open={isMailPopupOpen}
+        onClose={() => setMailPopupOpen(false)}>
         <>
           {isMailPopupOpen && (
             <EmailComposer id={id} setOpen={setMailPopupOpen} />

apps/web/src/components/ImportTemplate/ImporterWrapper.tsx

@@ -77,7 +77,6 @@ function ImporterApp() {
     useState<ActionStateConfig>(defaultActionState);
 
   const [imported, setImported] = useState<ImportedItems>();
-
   const [errors, setErrors] = useState<any>([]);
 
   const handleNext = () => {
@@ -88,11 +87,10 @@ function ImporterApp() {
 
   /*
    * Initiate Import process
-   * @param id string
-   * import templates from uploaded template aset
+   * import templates from uploaded template asset
    */
 
-  const importNow = (id: string, _onDone?: any) => {
+  const importNow = () => {
     if (!formData) {
       handleNext();
       setActionState({ state: ActionState.COMPLETED });
@@ -105,13 +103,18 @@ function ImporterApp() {
     });
     postAPI(`global_asset/import`, formData)
       .then((res: ImportedItems) => {
-        toast.success(`Successfully imported template: ${id}`);
+        const templateName =
+          res.items?.find((item) => item.item_type === 'data_template')
+            ?.title ||
+          res.items?.[0]?.title ||
+          res.items?.[0]?.name;
+
+        toast.success(`Successfully imported: ${templateName}`);
         setImported(res);
         handleNext();
         setActionState({
           state: ActionState.COMPLETED,
         });
-        _onDone && _onDone(res);
       })
       .catch((error: any) => {
         setErrors(error);
@@ -216,7 +219,6 @@ function ImporterApp() {
                 />
               </Box>
             )}
-
             {currentStep === 2 && (
               <Box>
                 <TemplatePreview

apps/web/src/components/Notification/NotificationDropdown.tsx

@@ -11,7 +11,7 @@ import {
 } from '@wraft/ui';
 import { BellIcon, CheckIcon, GearIcon } from '@phosphor-icons/react';
 
-import { useNotifications } from '@hooks/useNotifications';
+import { useNotifications } from 'hooks/useNotifications';
 import { IconFrame } from 'common/Atoms';
 import { TimeAgo } from 'common/Atoms';
 import { useSocket } from 'contexts/SocketContext';
@@ -47,9 +47,11 @@ const NotificationDropdown: React.FC<NotificationDropdownProps> = ({
   const handleViewAll = () => {
     router.push('/notifications');
   };
-
   const handleSettingsClick = () => {
-    router.push('/manage/workspace/notification-settings');
+    router.push({
+      pathname: '/manage/workspace/notification-settings',
+      query: { from: 'notifications' },
+    });
   };
 
   return (

apps/web/src/components/Notification/NotificationList.tsx

@@ -3,7 +3,7 @@ import { useRouter } from 'next/router';
 import { Avatar, Pagination, Box, Text, Flex } from '@wraft/ui';
 import styled from '@xstyled/emotion';
 
-import useNotifications from '@hooks/useNotifications';
+import useNotifications from 'hooks/useNotifications';
 import { TimeAgo } from 'common/Atoms';
 
 import {

apps/web/src/components/Sidebar/Header.tsx

@@ -3,9 +3,10 @@ import { useRouter } from 'next/router';
 import NavLink from 'next/link';
 import { Button, DropdownMenu, Box, Flex, Text, Modal } from '@wraft/ui';
 import toast from 'react-hot-toast';
-import { CaretDown, Gear, Plus } from '@phosphor-icons/react';
+import { CaretDownIcon, GearIcon, PlusIcon } from '@phosphor-icons/react';
 
 import NotificationDropdown from 'components/Notification/NotificationDropdown';
+import { useNotificationSidebarMode } from 'hooks/useNotificationSidebarMode';
 import DefaultAvatar from 'common/DefaultAvatar';
 import { IconFrame } from 'common/Atoms';
 import { useAuth } from 'contexts/AuthContext';
@@ -20,6 +21,7 @@ const Header = ({
 }) => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const [createdId, setCreatedId] = useState<string>();
+  const { clearNotificationSidebarMode } = useNotificationSidebarMode();
 
   const router = useRouter();
   const { organisations, userProfile, login } = useAuth();
@@ -69,7 +71,7 @@ const Header = ({
                         lines={1}>
                         {userProfile?.currentOrganisation?.name}
                       </Text>
-                      <CaretDown size={12} />
+                      <CaretDownIcon size={12} />
                     </Flex>
                   </Flex>
                 )}
@@ -102,7 +104,12 @@ const Header = ({
                       </Box>
                     </Flex>
                     <NavLink href={`/manage/workspace`}>
-                      <Gear size={18} weight="bold" color="#777" />
+                      <GearIcon
+                        size={18}
+                        weight="bold"
+                        color="#777"
+                        onClick={clearNotificationSidebarMode}
+                      />
                     </NavLink>
                   </>
                 )}
@@ -136,7 +143,7 @@ const Header = ({
 
               <DropdownMenu.Item>
                 <Button variant="ghost" onClick={() => setIsOpen(true)}>
-                  <Plus size={16} />
+                  <PlusIcon size={16} />
                   Create or join a workspace
                 </Button>
               </DropdownMenu.Item>
@@ -152,7 +159,7 @@ const Header = ({
             size="xs"
             onClick={toggleCreateDocument}>
             <IconFrame color="icon">
-              <Plus size={14} />
+              <PlusIcon size={14} />
             </IconFrame>
           </Button>
         </Flex>

apps/web/src/components/Template/TemplateForm.tsx

@@ -388,7 +388,7 @@ const TemplateEditor = () => {
                 />
               </Field>
 
-              {selectedVariant && selectedVariant.fields && !templateId && (
+              {selectedVariant && selectedVariant.fields && (
                 <Controller
                   control={control}
                   name="variant"
@@ -398,25 +398,35 @@ const TemplateEditor = () => {
                       hint="The variant type cannot be modified once saved. Please select the correct one."
                       required
                       error={errors?.variant?.message}>
-                      <Search
-                        itemToString={(item: any) => item && item.name}
-                        name={name}
-                        placeholder="Search Variant"
-                        minChars={0}
-                        value={value}
-                        onChange={(variant: any) => {
-                          if (variant?.id) {
-                            onChange(variant);
-                            fetchContentTypeDetails(variant?.id);
-                          }
-                        }}
-                        renderItem={(item: any) => (
-                          <Box>
-                            <Text>{item.name}</Text>
-                          </Box>
-                        )}
-                        search={onSearchVariants}
-                      />
+                      {templateId ? (
+                        <InputText
+                          value={value?.name || selectedVariant?.name || ''}
+                          readOnly
+                          disabled
+                          placeholder="Variant (cannot be changed)"
+                        />
+                      ) : (
+                        <Search
+                          itemToString={(item: any) => item && item.name}
+                          name={name}
+                          placeholder="Search Variant"
+                          minChars={0}
+                          value={value}
+                          onChange={(variant: any) => {
+                            if (variant?.id) {
+                              onChange(variant);
+                              fetchContentTypeDetails(variant?.id);
+                            }
+                          }}
+                          renderItem={(item: any) => (
+                            <Box>
+                              <Text>{item.name}</Text>
+                            </Box>
+                          )}
+                          search={onSearchVariants}
+                          disabled={!!templateId}
+                        />
+                      )}
                     </Field>
                   )}
                 />