style: modify the style of community item (#3143)

(cherry picked from commit b2fed03f30)

apps/web/src/components/affine/new-workspace-setting-detail/publish.tsx

@@ -1,4 +1,4 @@
-import { Button, FlexWrapper, Switch } from '@affine/component';
+import { Button, FlexWrapper, Switch, Tooltip } from '@affine/component';
 import { SettingRow } from '@affine/component/setting-components';
 import { Unreachable } from '@affine/env/constant';
 import type {
@@ -92,30 +92,19 @@ const PublishPanelAffine: FC<PublishPanelAffineProps> = props => {
 
 const FakePublishPanelAffine: FC<{
   workspace: AffineOfficialWorkspace;
-}> = ({ workspace }) => {
+}> = () => {
   const t = useAFFiNEI18N();
-  const [origin, setOrigin] = useState('');
-  const shareUrl = origin + '/public-workspace/' + workspace.id;
-
-  useEffect(() => {
-    setOrigin(
-      typeof window !== 'undefined' && window.location.origin
-        ? window.location.origin
-        : ''
-    );
-  }, []);
   return (
-    <div className={style.fakeWrapper}>
+    <Tooltip
-      <SettingRow name={t['Publish']()} desc={t['Unpublished hint']()}>
+      content={t['com.affine.settings.workspace.publish.local-tooltip']()}
-        <Switch checked={false} />
+      placement="top"
-      </SettingRow>
+    >
-      <FlexWrapper justifyContent="space-between">
+      <div className={style.fakeWrapper}>
-        <Button className={style.urlButton} size="middle" title={shareUrl}>
+        <SettingRow name={t['Publish']()} desc={t['Unpublished hint']()}>
-          {shareUrl}
+          <Switch checked={false} />
-        </Button>
+        </SettingRow>
-        <Button size="middle">{t['Copy']()}</Button>
+      </div>
-      </FlexWrapper>
+    </Tooltip>
-    </div>
   );
 };
 const PublishPanelLocal: FC<PublishPanelLocalProps> = ({

apps/web/src/components/affine/new-workspace-setting-detail/style.css.ts

@@ -57,7 +57,17 @@ globalStyle(`${urlButton} span`, {
 
 export const fakeWrapper = style({
   position: 'relative',
-  borderRadius: '8px',
+  opacity: 0.4,
-  background: 'var(--affine-white-60)',
+  marginTop: '24px',
-  padding: '10px',
+  selectors: {
+    '&::after': {
+      content: '""',
+      width: '100%',
+      height: '100%',
+      position: 'absolute',
+      left: 0,
+      top: 0,
+      cursor: 'not-allowed',
+    },
+  },
 });

apps/web/src/components/affine/setting-modal/general-setting/about/style.css.ts

@@ -23,9 +23,8 @@ globalStyle(`${link} .icon`, {
 
 export const communityWrapper = style({
   display: 'grid',
-  justifyContent: 'space-between',
+  gridTemplateColumns: '15% 15% 15% 15% 15% 15%',
-  gridTemplateColumns: 'repeat(auto-fill, 70px)',
+  gap: '2%',
-  gridGap: '6px',
 });
 export const communityItem = style({
   borderRadius: '8px',

packages/i18n/src/resources/en.json

@@ -407,5 +407,7 @@
   "You can customize your workspace here.": "You can customise your workspace here.",
   "Font Style": "Font Style",
   "Choose your font style": "Choose your font style",
-  "Switch": "Switch"
+  "Switch": "Switch",
+  "com.affine.settings.workspace.publish.local-tooltip": "Enable AFFiNE Cloud to publish this Workspace",
+  "com.affine.settings.workspace.member.local-tooltip": "Enable AFFiNE Cloud to collaborate with others"
 }