fix: apple login on web (#6213)

frontend/appflowy_web_app/src/application/types.ts

@@ -59,4 +59,5 @@ export interface View {
   layout: ViewLayout;
   extra: ViewExtra | null;
   children: View[];
+  is_published: boolean;
 }

frontend/appflowy_web_app/src/assets/login/apple.svg

@@ -1,4 +1,4 @@
-<svg fill="#000000" height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
+<svg fill="currentColor" height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      viewBox="0 0 22.773 22.773" xml:space="preserve">
 <g>

frontend/appflowy_web_app/src/components/login/LoginProvider.tsx

@@ -67,28 +67,32 @@ function LoginProvider ({ redirectTo }: { redirectTo: string }) {
       variant={'outlined'}
       onClick={() => handleClick(option.value)}
       className={
-        `flex h-[46px] w-[380px] items-center justify-center gap-[10px] rounded-[12px] border border-line-divider text-sm font-medium  max-sm:w-full ${option.value === 'apple' ? 'text-black bg-white hover:bg-fill-list-hover' : 'text-text-title'}`
+        `flex h-[46px] w-[380px] items-center justify-center gap-[10px] rounded-[12px] border border-line-divider text-sm font-medium  max-sm:w-full text-text-title`
       }
     >
-      <option.Icon className={'h-[20px] w-[20px]'} />
-      {option.label}
+      <option.Icon className={'w-[24px] h-[24px]'} />
+      <div className={'w-auto whitespace-pre'}>{option.label}</div>
+
     </Button>;
   }, [handleClick]);
 
   return (
     <div className={'flex w-full flex-col items-center justify-center gap-[10px]'}>
       {options.slice(0, 2).map(renderOption)}
-      <Button
+      {!expand && <Button
         color={'inherit'}
         size={'small'}
         onClick={() => setExpand(!expand)}
         className={'text-sm w-full flex gap-2 items-center hover:bg-transparent hover:text-text-title font-medium text-text-caption'}
       >
         <Divider className={'flex-1'} />
-        {expand ? t('web.collapse') : t('web.moreOptions')}
+        {t('web.moreOptions')}
         <Divider className={'flex-1'} />
-      </Button>
-      <Collapse in={expand}>{options.slice(2).map(renderOption)}</Collapse>
+      </Button>}
+
+      <Collapse in={expand}>
+        <div className={'gap-[10px] flex-col flex'}>{options.slice(2).map(renderOption)}</div>
+      </Collapse>
     </div>
   );
 }

frontend/appflowy_web_app/src/components/publish/outline/OutlineItem.tsx

@@ -53,6 +53,17 @@ function OutlineItem ({ view, level = 0, width }: { view: View; width: number; l
   const { t } = useTranslation();
 
   const navigateToView = useContext(PublishContext)?.toView;
+
+  const toastWarning = useCallback((item: View) => {
+    if (!item.is_published) {
+      if (item.extra?.is_space) {
+        notify.warning(t('publish.spaceHasNotBeenPublished'));
+        return;
+      }
+
+      notify.warning(t('publish.hasNotBeenPublished'));
+    }
+  }, [t]);
   const renderItem = (item: View) => {
     const { icon, layout, name, view_id, extra } = item;
 
@@ -72,15 +83,15 @@ function OutlineItem ({ view, level = 0, width }: { view: View; width: number; l
           {item.children?.length ? getIcon() : null}
           <div
             onClick={async () => {
+              if (!item.is_published) {
+                toastWarning(item);
+                return;
+              }
+
               try {
                 await navigateToView?.(view_id);
               } catch (e) {
-                if (isSpace) {
-                  notify.warning(t('publish.spaceHasNotBeenPublished'));
-                  return;
-                }
-
-                notify.warning(t('publish.hasNotBeenPublished'));
+                toastWarning(item);
               }
             }}
             style={{

frontend/resources/translations/en.json

@@ -2414,7 +2414,7 @@
     "continueWithGoogle": "Continue with Google",
     "continueWithGithub": "Continue with GitHub",
     "continueWithDiscord": "Continue with Discord",
-    "continueWithApple": "Continue with Apple",
+    "continueWithApple": "Continue with Apple ",
     "moreOptions": "More options",
     "collapse": "Collapse",
     "signInAgreement": "By clicking \"Continue\" above, you agreed to AppFlowy's",