Update layout success and error layout

Author: Strift

src/components/NewsletterForm.jsx

@@ -1,7 +1,27 @@
 import React from 'react'
-import styled from 'styled-components'
-
+import styled, { keyframes } from 'styled-components'
 import useNewsletter from 'hooks/useNewsletter'
+import ArrowPathIcon from './icons/heroicons/ArrowPathicon'
+import CheckIcon from './icons/heroicons/CheckIcon'
+
+const spin = keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+`
+
+const SpinningIcon = styled.div`
+  display: inline-flex;
+  animation: ${spin} 1s linear infinite;
+
+  svg {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+`
 
 const Input = styled.input`
   width: 100%;
@@ -34,23 +54,74 @@ const Button = styled.button`
   font-weight: 600;
   cursor: pointer;
   transition: background-color 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
 
   &:hover {
     background: ${(p) => p.theme.colors.main.dark};
   }
+
+  &:disabled {
+    opacity: 0.7;
+    cursor: not-allowed;
+  }
+`
+
+const ErrorMessage = styled.p`
+  color: #dc2626;
+  font-size: 0.875rem;
+  margin-top: 0.5rem;
+`
+
+const SuccessMessage = styled.div`
+  display: flex;
+  text-align: center;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  background-color: #f0fdf4;
+  border: 1px solid #86efac;
+  border-radius: 8px;
+  padding: 0rem;
+  color: #166534;
+
+  svg {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+
+  p {
+    font-size: 0.875rem;
+    color: #15803d;
+  }
 `
 
 const NewsletterForm = () => {
   const [email, setEmail] = React.useState('')
   const { subscribe } = useNewsletter()
   const [status, setStatus] = React.useState('idle')
+  const [error, setError] = React.useState(null)
 
   const handleSubmit = (e) => {
     e.preventDefault()
     setStatus('loading')
     subscribe(email)
       .then(() => setStatus('success'))
-      .catch(() => setStatus('error'))
+      .catch((err) => {
+        setStatus('error')
+        setError(err.message)
+      })
+  }
+
+  if (status === 'success') {
+    return (
+      <SuccessMessage>
+        <CheckIcon />
+        <p>Thanks for subscribing!</p>
+      </SuccessMessage>
+    )
   }
 
   return (
@@ -62,11 +133,21 @@ const NewsletterForm = () => {
         onChange={(e) => setEmail(e.target.value)}
         disabled={status === 'loading'}
         required
+        style={{ marginTop: '0rem' }}
       />
-      <Button type="submit">Subscribe</Button>
-      {status === 'loading' && <p>Loading...</p>}
-      {status === 'success' && <p>Success!</p>}
-      {status === 'error' && <p>Error</p>}
+      <Button type="submit" disabled={status === 'loading'}>
+        {status === 'loading' ? (
+          <>
+            <SpinningIcon>
+              <ArrowPathIcon />
+            </SpinningIcon>
+            Subscribing...
+          </>
+        ) : (
+          'Subscribe'
+        )}
+      </Button>
+      {status === 'error' && <ErrorMessage>{error}</ErrorMessage>}
     </form>
   )
 }

src/components/RightPanel.jsx

@@ -180,7 +180,7 @@ const RightPanel = ({ isOpen, onClose }) => (
       <Typography
         variant="typo11"
         color="gray.6"
-        style={{ marginBottom: '0rem' }}
+        style={{ marginBottom: '1.25rem' }}
       >
         Get monthly updates about new features and tips to get the the most out
         of Meilisearch.

src/components/icons/heroicons/ArrowPathicon.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+
+export default function ArrowPathIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      className="size-6"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"
+      />
+    </svg>
+  )
+}

src/components/icons/heroicons/CheckIcon.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+
+export default function CheckIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      className="size-6"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="m4.5 12.75 6 6 9-13.5"
+      />
+    </svg>
+  )
+}