feat(UI): Integrate new logo, colors, and graphics

specifyweb/frontend/js_src/css/main.css

@@ -17,10 +17,12 @@
 
   body.dark {
     color-scheme: dark;
+    @apply text-white;
   }
 
   body:not(.dark) {
     color-scheme: light;
+    @apply text-black;
   }
 
   body.no-rounded-corners *:not(.rounded-full) {
@@ -101,7 +103,7 @@
 
   [type='checkbox'],
   [type='radio'] {
-    @apply text-brand-200 dark:text-brand-400 cursor-pointer focus:border-none focus:!ring-2
+    @apply text-brand-300 dark:text-brand-400 cursor-pointer focus:border-none focus:!ring-2
       focus:!ring-offset-0;
   }
 
@@ -192,7 +194,7 @@
   }
 
   .icon {
-    @apply active:bg-brand-100 dark:active:bg-brand-500
+    @apply active:bg-brand-100 dark:active:bg-brand-400
       disabled:!cursor-not-allowed disabled:!text-gray-400
       disabled:hover:!text-gray-400 disabled:dark:!text-neutral-600
       disabled:hover:dark:!text-neutral-600;

specifyweb/frontend/js_src/css/workbench.css

@@ -161,7 +161,7 @@
 }
 
 .htCommentTextArea {
-  @apply cursor-auto dark:border-none dark:bg-neutral-800 dark:text-white;
+  @apply cursor-auto dark:border-none dark:bg-neutral-800 dark:text-white bg-black;
 }
 
 .htCommentCell:after {

specifyweb/frontend/js_src/lib/components/AppResources/__tests__/__snapshots__/AppResourceDownload.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`AppResourceDownload simple render 1`] = `
   <button
     class="button rounded cursor-pointer active:brightness-80 px-4 py-2
     disabled:bg-gray-200 disabled:dark:ring-neutral-500 disabled:ring-gray-400 disabled:text-gray-500 
-    dark:disabled:!bg-neutral-700 gap-2 inline-flex items-center capitalize justify-center shadow-sm dialog-icon-success hover:brightness-90 dark:hover:brightness-150 bg-[color:var(--success-button-color)] text-white whitespace-nowrap"
+    dark:disabled:!bg-neutral-700 gap-2 inline-flex items-center capitalize justify-center shadow-sm dialog-icon-success hover:brightness-90 dark:hover:brightness-150 bg-specify-500 text-white whitespace-nowrap"
     type="button"
   >
     Download

specifyweb/frontend/js_src/lib/components/AppResources/__tests__/__snapshots__/AppResourceLoad.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`AppResourceLoad simple render 1`] = `
   <button
     class="button rounded cursor-pointer active:brightness-80 px-4 py-2
     disabled:bg-gray-200 disabled:dark:ring-neutral-500 disabled:ring-gray-400 disabled:text-gray-500 
-    dark:disabled:!bg-neutral-700 gap-2 inline-flex items-center capitalize justify-center shadow-sm dialog-icon-success hover:brightness-90 dark:hover:brightness-150 bg-[color:var(--success-button-color)] text-white whitespace-nowrap"
+    dark:disabled:!bg-neutral-700 gap-2 inline-flex items-center capitalize justify-center shadow-sm dialog-icon-success hover:brightness-90 dark:hover:brightness-150 bg-specify-500 text-white whitespace-nowrap"
     type="button"
   >
     Load File

specifyweb/frontend/js_src/lib/components/AppResources/__tests__/__snapshots__/AppResourcesAside.test.tsx.snap

@@ -197,7 +197,7 @@ exports[`AppResourcesAside (expanded case) expanded case 2`] = `
                   href="/specify/resources/create/discipline_3/"
                 >
                   <span
-                    class="!text-green-700 print:hidden"
+                    class="!text-specify-500 print:hidden"
                   >
                     <svg
                       aria-hidden="true"
@@ -279,7 +279,7 @@ exports[`AppResourcesAside (expanded case) expanded case 2`] = `
                       href="/specify/resources/create/collection_4/"
                     >
                       <span
-                        class="!text-green-700 print:hidden"
+                        class="!text-specify-500 print:hidden"
                       >
                         <svg
                           aria-hidden="true"

specifyweb/frontend/js_src/lib/components/AppResources/__tests__/__snapshots__/AppResourcesTab.test.tsx.snap

