From ce398bd77c4b4ef5d66f9714190acf771b592066 Mon Sep 17 00:00:00 2001
From: Bailey Pumfleet <pumfleet@hey.com>
Date: Wed, 21 Apr 2021 11:10:27 +0100
Subject: [PATCH] Replace all SVG icons with Heroicons components

---
 components/Settings.tsx      |  9 +++------
 components/Shell.tsx         | 22 +++-------------------
 pages/[user]/[type].tsx      | 14 ++++----------
 pages/[user]/book.tsx        |  9 +++------
 pages/auth/error.tsx         |  5 ++---
 pages/auth/logout.tsx        |  6 ++----
 pages/availability/index.tsx |  9 +++------
 pages/integrations/index.tsx | 25 +++++++------------------
 pages/success.tsx            | 18 +++++++-----------
 9 files changed, 34 insertions(+), 83 deletions(-)

diff --git a/components/Settings.tsx b/components/Settings.tsx
index e5dd273e..1a0a9264 100644
--- a/components/Settings.tsx
+++ b/components/Settings.tsx
@@ -1,5 +1,6 @@
 import Link from 'next/link';
 import { useRouter } from "next/router";
+import { UserCircleIcon, KeyIcon } from '@heroicons/react/outline';
 
 export default function SettingsShell(props) {
     const router = useRouter();
@@ -13,9 +14,7 @@ export default function SettingsShell(props) {
                                 <nav className="space-y-1">
                                     <Link href="/settings/profile">
                                         <a className={router.pathname == "/settings/profile" ? "bg-blue-50 border-blue-500 text-blue-700 hover:bg-blue-50 hover:text-blue-700 group border-l-4 px-3 py-2 flex items-center text-sm font-medium" : "border-transparent text-gray-900 hover:bg-gray-50 hover:text-gray-900 group border-l-4 px-3 py-2 flex items-center text-sm font-medium"} aria-current="page">
-                                            <svg className={router.pathname == "/settings/profile" ? "text-blue-500 group-hover:text-blue-500 flex-shrink-0 -ml-1 mr-3 h-6 w-6" : "text-gray-400 group-hover:text-gray-500 flex-shrink-0 -ml-1 mr-3 h-6 w-6"} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
-                                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
-                                            </svg>
+                                            <UserCircleIcon className={router.pathname == "/settings/profile" ? "text-blue-500 group-hover:text-blue-500 flex-shrink-0 -ml-1 mr-3 h-6 w-6" : "text-gray-400 group-hover:text-gray-500 flex-shrink-0 -ml-1 mr-3 h-6 w-6"} />
                                             <span className="truncate">
                                                 Profile
                                             </span>
@@ -36,9 +35,7 @@ export default function SettingsShell(props) {
 
                                     <Link href="/settings/password">
                                         <a className={router.pathname == "/settings/password" ? "bg-blue-50 border-blue-500 text-blue-700 hover:bg-blue-50 hover:text-blue-700 group border-l-4 px-3 py-2 flex items-center text-sm font-medium" : "border-transparent text-gray-900 hover:bg-gray-50 hover:text-gray-900 group border-l-4 px-3 py-2 flex items-center text-sm font-medium"}>
-                                            <svg className={router.pathname == "/settings/password" ? "text-blue-500 group-hover:text-blue-500 flex-shrink-0 -ml-1 mr-3 h-6 w-6" : "text-gray-400 group-hover:text-gray-500 flex-shrink-0 -ml-1 mr-3 h-6 w-6"} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
-                                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
-                                            </svg>
+                                            <KeyIcon className={router.pathname == "/settings/password" ? "text-blue-500 group-hover:text-blue-500 flex-shrink-0 -ml-1 mr-3 h-6 w-6" : "text-gray-400 group-hover:text-gray-500 flex-shrink-0 -ml-1 mr-3 h-6 w-6"} />
                                             <span className="truncate">
                                                 Password
                                             </span>
diff --git a/components/Shell.tsx b/components/Shell.tsx
index 4cee88fc..bafbd386 100644
--- a/components/Shell.tsx
+++ b/components/Shell.tsx
@@ -2,6 +2,7 @@ import Link from 'next/link';
 import { useState } from "react";
 import { useRouter } from "next/router";
 import { signOut, useSession } from 'next-auth/client';
+import { MenuIcon, XIcon } from '@heroicons/react/outline';
 
 export default function Shell(props) {
     const router = useRouter();
@@ -55,13 +56,6 @@ export default function Shell(props) {
                                 </div>
                                 <div className="hidden md:block">
                                     <div className="ml-4 flex items-center md:ml-6">
-                                        <button className="bg-gray-800 p-1 text-gray-400 rounded-full hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
-                                            <span className="sr-only">View notifications</span>
-                                            <svg className="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
-                                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
-                                            </svg>
-                                        </button>
-
                                         <div className="ml-3 relative">
                                             <div>
                                                 <button onClick={toggleProfileDropdown} type="button" className="max-w-xs bg-gray-800 rounded-full flex items-center text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" id="user-menu" aria-expanded="false" aria-haspopup="true">
@@ -84,12 +78,8 @@ export default function Shell(props) {
                                 <div className="-mr-2 flex md:hidden">
                                     <button onClick={toggleMobileMenu} type="button" className="bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
                                         <span className="sr-only">Open main menu</span>
-                                        { !mobileMenuExpanded && <svg className="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
-                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16" />
-                                        </svg> }
-                                        { mobileMenuExpanded && <svg className="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
-                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
-                                        </svg> }
+                                        { !mobileMenuExpanded && <MenuIcon className="block h-6 w-6" /> }
+                                        { mobileMenuExpanded && <XIcon className="block h-6 w-6" /> }
                                     </button>
                                 </div>
                             </div>
@@ -117,12 +107,6 @@ export default function Shell(props) {
                                     <div className="text-base font-medium leading-none text-white">{session.user.name || session.user.username}</div>
                                     <div className="text-sm font-medium leading-none text-gray-400">{session.user.email}</div>
                                 </div>
-                                <button className="ml-auto bg-gray-800 flex-shrink-0 p-1 text-gray-400 rounded-full hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
-                                    <span className="sr-only">View notifications</span>
-                                    <svg className="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
-                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
-                                    </svg>
-                                </button>
                             </div>
                             <div className="mt-3 px-2 space-y-1">
                                 <Link href="/settings/profile">
diff --git a/pages/[user]/[type].tsx b/pages/[user]/[type].tsx
index d11933c1..24f64f58 100644
--- a/pages/[user]/[type].tsx
+++ b/pages/[user]/[type].tsx
@@ -5,7 +5,7 @@ import prisma from '../../lib/prisma';
 import { useRouter } from 'next/router';
 const dayjs = require('dayjs');
 import { Switch } from '@headlessui/react';
-import { GlobeIcon, ChevronDownIcon } from '@heroicons/react/solid';
+import { ClockIcon, GlobeIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/solid';
 const isSameOrBefore = require('dayjs/plugin/isSameOrBefore');
 const isBetween = require('dayjs/plugin/isBetween');
 const utc = require('dayjs/plugin/utc');
@@ -138,9 +138,7 @@ export default function Type(props) {
                             <h2 className="font-medium text-gray-500">{props.user.name}</h2>
                             <h1 className="text-3xl font-semibold text-gray-800 mb-4">{props.eventType.title}</h1>
                             <p className="text-gray-500 mb-1 px-2 py-1 -ml-2">
-                                <svg className="inline-block w-4 h-4 mr-1 -mt-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-                                    <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clipRule="evenodd" />
-                                </svg>
+                                <ClockIcon className="inline-block w-4 h-4 mr-1 -mt-1" />
                                 {props.eventType.length} minutes
                             </p>
                             <button onClick={toggleTimeOptions} className="text-gray-500 mb-1 hover:bg-gray-100 rounded-full px-2 -ml-2 cursor-pointer">
@@ -183,14 +181,10 @@ export default function Type(props) {
                                 <span className="w-1/2">{dayjs().month(selectedMonth).format("MMMM YYYY")}</span>
                                 <div className="w-1/2 text-right">
                                     <button onClick={decrementMonth} className={"mr-4 " + (selectedMonth < dayjs().format('MM') && 'text-gray-400')} disabled={selectedMonth < dayjs().format('MM')}>
-                                        <svg className="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-                                            <path fillRule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clipRule="evenodd" />
-                                        </svg>
+                                        <ChevronLeftIcon className="w-5 h-5" />
                                     </button>
                                     <button onClick={incrementMonth}>
-                                        <svg className="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-                                            <path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
-                                        </svg>
+                                        <ChevronRightIcon className="w-5 h-5" />
                                     </button>
                                 </div>
                             </div>
diff --git a/pages/[user]/book.tsx b/pages/[user]/book.tsx
index 5ede46fc..537c0437 100644
--- a/pages/[user]/book.tsx
+++ b/pages/[user]/book.tsx
@@ -1,6 +1,7 @@
 import Head from 'next/head';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
+import { ClockIcon, CalendarIcon } from '@heroicons/react/solid';
 import prisma from '../../lib/prisma';
 const dayjs = require('dayjs');
 
@@ -44,15 +45,11 @@ export default function Book(props) {
                             <h2 className="font-medium text-gray-500">{props.user.name}</h2>
                             <h1 className="text-3xl font-semibold text-gray-800 mb-4">{props.eventType.title}</h1>
                             <p className="text-gray-500 mb-2">
-                                <svg className="inline-block w-4 h-4 mr-1 -mt-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-                                    <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clipRule="evenodd" />
-                                </svg>
+                                <ClockIcon className="inline-block w-4 h-4 mr-1 -mt-1" />
                                 {props.eventType.length} minutes
                             </p>
                             <p className="text-blue-600 mb-4">
-                                <svg className="inline-block w-4 h-4 mr-1 -mt-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-                                    <path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd" />
-                                </svg>
+                                <CalendarIcon className="inline-block w-4 h-4 mr-1 -mt-1" />
                                 {dayjs(date).format("hh:mma, dddd DD MMMM YYYY")}
                             </p>
                             <p className="text-gray-600">{props.eventType.description}</p>
diff --git a/pages/auth/error.tsx b/pages/auth/error.tsx
index 9bb69151..edfef292 100644
--- a/pages/auth/error.tsx
+++ b/pages/auth/error.tsx
@@ -1,4 +1,5 @@
 import { useRouter } from 'next/router';
+import { XIcon } from '@heroicons/react/outline';
 import Head from 'next/head';
 import Link from 'next/link';
 
@@ -17,9 +18,7 @@ export default function Error() {
                 <div className="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-sm sm:w-full sm:p-6">
                     <div>
                         <div className="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-red-100">
-                            <svg className="h-6 w-6 text-red-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-                            </svg>
+                            <XIcon className="h-6 w-6 text-red-600" />
                         </div>
                         <div className="mt-3 text-center sm:mt-5">
                             <h3 className="text-lg leading-6 font-medium text-gray-900" id="modal-title">
diff --git a/pages/auth/logout.tsx b/pages/auth/logout.tsx
index 97605090..c89416bc 100644
--- a/pages/auth/logout.tsx
+++ b/pages/auth/logout.tsx
@@ -1,8 +1,8 @@
 import Head from 'next/head';
 import Link from 'next/link';
+import { CheckIcon } from '@heroicons/react/outline';
 
 export default function Logout() {
-
     return (
         <div className="fixed z-10 inset-0 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
             <Head>
@@ -14,9 +14,7 @@ export default function Logout() {
                 <div className="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-sm sm:w-full sm:p-6">
                     <div>
                         <div className="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-red-100">
-                            <svg className="h-6 w-6 text-red-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-                            </svg>
+                            <CheckIcon className="h-6 w-6 text-green-600" />
                         </div>
                         <div className="mt-3 text-center sm:mt-5">
                             <h3 className="text-lg leading-6 font-medium text-gray-900" id="modal-title">
diff --git a/pages/availability/index.tsx b/pages/availability/index.tsx
index b56dc63e..6dc5570d 100644
--- a/pages/availability/index.tsx
+++ b/pages/availability/index.tsx
@@ -7,6 +7,7 @@ import Router from 'next/router';
 import { useRef } from 'react';
 import { useState } from 'react';
 import { useSession, getSession } from 'next-auth/client';
+import { PlusIcon, ClockIcon } from '@heroicons/react/outline';
 
 export default function Availability(props) {
     const [ session, loading ] = useSession();
@@ -183,9 +184,7 @@ export default function Availability(props) {
                             <div className="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
                                 <div className="sm:flex sm:items-start mb-4">
                                     <div className="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
-                                        <svg className="h-6 w-6 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
-                                        </svg>
+                                        <PlusIcon className="h-6 w-6 text-blue-600" />
                                     </div>
                                     <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                                         <h3 className="text-lg leading-6 font-medium text-gray-900" id="modal-title">
@@ -246,9 +245,7 @@ export default function Availability(props) {
                             <div className="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
                                 <div className="sm:flex sm:items-start mb-4">
                                     <div className="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
-                                        <svg className="h-6 w-6 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
-                                        </svg>
+                                        <ClockIcon className="h-6 w-6 text-blue-600" />
                                     </div>
                                     <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                                         <h3 className="text-lg leading-6 font-medium text-gray-900" id="modal-title">
diff --git a/pages/integrations/index.tsx b/pages/integrations/index.tsx
index 6b0bd142..9f8b8d49 100644
--- a/pages/integrations/index.tsx
+++ b/pages/integrations/index.tsx
@@ -4,6 +4,8 @@ import prisma from '../../lib/prisma';
 import Shell from '../../components/Shell';
 import { useState } from 'react';
 import { useSession, getSession } from 'next-auth/client';
+import { CheckCircleIcon, XCircleIcon, ChevronRightIcon, PlusIcon } from '@heroicons/react/solid';
+import { InformationCircleIcon } from '@heroicons/react/outline';
 
 export default function Home(props) {
     const [session, loading] = useSession();
@@ -57,17 +59,13 @@ export default function Home(props) {
                                                         <div>
                                                             {integration.key &&
                                                                 <p className="mt-3 flex items-center text text-gray-500">
-                                                                    <svg className="flex-shrink-0 mr-1.5 h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-                                                                        <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
-                                                                    </svg>
+                                                                    <CheckCircleIcon className="flex-shrink-0 mr-1.5 h-5 w-5 text-green-400" />
                                                                     Connected
                                                                 </p>
                                                             }
                                                             {!integration.key &&
                                                                 <p className="mt-3 flex items-center text text-gray-500">
-                                                                    <svg className="flex-shrink-0 mr-1.5 h-5 w-5 text-yellow-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-                                                                        <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
-                                                                    </svg>
+                                                                    <XCircleIcon className="flex-shrink-0 mr-1.5 h-5 w-5 text-yellow-400" />
                                                                 Not connected
                                                             </p>
                                                             }
@@ -76,12 +74,7 @@ export default function Home(props) {
                                                 </div>
                                             </div>
                                             <div>
-                                                <svg className="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg"
-                                                    viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                                                    <path fillRule="evenodd"
-                                                        d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
-                                                        clipRule="evenodd" />
-                                                </svg>
+                                                <ChevronRightIcon className="h-5 w-5 text-gray-400" />
                                             </div>
                                         </div>
                                     </a>
@@ -93,9 +86,7 @@ export default function Home(props) {
                         <div className="bg-white shadow sm:rounded-lg">
                             <div className="flex">
                                 <div className="py-9 pl-8">
-                                    <svg className="text-blue-600 w-16" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-                                    </svg>
+                                    <InformationCircleIcon className="text-blue-600 w-16" />
                                 </div>
                                 <div className="py-5 sm:p-6">
                                     <h3 className="text-lg leading-6 font-medium text-gray-900">
@@ -142,9 +133,7 @@ export default function Home(props) {
                         <div className="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
                             <div className="sm:flex sm:items-start">
                                 <div className="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
-                                    <svg className="h-6 w-6 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
-                                    </svg>
+                                    <PlusIcon className="h-6 w-6 text-blue-600" />
                                 </div>
                                 <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                                     <h3 className="text-lg leading-6 font-medium text-gray-900" id="modal-title">
diff --git a/pages/success.tsx b/pages/success.tsx
index 72cf08be..ad7dabe6 100644
--- a/pages/success.tsx
+++ b/pages/success.tsx
@@ -2,6 +2,8 @@ import Head from 'next/head';
 import Link from 'next/link';
 import prisma from '../lib/prisma';
 import { useRouter } from 'next/router';
+import { CheckIcon } from '@heroicons/react/outline';
+import { ClockIcon, CalendarIcon } from '@heroicons/react/solid';
 const dayjs = require('dayjs');
 const ics = require('ics');
 
@@ -45,9 +47,7 @@ export default function Success(props) {
                             <div className="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-sm sm:w-full sm:p-6" role="dialog" aria-modal="true" aria-labelledby="modal-headline">
                                 <div>
                                     <div className="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100">
-                                        <svg className="h-6 w-6 text-green-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
-                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
-                                        </svg>
+                                        <CheckIcon className="h-6 w-6 text-green-600" />
                                     </div>
                                     <div className="mt-3 text-center sm:mt-5">
                                         <h3 className="text-lg leading-6 font-medium text-gray-900" id="modal-headline">
@@ -61,15 +61,11 @@ export default function Success(props) {
                                     <div className="mt-4 border-t border-b py-4">
                                         <h2 className="text-lg font-medium text-gray-600 mb-2">{props.eventType.title} with {props.user.name}</h2>
                                         <p className="text-gray-500 mb-2">
-                                            <svg className="inline-block w-4 h-4 mr-1 -mt-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-                                                <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clipRule="evenodd" />
-                                            </svg>
+                                            <ClockIcon className="inline-block w-4 h-4 mr-1 -mt-1" />
                                             {props.eventType.length} minutes
                                         </p>
                                         <p className="text-gray-500">
-                                            <svg className="inline-block w-4 h-4 mr-1 -mt-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-                                                <path fillRule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clipRule="evenodd" />
-                                            </svg>
+                                            <CalendarIcon className="inline-block w-4 h-4 mr-1 -mt-1" />
                                             {dayjs(date).format("hh:mma, dddd DD MMMM YYYY")}
                                         </p>
                                     </div>
@@ -96,8 +92,8 @@ export default function Success(props) {
                                     <Link href={"data:text/calendar," + eventLink()}>
                                         <a className="mx-2 btn-wide btn-white" download={props.eventType.title + '.ics'}>
                                             <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" width="19" height="19" className="ml-2">
-<path d="M971.3,154.9c0-34.7-28.2-62.9-62.9-62.9H611.7c-1.3,0-2.6,0.1-3.9,0.2V10L28.7,87.3v823.4L607.8,990v-84.6c1.3,0.1,2.6,0.2,3.9,0.2h296.7c34.7,0,62.9-28.2,62.9-62.9V154.9z M607.8,636.1h44.6v-50.6h-44.6v-21.9h44.6v-50.6h-44.6v-92h277.9v230.2c0,3.8-3.1,7-7,7H607.8V636.1z M117.9,644.7l-50.6-2.4V397.5l50.6-2.2V644.7z M288.6,607.3c17.6,0.6,37.3-2.8,49.1-7.2l9.1,48c-11,5.1-35.6,9.9-66.9,8.3c-85.4-4.3-127.5-60.7-127.5-132.6c0-86.2,57.8-136.7,133.2-140.1c30.3-1.3,53.7,4,64.3,9.2l-12.2,48.9c-12.1-4.9-28.8-9.2-49.5-8.6c-45.3,1.2-79.5,30.1-79.5,87.4C208.8,572.2,237.8,605.7,288.6,607.3z M455.5,665.2c-32.4-1.6-63.7-11.3-79.1-20.5l12.6-50.7c16.8,9.1,42.9,18.5,70.4,19.4c30.1,1,46.3-10.7,46.3-29.3c0-17.8-14-28.1-48.8-40.6c-46.9-16.4-76.8-41.7-76.8-81.5c0-46.6,39.3-84.1,106.8-87.1c33.3-1.5,58.3,4.2,76.5,11.2l-15.4,53.3c-12.1-5.3-33.5-12.8-62.3-12c-28.3,0.8-41.9,13.6-41.9,28.1c0,17.8,16.1,25.5,53.6,39c52.9,18.5,78.4,45.3,78.4,86.4C575.6,629.7,536.2,669.2,455.5,665.2z M935.3,842.7c0,14.9-12.1,27-27,27H611.7c-1.3,0-2.6-0.2-3.9-0.4V686.2h270.9c19.2,0,34.9-15.6,34.9-34.9V398.4c0-19.2-15.6-34.9-34.9-34.9h-47.1v-32.3H808v32.3h-44.8v-32.3h-22.7v32.3h-43.3v-32.3h-22.7v32.3H628v-32.3h-20.2v-203c1.31.2,2.6-0.4,3.9-0.4h296.7c14.9,0,27,12.1,27,27L935.3,842.7L935.3,842.7z"/>
-</svg>
+                                                <path d="M971.3,154.9c0-34.7-28.2-62.9-62.9-62.9H611.7c-1.3,0-2.6,0.1-3.9,0.2V10L28.7,87.3v823.4L607.8,990v-84.6c1.3,0.1,2.6,0.2,3.9,0.2h296.7c34.7,0,62.9-28.2,62.9-62.9V154.9z M607.8,636.1h44.6v-50.6h-44.6v-21.9h44.6v-50.6h-44.6v-92h277.9v230.2c0,3.8-3.1,7-7,7H607.8V636.1z M117.9,644.7l-50.6-2.4V397.5l50.6-2.2V644.7z M288.6,607.3c17.6,0.6,37.3-2.8,49.1-7.2l9.1,48c-11,5.1-35.6,9.9-66.9,8.3c-85.4-4.3-127.5-60.7-127.5-132.6c0-86.2,57.8-136.7,133.2-140.1c30.3-1.3,53.7,4,64.3,9.2l-12.2,48.9c-12.1-4.9-28.8-9.2-49.5-8.6c-45.3,1.2-79.5,30.1-79.5,87.4C208.8,572.2,237.8,605.7,288.6,607.3z M455.5,665.2c-32.4-1.6-63.7-11.3-79.1-20.5l12.6-50.7c16.8,9.1,42.9,18.5,70.4,19.4c30.1,1,46.3-10.7,46.3-29.3c0-17.8-14-28.1-48.8-40.6c-46.9-16.4-76.8-41.7-76.8-81.5c0-46.6,39.3-84.1,106.8-87.1c33.3-1.5,58.3,4.2,76.5,11.2l-15.4,53.3c-12.1-5.3-33.5-12.8-62.3-12c-28.3,0.8-41.9,13.6-41.9,28.1c0,17.8,16.1,25.5,53.6,39c52.9,18.5,78.4,45.3,78.4,86.4C575.6,629.7,536.2,669.2,455.5,665.2z M935.3,842.7c0,14.9-12.1,27-27,27H611.7c-1.3,0-2.6-0.2-3.9-0.4V686.2h270.9c19.2,0,34.9-15.6,34.9-34.9V398.4c0-19.2-15.6-34.9-34.9-34.9h-47.1v-32.3H808v32.3h-44.8v-32.3h-22.7v32.3h-43.3v-32.3h-22.7v32.3H628v-32.3h-20.2v-203c1.31.2,2.6-0.4,3.9-0.4h296.7c14.9,0,27,12.1,27,27L935.3,842.7L935.3,842.7z"/>
+                                            </svg>
                                         </a>
                                     </Link>
                                 </div>