updates logo (#17)

jonfriesen · Sep 14, 2024 · e196fc2 · e196fc2
1 parent f40c565
commit e196fc2
Show file tree

Hide file tree

Showing 17 changed files with 499 additions and 574 deletions.
diff --git a/src/assets/logo-128.png b/src/assets/logo-128.png
diff --git a/src/assets/logo-16.png b/src/assets/logo-16.png
diff --git a/src/assets/logo-378.png b/src/assets/logo-378.png
diff --git a/src/assets/logo-48.png b/src/assets/logo-48.png
diff --git a/src/assets/logo-96-128.png b/src/assets/logo-96-128.png
diff --git a/src/assets/logo-96.png b/src/assets/logo-96.png
diff --git a/src/popup/popup.html b/src/popup/popup.html
@@ -11,7 +11,7 @@
 				<img src="../assets/logo-48.png" alt="QuickCite logo" />
 			</div>
 			<h1 class="ml-4 font-display text-5xl font-bold tracking-tight">
-				<span class="text-transparent bg-clip-text bg-gradient-to-r from-white via-sky-400 to-white animate-gradient-x">QuickCite</span>
+				<span class="text-transparent bg-clip-text bg-gradient-to-r from-[#861cff] via-[#ff34db] to-[#861cff] animate-gradient-x">QuickCite</span>
 			</h1>
 		</div>
 

diff --git a/web/src/app/favicon.ico b/web/src/app/favicon.ico
diff --git a/web/src/components/FeedbackForm.jsx b/web/src/components/FeedbackForm.jsx
@@ -2,120 +2,112 @@ import React, { useId, useState } from 'react'
 import { Button } from '@/components/Button'
 
 export function FeedbackForm() {
-  const emailId = useId()
-  const feedbackId = useId()
-  const honeypotId = useId()
-  const [feedback, setFeedback] = useState('')
-  const [email, setEmail] = useState('')
-  const [honeypot, setHoneypot] = useState('')
-  const [isSubmitting, setIsSubmitting] = useState(false)
-  const [submitStatus, setSubmitStatus] = useState(null)
+	const emailId = useId()
+	const feedbackId = useId()
+	const honeypotId = useId()
+	const [feedback, setFeedback] = useState('')
+	const [email, setEmail] = useState('')
+	const [honeypot, setHoneypot] = useState('')
+	const [isSubmitting, setIsSubmitting] = useState(false)
+	const [submitStatus, setSubmitStatus] = useState(null)
 
-  const handleSubmit = async (e) => {
-    e.preventDefault()
-    if (honeypot) {
-      // If honeypot is filled, silently reject the submission
-      return
-    }
-    setIsSubmitting(true)
-    setSubmitStatus(null)
+	const handleSubmit = async (e) => {
+		e.preventDefault()
+		if (honeypot) {
+			// If honeypot is filled, silently reject the submission
+			return
+		}
+		setIsSubmitting(true)
+		setSubmitStatus(null)
 
-    try {
-      const response = await fetch('https://flows.apps.frsn.io/webhook/quickcite-feedback', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({ feedback, email }),
-      })
+		try {
+			const response = await fetch('https://flows.apps.frsn.io/webhook/quickcite-feedback', {
+				method: 'POST',
+				headers: {
+					'Content-Type': 'application/json',
+				},
+				body: JSON.stringify({ feedback, email }),
+			})
 
-      if (!response.ok) {
-        throw new Error('Network response was not ok')
-      }
+			if (!response.ok) {
+				throw new Error('Network response was not ok')
+			}
 
-      setSubmitStatus('success')
-      setFeedback('')
-      setEmail('')
-    } catch (error) {
-      console.error('Error submitting form:', error)
-      setSubmitStatus('error')
-    } finally {
-      setIsSubmitting(false)
-    }
-  }
+			setSubmitStatus('success')
+			setFeedback('')
+			setEmail('')
+		} catch (error) {
+			console.error('Error submitting form:', error)
+			setSubmitStatus('error')
+		} finally {
+			setIsSubmitting(false)
+		}
+	}
 
-  return (
-    <form onSubmit={handleSubmit} className="relative isolate mt-8 space-y-4">
-      {/* Feedback text area */}
-      <div className="relative">
-        <label htmlFor={feedbackId} className="sr-only">
-          Feedback
-        </label>
-        <textarea
-          required
-          id={feedbackId}
-          name="feedback"
-          rows="3"
-          maxLength="250"
-          placeholder="Your feedback (max 250 characters)"
-          value={feedback}
-          onChange={(e) => setFeedback(e.target.value)}
-          className="peer w-full bg-transparent px-4 py-2.5 text-base text-white placeholder:text-gray-500 focus:outline-none sm:text-[0.8125rem]/6 rounded-lg resize-none"
-        />
-        <div className="absolute inset-0 -z-10 rounded-lg transition peer-focus:ring-4 peer-focus:ring-sky-300/15" />
-        <div className="absolute inset-0 -z-10 rounded-lg bg-white/2.5 ring-1 ring-white/15 transition peer-focus:ring-sky-300" />
-        <div className="text-right text-[0.625rem] text-gray-400 mt-1 mr-1">{feedback.length}/250</div>
-      </div>
+	return (
+		<form onSubmit={handleSubmit} className="relative isolate mt-8 space-y-4">
+			{/* Feedback text area */}
+			<div className="relative">
+				<label htmlFor={feedbackId} className="sr-only">
+					Feedback
+				</label>
+				<textarea
+					required
+					id={feedbackId}
+					name="feedback"
+					rows="3"
+					maxLength="250"
+					placeholder="Your feedback (max 250 characters)"
+					value={feedback}
+					onChange={(e) => setFeedback(e.target.value)}
+					className="peer w-full bg-transparent px-4 py-2.5 text-base text-white placeholder:text-gray-500 focus:outline-none sm:text-[0.8125rem]/6 rounded-lg resize-none"
+				/>
+				<div className="absolute inset-0 -z-10 rounded-lg transition peer-focus:ring-4 peer-focus:ring-purple-300/15" />
+				<div className="absolute inset-0 -z-10 rounded-lg bg-white/2.5 ring-1 ring-white/15 transition peer-focus:ring-purple-300" />
+				<div className="text-right text-[0.625rem] text-gray-400 mt-1 mr-1">{feedback.length}/250</div>
+			</div>
 
-      {/* Email input */}
-      <div className="relative">
-        <label htmlFor={emailId} className="sr-only">
-          Email address
-        </label>
-        <input
-          required
-          type="email"
-          autoComplete="email"
-          name="email"
-          id={emailId}
-          placeholder="Email address"
-          value={email}
-          onChange={(e) => setEmail(e.target.value)}
-          className="peer w-full bg-transparent px-4 py-2.5 text-base text-white placeholder:text-gray-500 focus:outline-none sm:text-[0.8125rem]/6 rounded-lg"
-        />
-        <div className="absolute inset-0 -z-10 rounded-lg transition peer-focus:ring-4 peer-focus:ring-sky-300/15" />
-        <div className="absolute inset-0 -z-10 rounded-lg bg-white/2.5 ring-1 ring-white/15 transition peer-focus:ring-sky-300" />
-      </div>
+			{/* Email input */}
+			<div className="relative">
+				<label htmlFor={emailId} className="sr-only">
+					Email address
+				</label>
+				<input
+					required
+					type="email"
+					autoComplete="email"
+					name="email"
+					id={emailId}
+					placeholder="Email address"
+					value={email}
+					onChange={(e) => setEmail(e.target.value)}
+					className="peer w-full bg-transparent px-4 py-2.5 text-base text-white placeholder:text-gray-500 focus:outline-none sm:text-[0.8125rem]/6 rounded-lg"
+				/>
+				<div className="absolute inset-0 -z-10 rounded-lg transition peer-focus:ring-4 peer-focus:ring-purple-300/15" />
+				<div className="absolute inset-0 -z-10 rounded-lg bg-white/2.5 ring-1 ring-white/15 transition peer-focus:ring-purple-300" />
+			</div>
 
-      {/* Honeypot field */}
-      <div className="hidden">
-        <label htmlFor={honeypotId} className="sr-only">
-          Leave this field empty
-        </label>
-        <input
-          type="text"
-          id={honeypotId}
-          name="honeypot"
-          value={honeypot}
-          onChange={(e) => setHoneypot(e.target.value)}
-          tabIndex="-1"
-          autoComplete="off"
-        />
-      </div>
+			{/* Honeypot field */}
+			<div className="hidden">
+				<label htmlFor={honeypotId} className="sr-only">
+					Leave this field empty
+				</label>
+				<input type="text" id={honeypotId} name="honeypot" value={honeypot} onChange={(e) => setHoneypot(e.target.value)} tabIndex="-1" autoComplete="off" />
+			</div>
 
-      {/* Submit button */}
-      <div className="flex justify-end">
-        <Button type="submit" arrow disabled={isSubmitting}>
-          {isSubmitting ? 'Submitting...' : 'Submit Feedback'}
-        </Button>
-      </div>
+			{/* Submit button */}
+			<div className="flex justify-end">
+				<Button type="submit" arrow disabled={isSubmitting}>
+					{isSubmitting ? 'Submitting...' : 'Submit Feedback'}
+				</Button>
+			</div>
 
-      {/* Submission status message */}
-      {submitStatus && (
-        <div className={`text-sm ${submitStatus === 'success' ? 'text-green-500' : 'text-red-500'}`}>
-          {submitStatus === 'success' ? 'Feedback submitted successfully!' : 'Error submitting feedback. Please try again.'}
-        </div>
-      )}
-    </form>
-  )
+			{/* Submission status message */}
+			{submitStatus && (
+				<div className={`text-sm ${submitStatus === 'success' ? 'text-green-500' : 'text-red-500'}`}>
+					{submitStatus === 'success' ? 'Feedback submitted successfully!' : 'Error submitting feedback. Please try again.'}
+				</div>
+			)}
+		</form>
+	)
 }
