chore(Invite): updated css for error & progressbar

2025-12-10 20:37:47 +00:00 · 2023-03-24 16:21:29 +05:30
parent e16f631bb5
commit 5b35fb0c1b
6 changed files with 84 additions and 65 deletions
--- a/platform/firecamp-platform/src/components/modals-v3/workspace/Invite.tsx
+++ b/platform/firecamp-platform/src/components/modals-v3/workspace/Invite.tsx
@@ -11,6 +11,7 @@ import {
  Container,
  Popover,
  FormGroup,
+  ProgressBar,
 } from '@firecamp/ui';
 import { Rest } from '@firecamp/cloud-apis';
 import { EEditorLanguage } from '@firecamp/types';
@@ -98,7 +99,7 @@ const Invite: FC<IModal> = ({ isOpen = false, onClose = () => {} }) => {
      activeTab === EInviteMemberTabs.ExistingMembers &&
      existingMemberList.length === 0
    ) {
-      // setIsRequesting(true);
+      setIsRequesting(true);
      // Rest.organization.getMembers(orgId).then((data) => {
      console.log(`api will be called...`);
      const members = DUMMY_USER_DATA.map((m) => {
@@ -112,6 +113,8 @@ const Invite: FC<IModal> = ({ isOpen = false, onClose = () => {} }) => {
      updateExistingMemberList(members);
      // }).catch(console.log)
      //   .finally(() => setIsRequesting(false));
+
+      setTimeout(() => setIsRequesting(false), 5000);
    }
  }, [activeTab]);

@@ -130,8 +133,8 @@ const Invite: FC<IModal> = ({ isOpen = false, onClose = () => {} }) => {
          INVITE MEMBERS IN WORKSPACE
        </div>
      </Modal.Header>
-      <Modal.Body>
-        <div className="p-4 h-full flex flex-col">
+      <Modal.Body scrollbar={false}>
+        <div className="p-4 h-fit flex flex-col">
          <SecondaryTab
            className="flex items-center pb-6 -ml-2"
            list={tabs}
@@ -152,6 +155,7 @@ const Invite: FC<IModal> = ({ isOpen = false, onClose = () => {} }) => {
              memberList={existingMemberList}
              invitingInProgress={iInProgress}
              sendInvitation={sendInvitation}
+              requestingList={isRequesting}
            />
          )}
        </div>
@@ -217,16 +221,15 @@ const InviteNewMembers = ({
        />

        {error?.length ? (
-          <div className="mb-2 text-error">
-            Invalid Emails
-            <ul>
+          <ul className="text-error border px-2">
+            The following email address(es) are not valid
            {error.map((e, i) => (
              <li key={i}>
                {i + 1}. {e.email}
+                {i + 1 !== error.length ? ', ' : ''}
              </li>
            ))}
          </ul>
-          </div>
        ) : (
          <></>
        )}
@@ -295,6 +298,7 @@ const InviteExistingMembers = ({
  memberList = [],
  sendInvitation = (_details, status) => {},
  invitingInProgress = false,
+  requestingList = false,
 }) => {
  const [user, updateUser] = useState({ name: '', error: false });
  const [role, updateRole] = useState({
@@ -317,22 +321,28 @@ const InviteExistingMembers = ({
        Invite your team colleagues to join the workspace.
      </Container.Header>
      <Container.Body className="invisible-scrollbar w-[32rem] h-80">
-        <FormGroup label="Invite members from your organisation">
+        <FormGroup
+          label="Invite members from your organisation"
+          className="relative"
+        >
          <DropdownV2
            handleRenderer={() => (
+              <div className="relative">
                <Button
                  text={user.name || 'Select member'}
                  className={cx(
                    'hover:!bg-focus1 border border-appBorder justify-between',
                    { 'border-error': user.error }
                  )}
-                withCaret
+                  disabled={memberList.length === 0}
                  transparent
+                  withCaret
+                  fullWidth
                  ghost
                  md
-                fullWidth
-                disabled={memberList.length === 0}
                />
+                <ProgressBar className="top-auto" active={requestingList} />
+              </div>
            )}
            displayDefaultOptionClassName={2}
            className="block"
--- a/platform/firecamp-ui/src/components/extra-css/extra-css.tsx
+++ b/platform/firecamp-ui/src/components/extra-css/extra-css.tsx
@@ -18,7 +18,7 @@ const ExtraCss = () => {
       absolute inline !absolute sticky table-cell !table table-row-group table-header-group table-row !block 
       !mb-0 mb-8 mb-6 mr-5 mr-14 mr-2 -mb-96 -ml-1 -ml-2  mt-0.5  my-3 mb-4 my-5 !ml-auto mt-8 !mb-2 mt-14 !mr-1  first:ml-0 last:mr-0 mx-auto  -mt-1  mt-1  mb-14 !m-2 !mt-0  !m-0 -mt-px  !mx-1  !m-1 -mb-1 	my-4  m-6 !-mb-1 mb-7 mt-5 -m-4
       px-14 py-20 py-4 px-8 !p-0 !p-1 py-0.5 !px-6  pt-0.5 p-6 pr-3 pb-96 !pt-2 !px-3 !pb-3 !pb-1 !pt-3 !pb-2 !py-3 px-10 px-16  pb-4  pb-3  !pb-6 pl-4  !pb-0  pt-14  py-6 pr-0.5 !px-0 pl-0.5 !pr-0 pb-0 !py-0 !px-2  !py-2 	!pt-4 px-0.5  !pl-3 !pr-3 pt-5  pb-5  !p-4 !pl-4 !pr-4  hover:!pr-3 
-       -left-8 top-4  bottom-6  !top-4 top-5 top-1 right-4 top-12 after:top-0 after:left-0 after:bottom-0 after:right-0 
+       -left-8 top-4  bottom-6  !top-4 top-5 top-1 right-4 top-12 after:top-0 after:left-0 after:bottom-0 after:right-0 top-auto	
       float-right
       text-2xl text-5xl !text-base !text-appForegroundActive text-rest text-websocket text-graphql !text-primaryColor !text-appForegroundInActive !text-ellipsis text-link hover:underline !text-link hover:!text-link
       font-normal font-light !font-regular hover:text-appForegroundActive
--- a/platform/firecamp-ui/src/components/modal/Modal.tsx
+++ b/platform/firecamp-ui/src/components/modal/Modal.tsx
@@ -1,18 +1,18 @@
-import { FC } from "react";
+import { FC } from 'react';
 import cx from 'classnames';
 import { VscClose } from '@react-icons/all-files/vsc/VscClose';
 import ResponsiveModal from 'react-responsive-modal';
 import 'react-responsive-modal/styles.css';
 import './Modal.scss';

-import { Container, Row } from '../../ui-kit'
+import { Container, Row } from '../../ui-kit';

-import { IModal, IHeader, IBody, IFooter } from "./interfaces/Modal.interface"
+import { IModal, IHeader, IBody, IFooter } from './interfaces/Modal.interface';

 const Modal: FC<IModal> & {
-  Header: FC<IHeader>,
-  Body: FC<IBody>,
-  Footer: FC<IFooter>
+  Header: FC<IHeader>;
+  Body: FC<IBody>;
+  Footer: FC<IFooter>;
 } = ({
  id = '',
  showCloseIcon = true,
@@ -20,12 +20,11 @@ const Modal: FC<IModal> & {
  className = '',
  modalClass = '',
  modalConfig = {},
-  onClose = () => { },
+  onClose = () => {},
  children = '',
  height,
  width,
 }) => {
-
  return (
    <ResponsiveModal
      open={isOpen}
@@ -33,7 +32,7 @@ const Modal: FC<IModal> & {
        onClose();
      }}
      center
-      closeIcon={(<VscClose size={20} className="cursor-pointer z-50" />)}
+      closeIcon={<VscClose size={20} className="cursor-pointer z-50" />}
      {...modalConfig}
    >
      <div
@@ -56,8 +55,8 @@ const Modal: FC<IModal> & {
        {children}
      </div>
    </ResponsiveModal>
-  )
-}
+  );
+};

 // `id`: is not being updated on the element
 let Header: FC<IHeader> = ({ id = '', children = '', className = '' }) => {
@@ -69,14 +68,19 @@ let Header: FC<IHeader> = ({ id = '', children = '', className = '' }) => {
 };

 // `id`: is not being updated on the element
-let Body: FC<IBody> = ({ id = '', children = '', className = '' }) => {
+let Body: FC<IBody> = ({
+  id = '',
+  children = '',
+  className = '',
+  scrollbar = true,
+}) => {
  return (
    <Container.Body
-    className={cx(
-      className,
-      'flex flex-col overflow-auto visible-scrollbar thin !p-4'
-    )}
-    id={id}>
+      className={cx(className, 'flex flex-col overflow-auto thin !p-4', {
+        'visible-scrollbar': scrollbar,
+      })}
+      id={id}
+    >
      {children}
    </Container.Body>
  );
--- a/platform/firecamp-ui/src/components/modal/interfaces/Modal.interface.ts
+++ b/platform/firecamp-ui/src/components/modal/interfaces/Modal.interface.ts
@@ -51,6 +51,7 @@ export interface IBody {
  id?: string;
  children?: any;
  className?: string;
+  scrollbar?: boolean;
 }

 export interface IFooter {
--- a/platform/firecamp-ui/src/components/progress-bar/ProgressBar.tsx
+++ b/platform/firecamp-ui/src/components/progress-bar/ProgressBar.tsx
@@ -3,14 +3,17 @@ import cx from 'classnames';
 import './ProgressBar.scss';

 // progress illustration to show the action is progressing 
-const ProgressBar: FC<IProgressBar> = ({ active= false, short=false }) => {
+const ProgressBar: FC<IProgressBar> = ({ active= false, short=false, className='' }) => {
  if(!active) return <></>;
-  return <div className={cx('progress-bar absolute left-0 bottom-0 w-full border-b-2 h-0 z-10 top-0', { 'border-primaryColor': active }, { 'border-transparent': !active },{ 'progressbar-small': short })} data-testid="progress-bar"/>;
+  return <div className={cx('progress-bar absolute left-0 bottom-0 w-full border-b-2 h-0 z-10 top-0', { 'border-primaryColor': active }, { 'border-transparent': !active },{ 'progressbar-small': short }, className)} data-testid="progress-bar"/>;
 };

 export default ProgressBar

 export interface IProgressBar {
+  // update position using classname
+  className?: string;
+
  // boolean value whether progress bar is active or not.
  active: boolean;

--- a/platform/firecamp-ui/src/scss/tailwind.scss
+++ b/platform/firecamp-ui/src/scss/tailwind.scss
@@ -656,7 +656,6 @@ video {
    --popoverBoxshadow: rgba(0, 0, 0, 0.36) 0px 0px 8px 2px;

    --focus-border: #007acc;
-    --error: #f00;

    --modal-background: #262626;
    --modal-foreground: #9C9C9C;
@@ -725,7 +724,7 @@ video {
    --activityBar-inactiveForeground: #57606a;
    --activityBar-activeBackground: var(--focus-level-2);
    --activityBar-activeBorder: var(--app-primary);
-    --activityBar-border: #333333;
+    
    --activityBar-border: #dddddd;
    --activityBarBadge-foreground: #FFFFFF;
    --activityBarBadge-background: #09A1EDl;
@@ -749,7 +748,6 @@ video {
    

    --focus-border: #007acc;
-    --error: #f00;

    --modal-background: #f5f5f5;
    --modal-foreground: #2a2a2a;
@@ -884,6 +882,9 @@ video {
 .top-12 {
 	top: 3rem;
 }
+.top-auto {
+	top: auto;
+}
 .top-3 {
 	top: 0.75rem;
 }
@@ -2178,15 +2179,15 @@ video {
 .\!text-primaryColor {
 	color: var(--app-primary) !important;
 }
-.\!text-link {
-	color: var(--link) !important;
-}
 .\!text-appForegroundInActive {
 	color: var(--app-foreground-inactive) !important;
 }
 .text-link {
 	color: var(--link);
 }
+.\!text-link {
+	color: var(--link) !important;
+}
 .text-inputText {
 	color: var(--input-text);
 }