@@ -32,7 +32,7 @@ exports[`AppResourcesTab dialog render 1`] = `
       class="flex items-center gap-2"
     >
       <span
-        class="text-blue-500"
+        class="text-brand-300"
       >
         <span
           aria-hidden="true"

specifyweb/frontend/js_src/lib/components/Atoms/__tests__/__snapshots__/Button.test.tsx.snap

@@ -122,7 +122,7 @@ exports[`Button.Success renders without errors 1`] = `
   <button
     class="button rounded cursor-pointer active:brightness-80 px-4 py-2
     disabled:bg-gray-200 disabled:dark:ring-neutral-500 disabled:ring-gray-400 disabled:text-gray-500 
-    dark:disabled:!bg-neutral-700 gap-2 inline-flex items-center capitalize justify-center shadow-sm dialog-icon-success hover:brightness-90 dark:hover:brightness-150 bg-[color:var(--success-button-color)] text-white"
+    dark:disabled:!bg-neutral-700 gap-2 inline-flex items-center capitalize justify-center shadow-sm dialog-icon-success hover:brightness-90 dark:hover:brightness-150 bg-specify-500 text-white"
     type="button"
   />
 </DocumentFragment>

specifyweb/frontend/js_src/lib/components/Atoms/__tests__/__snapshots__/DataEntry.test.ts.snap

@@ -4,7 +4,7 @@ exports[` renders without errors 1`] = `
 <DocumentFragment>
   <button
     aria-label="Add"
-    class="icon link rounded !text-green-700 print:hidden "
+    class="icon link rounded !text-specify-500 print:hidden "
     title="Add"
     type="button"
   >
@@ -106,7 +106,7 @@ exports[` renders without errors 5`] = `
 <DocumentFragment>
   <button
     aria-label="Search"
-    class="icon link rounded !text-blue-500 print:hidden "
+    class="icon link rounded !text-blue-100 print:hidden "
     title="Search"
     type="button"
   >
@@ -265,7 +265,7 @@ exports[`DataEntry.visit no resource 2`] = `
 <DocumentFragment>
   <a
     aria-label="Open in New Tab"
-    class="link !text-blue-700 print:hidden "
+    class="link !text-specify-500 print:hidden "
     href="RESOURCE_VIEW_URL"
     rel="noopener"
     target="_blank"

specifyweb/frontend/js_src/lib/components/Atoms/__tests__/__snapshots__/Link.test.ts.snap

@@ -170,7 +170,7 @@ exports[`Link.Success renders without errors 1`] = `
   <a
     class="button rounded cursor-pointer active:brightness-80 px-4 py-2
     disabled:bg-gray-200 disabled:dark:ring-neutral-500 disabled:ring-gray-400 disabled:text-gray-500 
-    dark:disabled:!bg-neutral-700 gap-2 inline-flex items-center capitalize justify-center shadow-sm dialog-icon-success hover:brightness-90 dark:hover:brightness-150 bg-[color:var(--success-button-color)] text-white"
+    dark:disabled:!bg-neutral-700 gap-2 inline-flex items-center capitalize justify-center shadow-sm dialog-icon-success hover:brightness-90 dark:hover:brightness-150 bg-specify-500 text-white"
     href="#"
   >
     Close

specifyweb/frontend/js_src/lib/components/Atoms/__tests__/__snapshots__/Submit.test.ts.snap

@@ -69,7 +69,7 @@ exports[`Submit.Success renders without errors 1`] = `
   <input
     class="button rounded cursor-pointer active:brightness-80 px-4 py-2
     disabled:bg-gray-200 disabled:dark:ring-neutral-500 disabled:ring-gray-400 disabled:text-gray-500 
-    dark:disabled:!bg-neutral-700 gap-2 inline-flex items-center capitalize justify-center shadow-sm dialog-icon-success hover:brightness-90 dark:hover:brightness-150 bg-[color:var(--success-button-color)] text-white"
+    dark:disabled:!bg-neutral-700 gap-2 inline-flex items-center capitalize justify-center shadow-sm dialog-icon-success hover:brightness-90 dark:hover:brightness-150 bg-specify-500 text-white"
     type="submit"
     value="Close"
   />

specifyweb/frontend/js_src/lib/components/Atoms/__tests__/__snapshots__/index.test.tsx.snap

@@ -17,7 +17,7 @@ exports[`Container.Base renders without errors 1`] = `
   <section
     class="flex flex-col gap-4 overflow-scroll
   overflow-x-auto [overflow-y:overlay] [scrollbar-gutter:auto] bg-[color:var(--form-foreground)]
