LukeParke/firecamp
1
0
Fork 0
mirror of https://github.com/LukeHagar/firecamp.git synced 2025-12-10 20:37:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore(Invite): updated css for error & progressbar

Browse Source
This commit is contained in:
Nishchit14
2023-03-24 16:21:29 +05:30
parent e16f631bb5
commit 5b35fb0c1b
6 changed files with 84 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
platform/firecamp-platform/src/components/modals-v3/workspace/Invite.tsx
View File

@@ -11,6 +11,7 @@ import {
Container, Container,
Popover, Popover,
FormGroup, FormGroup,
ProgressBar,
} from '@firecamp/ui'; } from '@firecamp/ui';
import { Rest } from '@firecamp/cloud-apis'; import { Rest } from '@firecamp/cloud-apis';
import { EEditorLanguage } from '@firecamp/types'; import { EEditorLanguage } from '@firecamp/types';
@@ -98,7 +99,7 @@ const Invite: FC<IModal> = ({ isOpen = false, onClose = () => {} }) => {
activeTab === EInviteMemberTabs.ExistingMembers && activeTab === EInviteMemberTabs.ExistingMembers &&
existingMemberList.length === 0 existingMemberList.length === 0
) { ) {
// setIsRequesting(true); setIsRequesting(true);
// Rest.organization.getMembers(orgId).then((data) => { // Rest.organization.getMembers(orgId).then((data) => {
console.log(`api will be called...`); console.log(`api will be called...`);
const members = DUMMY_USER_DATA.map((m) => { const members = DUMMY_USER_DATA.map((m) => {
@@ -112,6 +113,8 @@ const Invite: FC<IModal> = ({ isOpen = false, onClose = () => {} }) => {
updateExistingMemberList(members); updateExistingMemberList(members);
// }).catch(console.log) // }).catch(console.log)
// .finally(() => setIsRequesting(false)); // .finally(() => setIsRequesting(false));
setTimeout(() => setIsRequesting(false), 5000);
} }
}, [activeTab]); }, [activeTab]);
@@ -130,8 +133,8 @@ const Invite: FC<IModal> = ({ isOpen = false, onClose = () => {} }) => {
INVITE MEMBERS IN WORKSPACE INVITE MEMBERS IN WORKSPACE
</div> </div>
</Modal.Header> </Modal.Header>
<Modal.Body> <Modal.Body scrollbar={false}>
<div className="p-4 h-full flex flex-col"> <div className="p-4 h-fit flex flex-col">
<SecondaryTab <SecondaryTab
className="flex items-center pb-6 -ml-2" className="flex items-center pb-6 -ml-2"
list={tabs} list={tabs}
@@ -152,6 +155,7 @@ const Invite: FC<IModal> = ({ isOpen = false, onClose = () => {} }) => {
memberList={existingMemberList} memberList={existingMemberList}
invitingInProgress={iInProgress} invitingInProgress={iInProgress}
sendInvitation={sendInvitation} sendInvitation={sendInvitation}
requestingList={isRequesting}
/> />
)} )}
</div> </div>
@@ -217,16 +221,15 @@ const InviteNewMembers = ({
/> />
{error?.length ? ( {error?.length ? (
<div className="mb-2 text-error"> <ul className="text-error border px-2">
Invalid Emails The following email address(es) are not valid
<ul> {error.map((e, i) => (
{error.map((e, i) => ( <li key={i}>
<li key={i}> {i + 1}. {e.email}
{i + 1}. {e.email} {i + 1 !== error.length ? ', ' : ''}
</li> </li>
))} ))}
</ul> </ul>
</div>
) : ( ) : (
<></> <></>
)} )}
@@ -295,6 +298,7 @@ const InviteExistingMembers = ({
memberList = [], memberList = [],
sendInvitation = (_details, status) => {}, sendInvitation = (_details, status) => {},
invitingInProgress = false, invitingInProgress = false,
requestingList = false,
}) => { }) => {
const [user, updateUser] = useState({ name: '', error: false }); const [user, updateUser] = useState({ name: '', error: false });
const [role, updateRole] = useState({ const [role, updateRole] = useState({
@@ -317,22 +321,28 @@ const InviteExistingMembers = ({
Invite your team colleagues to join the workspace. Invite your team colleagues to join the workspace.
</Container.Header> </Container.Header>
<Container.Body className="invisible-scrollbar w-[32rem] h-80"> <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 <DropdownV2
handleRenderer={() => ( handleRenderer={() => (
<Button <div className="relative">
text={user.name || 'Select member'} <Button
className={cx( text={user.name || 'Select member'}
'hover:!bg-focus1 border border-appBorder justify-between', className={cx(
{ 'border-error': user.error } 'hover:!bg-focus1 border border-appBorder justify-between',
)} { 'border-error': user.error }
withCaret )}
transparent disabled={memberList.length === 0}
ghost transparent
md withCaret
fullWidth fullWidth
disabled={memberList.length === 0} ghost
/> md
/>
<ProgressBar className="top-auto" active={requestingList} />
</div>
)} )}
displayDefaultOptionClassName={2} displayDefaultOptionClassName={2}
className="block" className="block"

2
platform/firecamp-ui/src/components/extra-css/extra-css.tsx
View File

@@ -18,7 +18,7 @@ const ExtraCss = () => {
absolute inline !absolute sticky table-cell !table table-row-group table-header-group table-row !block 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 !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 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 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 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 font-normal font-light !font-regular hover:text-appForegroundActive

62
platform/firecamp-ui/src/components/modal/Modal.tsx
View File

@@ -1,18 +1,18 @@
import { FC } from "react"; import { FC } from 'react';
import cx from 'classnames'; import cx from 'classnames';
import { VscClose } from '@react-icons/all-files/vsc/VscClose'; import { VscClose } from '@react-icons/all-files/vsc/VscClose';
import ResponsiveModal from 'react-responsive-modal'; import ResponsiveModal from 'react-responsive-modal';
import 'react-responsive-modal/styles.css'; import 'react-responsive-modal/styles.css';
import './Modal.scss'; 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> & { const Modal: FC<IModal> & {
Header: FC<IHeader>, Header: FC<IHeader>;
Body: FC<IBody>, Body: FC<IBody>;
Footer: FC<IFooter> Footer: FC<IFooter>;
} = ({ } = ({
id = '', id = '',
showCloseIcon = true, showCloseIcon = true,
@@ -20,12 +20,11 @@ const Modal: FC<IModal> & {
className = '', className = '',
modalClass = '', modalClass = '',
modalConfig = {}, modalConfig = {},
onClose = () => { }, onClose = () => {},
children = '', children = '',
height, height,
width, width,
}) => { }) => {
return ( return (
<ResponsiveModal <ResponsiveModal
open={isOpen} open={isOpen}
@@ -33,18 +32,18 @@ const Modal: FC<IModal> & {
onClose(); onClose();
}} }}
center center
closeIcon={(<VscClose size={20} className="cursor-pointer z-50" />)} closeIcon={<VscClose size={20} className="cursor-pointer z-50" />}
{...modalConfig} {...modalConfig}
> >
<div <div
className={cx( className={cx(
className, className,
'max-w-screen-md min-w-screen-md bg-modalBackground text-appForeground w-full relative z-9999 max-h-modal flex fc-modal-wrapper h-full' 'max-w-screen-md min-w-screen-md bg-modalBackground text-appForeground w-full relative z-9999 max-h-modal flex fc-modal-wrapper h-full'
)} )}
style={{ height: height, width: width }} style={{ height: height, width: width }}
id={id} id={id}
> >
{/* {showCloseIcon ? ( {/* {showCloseIcon ? (
<VscClose <VscClose
size={20} size={20}
className="absolute top-3 right-3 cursor-pointer z-50" className="absolute top-3 right-3 cursor-pointer z-50"
@@ -53,11 +52,11 @@ const Modal: FC<IModal> & {
}} }}
/> />
) : <></>} */} ) : <></>} */}
{children} {children}
</div> </div>
</ResponsiveModal> </ResponsiveModal>
) );
} };
// `id`: is not being updated on the element // `id`: is not being updated on the element
let Header: FC<IHeader> = ({ id = '', children = '', className = '' }) => { 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 // `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 ( return (
<Container.Body <Container.Body
className={cx( className={cx(className, 'flex flex-col overflow-auto thin !p-4', {
className, 'visible-scrollbar': scrollbar,
'flex flex-col overflow-auto visible-scrollbar thin !p-4' })}
)} id={id}
id={id}> >
{children} {children}
</Container.Body> </Container.Body>
); );
@@ -94,4 +98,4 @@ Modal.Header = Header;
Modal.Body = Body; Modal.Body = Body;
Modal.Footer = Footer; Modal.Footer = Footer;
export default Modal; export default Modal;

1
platform/firecamp-ui/src/components/modal/interfaces/Modal.interface.ts
View File

@@ -51,6 +51,7 @@ export interface IBody {
id?: string; id?: string;
children?: any; children?: any;
className?: string; className?: string;
scrollbar?: boolean;
} }
export interface IFooter { export interface IFooter {

7
platform/firecamp-ui/src/components/progress-bar/ProgressBar.tsx
View File

@@ -3,14 +3,17 @@ import cx from 'classnames';
import './ProgressBar.scss'; import './ProgressBar.scss';
// progress illustration to show the action is progressing // 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 <></>; 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 default ProgressBar
export interface IProgressBar { export interface IProgressBar {
// update position using classname
className?: string;
// boolean value whether progress bar is active or not. // boolean value whether progress bar is active or not.
active: boolean; active: boolean;

13
platform/firecamp-ui/src/scss/tailwind.scss
View File

@@ -656,7 +656,6 @@ video {
--popoverBoxshadow: rgba(0, 0, 0, 0.36) 0px 0px 8px 2px; --popoverBoxshadow: rgba(0, 0, 0, 0.36) 0px 0px 8px 2px;
--focus-border: #007acc; --focus-border: #007acc;
--error: #f00;
--modal-background: #262626; --modal-background: #262626;
--modal-foreground: #9C9C9C; --modal-foreground: #9C9C9C;
@@ -725,7 +724,7 @@ video {
--activityBar-inactiveForeground: #57606a; --activityBar-inactiveForeground: #57606a;
--activityBar-activeBackground: var(--focus-level-2); --activityBar-activeBackground: var(--focus-level-2);
--activityBar-activeBorder: var(--app-primary); --activityBar-activeBorder: var(--app-primary);
--activityBar-border: #333333;
--activityBar-border: #dddddd; --activityBar-border: #dddddd;
--activityBarBadge-foreground: #FFFFFF; --activityBarBadge-foreground: #FFFFFF;
--activityBarBadge-background: #09A1EDl; --activityBarBadge-background: #09A1EDl;
@@ -749,7 +748,6 @@ video {
--focus-border: #007acc; --focus-border: #007acc;
--error: #f00;
--modal-background: #f5f5f5; --modal-background: #f5f5f5;
--modal-foreground: #2a2a2a; --modal-foreground: #2a2a2a;
@@ -884,6 +882,9 @@ video {
.top-12 { .top-12 {
top: 3rem; top: 3rem;
} }
.top-auto {
top: auto;
}
.top-3 { .top-3 {
top: 0.75rem; top: 0.75rem;
} }
@@ -2178,15 +2179,15 @@ video {
.\!text-primaryColor { .\!text-primaryColor {
color: var(--app-primary) !important; color: var(--app-primary) !important;
} }
.\!text-link {
color: var(--link) !important;
}
.\!text-appForegroundInActive { .\!text-appForegroundInActive {
color: var(--app-foreground-inactive) !important; color: var(--app-foreground-inactive) !important;
} }
.text-link { .text-link {
color: var(--link); color: var(--link);
} }
.\!text-link {
color: var(--link) !important;
}
.text-inputText { .text-inputText {
color: var(--input-text); color: var(--input-text);
} }