moving to elements

frontend/src/app/components/UserForm.tsx

@@ -3,6 +3,7 @@ import { useState, useEffect } from 'react'
 import { Password, User } from '../../types'
 import { useUserContext } from '../../contexts/UserContext'
 import { message } from 'antd'
+import { Button } from '../../elements/Button'
 
 export const UserForm = () => {
   const { user } = useUserContext()
@@ -78,9 +79,9 @@ export const UserForm = () => {
             onChange={(e) => setPasswordConfirm(e.target.value)}
           />
         </label>
-        <button type="submit" disabled={!valid}>
+        <Button htmlType="submit" disabled={!valid}>
           Save
-        </button>
+        </Button>
       </form>
     </>
   )

frontend/src/layout/AppHeader/index.tsx

@@ -1,10 +1,11 @@
 import { ReactNode } from 'react'
-import { Avatar, Button, Dropdown, Menu } from 'antd'
+import { Avatar, Dropdown, Menu } from 'antd'
 import { Header } from 'antd/lib/layout/layout'
 import { Link, useHistory } from 'react-router-dom'
 import { useUserContext } from '../../contexts/UserContext'
 
 import './style.scss'
+import { Button } from '../../elements/Button'
 
 type Props = {
   children: ReactNode

frontend/src/pages/ForgotPassword/index.tsx

@@ -1,5 +1,6 @@
-import { Button, Input, Layout } from 'antd'
+import { Input, Layout } from 'antd'
 import { useState } from 'react'
+import { Button } from '../../elements/Button'
 
 export const ForgotPassword = () => {
   const [email, setEmail] = useState('')

frontend/src/pages/NewTransaction/index.tsx

@@ -1,5 +1,6 @@
 import { InputNumber } from 'antd'
 import { useState } from 'react'
+import { Button } from '../../elements/Button'
 
 import '../../scss/transaction-modal.scss'
 type Props = {
@@ -52,8 +53,8 @@ export const TransactionForm = ({ stackId }: Props) => {
               Select Account
             </option>
           </select>
-          <button type="button">cancel</button>
+          <Button htmlType="button">cancel</Button>
-          <button type="submit">Submit</button>
+          <Button htmlType="submit">Submit</Button>
         </label>
       </form>
     </div>

frontend/src/widgets/AccountSelect/index.tsx

@@ -3,6 +3,7 @@ import { message } from 'antd'
 import { useUserContext } from '../../contexts/UserContext'
 
 import './style.scss'
+import { Button } from '../../elements/Button'
 
 type Props = {
   selectProfile: (id: string) => void
@@ -22,12 +23,12 @@ export const AccountSelect = ({ selectProfile }: Props) => {
       <div className="account-select">
         {accounts?.length
           ? accounts.map((account) => (
-              <button
+              <Button
                 key={`account-${account.name}`}
                 onClick={() => handleSelect(account.id)}
               >
                 {account.name}
-              </button>
+              </Button>
             ))
           : ''}
         <Link to="/account/new">Create New Budget!</Link>