-  rounded p-4 shadow-gray-400 shadow-2xl"
+  rounded p-4 shadow-gray-400 outline outline-1 outline-gray-300 dark:outline-neutral-800"
   >
     View
   </section>
@@ -29,7 +29,7 @@ exports[`Container.Center renders without errors 1`] = `
   <section
     class="flex flex-col gap-4 overflow-scroll
   overflow-x-auto [overflow-y:overlay] [scrollbar-gutter:auto] bg-[color:var(--form-foreground)]
-  rounded p-4 shadow-gray-400 shadow-2xl max-w-[var(--form-max-width)]
+  rounded p-4 shadow-gray-400 outline outline-1 outline-gray-300 dark:outline-neutral-800 max-w-[var(--form-max-width)]
     mx-auto w-full text-[length:var(--form-font-size)] font-[family-name:var(--form-font-family)]"
   >
     View

specifyweb/frontend/js_src/lib/components/Atoms/className.ts

@@ -20,7 +20,7 @@ dark:text-gray-100`;
 const containerBaseUnstyled = `flex flex-col gap-4 overflow-scroll
   overflow-x-auto [overflow-y:overlay] [scrollbar-gutter:auto]`;
 const containerBase = `${containerBaseUnstyled} bg-[color:var(--form-foreground)]
-  rounded p-4 shadow-gray-400 shadow-2xl`;
+  rounded p-4 shadow-gray-400 outline outline-1 outline-gray-300 dark:outline-neutral-800`;
 const containerFull = 'flex flex-col gap-4 sm:h-full p-1 sm:p-4';
 const formStyles =
   'text-[length:var(--form-font-size)] font-[family-name:var(--form-font-family)]';
@@ -67,7 +67,7 @@ export const className = {
   dangerButton: `${dialogIconTriggers.error} hover:brightness-90 dark:hover:brightness-150 bg-[color:var(--danger-button-color)] text-white`,
   infoButton: `${dialogIconTriggers.info} hover:brightness-90 dark:hover:brightness-150 bg-[color:var(--info-button-color)] text-white`,
   warningButton: `${dialogIconTriggers.warning} hover:brightness-90 dark:hover:brightness-150 bg-[color:var(--warning-button-color)] text-white`,
-  successButton: `${dialogIconTriggers.success} hover:brightness-90 dark:hover:brightness-150 bg-[color:var(--success-button-color)] text-white`,
+  successButton: `${dialogIconTriggers.success} hover:brightness-90 dark:hover:brightness-150 bg-specify-500 text-white`,
   saveButton: `hover:brightness-90 dark:hover:brightness-150 text-white bg-[color:var(--save-button-color)]`,
   fancyButton: `bg-gray-300 hover:bg-brand-200 dark:bg-neutral-600
     hover:dark:bg-brand:400 text-gray-800 dark:text-white text-center`,
@@ -88,11 +88,11 @@ export const className = {
   dataEntryGrid: 'data-entry-grid',
   formFooter:
     'border-brand-300 border-t-2 flex print:hidden pt-2 gap-2 flex-wrap justify-center flex-col md:flex-row',
-  dataEntryAdd: '!text-green-700 print:hidden',
+  dataEntryAdd: '!text-specify-500 print:hidden',
   dataEntryView: '!text-cyan-400 print:hidden',
   dataEntryEdit: '!text-orange-400 print:hidden',
   dataEntryClone: '!text-amber-700 print:hidden',
-  dataEntrySearch: '!text-blue-500 print:hidden',
+  dataEntrySearch: '!text-blue-100 print:hidden',
   dataEntryRemove: '!text-red-700 print:hidden',
-  dataEntryVisit: '!text-blue-700 print:hidden',
+  dataEntryVisit: '!text-specify-500 print:hidden',
 } as const;

specifyweb/frontend/js_src/lib/components/Attachments/Preview.tsx

@@ -21,9 +21,9 @@ export function AttachmentPreview({
   return (
     <div
       className={`
-        flex items-center justify-center rounded bg-white shadow-md
-        shadow-gray-300 transition hover:shadow-md hover:shadow-gray-400
-        dark:bg-black
+        flex items-center justify-center rounded bg-white
+        outline outline-1 outline-gray-300 transition
+        dark:bg-black dark:outline-neutral-800
       `}
     >
       <button type="button" onClick={handleOpen}>

specifyweb/frontend/js_src/lib/components/Attachments/__tests__/__snapshots__/AttachmentCell.test.tsx.snap

@@ -61,9 +61,9 @@ exports[`AttachmentCell simple render 1`] = `
     </button>
     <div
       class="
