Frontend styling refactor / UI polish

packages/frontend/package.json

@@ -10,6 +10,7 @@
     "@emotion/styled": "^11.6.0",
     "@ethersproject/providers": "^5.5.3",
     "@fortawesome/fontawesome-svg-core": "^6.1.1",
+    "@fortawesome/free-brands-svg-icons": "^6.1.1",
     "@fortawesome/free-solid-svg-icons": "^6.0.0",
     "@fortawesome/react-fontawesome": "^0.1.17",
     "@headlessui/react": "^1.4.1",

packages/frontend/src/components/BreadCrumb.tsx

@@ -7,7 +7,7 @@ interface BreadCrumbProps {
 }
 const BreadCrumb = ({ name, icon }: BreadCrumbProps): JSX.Element => {
   return (
-    <div className="mb-4 text-sm">
+    <div className="inline-block px-4 py-2 mb-4 text-xs rounded-full bg-warm-gray-50 dark:bg-slate-600">
       <h3>
         <FontAwesomeIcon
           icon={icon}

packages/frontend/src/components/InlineLabel.tsx

@@ -22,7 +22,7 @@ export const InlineLabel = ({
         onClick={onClick}
         className={classNames(
           className,
-          'h-6 pl-1 pr-1 mr-1 whitespace-nowrap text-xs text-white no-underline bg-gray-800 py-[1px] rounded',
+          'h-6 pl-1 pr-1 mr-1 whitespace-nowrap text-xs text-white no-underline bg-warm-gray-800 py-[1px] rounded',
           onClick ? 'cursor-pointer' : ''
         )}
       >

packages/frontend/src/components/InlineLabelClosable.tsx

@@ -21,7 +21,7 @@ export const InlineLabelClosable = ({
       onClick={onClick}
       className={classNames(
         className,
-        'h-6 pl-1 pr-1 mr-1 text-xs text-white no-underline bg-gray-800 py-[1px] rounded',
+        'h-6 pl-1 pr-1 mr-1 text-xs text-white no-underline bg-warm-gray-800 py-[1px] rounded',
         onClick ? 'cursor-pointer' : ''
       )}
     >

packages/frontend/src/components/Notice.tsx

@@ -1,3 +1,5 @@
+import { classNames } from '../utils';
+
 interface Params {
   children?: JSX.Element;
   type?: string;
@@ -18,12 +20,16 @@ const Notice = ({
   } else if (type === 'warning') {
     typeClasses = 'bg-orange-300';
   } else if (type === 'info') {
-    typeClasses = 'bg-gray-300';
+    typeClasses = 'bg-warm-gray-300 dark:bg-slate-700';
   }
 
   return (
     <div
-      className={`w-full p-4 text-center text-white rounded-sm ${className} ${typeClasses}`}
+      className={classNames(
+        'w-full p-4 text-center text-white rounded-sm',
+        className,
+        typeClasses
+      )}
     >
       {children}
     </div>

packages/frontend/src/components/ScrollableDialog.tsx

@@ -13,12 +13,12 @@ const ScrollableDialog = ({
   if (!open) return null;
 
   return (
-    <div className="absolute top-0 left-0 w-full h-full z-20">
+    <div className="absolute top-0 left-0 z-20 w-full h-full">
       <div className="fixed w-full h-screen">
-        <div className="flex items-center justify-center w-full h-full bg-gray-800 bg-opacity-30">
+        <div className="flex items-center justify-center w-full h-full bg-warm-gray-800 bg-opacity-30">
           <OutsideClickHandler onOutsideClick={onClose} active={open}>
-            <div className="z-30 max-w-xl bg-white rounded">
-              <div className="pb-16 bg-white rounded">{children}</div>
+            <div className="z-30 max-w-xl praise-box-defaults">
+              <div className="pb-16">{children}</div>
             </div>
           </OutsideClickHandler>
         </div>

packages/frontend/src/components/account/EthAccount.tsx

@@ -5,6 +5,7 @@ import { faAngleDown, faAngleRight } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useState } from 'react';
 import EthAccountDialog from './EthAccountDialog';
+import { classNames } from '@/utils/index';
 
 interface EthAccountParams {
   className?: string;
@@ -25,7 +26,10 @@ export default function EthAccount({
   return (
     <>
       <div
-        className={`flex justify-between items-center cursor-pointer ${className}`}
+        className={classNames(
+          'flex justify-between items-center cursor-pointer',
+          className
+        )}
         onClick={(): void => setIsDialogOpen(true)}
       >
         <div className="flex items-center space-x-2">

packages/frontend/src/components/account/EthAccountDialog.tsx

@@ -47,11 +47,7 @@ const EthAccountDialog = ({
       initialFocus={contentRef}
     >
       <div className="flex items-center justify-center min-h-screen">
-        <Dialog.Overlay className="fixed inset-0 bg-gray-800 opacity-30" />
-        <div
-          className="relative max-w-xl p-6 mx-auto bg-white rounded dark:bg-slate-900"
-          ref={contentRef}
-        >
+        <div className="p-10 praise-box-defaults" ref={contentRef}>
           <div className="flex justify-end">
             <button className="praise-button-round" onClick={onClose}>
               <FontAwesomeIcon icon={faTimes} size="1x" />

packages/frontend/src/components/auth/SignMessageButton.tsx

@@ -28,10 +28,7 @@ const SignMessageButton = ({
   return isLoading || isSuccess ? (
     <LoaderSpinner />
   ) : (
-    <button
-      className="px-4 py-2 font-bold text-white bg-gray-800 rounded hover:bg-gray-700"
-      onClick={(): void => signMessage()}
-    >
+    <button className="praise-button" onClick={(): void => signMessage()}>
       {text}
     </button>
   );

packages/frontend/src/components/eventlog/EventLog.tsx

@@ -8,10 +8,11 @@ import { EventLogDto, EventLogTypeKey } from 'api/dist/eventlog/types';
 import { SingleUser } from '@/model/users';
 import { useRecoilValue } from 'recoil';
 import { InlineLabel } from '../InlineLabel';
-import { UserDto } from 'api/dist/user/types';
-import { UserAccountDto } from 'api/dist/useraccount/types';
 import Notice from '../Notice';
 import { Tooltip } from '@mui/material';
+import { classNames } from '@/utils/index';
+import { UserName } from '../user/UserName';
+import { UserPopover } from '../user/UserPopover';
 
 const eventLogTypeColors = {
   [EventLogTypeKey.PERMISSION]: 'bg-orange-400',
@@ -22,19 +23,6 @@ const eventLogTypeColors = {
   [EventLogTypeKey.SETTING]: 'bg-indigo-400',
 };
 
-const getEventLogUsername = (
-  user: UserDto | undefined,
-  useraccount: UserAccountDto | undefined
-): string | undefined => {
-  if (user) {
-    return user.nameRealized;
-  } else if (useraccount) {
-    return useraccount.name;
-  } else {
-    return undefined;
-  }
-};
-
 interface Params {
   eventlog: EventLogDto;
   className?: string;
@@ -43,16 +31,32 @@ interface Params {
 const EventLog = ({ eventlog, className = '' }: Params): JSX.Element | null => {
   const user = useRecoilValue(SingleUser(eventlog.user));
 
+  console.log(eventlog);
+
   return (
-    <div className={`flex items-center w-full ${className}`}>
-      <div className="flex items-center">
-        <UserAvatar userAccount={eventlog.useraccount} user={user} />
+    <div className={classNames('flex items-center w-full', className)}>
+      <div className="flex items-center text-2xl">
+        <UserPopover
+          user={user}
+          userAccount={eventlog.useraccount}
+          className="inline-block"
+        >
+          <UserAvatar userAccount={eventlog.useraccount} user={user} />
+        </UserPopover>
       </div>
       <div className="flex-grow p-3 overflow-hidden">
         <div>
-          <span className="font-bold">
-            {getEventLogUsername(user, eventlog.useraccount)}
-          </span>
+          <UserPopover
+            user={user}
+            userAccount={eventlog.useraccount}
+            className="inline-block"
+          >
+            <UserName
+              user={user}
+              userAccount={eventlog.useraccount}
+              className="font-bold"
+            />
+          </UserPopover>
           <Tooltip
             placement="right-end"
             title={`${formatIsoDateUTC(
@@ -61,7 +65,7 @@ const EventLog = ({ eventlog, className = '' }: Params): JSX.Element | null => {
             )} UTC`}
             arrow
           >
-            <span className="ml-2 text-xs text-gray-500">
+            <span className="ml-2 text-xs text-gray-300">
               {localizeAndFormatIsoDate(eventlog.createdAt)}
             </span>
           </Tooltip>

packages/frontend/src/components/form/DayInput.tsx

@@ -3,6 +3,7 @@ import OutsideClickHandler from '@/components/OutsideClickHandler';
 import { useState } from 'react';
 import { DayPicker, useInput } from 'react-day-picker';
 import 'react-day-picker/dist/style.css';
+import { classNames } from '@/utils/index';
 
 interface Params {
   name: string;
@@ -37,8 +38,8 @@ const DayInput = ({
   };
 
   return (
-    <div className={`w-full ${className}`}>
-      <div className="flex justify-start items-center">
+    <div className={classNames('w-full', className)}>
+      <div className="flex items-center justify-start">
         <input
           {...inputProps}
           type="text"
@@ -59,7 +60,7 @@ const DayInput = ({
         >
           <DayPicker
             {...dayPickerProps}
-            className="absolute mt-1 p-2 border text-xs rounded-lg shadow-lg bg-gray-50 z-20"
+            className="absolute z-20 p-2 mt-1 text-xs border rounded-lg shadow-lg bg-warm-gray-50"
             onDayClick={handleDayClick}
             selected={parseDate(value)}
           />

packages/frontend/src/components/form/ImageFileInput.tsx

@@ -17,7 +17,7 @@ const ImageFileInput = (name: string, src: string | undefined): JSX.Element => {
             {src ? (
               <img src={src} className="block w-auto h-48" />
             ) : (
-              <div className="block w-auto h-48 bg-gray-300 "></div>
+              <div className="block w-auto h-48 bg-warm-gray-300 "></div>
             )}
           </div>
         </div>

packages/frontend/src/components/form/MultiselectInput.tsx

@@ -58,7 +58,7 @@ const MultiselectInput = ({
                 key={filterIdx}
                 className={({ active }): string =>
                   `relative cursor-default select-none py-2 pl-10 pr-4 ${
-                    active ? 'bg-gray-100 text-gray-900' : 'text-gray-600'
+                    active ? 'bg-warm-gray-100 text-gray-900' : 'text-gray-600'
                   }`
                 }
                 value={filter}

packages/frontend/src/components/form/SearchInput.tsx

@@ -13,7 +13,7 @@ const SearchInput = ({
   return (
     <div className="relative flex items-center border border-gray-400 h-[42px]">
       <div className="absolute inset-y-0 left-0 flex items-center pl-3">
-        <span className="text-gray-800">
+        <span className="text-gray-800 dark:text-white">
           <FontAwesomeIcon
             icon={faMagnifyingGlass}
             size="1x"
@@ -22,7 +22,7 @@ const SearchInput = ({
         </span>
       </div>
       <input
-        className="h-[42px] block pl-8 bg-transparent border-none outline-none focus:ring-0"
+        className="block pl-8 bg-transparent border-none outline-none focus:ring-0"
         name="search"
         type="text"
         placeholder="Search"

packages/frontend/src/components/form/SelectInput.tsx

@@ -25,7 +25,7 @@ const SelectInput = ({
   return (
     <div className="relative w-40 h-[42px]">
       <Listbox value={selected} onChange={handleChange}>
-        <Listbox.Button className="h-[42px] border border-gray-400 w-full py-1.5 pl-3 pr-10 text-left bg-transparent ">
+        <Listbox.Button className="h-[42px] border border-gray-400 w-full py-1.5 pl-3 pr-10 text-left bg-transparent  ">
           <span className="block truncate">{selected.label}</span>
           <div className="absolute inset-y-0 right-0 flex items-center pr-3">
             <span className="text-gray-800 ">
@@ -39,13 +39,15 @@ const SelectInput = ({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <Listbox.Options className="absolute w-full py-1 mt-1 overflow-auto bg-white border border-gray-400 max-h-60">
+          <Listbox.Options className="absolute w-full py-1 mt-1 overflow-auto bg-white border border-gray-400 max-h-60 dark:bg-slate-600">
             {options.map((s, sIdx) => (
               <Listbox.Option
                 key={sIdx}
                 className={({ active }): string =>
-                  `relative cursor-default select-none py-2 pl-4 pr-4 ${
-                    active ? 'bg-gray-100 text-gray-900' : 'text-gray-600'
+                  `relative cursor-default select-none py-2 pl-4 pr-4  ${
+                    active
+                      ? 'bg-warm-gray-100 dark:bg-slate-700 text-gray-900 dark:text-white'
+                      : 'text-gray-600 dark:text-white'
                   }`
                 }
                 value={s}

packages/frontend/src/components/periods/ActiveNoticesBoard.tsx

@@ -1,23 +1,24 @@
-import { ActivePeriodMessage } from './ActivePeriodMessage';
 import { ActiveUserQuantificationsMessage } from './ActiveUserQuantificationsMessage';
 import { Suspense } from 'react';
 
-export const ActiveNoticesBoard = (): JSX.Element | null => {
-  const activePeriodMessageRender = ActivePeriodMessage({});
-
+export const ActiveNoticesBoardInner = (): JSX.Element | null => {
   const activeUserQuantificationMessageRender =
     ActiveUserQuantificationsMessage();
 
-  if (!activePeriodMessageRender && !activeUserQuantificationMessageRender)
-    return null;
+  if (!activeUserQuantificationMessageRender) return null;
 
   return (
-    <div className="praise-box">
-      <Suspense fallback="Loading…">
-        {activePeriodMessageRender && activePeriodMessageRender}
-        {activeUserQuantificationMessageRender &&
-          activeUserQuantificationMessageRender}
-      </Suspense>
+    <div className="mb-5 praise-box">
+      {activeUserQuantificationMessageRender &&
+        activeUserQuantificationMessageRender}
     </div>
   );
 };
+
+export const ActiveNoticesBoard = (): JSX.Element | null => {
+  return (
+    <Suspense fallback={null}>
+      <ActiveNoticesBoardInner />
+    </Suspense>
+  );
+};

packages/frontend/src/components/periods/ActiveUserQuantificationsMessage.tsx

@@ -29,7 +29,7 @@ export const ActiveUserQuantificationsMessage = (): JSX.Element | null => {
     return null;
 
   return (
-    <div className="mt-2">
+    <div>
       Quantification is open! You can perform quantifications for the following
       periods:
       <ul className="list-disc list-inside">