Merge pull request #478 from commons-stack/fix/praise_layout

Frontend styling refactor / UI polish
givepraise · Jun 20, 2022 · 516668b · 516668b
2 parents 56ef34d + 1746e89
commit 516668b
Show file tree

Hide file tree

Showing 81 changed files with 982 additions and 698 deletions.
diff --git a/.yarn/cache/@fortawesome-free-brands-svg-icons-npm-6.1.1-294dc60d03-a878cc764e.zip b/.yarn/cache/@fortawesome-free-brands-svg-icons-npm-6.1.1-294dc60d03-a878cc764e.zip
diff --git a/packages/api/src/user/utils/entity.ts b/packages/api/src/user/utils/entity.ts
@@ -1,23 +1,15 @@
 import { UserAccountModel } from '@useraccount/entities';
+import { generateUserAccountNameRealized } from '@useraccount/utils';
 import { UserDocument } from '../types';
 import { shortenEthAddress } from './core';
 
 export const generateUserName = async (user: UserDocument): Promise<string> => {
-  let username = '';
-
   const accounts = await UserAccountModel.find({ user: user._id });
+  if (!accounts || accounts.length === 0)
+    return shortenEthAddress(user.ethereumAddress);
 
-  if (!accounts || accounts.length === 0) {
-    username = shortenEthAddress(user.ethereumAddress);
-  } else {
-    const discordAccount = accounts.find((a) => a.platform === 'DISCORD');
-
-    if (discordAccount) {
-      username = discordAccount.name;
-    } else {
-      username = accounts[0].name;
-    }
-  }
+  const discordAccount = accounts.find((a) => a.platform === 'DISCORD');
+  if (discordAccount) return generateUserAccountNameRealized(discordAccount);
 
-  return username;
+  return generateUserAccountNameRealized(accounts[0]);
 };
diff --git a/packages/api/src/useraccount/transformers.ts b/packages/api/src/useraccount/transformers.ts
@@ -1,4 +1,5 @@
 import { UserAccountDocument, UserAccountDto } from './types';
+import { generateUserAccountNameRealized } from './utils';
 
 const userAccountDocumentToDto = (
   userAccountDocument: UserAccountDocument
@@ -18,6 +19,7 @@ const userAccountDocumentToDto = (
     user: user?._id,
     accountId,
     name,
+    nameRealized: generateUserAccountNameRealized(userAccountDocument),
     avatarId,
     platform,
     createdAt: createdAt.toISOString(),

diff --git a/packages/api/src/useraccount/types.ts b/packages/api/src/useraccount/types.ts
@@ -22,6 +22,7 @@ export interface UserAccountDto {
   user?: string;
   accountId: string;
   name: string;
+  nameRealized: string;
   avatarId?: string;
   platform: UserAccountPlatform;
   activateToken?: string;

diff --git a/packages/api/src/useraccount/utils.ts b/packages/api/src/useraccount/utils.ts
@@ -0,0 +1,8 @@
+import { UserAccountDocument } from './types';
+
+export const generateUserAccountNameRealized = (
+  userAccount: UserAccountDocument
+): string => {
+  if (userAccount.platform === 'DISCORD') return userAccount.name.split('#')[0];
+  return userAccount.name;
+};
diff --git a/packages/frontend/package.json b/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",

diff --git a/packages/frontend/src/components/BreadCrumb.tsx b/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}

diff --git a/packages/frontend/src/components/InlineLabel.tsx b/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' : ''
         )}
       >

diff --git a/packages/frontend/src/components/InlineLabelClosable.tsx b/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' : ''
       )}
     >

diff --git a/packages/frontend/src/components/Notice.tsx b/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>

diff --git a/packages/frontend/src/components/ScrollableDialog.tsx b/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>

diff --git a/packages/frontend/src/components/account/EthAccount.tsx b/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">

diff --git a/packages/frontend/src/components/account/EthAccountDialog.tsx b/packages/frontend/src/components/account/EthAccountDialog.tsx
@@ -46,12 +46,8 @@ const EthAccountDialog = ({
       className="fixed inset-0 z-50 overflow-y-auto"
       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="flex items-center justify-center min-h-screen bg-black/30">
+        <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" />

diff --git a/packages/frontend/src/components/auth/SignMessageButton.tsx b/packages/frontend/src/components/auth/SignMessageButton.tsx
@@ -27,10 +27,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>
   );

diff --git a/packages/frontend/src/components/eventlog/EventLog.tsx b/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-warm-gray-300">
               {localizeAndFormatIsoDate(eventlog.createdAt)}
             </span>
           </Tooltip>

diff --git a/packages/frontend/src/components/form/DayInput.tsx b/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)}
           />

diff --git a/packages/frontend/src/components/form/ImageFileInput.tsx b/packages/frontend/src/components/form/ImageFileInput.tsx
@@ -18,7 +18,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>

diff --git a/packages/frontend/src/components/form/MultiselectInput.tsx b/packages/frontend/src/components/form/MultiselectInput.tsx
@@ -22,7 +22,7 @@ const MultiselectInput = ({
   noSelectedMessage,
 }: MultiselectInputProps): JSX.Element => {
   return (
-    <div className="relative w-60 border border-gray-400 h-[42px]">
+    <div className="relative w-60 border border-warm-gray-400 h-[42px]">
       <Listbox value={selected} onChange={handleChange} multiple>
         <Listbox.Button className=" pl-2 pr-8 text-left h-[42px] w-full bg-transparent border-none outline-none focus:ring-0 ">
           {(): JSX.Element => (
@@ -39,7 +39,7 @@ const MultiselectInput = ({
               </span>
 
               <div className="absolute inset-y-0 right-0 flex items-center pr-3">
-                <span className="text-gray-800">
+                <span className="text-warm-gray-800">
                   <FontAwesomeIcon icon={faChevronDown} className="mt-[-1]" />
                 </span>
               </div>
@@ -52,13 +52,15 @@ const MultiselectInput = ({
           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-warm-gray-400 max-h-60">
             {options.map((filter, filterIdx) => (
               <Listbox.Option
                 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-warm-gray-900'
+                      : 'text-warm-gray-600'
                   }`
                 }
                 value={filter}
@@ -72,7 +74,7 @@ const MultiselectInput = ({
                     >
                       {filter.label}
                     </span>
-                    <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-600">
+                    <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-warm-gray-600">
                       <input
                         type="checkbox"
                         className="w-4 h-4 mr-4 text-black focus:ring-0"

diff --git a/packages/frontend/src/components/form/SearchInput.tsx b/packages/frontend/src/components/form/SearchInput.tsx
@@ -11,9 +11,9 @@ const SearchInput = ({
   value,
 }: SearchInputProps): JSX.Element => {
   return (
-    <div className="relative flex items-center border border-gray-400 h-[42px]">
+    <div className="relative flex items-center border border-warm-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-warm-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"