chore: antd last cleanup (#900)

* chore: remove redundant component

* chore: remove Headline component

* chore: update readme for stacks

* chore: remove antd unused styles

Author: cinnamoroll6130

.storybook/preview.tsx

@@ -7,7 +7,6 @@ import { MemoryRouter, Route, Routes } from 'react-router-dom'
 import { AppProvider } from '../src/renderer/contexts/AppContext'
 import { ThemeProvider, themes } from '../src/renderer/contexts/ThemeContext'
 import { getMessagesByLocale } from '../src/renderer/i18n'
-import * as Styled from '../src/renderer/views/app/AppView.styles'
 import { Locale } from '../src/shared/i18n/types'
 
 import * as mockApi from '../src/shared/mock/api'
@@ -33,9 +32,9 @@ const providerDecorator: Decorator = (Story) => (
     {/* We use IntlProvider instead of our our custom I18nProvider to provide messages, but w/o dependencies to Electron/Node source, which can't run in storybook */}
     <IntlProvider locale={locale} messages={messages} defaultLocale={locale}>
       <ThemeProvider theme={lightTheme}>
-        <Styled.AppWrapper>
+        <div className="h-screen p-0 bg-bg3 dark:bg-bg3d font-main">
           <Story />
-        </Styled.AppWrapper>
+        </div>
       </ThemeProvider>
     </IntlProvider>
   </AppProvider>

README.md

@@ -110,15 +110,16 @@ This is the developer source repository, general information, and download page
 
 _(in alphabetical order)_
 
-- [Ant Design](https://github.com/ant-design/ant-design/)
 - [ESLint](https://github.com/eslint/eslint)
 - [Electron](https://github.com/electron/electron/)
 - [fp-ts](https://gcanti.github.io/fp-ts/)
+- [HeadlessUI](https://headlessui.com/)
 - [Observable Hooks](https://observable-hooks.js.org/)
 - [Prettier](https://github.com/prettier/prettier)
 - [ReactJS](https://github.com/facebook/react/)
 - [Styled Components](https://styled-components.com/)
 - [RxJS](https://rxjs.dev/)
+- [TailwindCSS](https://tailwindcss.com/)
 - [Typescript](https://github.com/microsoft/TypeScript)
 - [Vite](https://github.com/vitejs/vite)
 - [Vitest](https://github.com/vitest-dev/vitest)

src/renderer/components/LayoutlessWrapper/LayoutlessWrapper.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { HeaderTheme } from '../header/theme'
 import { BackLinkButton } from '../uielements/button'
-import { Headline } from '../uielements/headline'
+import { Label } from '../uielements/label'
 import { LocaleDropdown } from './LocaleDropdown'
 
 type Props = {
@@ -22,7 +22,9 @@ export const LayoutlessWrapper = ({ title, children }: Props) => {
 
       <div className="flex flex-col p-4 w-full max-w-[420px]">
         <div className="flex items-center mb-10">
-          <Headline>{title}</Headline>
+          <Label align="center" size="large" textTransform="uppercase" weight="bold">
+            {title}
+          </Label>
         </div>
 
         {children}

src/renderer/components/poolActionsHistory/WalletPoolActionsHistoryHeader.tsx

@@ -7,7 +7,7 @@ import { useIntl } from 'react-intl'
 import { WalletAddress, WalletAddresses } from '../../../shared/wallet/types'
 import { AccountAddressSelector } from '../AccountAddressSelector'
 import { ExternalLinkIcon } from '../uielements/common/Common.styles'
-import { Headline } from '../uielements/headline'
+import { Label } from '../uielements/label'
 import { PoolActionsHistoryFilter } from './PoolActionsHistoryFilter'
 import { Filter } from './types'
 
@@ -57,12 +57,18 @@ export const WalletPoolActionsHistoryHeader = (props: Props) => {
         />
       </div>
       <div className="flex items-center justify-center pt-5 md:pt-0 md:grow md:justify-end">
-        <Headline className="flex items-center !w-auto" onClick={onClickAddressIcon}>
+        <Label
+          className="flex items-center !w-auto"
+          size="large"
+          textTransform="uppercase"
+          align="center"
+          weight="bold"
+          onClick={onClickAddressIcon}>
           {protocol === THORChain
             ? intl.formatMessage({ id: 'common.runeScan' })
             : intl.formatMessage({ id: 'common.mayaScan' })}
           <ExternalLinkIcon className="ml-2" width={18} height={18} />
-        </Headline>
+        </Label>
       </div>
     </>
   )

src/renderer/components/uielements/headline/Headline.stories.tsx

@@ -1,39 +1,8 @@
 import styled from 'styled-components'
-import { palette } from 'styled-theme'
 
 import { Alert as UIAlert } from '../../components/uielements/alert'
 import { media } from '../../helpers/styleHelper'
 
-// AppWrapper styled component
-export const AppWrapper = styled.div`
-  height: 100vh;
-  background: ${palette('background', 3)};
-  padding: 0;
-
-  font-family: 'MainFontRegular';
-
-  a {
-    transition: none;
-  }
-
-  .ant {
-    &-btn,
-    &-input,
-    &-menu,
-    &-input-affix-wrapper,
-    &-table-thead > tr > th,
-    &-table-tbody > tr > td {
-      transition: none;
-    }
-    &-form-item-explain {
-      text-transform: uppercase;
-    }
-    &-form-item-explain-error {
-      color: ${palette('error', 0)};
-    }
-  }
-`
-
 export const Alert = styled(UIAlert)`
   margin-bottom: 10px;
 

src/renderer/components/uielements/headline/Headline.styles.ts

@@ -159,7 +159,7 @@ export const AppView = (): JSX.Element => {
   }, [])
 
   return (
-    <Styled.AppWrapper>
+    <div className="h-screen p-0 bg-bg3 dark:bg-bg3d font-main">
       {shouldHideLayout ? (
         <ViewRoutes />
       ) : (
@@ -194,6 +194,6 @@ export const AppView = (): JSX.Element => {
           </div>
         </div>
       )}
-    </Styled.AppWrapper>
+    </div>
   )
 }

src/renderer/components/uielements/headline/index.ts

@@ -21,7 +21,6 @@ import { AssetIcon } from '../../components/uielements/assets/assetIcon'
 import { FlatButton } from '../../components/uielements/button'
 import { BackLinkButton } from '../../components/uielements/button/BackLinkButton'
 import { Dropdown } from '../../components/uielements/dropdown'
-import { Headline } from '../../components/uielements/headline'
 import { Input } from '../../components/uielements/input'
 import { Label } from '../../components/uielements/label'
 import { Spin } from '../../components/uielements/spin'
@@ -204,9 +203,9 @@ export const LedgerChainSelectView: React.FC = () => {
 
         <div className="flex-1 px-6 pt-8">
           <div className="w-full max-w-2xl mx-auto">
-            <Headline size="large" color="primary" className="mb-8 text-center">
+            <Label className="mb-8" align="center" size="large" color="primary" textTransform="uppercase" weight="bold">
               {intl.formatMessage({ id: 'ledger.detect.title' })}
-            </Headline>
+            </Label>
 
             <Spin
               className="min-h-24 border border-gray0 dark:border-gray0d rounded-lg mb-6"
@@ -250,9 +249,9 @@ export const LedgerChainSelectView: React.FC = () => {
 
       <div className="flex-1 flex flex-col items-center px-6 pb-6">
         <div className="w-full max-w-2xl">
-          <Headline size="large" color="primary" className="mb-2 text-center">
+          <Label align="center" size="large" color="primary" textTransform="uppercase" weight="bold" className="mb-2">
             {intl.formatMessage({ id: 'ledger.connect.title' })}
-          </Headline>
+          </Label>
 
           <p className="text-center text-text2 dark:text-text2d text-16 mb-8">
             {intl.formatMessage({ id: 'ledger.connect.instruction' })}