Skip to content

Commit ce398bd

Browse files
pumfleetpumfleet
committed
Replace all SVG icons with Heroicons components
1 parent d28166a commit ce398bd

File tree

9 files changed

+34
-83
lines changed

9 files changed

+34
-83
lines changed

‎components/Settings.tsx

+3-6
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import Link from 'next/link';
22
import { useRouter } from "next/router";
3+
import { UserCircleIcon, KeyIcon } from '@heroicons/react/outline';
34

45
export default function SettingsShell(props) {
56
const router = useRouter();
@@ -13,9 +14,7 @@ export default function SettingsShell(props) {
1314
<nav className="space-y-1">
1415
<Link href="/settings/profile">
1516
<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">
16-
<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">
17-
<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" />
18-
</svg>
17+
<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"} />
1918
<span className="truncate">
2019
Profile
2120
</span>
@@ -36,9 +35,7 @@ export default function SettingsShell(props) {
3635

3736
<Link href="/settings/password">
3837
<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"}>
39-
<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">
40-
<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" />
41-
</svg>
38+
<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"} />
4239
<span className="truncate">
4340
Password
4441
</span>

‎components/Shell.tsx

+3-19
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import Link from 'next/link';
22
import { useState } from "react";
33
import { useRouter } from "next/router";
44
import { signOut, useSession } from 'next-auth/client';
5+
import { MenuIcon, XIcon } from '@heroicons/react/outline';
56

67
export default function Shell(props) {
78
const router = useRouter();
@@ -55,13 +56,6 @@ export default function Shell(props) {
5556
</div>
5657
<div className="hidden md:block">
5758
<div className="ml-4 flex items-center md:ml-6">
58-
<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">
59-
<span className="sr-only">View notifications</span>
60-
<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">
61-
<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" />
62-
</svg>
63-
</button>
64-
6559
<div className="ml-3 relative">
6660
<div>
6761
<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) {
8478
<div className="-mr-2 flex md:hidden">
8579
<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">
8680
<span className="sr-only">Open main menu</span>
87-
{ !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">
88-
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16" />
89-
</svg> }
90-
{ 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">
91-
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
92-
</svg> }
81+
{ !mobileMenuExpanded && <MenuIcon className="block h-6 w-6" /> }
82+
{ mobileMenuExpanded && <XIcon className="block h-6 w-6" /> }
9383
</button>
9484
</div>
9585
</div>
@@ -117,12 +107,6 @@ export default function Shell(props) {
117107
<div className="text-base font-medium leading-none text-white">{session.user.name || session.user.username}</div>
118108
<div className="text-sm font-medium leading-none text-gray-400">{session.user.email}</div>
119109
</div>
120-
<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">
121-
<span className="sr-only">View notifications</span>
122-
<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">
123-
<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" />
124-
</svg>
125-
</button>
126110
</div>
127111
<div className="mt-3 px-2 space-y-1">
128112
<Link href="/settings/profile">

‎pages/[user]/[type].tsx

+4-10
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import prisma from '../../lib/prisma';
55
import { useRouter } from 'next/router';
66
const dayjs = require('dayjs');
77
import { Switch } from '@headlessui/react';
8-
import { GlobeIcon, ChevronDownIcon } from '@heroicons/react/solid';
8+
import { ClockIcon, GlobeIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/solid';
99
const isSameOrBefore = require('dayjs/plugin/isSameOrBefore');
1010
const isBetween = require('dayjs/plugin/isBetween');
1111
const utc = require('dayjs/plugin/utc');
@@ -138,9 +138,7 @@ export default function Type(props) {
138138
<h2 className="font-medium text-gray-500">{props.user.name}</h2>
139139
<h1 className="text-3xl font-semibold text-gray-800 mb-4">{props.eventType.title}</h1>
140140
<p className="text-gray-500 mb-1 px-2 py-1 -ml-2">
141-
<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">
142-
<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" />
143-
</svg>
141+
<ClockIcon className="inline-block w-4 h-4 mr-1 -mt-1" />
144142
{props.eventType.length} minutes
145143
</p>
146144
<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) {
183181
<span className="w-1/2">{dayjs().month(selectedMonth).format("MMMM YYYY")}</span>
184182
<div className="w-1/2 text-right">
185183
<button onClick={decrementMonth} className={"mr-4 " + (selectedMonth < dayjs().format('MM') && 'text-gray-400')} disabled={selectedMonth < dayjs().format('MM')}>
186-
<svg className="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
187-
<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" />
188-
</svg>
184+
<ChevronLeftIcon className="w-5 h-5" />
189185
</button>
190186
<button onClick={incrementMonth}>
191-
<svg className="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
192-
<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" />
193-
</svg>
187+
<ChevronRightIcon className="w-5 h-5" />
194188
</button>
195189
</div>
196190
</div>

‎pages/[user]/book.tsx

+3-6
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import Head from 'next/head';
22
import Link from 'next/link';
33
import { useRouter } from 'next/router';
4+
import { ClockIcon, CalendarIcon } from '@heroicons/react/solid';
45
import prisma from '../../lib/prisma';
56
const dayjs = require('dayjs');
67

@@ -44,15 +45,11 @@ export default function Book(props) {
4445
<h2 className="font-medium text-gray-500">{props.user.name}</h2>
4546
<h1 className="text-3xl font-semibold text-gray-800 mb-4">{props.eventType.title}</h1>
4647
<p className="text-gray-500 mb-2">
47-
<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">
48-
<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" />
49-
</svg>
48+
<ClockIcon className="inline-block w-4 h-4 mr-1 -mt-1" />
5049
{props.eventType.length} minutes
5150
</p>
5251
<p className="text-blue-600 mb-4">
53-
<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">
54-
<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" />
55-
</svg>
52+
<CalendarIcon className="inline-block w-4 h-4 mr-1 -mt-1" />
5653
{dayjs(date).format("hh:mma, dddd DD MMMM YYYY")}
5754
</p>
5855
<p className="text-gray-600">{props.eventType.description}</p>

‎pages/auth/error.tsx

+2-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { useRouter } from 'next/router';
2+
import { XIcon } from '@heroicons/react/outline';
23
import Head from 'next/head';
34
import Link from 'next/link';
45

@@ -17,9 +18,7 @@ export default function Error() {
1718
<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">
1819
<div>
1920
<div className="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-red-100">
20-
<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">
21-
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
22-
</svg>
21+
<XIcon className="h-6 w-6 text-red-600" />
2322
</div>
2423
<div className="mt-3 text-center sm:mt-5">
2524
<h3 className="text-lg leading-6 font-medium text-gray-900" id="modal-title">

‎pages/auth/logout.tsx

+2-4
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import Head from 'next/head';
22
import Link from 'next/link';
3+
import { CheckIcon } from '@heroicons/react/outline';
34

45
export default function Logout() {
5-
66
return (
77
<div className="fixed z-10 inset-0 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
88
<Head>
@@ -14,9 +14,7 @@ export default function Logout() {
1414
<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">
1515
<div>
1616
<div className="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-red-100">
17-
<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">
18-
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
19-
</svg>
17+
<CheckIcon className="h-6 w-6 text-green-600" />
2018
</div>
2119
<div className="mt-3 text-center sm:mt-5">
2220
<h3 className="text-lg leading-6 font-medium text-gray-900" id="modal-title">

‎pages/availability/index.tsx

+3-6
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import Router from 'next/router';
77
import { useRef } from 'react';
88
import { useState } from 'react';
99
import { useSession, getSession } from 'next-auth/client';
10+
import { PlusIcon, ClockIcon } from '@heroicons/react/outline';
1011

1112
export default function Availability(props) {
1213
const [ session, loading ] = useSession();
@@ -183,9 +184,7 @@ export default function Availability(props) {
183184
<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">
184185
<div className="sm:flex sm:items-start mb-4">
185186
<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">
186-
<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">
187-
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
188-
</svg>
187+
<PlusIcon className="h-6 w-6 text-blue-600" />
189188
</div>
190189
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
191190
<h3 className="text-lg leading-6 font-medium text-gray-900" id="modal-title">
@@ -246,9 +245,7 @@ export default function Availability(props) {
246245
<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">
247246
<div className="sm:flex sm:items-start mb-4">
248247
<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">
249-
<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">
250-
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
251-
</svg>
248+
<ClockIcon className="h-6 w-6 text-blue-600" />
252249
</div>
253250
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
254251
<h3 className="text-lg leading-6 font-medium text-gray-900" id="modal-title">

0 commit comments

Comments
 (0)