Format code

HipoFinance · Oct 8, 2023 · 4833ffd · 4833ffd
1 parent 739113e
commit 4833ffd
Show file tree

Hide file tree

Showing 9 changed files with 58 additions and 57 deletions.
diff --git a/.github/workflows/deploy-pages.yaml b/.github/workflows/deploy-pages.yaml
@@ -2,50 +2,50 @@
 name: Deploy static content to Pages
 
 on:
-  # Runs on pushes targeting the default branch
-  push:
-    branches: ['main']
+    # Runs on pushes targeting the default branch
+    push:
+        branches: ['main']
 
-  # Allows you to run this workflow manually from the Actions tab
-  workflow_dispatch:
+    # Allows you to run this workflow manually from the Actions tab
+    workflow_dispatch:
 
 # Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages
 permissions:
-  contents: read
-  pages: write
-  id-token: write
+    contents: read
+    pages: write
+    id-token: write
 
 # Allow one concurrent deployment
 concurrency:
-  group: 'pages'
-  cancel-in-progress: true
+    group: 'pages'
+    cancel-in-progress: true
 
 jobs:
-  # Single deploy job since we're just deploying
-  deploy:
-    environment:
-      name: github-pages
-      url: ${{ steps.deployment.outputs.page_url }}
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-      - name: Set up Node
-        uses: actions/setup-node@v3
-        with:
-          node-version: 18
-          cache: 'npm'
-      - name: Install dependencies
-        run: npm install
-      - name: Build
-        run: npm run build
-      - name: Setup Pages
-        uses: actions/configure-pages@v3
-      - name: Upload artifact
-        uses: actions/upload-pages-artifact@v1
-        with:
-          # Upload dist repository
-          path: './dist'
-      - name: Deploy to GitHub Pages
-        id: deployment
-        uses: actions/deploy-pages@v1
+    # Single deploy job since we're just deploying
+    deploy:
+        environment:
+            name: github-pages
+            url: ${{ steps.deployment.outputs.page_url }}
+        runs-on: ubuntu-latest
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v3
+            - name: Set up Node
+              uses: actions/setup-node@v3
+              with:
+                  node-version: 18
+                  cache: 'npm'
+            - name: Install dependencies
+              run: npm install
+            - name: Build
+              run: npm run build
+            - name: Setup Pages
+              uses: actions/configure-pages@v3
+            - name: Upload artifact
+              uses: actions/upload-pages-artifact@v1
+              with:
+                  # Upload dist repository
+                  path: './dist'
+            - name: Deploy to GitHub Pages
+              id: deployment
+              uses: actions/deploy-pages@v1
diff --git a/.prettierrc b/.prettierrc
@@ -4,5 +4,6 @@
     "semi": false,
     "singleQuote": true,
     "jsxSingleQuote": true,
+    "trailingComma": "all",
     "plugins": ["prettier-plugin-tailwindcss"]
 }
diff --git a/index.html b/index.html
@@ -30,7 +30,7 @@
             <div style="display: none" class="loading m-auto hidden flex-col text-center">
                 <img src="src/assets/logo.svg" class="h-32 dark:hidden" />
                 <img src="src/assets/logo-dark.svg" class="hidden h-32 dark:block" />
-                <p class="dark:text-dark-50 font-bold text-brown">Loading</p>
+                <p class="font-bold text-brown dark:text-dark-50">Loading</p>
             </div>
         </div>
         <script type="module" src="src/main.tsx"></script>

