Add dark-friendly default avatar and custom 404 image

icssc · Jan 28, 2024 · bc8666d · bc8666d
1 parent 04dcde5
commit bc8666d
Show file tree

Hide file tree

Showing 5 changed files with 6 additions and 3 deletions.
diff --git a/site/public/working.gif b/site/public/working.gif
diff --git a/site/src/asset/default-avatar-dark.png b/site/src/asset/default-avatar-dark.png
diff --git a/site/src/asset/no-results-crop.webp b/site/src/asset/no-results-crop.webp
diff --git a/site/src/component/Error/Error.tsx b/site/src/component/Error/Error.tsx
@@ -1,5 +1,6 @@
 import { FC } from 'react';
 import './Error.scss';
+import noResultsImg from '../../asset/no-results-crop.webp';
 
 interface ErrorProps {
   message: string;
@@ -8,7 +9,7 @@ interface ErrorProps {
 const Error: FC<ErrorProps> = (props) => {
   return (
     <div className="error">
-      <img src="/working.gif"></img>
+      <img src={noResultsImg}></img>
       <h1>404 PAGE NOT FOUND</h1>
       <h2>{props.message}</h2>
     </div>

diff --git a/site/src/component/SideBar/SideBar.tsx b/site/src/component/SideBar/SideBar.tsx
@@ -4,7 +4,8 @@ import { Icon } from 'semantic-ui-react';
 import { XCircle } from 'react-bootstrap-icons';
 import { useCookies } from 'react-cookie';
 import './Sidebar.scss';
-import DefaultAvatar from '../../asset/default-avatar.png';
+import defaultAvatarLight from '../../asset/default-avatar.png';
+import defaultAvatarDark from '../../asset/default-avatar-dark.png';
 import { Button } from 'react-bootstrap';
 
 import { useAppSelector, useAppDispatch } from '../..//store/hooks';
@@ -20,6 +21,7 @@ const SideBar = () => {
   const [picture, setPicture] = useState('');
   const [isAdmin, setIsAdmin] = useState<boolean>(false);
   const { darkMode, setTheme } = useContext(ThemeContext);
+  const defaultAvatar = darkMode ? defaultAvatarDark : defaultAvatarLight;
 
   const isLoggedIn = cookies.user !== undefined;
 
@@ -141,7 +143,7 @@ const SideBar = () => {
 
       {/* Profile Icon and Name */}
       <div className="sidebar-profile">
-        <img src={picture ? picture : DefaultAvatar} />
+        <img src={picture ? picture : defaultAvatar} />
         <p>{name ? name : 'Anonymous Peter'}</p>
       </div>