From d6b855f0dee67e7c22248ead829766eeb44a7a03 Mon Sep 17 00:00:00 2001
From: James Grugett <jahooma@gmail.com>
Date: Tue, 1 Feb 2022 14:10:40 -0600
Subject: [PATCH] Improve create fold button with icon and 'New' label

---
 web/components/confirmation-button.tsx | 3 ++-
 web/components/create-fold-button.tsx  | 4 +++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/web/components/confirmation-button.tsx b/web/components/confirmation-button.tsx
index 3e36e325..8cb43070 100644
--- a/web/components/confirmation-button.tsx
+++ b/web/components/confirmation-button.tsx
@@ -4,6 +4,7 @@ export function ConfirmationButton(props: {
   id: string
   openModelBtn: {
     label: string
+    icon?: any
     className?: string
   }
   cancelBtn?: {
@@ -25,7 +26,7 @@ export function ConfirmationButton(props: {
         htmlFor={id}
         className={clsx('btn modal-button', openModelBtn.className)}
       >
-        {openModelBtn.label}
+        {openModelBtn.icon} {openModelBtn.label}
       </label>
       <input type="checkbox" id={id} className="modal-toggle" />
 
diff --git a/web/components/create-fold-button.tsx b/web/components/create-fold-button.tsx
index d6085f51..ff90af12 100644
--- a/web/components/create-fold-button.tsx
+++ b/web/components/create-fold-button.tsx
@@ -1,6 +1,7 @@
 import clsx from 'clsx'
 import { useRouter } from 'next/router'
 import { useState } from 'react'
+import { PlusCircleIcon } from '@heroicons/react/solid'
 import { parseWordsAsTags } from '../../common/util/parse'
 import { createFold } from '../lib/firebase/api-call'
 import { foldPath } from '../lib/firebase/folds'
@@ -49,7 +50,8 @@ export function CreateFoldButton() {
     <ConfirmationButton
       id="create-fold"
       openModelBtn={{
-        label: 'New community',
+        label: 'New',
+        icon: <PlusCircleIcon className="w-5 h-5 mr-2" />,
         className: clsx(
           isSubmitting ? 'loading btn-disabled' : 'btn-primary',
           'btn-sm'