@onewelcome/react-lib-components 5.2.0 → 6.0.0

package/src/components/Notifications/Snackbar/SnackbarItem/SnackbarItem.tsx

@@ -65,6 +65,9 @@ export const SnackbarItem = ({
   const timerHandler = useRef<ReturnType<typeof setTimeout>>();
   const onAnimationEnd = () => onClose(id);
   const { ref, animationStarted, startAnimation } = useAnimation<HTMLDivElement>(onAnimationEnd);
+  const hasOnlyTitle = !content && !!title;
+  const renderTitle = title && !hasOnlyTitle;
+  const renderContentOrTitleOnly = content || hasOnlyTitle;
 
   useRegisterSnackbarHeight(ref, id);
 
@@ -113,7 +116,6 @@ export const SnackbarItem = ({
     classes["snackbar"],
     classes[variant],
     animationStarted ? readyclasses["slide-out"] : readyclasses["slide-in"],
-    title ? classes["has-title"] : "",
     className ?? ""
   ].join(" ");
 
@@ -125,18 +127,20 @@ export const SnackbarItem = ({
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
     >
-      <Icon icon={getVariantIcon()} className={classes["icon"]} />
-      <div className={classes["content-wrapper"]}>
-        {title && (
-          <Typography className={classes["title"]} variant="body-bold" tag="span">
-            {title}
-          </Typography>
-        )}
-        {content && (
-          <Typography className={classes["content"]} variant="body">
-            {content}
-          </Typography>
-        )}
+      <div className={classes["outer-content-wrapper"]}>
+        <Icon icon={getVariantIcon()} className={classes["icon"]} />
+        <div className={classes["content-wrapper"]}>
+          {renderTitle && (
+            <Typography className={classes["title"]} variant="body-bold" tag="span">
+              {title}
+            </Typography>
+          )}
+          {renderContentOrTitleOnly && (
+            <Typography className={classes["content"]} variant="body">
+              {hasOnlyTitle ? title : content}
+            </Typography>
+          )}
+        </div>
       </div>
       {actionButtons.length > 0 && <div className={classes["actions"]}>{actionButtons}</div>}
       <IconButton

package/src/components/Notifications/Snackbar/SnackbarProvider/SnackbarProvider.test.tsx

@@ -78,7 +78,7 @@ const renderSnackbarProvider = (props?: Partial<Props>) => {
         <button
           data-testid="show-success"
           onClick={() => {
-            enqueueSuccessSnackbar(successProps.title + index, undefined, successProps.options);
+            enqueueSuccessSnackbar({ title: successProps.title + index, ...successProps.options });
             setIndex(index + 1);
           }}
         >
@@ -87,7 +87,7 @@ const renderSnackbarProvider = (props?: Partial<Props>) => {
         <button
           data-testid="show-error"
           onClick={() => {
-            enqueueErrorSnackbar(errorProps.title + index);
+            enqueueErrorSnackbar({ title: errorProps.title + index });
             setIndex(index + 1);
           }}
         >
@@ -96,7 +96,11 @@ const renderSnackbarProvider = (props?: Partial<Props>) => {
         <button
           data-testid="show-info"
           onClick={() => {
-            enqueueSnackbar(infoProps.title + index, infoProps.content, infoProps.options);
+            enqueueSnackbar({
+              title: infoProps.title + index,
+              content: infoProps.content,
+              ...infoProps.options
+            });
             setIndex(index + 1);
           }}
         >
@@ -105,7 +109,7 @@ const renderSnackbarProvider = (props?: Partial<Props>) => {
         <button
           data-testid="show-warning"
           onClick={() => {
-            enqueueWarningSnackbar(warningProps.title + index, undefined, warningProps.options);
+            enqueueWarningSnackbar({ title: warningProps.title + index, ...warningProps.options });
             setIndex(index + 1);
           }}
         >
@@ -135,8 +139,8 @@ const renderSnackbarProvider = (props?: Partial<Props>) => {
   };
 };
 
-describe("SnackbarProvider", () => {
-  it("renders without crashing", () => {
+describe("<SnackbarProvider />", () => {
+  it("should render without crashing", () => {
     const { container } = renderSnackbarProvider();
 
     expect(container).toHaveTextContent("content");
@@ -176,40 +180,40 @@ describe("SnackbarProvider", () => {
 
     expect(infoProps.options.actions[0].onClick).toBeCalledTimes(1);
   });
-});
 
-describe("handlers", () => {
-  it("should fire onClose", async () => {
-    const onCloseHandler = jest.fn();
-    const ExampleComponent = () => {
-      const { enqueueErrorSnackbar, enqueueSuccessSnackbar } = useSnackbar();
+  describe("handlers", () => {
+    it("should fire onClose", async () => {
+      const onCloseHandler = jest.fn();
+      const ExampleComponent = () => {
+        const { enqueueErrorSnackbar, enqueueSuccessSnackbar } = useSnackbar();
 
-      useEffect(() => {
-        enqueueErrorSnackbar("error", undefined, { onClose: onCloseHandler, duration: 1 });
-        enqueueSuccessSnackbar("success", undefined, { onClose: onCloseHandler, duration: 1 });
-      }, []);
+        useEffect(() => {
+          enqueueErrorSnackbar("error", undefined, { onClose: onCloseHandler, duration: 1 });
+          enqueueSuccessSnackbar("success", undefined, { onClose: onCloseHandler, duration: 1 });
+        }, []);
 
-      return <div></div>;
-    };
+        return <div></div>;
+      };
 
-    const queries = render(
-      <SnackbarProvider closeButtonTitle="close">
-        <ExampleComponent />
-      </SnackbarProvider>
-    );
+      const queries = render(
+        <SnackbarProvider closeButtonTitle="close">
+          <ExampleComponent />
+        </SnackbarProvider>
+      );
 
-    const errorSnackbar = await queries.findByText(/error/i);
-    const successSnackbar = await queries.findByText(/success/i);
+      const errorSnackbar = await queries.findByText(/error/i);
+      const successSnackbar = await queries.findByText(/success/i);
 
-    expect(errorSnackbar).toBeTruthy();
-    expect(successSnackbar).toBeTruthy();
+      expect(errorSnackbar).toBeTruthy();
+      expect(successSnackbar).toBeTruthy();
 
-    const parentErrorSnackbar = errorSnackbar.closest(".snackbar")!;
-    const parentSuccessSnackbar = successSnackbar.closest(".snackbar")!;
+      const parentErrorSnackbar = errorSnackbar.closest(".snackbar")!;
+      const parentSuccessSnackbar = successSnackbar.closest(".snackbar")!;
 
-    fireEvent.animationEnd(parentErrorSnackbar);
-    fireEvent.animationEnd(parentSuccessSnackbar);
+      fireEvent.animationEnd(parentErrorSnackbar);
+      fireEvent.animationEnd(parentSuccessSnackbar);
 
-    await waitFor(() => expect(onCloseHandler).toHaveBeenCalledTimes(2));
+      await waitFor(() => expect(onCloseHandler).toHaveBeenCalledTimes(2));
+    });
   });
 });

package/src/components/Notifications/Snackbar/SnackbarProvider/SnackbarProvider.tsx

@@ -17,7 +17,13 @@
 import React, { ReactNode, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { SnackbarContextProvider } from "./SnackbarStateProvider";
-import { Actions, SnackbarOptionsProps, Variant } from "../interfaces";
+import {
+  Actions,
+  EnqueueSnackbarProps,
+  SnackbarOptionsProps,
+  Variant,
+  isNewEnqueueSnackbarInterface
+} from "../interfaces";
 import { Placement, SnackbarContainer } from "../SnackbarContainer/SnackbarContainer";
 import { generateID } from "../../../../util/helper";
 import { SnackbarItem } from "../SnackbarItem/SnackbarItem";
@@ -92,52 +98,72 @@ export const SnackbarProvider = (
   };
 
   const enqueueSnackbar = (
-    title?: string,
+    propsOrTitle: EnqueueSnackbarProps | string | undefined,
     content?: string,
     options: SnackbarOptionsProps = {}
   ): void => {
+    const newInterface = isNewEnqueueSnackbarInterface(propsOrTitle);
+    const props = newInterface ? propsOrTitle : mapToNewInterface(propsOrTitle, content, options);
     const {
       variant = "info",
       actions,
-      duration = getDuration(variant, actions, content),
+      duration = getDuration(variant, actions, props.content),
       onClose
-    } = options;
+    } = props;
     const item: Item = {
-      title,
-      content,
+      title: props.title,
+      content: props.content,
       variant,
-      className: options.className,
+      className: props.className,
       actions,
       duration,
       height: 0,
-      id: generateID(15, title),
+      id: generateID(15, props.title),
       onClose
     };
     addSnackbar(item);
   };
 
-  const enqueueSuccessSnackbar = (
+  const mapToNewInterface = (
     title?: string,
     content?: string,
-    options?: SnackbarOptionsProps
+    options: SnackbarOptionsProps = {}
+  ): EnqueueSnackbarProps => {
+    return {
+      title,
+      content,
+      ...options
+    };
+  };
+
+  const enqueueSuccessSnackbar = (
+    propsOrTitle: EnqueueSnackbarProps | string | undefined,
+    content?: string,
+    options: SnackbarOptionsProps = {}
   ): void => {
-    enqueueSnackbar(title, content, { ...options, variant: "success" });
+    const newInterface = isNewEnqueueSnackbarInterface(propsOrTitle);
+    const props = newInterface ? propsOrTitle : mapToNewInterface(propsOrTitle, content, options);
+    enqueueSnackbar({ ...props, variant: "success" });
   };
 
   const enqueueErrorSnackbar = (
-    title?: string,
+    propsOrTitle: EnqueueSnackbarProps | string | undefined,
     content?: string,
-    options?: SnackbarOptionsProps
+    options: SnackbarOptionsProps = {}
   ): void => {
-    enqueueSnackbar(title, content, { ...options, variant: "error" });
+    const newInterface = isNewEnqueueSnackbarInterface(propsOrTitle);
+    const props = newInterface ? propsOrTitle : mapToNewInterface(propsOrTitle, content, options);
+    enqueueSnackbar({ ...props, variant: "error" });
   };
 
   const enqueueWarningSnackbar = (
-    title?: string,
+    propsOrTitle: EnqueueSnackbarProps | string | undefined,
     content?: string,
-    options?: SnackbarOptionsProps
+    options: SnackbarOptionsProps = {}
   ): void => {
-    enqueueSnackbar(title, content, { ...options, variant: "warning" });
+    const newInterface = isNewEnqueueSnackbarInterface(propsOrTitle);
+    const props = newInterface ? propsOrTitle : mapToNewInterface(propsOrTitle, content, options);
+    enqueueSnackbar({ ...props, variant: "warning" });
   };
 
   const onItemClosed = (id: string) => {

package/src/components/Notifications/Snackbar/SnackbarProvider/SnackbarStateProvider.tsx

@@ -15,22 +15,14 @@
  */
 
 import React, { createContext } from "react";
-import { SnackbarOptionsProps } from "../interfaces";
+import { DeprecatedEnqueueSnackbarType } from "../interfaces";
 import { Item } from "./SnackbarProvider";
 
 interface SnackbarContextProps {
-  enqueueSnackbar: (title?: string, content?: string, options?: SnackbarOptionsProps) => void;
-  enqueueSuccessSnackbar: (
-    title?: string,
-    content?: string,
-    options?: SnackbarOptionsProps
-  ) => void;
-  enqueueWarningSnackbar: (
-    title?: string,
-    content?: string,
-    options?: SnackbarOptionsProps
-  ) => void;
-  enqueueErrorSnackbar: (title?: string, content?: string, options?: SnackbarOptionsProps) => void;
+  enqueueSnackbar: DeprecatedEnqueueSnackbarType;
+  enqueueSuccessSnackbar: DeprecatedEnqueueSnackbarType;
+  enqueueWarningSnackbar: DeprecatedEnqueueSnackbarType;
+  enqueueErrorSnackbar: DeprecatedEnqueueSnackbarType;
   setSnackbarHeight: (id: string, height: number) => void;
   snackbars: Item[];
 }

package/src/components/Notifications/Snackbar/interfaces.ts

@@ -27,3 +27,18 @@ export interface SnackbarOptionsProps {
   duration?: number;
   onClose?: () => void;
 }
+
+export interface EnqueueSnackbarProps extends SnackbarOptionsProps {
+  title?: string;
+  content?: string;
+}
+
+export type DeprecatedEnqueueSnackbarType = (
+  propsOrTitle: EnqueueSnackbarProps | string | undefined,
+  content?: string,
+  options?: SnackbarOptionsProps
+) => void;
+
+export function isNewEnqueueSnackbarInterface(args: unknown): args is EnqueueSnackbarProps {
+  return args !== null && typeof args === "object" && ("title" in args || "content" in args);
+}

package/src/components/Notifications/Snackbar/useSnackbar.test.tsx

@@ -0,0 +1,136 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+import React from "react";
+import { act, renderHook } from "@testing-library/react";
+import { useSnackbar } from "./useSnackbar";
+import { SnackbarProvider } from "./SnackbarProvider/SnackbarProvider";
+
+describe("useNotificationContext", () => {
+  it("should return the correct context", () => {
+    const { result } = renderHook(() => useSnackbar(), {
+      wrapper: ({ children }) => (
+        <SnackbarProvider closeButtonTitle="close">{children}</SnackbarProvider>
+      )
+    });
+
+    expect(result.current).toEqual({
+      enqueueWarningSnackbar: expect.any(Function),
+      enqueueErrorSnackbar: expect.any(Function),
+      enqueueSuccessSnackbar: expect.any(Function),
+      enqueueSnackbar: expect.any(Function)
+    });
+  });
+
+  it("should call new API", () => {
+    const { result } = renderHook(() => useSnackbar(), {
+      wrapper: ({ children }) => (
+        <SnackbarProvider closeButtonTitle="close">{children}</SnackbarProvider>
+      )
+    });
+
+    act(() => {
+      result.current.enqueueSnackbar({ title: "title" });
+      result.current.enqueueSnackbar({ title: "title", content: "content" });
+      result.current.enqueueSnackbar({
+        title: "title",
+        content: "content",
+        onClose: () => {},
+        actions: []
+      });
+      result.current.enqueueSnackbar({ content: "content" });
+      result.current.enqueueSnackbar({ content: "content", className: "123" });
+      result.current.enqueueSnackbar({ title: "title", variant: "error", duration: 123 });
+
+      result.current.enqueueErrorSnackbar({ title: "title" });
+      result.current.enqueueErrorSnackbar({ title: "title", content: "content" });
+      result.current.enqueueErrorSnackbar({
+        title: "title",
+        content: "content",
+        onClose: () => {},
+        actions: []
+      });
+      result.current.enqueueErrorSnackbar({ content: "content" });
+      result.current.enqueueErrorSnackbar({ content: "content", className: "123" });
+      result.current.enqueueErrorSnackbar({ title: "title", duration: 123 });
+
+      result.current.enqueueSuccessSnackbar({ title: "title" });
+      result.current.enqueueSuccessSnackbar({ title: "title", content: "content" });
+      result.current.enqueueSuccessSnackbar({
+        title: "title",
+        content: "content",
+        onClose: () => {},
+        actions: []
+      });
+      result.current.enqueueSuccessSnackbar({ content: "content" });
+      result.current.enqueueSuccessSnackbar({ content: "content", className: "123" });
+      result.current.enqueueSuccessSnackbar({ title: "title", duration: 123 });
+
+      result.current.enqueueWarningSnackbar({ title: "title" });
+      result.current.enqueueWarningSnackbar({ title: "title", content: "content" });
+      result.current.enqueueWarningSnackbar({
+        title: "title",
+        content: "content",
+        onClose: () => {},
+        actions: []
+      });
+      result.current.enqueueWarningSnackbar({ content: "content" });
+      result.current.enqueueWarningSnackbar({ content: "content", className: "123" });
+      result.current.enqueueWarningSnackbar({ title: "title", duration: 123 });
+    });
+  });
+
+  it("should call deprecated API", () => {
+    const { result } = renderHook(() => useSnackbar(), {
+      wrapper: ({ children }) => (
+        <SnackbarProvider closeButtonTitle="close">{children}</SnackbarProvider>
+      )
+    });
+
+    act(() => {
+      result.current.enqueueSnackbar("title");
+      result.current.enqueueSnackbar("title", "content");
+      result.current.enqueueSnackbar("title", "content", { onClose: () => {}, actions: [] });
+      result.current.enqueueSnackbar(undefined, "content");
+      result.current.enqueueSnackbar(undefined, "content", { className: "123" });
+      result.current.enqueueSnackbar("title", undefined, { variant: "error", duration: 123 });
+
+      result.current.enqueueErrorSnackbar("title");
+      result.current.enqueueErrorSnackbar("title", "content");
+      result.current.enqueueErrorSnackbar("title", "content", { onClose: () => {}, actions: [] });
+      result.current.enqueueErrorSnackbar(undefined, "content");
+      result.current.enqueueErrorSnackbar(undefined, "content", { className: "123" });
+      result.current.enqueueErrorSnackbar("title", undefined, { duration: 123 });
+
+      result.current.enqueueSuccessSnackbar("title");
+      result.current.enqueueSuccessSnackbar("title", "content");
+      result.current.enqueueSuccessSnackbar("title", "content", { onClose: () => {}, actions: [] });
+      result.current.enqueueSuccessSnackbar(undefined, "content");
+      result.current.enqueueSuccessSnackbar(undefined, "content", { className: "123" });
+      result.current.enqueueSuccessSnackbar("title", undefined, {
+        duration: 123
+      });
+
+      result.current.enqueueWarningSnackbar("title");
+      result.current.enqueueWarningSnackbar("title", "content");
+      result.current.enqueueWarningSnackbar("title", "content", { onClose: () => {}, actions: [] });
+      result.current.enqueueWarningSnackbar(undefined, "content");
+      result.current.enqueueWarningSnackbar(undefined, "content", { className: "123" });
+      result.current.enqueueWarningSnackbar("title", undefined, {
+        duration: 123
+      });
+    });
+  });
+});

package/src/components/_BaseStyling_/BaseStyling.tsx

@@ -24,8 +24,9 @@ import React, { HTMLAttributes, ReactElement, useEffect, useRef, useState } from
 interface CSSProperties {
   colorFocus?: string;
   colorPrimary?: string;
-  colorSecondary?: string;
-  colorTertiary?: string;
+  colorSuccess?: string;
+  colorWarning?: string;
+  colorDanger?: string;
   colorPrimary100?: string;
   colorPrimary300?: string;
   colorPrimary500?: string;
@@ -76,18 +77,18 @@ interface CSSProperties {
   buttonPrimaryHoverColor?: string;
   buttonPrimaryFocusedColor?: string;
   buttonOutlineHoverTextColor?: string;
-  buttonSecondaryDefaultColor?: string;
-  buttonSecondaryHoverColor?: string;
-  buttonSecondaryFocusedColor?: string;
-  buttonSecondaryPressedColor?: string;
-  buttonWarningDefaultColor?: string;
-  buttonWarningHoverColor?: string;
-  buttonWarningFocusedColor?: string;
-  buttonWarningPressedColor?: string;
+  buttonSuccessDefaultColor?: string;
+  buttonSuccessHoverColor?: string;
+  buttonSuccessFocusedColor?: string;
+  buttonSuccessPressedColor?: string;
   buttonDangerDefaultColor?: string;
   buttonDangerHoverColor?: string;
   buttonDangerFocusedColor?: string;
   buttonDangerPressedColor?: string;
+  buttonWarningDefaultColor?: string;
+  buttonWarningHoverColor?: string;
+  buttonWarningFocusedColor?: string;
+  buttonWarningPressedColor?: string;
   buttonDefaultColor?: string;
   buttonDefaultHoverColor?: string;
   buttonDefaultFocusedColor?: string;
@@ -238,34 +239,35 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     colorWhite: "#FFFFFF",
     colorFocus: "var(--color-primary300)",
     colorPrimary: "var(--color-primary500)",
-    colorSecondary: "var(--color-green500)",
-    colorTertiary: "var(--color-light-blue600)",
+    colorSuccess: "var(--color-green500)",
+    colorWarning: "var(--color-orange500)",
+    colorDanger: "var(--color-red500)",
     defaultPressedColor: "var(--color-blue-grey100)",
     defaultHoverColor: "var(--color-blue-grey25)",
     defaultLineHeight: "1.5", //FIXME: UCL-395
     defaultBorderRadius: "0.25rem",
     focusBorderRadius: "0.125rem",
-    buttonBorderRadius: "var(--default-border-radius)",
+    buttonBorderRadius: "0.125rem",
     buttonBorderWidth: "2px",
-    buttonFontSize: "1rem",
+    buttonFontSize: "0.875rem",
     buttonBorderStyle: "solid",
     buttonFillTextColor: "var(--light)",
     buttonPrimaryDefaultColor: "var(--color-primary500)",
     buttonPrimaryHoverColor: "var(--color-primary600)",
     buttonPrimaryFocusedColor: "var(--color-primary500)",
     buttonPrimaryPressedColor: "var(--color-primary700)",
-    buttonSecondaryDefaultColor: "var(--color-green500)",
-    buttonSecondaryHoverColor: "var(--color-green600)",
-    buttonSecondaryFocusedColor: "var(--color-green500)",
-    buttonSecondaryPressedColor: "var(--color-green700)",
-    buttonWarningDefaultColor: "var(--color-orange500)",
-    buttonWarningHoverColor: "var(--color-orange600)",
-    buttonWarningFocusedColor: "var(--color-orange500)",
-    buttonWarningPressedColor: "var(--color-orange700)",
+    buttonSuccessDefaultColor: "var(--color-green500)",
+    buttonSuccessHoverColor: "var(--color-green600)",
+    buttonSuccessFocusedColor: "var(--color-green500)",
+    buttonSuccessPressedColor: "var(--color-green700)",
     buttonDangerDefaultColor: "var(--color-red500)",
     buttonDangerHoverColor: "var(--color-red600)",
     buttonDangerFocusedColor: "var(--color-red500)",
     buttonDangerPressedColor: "var(--color-red700)",
+    buttonWarningDefaultColor: "var(--color-orange500)",
+    buttonWarningHoverColor: "var(--color-orange600)",
+    buttonWarningFocusedColor: "var(--color-orange500)",
+    buttonWarningPressedColor: "var(--color-orange700)",
     buttonDefaultColor: "var(--color-blue-grey700)",
     buttonDefaultHoverColor: "var(--color-blue-grey800)",
     buttonDefaultFocusedColor: "var(--color-blue-grey700)",

package/src/font/icomoon.svg

@@ -72,9 +72,12 @@
 <glyph unicode="&#xe93e;" glyph-name="circle" d="M512-12.8c-254.493 0-460.8 206.305-460.8 460.8 0 254.493 206.307 460.8 460.8 460.8 254.495 0 460.8-206.307 460.8-460.8 0-254.495-206.305-460.8-460.8-460.8zM512-64c282.767 0 512 229.233 512 512 0 282.77-229.233 512-512 512-282.77 0-512-229.23-512-512 0-282.767 229.23-512 512-512z" />
 <glyph unicode="&#xe93f;" glyph-name="table-search" d="M860.814 200.053c69.71 110.903 36.968 258.245-74.463 327.955-35.895 22.749-79.602 36.253-126.464 36.253-84.338 0-158.461-43.738-200.922-109.769l-0.569-0.947c-69.71-111.431-35.911-259.3 74.463-327.955 77.632-48.585 175.86-48.585 253.492 0l164.241-163.185 73.407 73.407-163.185 164.241zM755.192 232.797c-51.754-51.754-135.196-51.227-186.95 0-51.227 51.754-51.227 135.196 0.529 186.95 51.227 51.227 134.667 51.227 186.422 0 50.698-52.283 50.17-135.723-1.584-186.95h1.584zM844.971 933.595h-739.351c-58.333 0-105.621-47.288-105.621-105.621v0-633.73c0-58.333 47.288-105.621 105.621-105.621v0h306.83c-28.777 29.605-52.137 64.653-68.367 103.427l-0.814 2.195h-237.648v211.243h220.749c8.45 37.495 22.709 73.407 43.305 105.621h-264.053v211.243h316.865v-148.398c29.605 28.777 64.653 52.137 103.427 68.367l2.195 0.814v79.216h316.865v-105.621c42.806-27.479 78.143-62.815 104.802-104.261l0.819-1.36v316.865c0 58.333-47.288 105.621-105.621 105.621v0z" />
 <glyph unicode="&#xe940;" glyph-name="StyleFilled" d="M407.718 4.801v312.847h208.565v-312.847h260.705v417.125h156.424l-521.412 469.271-521.412-469.271h156.424v-417.125h260.705z" />
-<glyph unicode="&#xe941;" glyph-name="file-outline" d="M597.333 874.667h-341.333c-46.933 0-85.333-38.4-85.333-85.333v-682.667c0-46.933 38.4-85.333 85.333-85.333h512c46.933 0 85.333 38.4 85.333 85.333v512l-256 256zM768 106.667h-512v682.667h298.667v-213.333h213.333v-469.333z" />
+<glyph unicode="&#xe941;" glyph-name="file-outline" d="M614.4 960.001h-409.6c-56.32 0-102.4-46.080-102.4-102.4v-819.2c0-56.32 46.080-102.4 102.4-102.4h614.399c56.32 0 102.4 46.080 102.4 102.4v614.399l-307.2 307.2zM819.2 38.4h-614.399v819.2h358.401v-256h256v-563.199z" />
 <glyph unicode="&#xe942;" glyph-name="file-upload-outline" d="M597.333 874.667l256-256v-512c0-47.128-38.205-85.333-85.333-85.333v0h-512c-47.128 0-85.333 38.205-85.333 85.333v0 682.667c0 47.128 38.205 85.333 85.333 85.333v0h341.333zM768 106.667v469.333h-213.333v213.333h-298.667v-682.667h512zM512 448l170.667-170.667h-106.667v-128h-128v128h-106.667l170.667 170.667z" />
-<glyph unicode="&#xe943;" glyph-name="file-download-outline" d="M597.333 874.667l256-256v-512c0-47.128-38.205-85.333-85.333-85.333v0h-512c-47.128 0-85.333 38.205-85.333 85.333v0 682.667c0 47.128 38.205 85.333 85.333 85.333v0h341.333zM768 106.667v469.333h-213.333v213.333h-298.667v-682.667h512zM512 149.333l-170.667 170.667h106.667v128h128v-128h106.667l-170.667-170.667z" />
+<glyph unicode="&#xe943;" glyph-name="file-download-outline" d="M614.4 960.001l307.2-307.2v-614.4c0-56.554-45.846-102.4-102.4-102.4v0h-614.4c-56.554 0-102.4 45.846-102.4 102.4v0 819.201c0 56.554 45.846 102.4 102.4 102.4v0h409.6zM819.2 38.4v563.2h-256v256h-358.401v-819.201h614.4zM512 89.599l-204.8 204.8h128v153.6h153.6v-153.6h128l-204.8-204.8z" />
 <glyph unicode="&#xe944;" glyph-name="error-circle" d="M512.001 959.999c-282.624 0-512.001-229.376-512.001-512.001s229.376-511.998 512.001-511.998c282.626 0 511.999 229.374 511.999 511.998s-229.374 512.001-511.999 512.001zM563.201 191.996h-102.4v102.402h102.4v-102.402zM563.201 396.799h-102.4v307.2h102.4v-307.2z" />
+<glyph unicode="&#xe945;" glyph-name="upload" d="M933.648 598.588h-240.942v361.412h-361.412v-361.412h-240.942l421.648-421.648 421.648 421.648zM451.764 478.116v361.412h120.47v-361.412h70.475l-130.711-130.711-130.711 130.711h70.475zM90.352 56.47h843.294v-120.47h-843.294v120.47z" />
+<glyph unicode="&#xe946;" glyph-name="reply" d="M98.011 739.109l366.202-157.014-366.689 48.762 0.488 108.251zM463.726 313.905l-366.202-157.014v108.251l366.202 48.762zM0.488 886.857l-0.488-341.334 731.429-97.523-731.429-97.523 0.488-341.334 1023.512 438.857-1023.512 438.857z" />
+<glyph unicode="&#xe947;" glyph-name="save" d="M796.445 959.998h-682.667c-63.147 0-113.777-51.2-113.777-113.777v-796.444c0-62.577 50.631-113.777 113.777-113.777h796.444c62.577 0 113.777 51.2 113.777 113.777v682.667l-227.556 227.556zM910.224 49.775h-796.444v796.444h635.449l160.996-160.996v-635.449zM512.001 447.998c-94.436 0-170.667-76.231-170.667-170.667s76.231-170.667 170.667-170.667c94.436 0 170.667 76.231 170.667 170.667s-76.231 170.667-170.667 170.667zM170.668 789.331h512v-227.556h-512v227.556z" />
 <glyph unicode="&#xe9d1;" glyph-name="eye-blocked" d="M945.942 945.942c-18.746 18.744-49.136 18.744-67.882 0l-202.164-202.164c-51.938 15.754-106.948 24.222-163.896 24.222-223.318 0-416.882-130.042-512-320 41.122-82.124 100.648-153.040 173.022-207.096l-158.962-158.962c-18.746-18.746-18.746-49.136 0-67.882 9.372-9.374 21.656-14.060 33.94-14.060s24.568 4.686 33.942 14.058l864 864c18.744 18.746 18.744 49.138 0 67.884zM416 640c42.24 0 78.082-27.294 90.92-65.196l-121.724-121.724c-37.902 12.838-65.196 48.68-65.196 90.92 0 53.020 42.98 96 96 96zM110.116 448c38.292 60.524 89.274 111.924 149.434 150.296 3.918 2.5 7.876 4.922 11.862 7.3-9.962-27.328-15.412-56.822-15.412-87.596 0-54.89 17.286-105.738 46.7-147.418l-60.924-60.924c-52.446 36.842-97.202 83.882-131.66 138.342zM768 518c0 27.166-4.256 53.334-12.102 77.898l-321.808-321.808c24.568-7.842 50.742-12.090 77.91-12.090 141.382 0 256 114.618 256 256zM830.026 670.026l-69.362-69.362c1.264-0.786 2.53-1.568 3.786-2.368 60.162-38.374 111.142-89.774 149.434-150.296-38.292-60.522-89.274-111.922-149.436-150.296-75.594-48.218-162.89-73.704-252.448-73.704-38.664 0-76.902 4.76-113.962 14.040l-76.894-76.894c59.718-21.462 123.95-33.146 190.856-33.146 223.31 0 416.876 130.042 512 320-45.022 89.916-112.118 166.396-193.974 222.026z" />
 </font></defs></svg>