diff --git a/src/Footer.tsx b/src/Footer.tsx
@@ -7,7 +7,7 @@ interface Props {
 
 const Footer = observer(({ model }: Props) => {
     return (
-        <div className='dark:bg-dark-900 dark:text-dark-50 mt-auto bg-brown font-body text-white'>
+        <div className='mt-auto bg-brown font-body text-white dark:bg-dark-900 dark:text-dark-50'>
             <div className='container mx-auto pb-16 pt-8'>
                 <div className='grid grid-cols-1 min-[480px]:grid-cols-2 lg:grid-cols-4'>
                     <div className='m-8'>

diff --git a/src/Header.tsx b/src/Header.tsx
@@ -12,7 +12,7 @@ interface Props {
 
 const Header = observer(({ model }: Props) => {
     return (
-        <div className='dark:text-dark-50 container mx-auto font-body text-brown'>
+        <div className='container mx-auto font-body text-brown dark:text-dark-50'>
             <div className='mx-4 flex flex-row items-center pt-4'>
                 <img src={logo} className='-ml-4 -mr-3 h-20 dark:hidden' />
                 <img src={logoDark} className='-ml-4 -mr-3 hidden h-20 dark:block' />

diff --git a/src/StakeUnstake.tsx b/src/StakeUnstake.tsx
@@ -21,13 +21,13 @@ const StakeUnstake = observer(({ model }: Props) => {
     }
 
     return (
-        <div className='dark:text-dark-50 container mx-auto font-body text-brown'>
+        <div className='container mx-auto font-body text-brown dark:text-dark-50'>
             <p className='my-8 text-center'>
                 {model.isStakeTabActive
                     ? 'Stake TON and receive hTON while staking'
                     : 'Unstake hTON and receive TON and rewards'}
             </p>
-            <div className='dark:bg-tabbar dark:bg-dark-400 mx-auto my-8 w-max rounded-full bg-milky p-0.5 dark:text-white'>
+            <div className='dark:bg-tabbar mx-auto my-8 w-max rounded-full bg-milky p-0.5 dark:bg-dark-400 dark:text-white'>
                 <ul
                     className={
                         'tab-bar relative flex select-none flex-nowrap' +
@@ -60,7 +60,7 @@ const StakeUnstake = observer(({ model }: Props) => {
                         (model.isWalletConnected ? maxHeight : ' max-h-0 overflow-hidden')
                     }
                 >
-                    <div className='dark:bg-dark-600 dark:text-dark-50 mx-4 -mb-10 rounded-t-2xl bg-brown px-8 pb-10 pt-4 text-sm text-white'>
+                    <div className='mx-4 -mb-10 rounded-t-2xl bg-brown px-8 pb-10 pt-4 text-sm text-white dark:bg-dark-600 dark:text-dark-50'>
                         <div
                             className={
                                 'relative flex flex-row flex-wrap' +
@@ -122,13 +122,13 @@ const StakeUnstake = observer(({ model }: Props) => {
                     </div>
                 </div>
 
-                <div className='dark:bg-dark-700 mx-4 rounded-2xl bg-white p-8 shadow-sm'>
+                <div className='mx-4 rounded-2xl bg-white p-8 shadow-sm dark:bg-dark-700'>
                     <p>{model.isStakeTabActive ? 'Stake' : 'Unstake'}</p>
 
                     <label>
                         <div
                             className={
-                                'dark:bg-dark-900 dark:border-dark-900 mb-8 mt-4 flex flex-row rounded-lg border border-milky p-4 focus-within:border-brown ' +
+                                'mb-8 mt-4 flex flex-row rounded-lg border border-milky p-4 focus-within:border-brown dark:border-dark-900 dark:bg-dark-900 ' +
                                 (model.isAmountValid
                                     ? ''
                                     : ' border-orange focus-within:border-orange dark:border-orange dark:focus-within:border-orange')
@@ -141,7 +141,7 @@ const StakeUnstake = observer(({ model }: Props) => {
                                 placeholder='Amount'
                                 size={1}
                                 className={
-                                    'dark:text-dark-50 dark:bg-dark-900 h-full w-full flex-1 px-3 text-lg focus:outline-none' +
+                                    'h-full w-full flex-1 px-3 text-lg focus:outline-none dark:bg-dark-900 dark:text-dark-50' +
                                     (model.isAmountValid ? '' : ' text-orange dark:text-orange')
                                 }
                                 value={model.amount}
@@ -162,10 +162,10 @@ const StakeUnstake = observer(({ model }: Props) => {
                             />
                             <button
                                 className={
-                                    'dark:text-dark-600 rounded-lg bg-milky px-3 text-xs hover:bg-gray-200 focus:outline-none active:bg-gray-300' +
+                                    'rounded-lg bg-milky px-3 text-xs hover:bg-gray-200 focus:outline-none active:bg-gray-300 dark:text-dark-600' +
                                     (model.isAmountValid
                                         ? ''
-                                        : ' dark:hover:text-dark-50 active:!bg-dark-600 bg-orange text-white hover:!bg-brown')
+                                        : ' bg-orange text-white hover:!bg-brown active:!bg-dark-600 dark:hover:text-dark-50')
                                 }
                                 onClick={model.setAmountToMax}
                             >
@@ -176,7 +176,7 @@ const StakeUnstake = observer(({ model }: Props) => {
 
                     <button
                         id='submit'
-                        className='dark:text-dark-600 h-14 w-full rounded-2xl bg-orange text-lg font-medium text-white disabled:opacity-80'
+                        className='h-14 w-full rounded-2xl bg-orange text-lg font-medium text-white disabled:opacity-80 dark:text-dark-600'
                         disabled={!model.isButtonEnabled}
                         onClick={(e) => {
                             if (model.isWalletConnected) {

diff --git a/src/Stats.tsx b/src/Stats.tsx
@@ -9,7 +9,7 @@ interface Props {
 
 const Stats = observer(({ model }: Props) => {
     return (
-        <div className='dark:text-dark-50 container mx-auto mb-16 font-body text-brown'>
+        <div className='container mx-auto mb-16 font-body text-brown dark:text-dark-50'>
             <div className='mx-auto flex max-w-lg flex-row px-4'>
                 <p className='text-lg font-bold'>Hipo statistics</p>
                 <a href={model.explorerHref} target='hipo_explorer' className='ml-auto text-xs font-light text-blue'>
@@ -18,7 +18,7 @@ const Stats = observer(({ model }: Props) => {
             </div>
 
             <div className='mx-auto max-w-lg text-sm font-medium'>
-                <div className='dark:bg-dark-800 m-4 rounded-2xl bg-white p-8 shadow-sm'>
+                <div className='m-4 rounded-2xl bg-white p-8 shadow-sm dark:bg-dark-800'>
                     <div className='my-4 flex flex-row'>
                         <p>APY 1 week</p>
                         <p className='ml-auto'>{model.apyWeek}</p>

diff --git a/src/TestnetBadge.tsx b/src/TestnetBadge.tsx
@@ -13,7 +13,7 @@ const TestnetBadge = observer(({ model }: Props) => {
             </p>
             <div
                 className={
-                    'dark:text-dark-600 ml-2 h-fit rounded-full bg-orange px-2 py-1 text-xs uppercase text-white' +
+                    'ml-2 h-fit rounded-full bg-orange px-2 py-1 text-xs uppercase text-white dark:text-dark-600' +
                     (model.isMainnet ? ' hidden' : '')
                 }
             >

diff --git a/src/Wait.tsx b/src/Wait.tsx
@@ -36,7 +36,7 @@ const Wait = observer(({ model }: Props) => {
         message = <p className='mt-4 text-center'>Despite multiple attempts, we could not locate it.</p>
         button = (
             <button
-                className='dark:text-dark-600 mt-4 h-14 w-full rounded-2xl bg-orange text-lg font-medium text-white'
+                className='mt-4 h-14 w-full rounded-2xl bg-orange text-lg font-medium text-white dark:text-dark-600'
                 onClick={() => {
                     model.setWaitForTransaction('no')
                 }}
@@ -58,7 +58,7 @@ const Wait = observer(({ model }: Props) => {
         )
         button = (
             <button
-                className='dark:text-dark-600 mt-4 h-14 w-full rounded-2xl bg-orange text-lg font-medium text-white'
+                className='mt-4 h-14 w-full rounded-2xl bg-orange text-lg font-medium text-white dark:text-dark-600'
                 onClick={() => {
                     model.setWaitForTransaction('no')
                 }}
@@ -79,10 +79,10 @@ const Wait = observer(({ model }: Props) => {
         return (
             <div
                 className={
-                    'bg-black dark:text-dark-50 fixed left-0 top-0 z-[1000] flex h-full w-full overflow-y-auto bg-opacity-40 p-8 text-brown'
+                    'fixed left-0 top-0 z-[1000] flex h-full w-full overflow-y-auto bg-black bg-opacity-40 p-8 text-brown dark:text-dark-50'
                 }
             >
-                <div className='dark:bg-dark-700 m-auto w-96 max-w-sm rounded-3xl bg-milky p-8 shadow-2xl'>
+                <div className='m-auto w-96 max-w-sm rounded-3xl bg-milky p-8 shadow-2xl dark:bg-dark-700'>
                     {img}
                     {heading}
                     {message}