-        flex items-center justify-center rounded bg-white shadow-md
-        shadow-gray-300 transition hover:shadow-md hover:shadow-gray-400
-        dark:bg-black
+        flex items-center justify-center rounded bg-white
+        outline outline-1 outline-gray-300 transition
+        dark:bg-black dark:outline-neutral-800
       "
     >
       <button

specifyweb/frontend/js_src/lib/components/Core/OnlineStatus.tsx

@@ -34,7 +34,7 @@ export function OnlineStatus(): JSX.Element | null {
   return isOnline ? (
     showOnlineStatus ? (
       <div className={className}>
-        <span aria-hidden className="h-3 w-3 rounded-full bg-green-700" />
+        <span aria-hidden className="h-3 w-3 rounded-full bg-specify-500" />
         <p>{mainText.online()}</p>
       </div>
     ) : null

specifyweb/frontend/js_src/lib/components/Core/SplashScreen.tsx

@@ -2,13 +2,15 @@ import React from 'react';
 
 import { useHueDifference } from '../../hooks/useHueDifference';
 import { commonText } from '../../localization/common';
+import { useDarkMode } from '../Preferences/Hooks';
 
 export function SplashScreen({
   children,
 }: {
   readonly children: React.ReactNode;
 }): JSX.Element {
   const hueDifference = useHueDifference();
+  const isDarkMode = useDarkMode();
   return (
     <div
       className={`
@@ -19,15 +21,15 @@ export function SplashScreen({
       <div
         className={`
           flex w-full flex-col gap-4 rounded bg-gray-100 p-16
-          shadow-2xl dark:bg-neutral-800 sm:max-w-md
+          outline outline-1 outline-gray-300 dark:outline-neutral-800 dark:bg-neutral-800 sm:max-w-md
         `}
       >
         <header className="pb-2">
           <h1 className="sr-only">{commonText.specifySeven()}</h1>
           <img
             alt=""
             className="max-w-xs hover:animate-hue-rotate"
-            src="/static/img/logo.svg"
+            src={isDarkMode ? '/static/img/logo.svg' : '/static/img/logo_dark.svg'}
             style={{ filter: `hue-rotate(${hueDifference}deg)` }}
           />
         </header>

specifyweb/frontend/js_src/lib/components/Forms/SubView.tsx

@@ -156,7 +156,7 @@ export function SubView({
                 ? '!ring-brand-300 dark:!ring-brand-400 ring-2 dark:!ring-2'
                 : ''
             } 
-          ${isOpen ? '!bg-brand-300 dark:!bg-brand-500' : ''}`}
+          ${isOpen ? '!bg-brand-400 dark:!bg-brand-400' : ''}`}
               title={relationship.label}
               onClick={handleToggle}
             >

specifyweb/frontend/js_src/lib/components/Header/ExpressSearchTask.tsx

@@ -229,7 +229,7 @@ function TableResult({
     <details>
       <summary
         className={`
-          link bg-brand-200 dark:bg-brand-500 hover:dark:!bg-brand-400 list-item
+          link bg-brand-200 dark:bg-brand-400 hover:dark:!bg-brand-400 list-item
           rounded p-1.5 hover:!text-white
         `}
       >

specifyweb/frontend/js_src/lib/components/Header/Logo.tsx

@@ -17,6 +17,7 @@ export function Logo({
     'appearance',
     'customLogoCollapsed'
   );
+  const [isSideBarLight] = userPreferences.use('general', 'ui', 'sidebarTheme');
   const hueDifference = useHueDifference();
 
   return (
@@ -36,7 +37,11 @@ export function Logo({
         hover:animate-hue-rotate
         ${isCollapsed ? 'hidden' : ''}
       `}
-          src="/static/img/logo.svg"
+          src={
+            isSideBarLight === 'light'
+              ? '/static/img/logo_dark.svg'
+              : '/static/img/logo.svg'
+          }
           style={{ filter: `hue-rotate(${hueDifference}deg)` }}
         />
         <img

specifyweb/frontend/js_src/lib/components/Header/index.tsx

@@ -99,7 +99,8 @@ export function Header({
   return (
     <header
       className={`
-        hover:[&_a.link]:text-brand-300 flex [z-index:1]
+        hover:[&_a.link]:text-brand-100 hover:[&_button.link]:text-brand-100
+        flex [z-index:1]
         dark:border-neutral-700 dark:bg-neutral-900 print:hidden
         ${isHorizontal ? '' : 'flex-col'}
         ${
@@ -114,7 +115,7 @@ export function Header({
         ${
           isMenuLight
             ? 'bg-gray-100 shadow-md shadow-gray-400'
-            : 'border-neutral-700 bg-neutral-800'
+            : 'border-neutral-700 bg-brown-100 text-white'
         }
       `}
     >
@@ -213,7 +214,7 @@ export function MenuButton({
     p-[1.4vh]
     ${
       isActive
-        ? 'bg-brand-300 !text-white'
+        ? 'bg-brand-400 !text-white'
         : isSideBarDark
           ? 'text-white'
           : 'text-gray-700'

specifyweb/frontend/js_src/lib/components/HomePage/index.tsx

@@ -6,7 +6,8 @@ import { commonText } from '../../localization/common';
 import { welcomeText } from '../../localization/welcome';
 import { Submit } from '../Atoms/Submit';
 import { SearchForm } from '../Header/ExpressSearchTask';
-import { defaultWelcomePageImage } from '../Preferences/Renderers';
+import { getDefaultWelcomePageImage } from '../Preferences/Renderers';
+import { useDarkMode } from '../Preferences/Hooks';
 import { userPreferences } from '../Preferences/userPreferences';
 import { ReactLazy } from '../Router/ReactLazy';
 
@@ -73,17 +74,24 @@ function WelcomeScreenContent(): JSX.Element {
 
 function DefaultSplashScreen(): JSX.Element {
   const hueDifference = useHueDifference();
+  const isDarkMode = useDarkMode();
   return (
     <div className="relative">
       <img
         alt=""
         className="w-[800px]"
-        src={defaultWelcomePageImage}
+        src={getDefaultWelcomePageImage(isDarkMode)}
         style={{ filter: `hue-rotate(${hueDifference}deg)` }}
       />
-      {/* The two following gradients in the divs are here to apply a fade out effect on the image */}
+      {/* The following gradients in the divs are here to apply a fade out effect on the image */}
+      {/* Left fade */}
       <div className="absolute top-0 h-full w-[20%] bg-[linear-gradient(to_right,var(--background),transparent)]" />
+      {/* Right fade */}
       <div className="absolute right-0 top-0 h-full w-[20%] bg-[linear-gradient(to_left,var(--background),transparent)]" />
+      {/* Top fade */}
+      <div className="absolute top-0 left-0 h-[20%] w-full bg-[linear-gradient(to_bottom,var(--background),transparent)]" />
+      {/* Bottom fade */}
+      <div className="absolute bottom-0 left-0 h-[20%] w-full bg-[linear-gradient(to_top,var(--background),transparent)]" />
     </div>
   );
 }

specifyweb/frontend/js_src/lib/components/Molecules/AutoComplete.tsx

@@ -43,7 +43,7 @@ const getScrollParent = (node: Element | undefined): Element =>
       : getScrollParent(node.parentElement ?? undefined);
 
 const optionClassName = (isActive: boolean, isSelected: boolean) => `
-  p-0.5 active:bg-brand-100 dark:active:bg-brand-500
+  p-0.5 active:bg-brand-100 dark:active:bg-brand-400
   disabled:cursor-default rounded ${isSelected ? 'text-brand-300' : ''}
   ${isActive ? 'bg-gray-100 dark:bg-neutral-800' : ''}
 `;

specifyweb/frontend/js_src/lib/components/Molecules/Dialog.tsx

@@ -514,7 +514,7 @@ export function Dialog({
       >
         <div className="flex items-center gap-2">
           {resolvedIcon === undefined ? undefined : (
-            <span className="text-blue-500">{resolvedIcon}</span>
+            <span className="text-brand-300">{resolvedIcon}</span>
           )}
           <h2 className={headerClassName} id={id('header')}>
             {header}

specifyweb/frontend/js_src/lib/components/Molecules/index.tsx

@@ -35,7 +35,7 @@ export const loadingBar = (
     <div
       aria-hidden
       className={`
-        h-7 animate-bounce rounded bg-gradient-to-r from-orange-400 to-amber-200
+        h-7 animate-bounce rounded bg-gradient-to-r from-brand-300 to-brand-200
       `}
     />
   </div>