update usage of button

Author: Roshanjossey

src/components/Button.tsx

@@ -17,6 +17,9 @@ const Button = ({
     if (color === 'primary') {
       return 'text-white bg-blue-700 hover:bg-blue-800 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800'
     }
+    if (variant === 'outlined') {
+      return 'text-blue-700 border border-blue-700 hover:bg-blue-700 hover:text-white focus:ring-blue-300 dark:text-blue-600 dark:border-blue-600 dark:hover:bg-blue-600 dark:hover:text-white dark:focus:ring-blue-800'
+    }
     if (color === 'transparent') {
       return 'focus:ring-transparent'
     }

src/components/ErrorFallback.tsx

@@ -1,3 +1,5 @@
+import Button from './Button'
+
 type ErrorFallbackProps = {
   error: Error
   resetErrorBoundary: () => void
@@ -11,7 +13,7 @@ export default function ErrorFallback({
     <div role="alert">
       <p>Something went wrong:</p>
       <pre>{error.message}</pre>
-      <button onClick={resetErrorBoundary}>Try again</button>
+      <Button onClick={resetErrorBoundary}>Try again</Button>
     </div>
   )
 }

src/components/ExpandingTextarea.tsx

@@ -23,7 +23,6 @@ export default function ExpandingTextarea({
 
   React.useLayoutEffect(() => {
     if (textareaRef.current) {
-      textareaRef.current.style.height = 'inherit'
       // Set height
       textareaRef.current.style.height = `${Math.max(
         textareaRef.current.scrollHeight,

src/components/UserDetails/Badges/BadgeList.tsx

@@ -1,4 +1,5 @@
 import { graphql, usePaginationFragment } from 'react-relay'
+import Button from 'src/components/Button'
 import { BadgeList_user$key } from '../../../queries/__generated__/BadgeList_user.graphql'
 import Badge from './Badge'
 
@@ -35,14 +36,13 @@ const BadgeList = ({ user }: { user: BadgeList_user$key }) => {
         (badge) => badge && <Badge key={badge.node.id} badge={badge.node} />
       )}
       {hasNext ? (
-        <button
-          className="text-gray-600 dark:text-gray-300"
+        <Button
           onClick={() => {
             loadNext(2)
           }}
         >
           Load more
-        </button>
+        </Button>
       ) : null}
     </div>
   )

src/components/UserDetails/Bio.tsx

@@ -57,14 +57,18 @@ const Bio = ({ user }: BioProps) => {
             disabled={isMutationInFlight}
             defaultValue={data.bio}
           />
-          <button onClick={() => setEditMode(false)}>
+          <button type="button" onClick={() => setEditMode(false)}>
             <GoCheck />
           </button>
         </div>
       ) : (
         <div className="flex justify-between">
           <span>{data.bio}</span>
-          <button className="ml-4" onClick={() => setEditMode(true)}>
+          <button
+            type="button"
+            className="ml-4"
+            onClick={() => setEditMode(true)}
+          >
             <GoPencil />
           </button>
         </div>

src/components/comment/Comments.tsx

@@ -42,6 +42,7 @@ const Comments = ({ story }: CommentsProps) => {
       )}
       {hasNext ? (
         <button
+          type="button"
           className="text-gray-600 dark:text-gray-300"
           onClick={() => {
             loadNext(2)

src/components/feed/StoryPreviewFooter.tsx

@@ -55,14 +55,15 @@ export default function StoryPreviewFooter({ story }: StoryPreviewFooterProps) {
         {data.reactions.hasViewerAssociation ? (
           <div className="flex items-center">
             <span>{data.reactions.totalCount}</span>
-            <button onClick={() => handleReaction()}>
+            <button onClick={() => handleReaction()} type="button">
               <RiHeart3Fill />
             </button>
           </div>
         ) : (
           <div>
             <span>{data.reactions.totalCount}</span>
             <button
+              type="button"
               onClick={() => handleReaction()}
               disabled={isMutationInFlight}
             >

src/components/issue/IssuesFromLastRepo.tsx

@@ -71,12 +71,14 @@ const IssuesFromLastRepo = ({ user }: IssuesFromLastRepoProps) => {
           )}
         </div>
         <button
+          type="button"
           className="absolute right-8 bottom-0 mr-4 mt-4"
           onClick={() => scrollHorizontally(scrollDirection.Left)}
         >
           <FaChevronRight className="b-0 w-6 h-6 rotate-180 dark:text-gray-300 bg-gray-300 dark:bg-dark-900 rounded-full p-1 font-bold" />
         </button>
         <button
+          type="button"
           className="absolute right-0 bottom-0 mr-4 mt-4"
           onClick={() => handleScrollRight()}
         >

src/components/issue/IssuesFromRecentRepo.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { graphql, usePaginationFragment } from 'react-relay'
 import { IssuesFromRecentRepos$key } from '__generated__/IssuesFromRecentRepos.graphql'
+import Button from '../Button'
 import Issue from './Issue'
 
 type IssuesFromRecentReposProps = {
@@ -46,13 +47,13 @@ const IssuesFromRecentRepos = ({ user }: IssuesFromRecentReposProps) => {
           (issue) => issue && <Issue issue={issue.node} key={issue.node.id} />
         )}
         {hasNext ? (
-          <button
+          <Button
             onClick={() => {
               loadNext(3)
             }}
           >
             Load more
-          </button>
+          </Button>
         ) : null}
       </div>
     </div>

src/components/issue/RelevantIssues.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { graphql, usePaginationFragment } from 'react-relay'
 import { RelevantIssues$key } from '__generated__/RelevantIssues.graphql'
+import Button from '../Button'
 import Issue from './Issue'
 
 type RelevantIssuesProps = {
@@ -42,13 +43,13 @@ const RelevantIssues = ({ user }: RelevantIssuesProps) => {
           (issue) => issue && <Issue issue={issue.node} key={issue.node.id} />
         )}
         {hasNext ? (
-          <button
+          <Button
             onClick={() => {
               loadNext(10)
             }}
           >
             Load more
-          </button>
+          </Button>
         ) : null}
       </div>
     </div>