Merge pull request #7653 from sagemathinc/fix-slide-icons-antd

frontend/slides: fix wrongly aligned icons

Author: williamstein

src/packages/frontend/frame-editors/whiteboard-editor/delete-page.tsx

@@ -1,4 +1,5 @@
 import { Button, Popconfirm, Tooltip } from "antd";
+
 import { Icon } from "@cocalc/frontend/components/icon";
 import { useFrameContext } from "./hooks";
 import { COLORS } from "@cocalc/util/theme";
@@ -20,12 +21,11 @@ export default function DeletePage({ pageId }) {
         <Button
           type="text"
           size="small"
+          icon={<Icon style={{ color: COLORS.FILE_ICON }} name="trash" />}
           onClick={(e) => {
             e?.stopPropagation();
           }}
-        >
-          <Icon style={{ color: COLORS.FILE_ICON }} name="trash" />
-        </Button>
+        />
       </Tooltip>
     </Popconfirm>
   );

src/packages/frontend/frame-editors/whiteboard-editor/new-page.tsx

@@ -1,8 +1,9 @@
 import { Button, Popover, Tooltip } from "antd";
+import { CSSProperties, ReactNode } from "react";
+
 import { Icon } from "@cocalc/frontend/components/icon";
-import { useFrameContext } from "./hooks";
 import { COLORS } from "@cocalc/util/theme";
-import { CSSProperties, ReactNode } from "react";
+import { useFrameContext } from "./hooks";
 
 function addPage(actions, afterPageId?) {
   const frameId = actions.show_focused_frame_of_type(actions.mainFrameType);
@@ -57,10 +58,12 @@ export function AddPage({ pageId }: { pageId: string }) {
   const { actions } = useFrameContext();
   return (
     <Tooltip title="Insert new page" placement="right" mouseEnterDelay={1}>
-      <Button type="text" size="small" onClick={() => addPage(actions, pageId)}>
-        <Icon name="plus-circle" style={{ color: COLORS.FILE_ICON }} />
-        <br />
-      </Button>
+      <Button
+        type="text"
+        size="small"
+        onClick={() => addPage(actions, pageId)}
+        icon={<Icon name="plus-circle" style={{ color: COLORS.FILE_ICON }} />}
+      />
     </Tooltip>
   );
 }

src/packages/frontend/frame-editors/whiteboard-editor/overview.tsx

@@ -6,16 +6,17 @@ of the "font_size" parameter for the frame.
 
 */
 
-import NewPage, { AddPage } from "./new-page";
-import DeletePage from "./delete-page";
-import { CSSProperties, useEffect, ReactNode } from "react";
+import { CSSProperties, ReactNode, useEffect } from "react";
+import type { GridItemProps } from "react-virtuoso";
 import { VirtuosoGrid } from "react-virtuoso";
-import { useFrameContext } from "./hooks";
+
 import { useEditorRedux } from "@cocalc/frontend/app-framework";
 import { Loading } from "@cocalc/frontend/components";
-import { Overview as OnePage } from "./tools/navigation";
 import { State, elementsList } from "./actions";
-import type { GridItemProps } from "react-virtuoso";
+import DeletePage from "./delete-page";
+import { useFrameContext } from "./hooks";
+import NewPage, { AddPage } from "./new-page";
+import { Overview as OnePage } from "./tools/navigation";
 
 export default function Overview() {
   const { actions, id: frameId, project_id, path, desc } = useFrameContext();
@@ -111,7 +112,7 @@ export default function Overview() {
         onClick={(e) => {
           e.stopPropagation(); // so doesn't focus this frame then page, causing flicker.
           const frameId = actions.show_focused_frame_of_type(
-            actions.mainFrameType
+            actions.mainFrameType,
           );
           actions.setPage(frameId, index + 1);
           actions.fitToScreen(frameId);

src/packages/frontend/frame-editors/whiteboard-editor/pages.tsx

@@ -5,13 +5,14 @@ where the page size expands to fit the width.
 
 import { CSSProperties, useEffect, useRef, useState } from "react";
 import { Virtuoso } from "react-virtuoso";
+import useResizeObserver from "use-resize-observer";
+
 import useVirtuosoScrollHook from "@cocalc/frontend/components/virtuoso-scroll-hook";
 import { useFrameContext } from "./hooks";
 import { useEditorRedux } from "@cocalc/frontend/app-framework";
 import { Loading } from "@cocalc/frontend/components";
 import { Overview } from "./tools/navigation";
 import { State, elementsList } from "./actions";
-import useResizeObserver from "use-resize-observer";
 import {
   DragHandle,
   SortableList,