fix: add asset button disappears when changing appearance (#316)

* fix: change item to use source code pro * fix: replace tab bar control buttons with custom icon buttons
kibis-is · Sep 17, 2024 · c3cb4b0 · c3cb4b0
1 parent d115f21
commit c3cb4b0
Show file tree

Hide file tree

Showing 17 changed files with 7,850 additions and 8 deletions.
diff --git a/src/extension/components/AssetsTab/AssetsTab.tsx b/src/extension/components/AssetsTab/AssetsTab.tsx
@@ -173,7 +173,7 @@ const AssetsTab: FC<IProps> = ({ _context, account }) => {
           {
             button: {
               ['aria-label']: t<string>('buttons.addAsset'),
-              icon: <IoAddCircleOutline />,
+              icon: IoAddCircleOutline,
               onClick: handleAddAssetClick,
               size: 'sm',
               variant: 'ghost',

diff --git a/src/extension/components/EmptyState/EmptyState.tsx b/src/extension/components/EmptyState/EmptyState.tsx
@@ -52,9 +52,9 @@ const EmptyState: FC<IProps> = ({
       w="full"
       {...stackProps}
     >
-      <EmptyIcon h={20} w={20} />
+      <EmptyIcon boxSize={20} />
 
-      <Heading color={defaultTextColor} size="md" textAlign="center">
+      <Heading color={defaultTextColor} fontSize="md" textAlign="center">
         {text}
       </Heading>
 

diff --git a/src/extension/components/IconButton/index.ts b/src/extension/components/IconButton/index.ts
@@ -1 +1,2 @@
 export { default } from './IconButton';
+export * from './types';
diff --git a/src/extension/components/TabControlBar/TabControlBar.tsx b/src/extension/components/TabControlBar/TabControlBar.tsx
@@ -1,6 +1,9 @@
-import { HStack, IconButton, Spacer, Spinner, Tooltip } from '@chakra-ui/react';
+import { HStack, Spacer, Spinner, Tooltip } from '@chakra-ui/react';
 import React, { type FC } from 'react';
 
+// components
+import IconButton from '@extension/components/IconButton';
+
 // constants
 import { DEFAULT_GAP } from '@extension/constants';
 

diff --git a/src/extension/components/TabControlBar/types/ITabControlBarButtonProps.ts b/src/extension/components/TabControlBar/types/ITabControlBarButtonProps.ts
@@ -1,7 +1,8 @@
-import type { IconButtonProps } from '@chakra-ui/react';
+// types
+import type { IProps as IIconButtonProps } from '@extension/components/IconButton';
 
 interface ITabControlBarButtonProps {
-  button: IconButtonProps;
+  button: IIconButtonProps;
   tooltipLabel?: string;
 }
 

diff --git a/src/extension/fonts/SourceCodePro/SourceCodePro-Bold.svg b/src/extension/fonts/SourceCodePro/SourceCodePro-Bold.svg
diff --git a/src/extension/fonts/SourceCodePro/SourceCodePro-Bold.ttf b/src/extension/fonts/SourceCodePro/SourceCodePro-Bold.ttf
diff --git a/src/extension/fonts/SourceCodePro/SourceCodePro-Bold.woff b/src/extension/fonts/SourceCodePro/SourceCodePro-Bold.woff
diff --git a/src/extension/fonts/SourceCodePro/SourceCodePro-Bold.woff2 b/src/extension/fonts/SourceCodePro/SourceCodePro-Bold.woff2
diff --git a/src/extension/fonts/SourceCodePro/SourceCodePro-Regular.svg b/src/extension/fonts/SourceCodePro/SourceCodePro-Regular.svg
diff --git a/src/extension/fonts/SourceCodePro/SourceCodePro-Regular.ttf b/src/extension/fonts/SourceCodePro/SourceCodePro-Regular.ttf
diff --git a/src/extension/fonts/SourceCodePro/SourceCodePro-Regular.woff b/src/extension/fonts/SourceCodePro/SourceCodePro-Regular.woff
diff --git a/src/extension/fonts/SourceCodePro/SourceCodePro-Regular.woff2 b/src/extension/fonts/SourceCodePro/SourceCodePro-Regular.woff2
diff --git a/src/extension/styles/fonts.css b/src/extension/styles/fonts.css
@@ -41,3 +41,25 @@
   url('@extension/fonts/Nunito/Nunito-Regular.ttf') format('truetype'),
   url('@extension/fonts/Nunito/Nunito-Regular.svg#Nunito-Regular') format('svg');
 }
+
+/* source code pro */
+@font-face {
+  font-family: 'SourceCodePro';
+  font-style: normal;
+  font-weight: 600 700;
+  font-display: swap;
+  src: url('@extension/fonts/SourceCodePro/SourceCodePro-Bold.woff2') format('woff2'),
+  url('@extension/fonts/SourceCodePro/SourceCodePro-Bold.woff') format('woff'),
+  url('@extension/fonts/SourceCodePro/SourceCodePro-Bold.ttf') format('truetype'),
+  url('@extension/fonts/SourceCodePro/SourceCodePro-Bold.svg#SourceCodePro-Bold') format('svg');
+}
+@font-face {
+  font-family: 'SourceCodePro';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('@extension/fonts/SourceCodePro/SourceCodePro-Regular.woff2') format('woff2'),
+  url('@extension/fonts/SourceCodePro/SourceCodePro-Regular.woff') format('woff'),
+  url('@extension/fonts/SourceCodePro/SourceCodePro-Regular.ttf') format('truetype'),
+  url('@extension/fonts/SourceCodePro/SourceCodePro-Regular.svg#SourceCodePro-Regular') format('svg');
+}
diff --git a/src/extension/theme/Code.ts b/src/extension/theme/Code.ts
@@ -0,0 +1,11 @@
+import { defineStyle, defineStyleConfig } from '@chakra-ui/react';
+
+const Code = defineStyleConfig({
+  variants: {
+    subtle: defineStyle({
+      fontFamily: 'SourceCodePro',
+    }),
+  },
+});
+
+export default Code;
diff --git a/src/extension/theme/tag.ts → src/extension/theme/Tag.ts b/src/extension/theme/tag.ts → src/extension/theme/Tag.ts
diff --git a/src/extension/theme/theme.tsx b/src/extension/theme/theme.tsx
@@ -3,7 +3,8 @@ import { Dict } from '@chakra-ui/utils';
 import { StepsTheme as Steps } from 'chakra-ui-steps';
 
 // themes
-import Tag from './tag';
+import Code from './Code';
+import Tag from './Tag';
 
 const theme: Dict = extendTheme({
   breakpoints: {
@@ -66,8 +67,9 @@ const theme: Dict = extendTheme({
     },
   },
   components: {
+    Code,
     Steps,
-    Tag,
+    Tag: Tag,
   },
   styles: {
     global: {
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		export { default } from './IconButton';
		export * from './types';