diff --git a/web/src/components/IconLink.jsx b/web/src/components/IconLink.jsx
@@ -1,25 +1,18 @@
 import Link from 'next/link'
 import clsx from 'clsx'
 
-export function IconLink({
-  children,
-  className,
-  compact = false,
-  icon: Icon,
-  ...props
-}) {
-  return (
-    <Link
-      {...props}
-      className={clsx(
-        className,
-        'group relative isolate flex items-center rounded-lg px-2 py-0.5 text-[0.8125rem]/6 font-medium text-white/30 transition-colors hover:text-sky-300',
-        compact ? 'gap-x-2' : 'gap-x-3',
-      )}
-    >
-      <span className="absolute inset-0 -z-10 scale-75 rounded-lg bg-white/5 opacity-0 transition group-hover:scale-100 group-hover:opacity-100" />
-      {Icon && <Icon className="h-4 w-4 flex-none" />}
-      <span className="self-baseline text-white">{children}</span>
-    </Link>
-  )
+export function IconLink({ children, className, compact = false, icon: Icon, ...props }) {
+	return (
+		<Link
+			{...props}
+			className={clsx(
+				className,
+				'group relative isolate flex items-center rounded-lg px-2 py-0.5 text-[0.8125rem]/6 font-medium text-white/30 transition-colors hover:text-purple-300',
+				compact ? 'gap-x-2' : 'gap-x-3',
+			)}>
+			<span className="absolute inset-0 -z-10 scale-75 rounded-lg bg-white/5 opacity-0 transition group-hover:scale-100 group-hover:opacity-100" />
+			{Icon && <Icon className="h-4 w-4 flex-none" />}
+			<span className="self-baseline text-white">{children}</span>
+		</Link>
+	)
 }
diff --git a/web/src/components/Intro.jsx b/web/src/components/Intro.jsx
@@ -64,7 +64,7 @@ const AnimatedGradientText = ({ children }) => (
 			}
 		`}</style>
 		<h1 className="ml-4 font-display text-5xl font-bold tracking-tight">
-			<span className="text-transparent bg-clip-text bg-gradient-to-r from-white via-sky-400 to-white animate-gradient-x">{children}</span>
+			<span className="text-transparent bg-clip-text bg-gradient-to-r from-[#861cff] via-[#ff34db] to-[#861cff] animate-gradient-x">{children}</span>
 		</h1>
 	</>
 )
@@ -74,7 +74,7 @@ export function Intro() {
 		<>
 			<div>
 				<Link href="/" className="flex items-center">
-					<Logo className="h-16 rotate-90 w-auto" />
+					<Logo className="h-16 w-auto" />
 					<AnimatedGradientText>QuickCite</AnimatedGradientText>
 				</Link>
 			</div>
@@ -89,7 +89,7 @@ export function Intro() {
 					<span className="text-green-400">m</span>
 					<span className="text-red-400">e</span>
 				</span>{' '}
-				extension to build <span className="text-sky-300">context rich links</span>
+				extension to build <span className="text-purple-300">context rich links</span>
 			</h1>
 			{/* <div className="mt-6 mb-6 bg-blue-600 border-l-4 border-blue-400 text-blue-200 p-4 rounded">
 				<div className="flex items-center">