add shadows everywhere because *material design*

src/app/affiliation/[shortName]/page.tsx

@@ -36,10 +36,10 @@ export default function Page({
   return (
     <div>
       <div className='grid grid-cols-1 max-w-3xl mx-auto'>
-        <div className='mx-auto mb-4 w-[90vw] md:w-auto md:h-[40vw] lg:h-[20vw]'>
+        <div className='mx-auto mb-4 max-w-3xl md:w-auto md:h-[40vw] lg:h-[20vw]'>
           <img
             alt='profile picture'
-            className='rounded-sm mx-auto object-cover w-full h-full'
+            className='rounded-sm mx-auto object-cover w-full h-full shadow-md shadow-slate-400'
             src={image}
           />
         </div>

src/app/author/[author]/AuthorDisplay.tsx

@@ -41,7 +41,7 @@ export default function AuthorDisplay({
               <img
                 src={affiliations[a.split('@')[1]].image}
                 alt={affiliations[a.split('@')[1]].name}
-                className='h-12 mr-2'
+                className='h-12 mr-3 shadow-md shadow-slate-300'
               />
             </Link>
           ))}
@@ -110,7 +110,7 @@ export default function AuthorDisplay({
       <div className='flex items-center'>
         <img
           src={flag}
-          className='w-10 border-2 border-slate-200'
+          className='w-10 shadow-md shadow-slate-300'
           alt={`${demonym} flag`}
         />
         <span className='mx-3 font-semibold'>{demonym}</span>

src/app/components/MobileMenu.tsx

@@ -38,7 +38,9 @@ export default function MobileMenu() {
       >
         <RxHamburgerMenu size={40} />
       </button>
-      <div className={`${isOpen ? '' : styles['menu-hidden']} ${styles.menu}`}>
+      <div
+        className={`${isOpen ? '' : styles['menu-hidden']} ${styles.menu} shadow-md shadow-slate-300`}
+      >
         <span className={styles['search-bar']}>
           <SearchBar onSubmit={handleSubmit} />
         </span>

src/app/components/News.tsx

@@ -2,10 +2,10 @@ import Link from 'next/link'
 
 export default function News() {
   return (
-    <div className='bg-slate-800 rounded-lg p-6 w-full basis-full md:basis-2/5 my-4 lg:my-0 max-h-[250px] overflow-y-auto'>
+    <div className='bg-slate-800 rounded-lg p-6 w-full basis-full md:basis-2/5 my-4 lg:my-0 max-h-[250px] overflow-y-auto shadow-md shadow-slate-500'>
-      <span className='text-3xl md:text-4xl text-slate-200'>eeXiv News</span>
+      <span className='text-3xl text-slate-200'>eeXiv News</span>
       <br className='my-2' />
-      <span className='text-xl text-slate-400'>
+      <span className='text-lg text-slate-400'>
         Stay up to date with what is happening at eeXiv.
       </span>
       <br className='my-2' />

src/app/document/view/[slug]/DocumentViewer.tsx

@@ -52,7 +52,7 @@ export default function DocumentViewer({ slug }: Readonly<{ slug: string }>) {
       </p>
       <ItemBadge itemName={type as DocumentType} />
       <Status statusName={status} />
-      <span className='inline-block border-gray-200 border-2 rounded px-2 py-1.5 mr-2'>
+      <span className='inline-block border-gray-200 border-2 rounded px-2 py-1.5 mr-2 shadow-sm shadow-slate-300'>
         Revision {latest}
       </span>
       <hr className='my-4' />

src/app/globals.css

@@ -21,11 +21,11 @@ a:hover {
 }
 
 .button-default {
-  @apply bg-blue-600 text-slate-100 hover:bg-blue-400 font-semibold rounded py-2 px-4 my-2;
+  @apply bg-blue-600 text-slate-100 hover:bg-blue-400 font-semibold rounded py-2 px-4 my-2 shadow-sm shadow-slate-500;
 }
 
 .badge-base {
-  @apply px-3 py-1.5 rounded inline-block w-fit mr-2 my-1 text-slate-50 border-2;
+  @apply px-3 py-1.5 rounded inline-block w-fit mr-2 my-1 text-slate-50 border-2 shadow-sm shadow-slate-500;
 }
 
 .badge-draft {

src/app/layout.tsx

@@ -56,7 +56,9 @@ export default function RootLayout({
               </p>
             </div>
           </div>
-          <div className={`${styles.banner} w-full h-[100px] mb-[50px]`}>
+          <div
+            className={`${styles.banner} w-full h-[100px] mb-[50px] shadow-md shadow-slate-400`}
+          >
             <div className='max-w-[1200px] flex justify-between mx-auto items-center pt-3 flex-nowrap'>
               <h1 className={`${styles.title} ${zillaSlab.className} mx-10`}>
                 <Link href='/' className='no-link-style'>

src/app/search/page.tsx

@@ -41,8 +41,9 @@ const SearchResult = ({
 
   return (
     <div
-      className='border-4 rounded-lg border-gray-300 hover:border-blue-500 p-5 my-4 w-full cursor-pointer'
+      className='border-4 rounded-lg border-gray-300 hover:border-blue-500 p-5 my-4 w-full cursor-pointer shadow-slate-300 shadow-md'
       onClick={handleClick}
+      role='button' // this is a critical DEI concern as we have marked this element as a button with ARIA role, yet we have not supported button accessiblity features
     >
       <h2 className={`${zillaSlab.className} text-3xl`}>{title}</h2>
       <p className='text-slate-500 py-2 text-md mt-2'>