[Issue-1967] Update UI

packages/extension-koni-ui/src/Popup/EarningDone/Content/index.tsx

@@ -229,6 +229,10 @@ const EarningDoneContent = styled(Component)<Props>(({ theme: { extendToken, tok
       }
     },
 
+    '.ant-sw-screen-layout-body': {
+      position: 'relative'
+    },
+
     '.social-group': {
       alignSelf: 'center',
 

packages/extension-koni-ui/src/Popup/EarningDone/Content/parts/Fail.tsx

@@ -23,7 +23,7 @@ const Component: React.FC<Props> = (props: Props) => {
   const { t } = useTranslation();
 
   return (
-    <div className={CN(className)}>
+    <div className={CN(className, { mt: !isWebUI })}>
       <div className='page-icon'>
         <PageIcon
           color='var(--page-icon-color)'
@@ -70,6 +70,10 @@ const EarningDoneFail = styled(Component)<Props>(({ theme: { token } }: Props) =
     flexDirection: 'column',
     gap: token.sizeLG,
 
+    '&.mt': {
+      marginTop: token.marginLG
+    },
+
     '.page-icon': {
       display: 'flex',
       justifyContent: 'center',

packages/extension-koni-ui/src/Popup/EarningDone/Content/parts/Processing.tsx

@@ -1,12 +1,13 @@
 // Copyright 2019-2022 @subwallet/extension-koni-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
+import { ScreenContext } from '@subwallet/extension-koni-ui/contexts/ScreenContext';
 import { useTranslation } from '@subwallet/extension-koni-ui/hooks';
 import { ThemeProps } from '@subwallet/extension-koni-ui/types';
 import { PageIcon } from '@subwallet/react-ui';
 import CN from 'classnames';
 import { SpinnerGap } from 'phosphor-react';
-import React from 'react';
+import React, { useContext } from 'react';
 import styled from 'styled-components';
 
 interface Props extends ThemeProps {
@@ -18,8 +19,10 @@ const Component: React.FC<Props> = (props: Props) => {
 
   const { t } = useTranslation();
 
+  const { isWebUI } = useContext(ScreenContext);
+
   return (
-    <div className={CN(className)}>
+    <div className={CN(className, { absolute: !isWebUI })}>
       <div className='page-icon'>
         <PageIcon
           color='var(--page-icon-color)'
@@ -56,6 +59,18 @@ const EarningDoneProcessing = styled(Component)<Props>(({ theme: { token } }: Pr
     flexDirection: 'column',
     gap: token.sizeLG,
 
+    '&.absolute': {
+      position: 'absolute',
+      marginTop: 0,
+      top: '50%',
+      left: '50%',
+      transform: 'translateX(-50%) translateY(-50%)',
+
+      '.description': {
+        width: 320
+      }
+    },
+
     '.content-container': {
       display: 'flex',
       flexDirection: 'column',

packages/extension-koni-ui/src/Popup/EarningDone/Content/parts/Success.tsx

@@ -3,6 +3,7 @@
 
 import { YieldPoolType } from '@subwallet/extension-base/background/KoniTypes';
 import { baseParseIPFSUrl, detectTranslate } from '@subwallet/extension-base/utils';
+import { ImageSlash } from '@subwallet/extension-koni-ui/components';
 import { ScreenContext } from '@subwallet/extension-koni-ui/contexts/ScreenContext';
 import { useSelector, useTranslation } from '@subwallet/extension-koni-ui/hooks';
 import { ThemeProps } from '@subwallet/extension-koni-ui/types';
@@ -40,7 +41,7 @@ const Component: React.FC<Props> = (props: Props) => {
   }, []);
 
   return (
-    <div className={CN(className)}>
+    <div className={CN(className, { mt: !isWebUI })}>
       {
         url && isWebUI && (
           <img
@@ -105,16 +106,9 @@ const Component: React.FC<Props> = (props: Props) => {
                 <ActivityIndicator size={52} />
               )
               : (
-                <Icon
-                  customIcon={(
-                    <Image
-                      height={52}
-                      shape='square'
-                      src={'/images/image-not-supported.svg'}
-                      width={52}
-                    />
-                  )}
-                  type='customIcon'
+                <ImageSlash
+                  height={52}
+                  width={52}
                 />
               )
           }
@@ -189,6 +183,10 @@ const EarningDoneSuccess = styled(Component)<Props>(({ theme: { token } }: Props
     flexDirection: 'column',
     gap: token.sizeLG,
 
+    '&.mt': {
+      marginTop: token.marginLG
+    },
+
     '.success-image': {
       width: 470,
       position: 'absolute',

packages/extension-koni-ui/src/components/Logo/ImageSlash.tsx

@@ -0,0 +1,28 @@
+// Copyright 2019-2022 @polkadot/extension-koni-ui authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import React from 'react';
+
+interface Props {
+  width?: number | string;
+  height?: number | string;
+}
+
+const ImageSlash: React.FC<Props> = ({ height = 24, width = 24 }: Props) => {
+  return (
+    <svg
+      fill='none'
+      height={height}
+      viewBox='0 0 24 24'
+      width={width}
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      <path
+        d='M21.1913 21.0725L20.4113 20.2925L18.0013 17.8825L13.4113 13.2925L3.59127 3.47249L2.81127 2.69249C2.42127 2.30249 1.79127 2.30249 1.40127 2.69249C1.00127 3.08249 1.00127 3.71249 1.39127 4.10249L3.00127 5.71249V18.8825C3.00127 19.9825 3.90127 20.8825 5.00127 20.8825H18.1713L19.7813 22.4925C20.1713 22.8825 20.8013 22.8825 21.1913 22.4925C21.5813 22.1025 21.5813 21.4625 21.1913 21.0725ZM6.02127 17.8825C5.60127 17.8825 5.37127 17.4025 5.63127 17.0725L8.12127 13.8725C8.32127 13.6225 8.70127 13.6125 8.90127 13.8625L11.0013 16.3925L12.1713 14.8825L15.1713 17.8825H6.02127ZM21.0013 18.0525L5.83127 2.88249H19.0013C20.1013 2.88249 21.0013 3.78249 21.0013 4.88249V18.0525Z'
+        fill='currentColor'
+      />
+    </svg>
+  );
+};
+
+export default ImageSlash;

packages/extension-koni-ui/src/components/Logo/index.tsx

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 export { default as DualLogo } from './DualLogo';
+export { default as ImageSlash } from './ImageSlash';
 export { default as Logo2D } from './Logo2D';
 export { default as Logo2DWithBorder } from './Logo2DWithBorder';
 export { default as Logo3D } from './Logo3D';