added classes

itenium-be · Dec 5, 2023 · 962ca1d · 962ca1d
1 parent 03c971f
commit 962ca1d
Show file tree

Hide file tree

Showing 73 changed files with 136 additions and 85 deletions.
diff --git a/frontend/src/actions/appActions.tsx b/frontend/src/actions/appActions.tsx
@@ -11,12 +11,12 @@ type ToastType = 'error' | 'success' | 'info';
 function getIcon(type: ToastType): string {
   switch (type) {
     case 'error':
-      return 'fa fa-times-circle';
+      return 'fa fa-times-circle tst-icon-error';
     case 'info':
-      return 'fa fa-info-circle';
+      return 'fa fa-info-circle tst-icon-info';
     case 'success':
     default:
-      return 'fa fa-check-circle';
+      return 'fa fa-check-circle tst-icon-success';
   }
 }
 

diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
@@ -95,6 +95,7 @@ const Header = () => (
           </Link>
         </Dropdown.Menu>
         <Icon
+          className="tst-icon-user"
           fa="fa fa-user-circle"
           color="#668014"
           onClick="/user"

diff --git a/frontend/src/components/admin/DataLoaded.tsx b/frontend/src/components/admin/DataLoaded.tsx
@@ -26,7 +26,7 @@ const DataLoadedComponent = () => {
   return (
     <div className="data-loader">
       <Button
-        className="btn btn-info"
+        className="btn btn-info tst-btn-info"
         title={t('dataLoad.monthsLoaded', {months: currentLastMonths})}
         onClick={() => setOpen(true)}
         icon="fa fa-database"
@@ -38,11 +38,11 @@ const DataLoadedComponent = () => {
           title={t('dataLoad.loadMore')}
         >
           <p>
-            <i className="fa fa-database text-info" style={{marginRight: 8}} />
+            <i className="fa fa-database text-info tst-icon-db" style={{marginRight: 8}} />
             {t('dataLoad.monthsLoaded', {months: currentLastMonths})}
           </p>
           <Button
-            className="btn btn-success"
+            className="btn btn-success tst-btn-success"
             title={t('dataLoad.monthsLoaded', {months: currentLastMonths})}
             onClick={() => {
               dispatch(initialLoad(nextLoadMonths));

diff --git a/frontend/src/components/admin/EditAdmin.tsx b/frontend/src/components/admin/EditAdmin.tsx
@@ -12,7 +12,7 @@ export const EditAdmin = () => {
   return (
     <Container className="edit-container">
       <h1>{t('admin.title')}</h1>
-      <Button claim={Claim.ViewUsers} variant="light" onClick="/users">{t('admin.users')}</Button>
+      <Button className="tst-btn-users" claim={Claim.ViewUsers} variant="light" onClick="/users">{t('admin.users')}</Button>
     </Container>
   );
 };
diff --git a/frontend/src/components/admin/audit/AuditChangeEntryIcon.tsx b/frontend/src/components/admin/audit/AuditChangeEntryIcon.tsx
@@ -5,13 +5,13 @@ export const AuditChangeEntryIcon = (props: { diff: AuditChange; }) => {
   const commonStyle = { marginRight: 8 };
   switch (props.diff.kind) {
     case 'A':
-      return <i className="" style={commonStyle} />;
+      return <i className=" tst-icon-empty" style={commonStyle} />;
     case 'D':
-      return <i className="fa fa-trash" style={{ color: 'red', ...commonStyle }} />;
+      return <i className="fa fa-trash tst-icon-delete" style={{ color: 'red', ...commonStyle }} />;
     case 'E':
-      return <i className="far fa-edit" style={{ color: 'gray', ...commonStyle }} />;
+      return <i className="far fa-edit tst-icon-edit" style={{ color: 'gray', ...commonStyle }} />;
     case 'N':
-      return <i className="fa fa-plus" style={commonStyle} />;
+      return <i className="fa fa-plus tst-icon-add" style={commonStyle} />;
     default:
       return null;
   }

diff --git a/frontend/src/components/admin/audit/FullAudit.tsx b/frontend/src/components/admin/audit/FullAudit.tsx
@@ -14,6 +14,7 @@ export const FullAudit = (props: AuditProps) => {
   return (
     <>
       <Icon
+        className="tst-icon-link"
         title={t('audit.openFullAuditModel')}
         size={1}
         style={{ color: 'grey', marginLeft: 8, fontSize: 14 }}

diff --git a/frontend/src/components/client/EditClient.tsx b/frontend/src/components/client/EditClient.tsx
@@ -120,6 +120,7 @@ const EditClient = () => {
       <StickyFooter claim={Claim.ManageClients}>
         <BusyButton
           onClick={() => dispatch(saveClient(client) as any)}
+          className="tst-btn-save"
           disabled={isClientDisabled(client)}
         >
           {t('save')}

diff --git a/frontend/src/components/client/contract/SingleContractIcon.tsx b/frontend/src/components/client/contract/SingleContractIcon.tsx
@@ -35,6 +35,7 @@ export const SingleContractIcon = ({ contract, contracts, style, tooltip, ...pro
 
   return (
     <Icon
+      className={ok ? "tst-icon-check" : "tst-icon-warning"}
       fa={fa}
       style={{ marginRight: 8, ...ownStyle, ...style }}
       title={tooltip || t(globalTooltip)}

diff --git a/frontend/src/components/client/controls/ClientDetails.tsx b/frontend/src/components/client/controls/ClientDetails.tsx
@@ -25,6 +25,7 @@ const ClientDetails = ({client, onOpenDetails, onOpenDetailsTitle}: ClientDetail
         client={client}
         title={t(onOpenDetailsTitle || 'edit')}
         style={{marginLeft: 6, marginRight: 12, fontSize: 14}}
+        className="tst-icon-link"
         fa="fa fa-external-link-alt"
       />
       <Link to={`/clients/${client.slug}`} className="icon-link">

diff --git a/frontend/src/components/client/controls/ClientIconLinks.tsx b/frontend/src/components/client/controls/ClientIconLinks.tsx
@@ -24,6 +24,7 @@ export const ClientIconLinks = ({client}: ClientProps) => {
         size={1}
         style={{color: 'grey', marginRight: 8}}
         onClick={() => setModal(true)}
+        className="tst-icon-link"
         fa="fa fa-external-link-alt"
       />
       <ClientEditIcon client={client} style={{color: 'grey', fontSize: 14}} />

diff --git a/frontend/src/components/client/controls/ClientSelect.tsx b/frontend/src/components/client/controls/ClientSelect.tsx
@@ -34,6 +34,7 @@ const ClientSelectComponent = ({value, onChange}: ClientSelectProps) => {
       onChange={((itm: SelectItem) => onChange(itm && itm.value as string, itm && getModel(itm.value as string))) as any}
       isClearable
       placeholder={t('controls.selectPlaceholder')}
+      className="react-select-control"
       classNamePrefix="react-select"
     />
   );

diff --git a/frontend/src/components/config/EditConfig.tsx b/frontend/src/components/config/EditConfig.tsx
@@ -52,7 +52,7 @@ const EditConfig = () => {
         </Row>
       </Form>
       <StickyFooter claim={Claim.ManageConfig}>
-        <BusyButton onClick={() => dispatch(updateConfig(state) as any)}>{t('save')}</BusyButton>
+        <BusyButton className="tst-btn-save" onClick={() => dispatch(updateConfig(state) as any)}>{t('save')}</BusyButton>
       </StickyFooter>
     </Container>
   );

diff --git a/frontend/src/components/consultant/EditConsultant.tsx b/frontend/src/components/consultant/EditConsultant.tsx
@@ -55,6 +55,7 @@ export const EditConsultant = () => {
       <StickyFooter claim={Claim.ManageConsultants}>
         <BusyButton
           onClick={() => dispatch(saveConsultant(consultant, undefined, history) as any)}
+          className="tst-btn-save"
           disabled={buttonDisabled}
         >
           {t('save')}

diff --git a/frontend/src/components/consultant/controls/ConsultantIconLinks.tsx b/frontend/src/components/consultant/controls/ConsultantIconLinks.tsx
@@ -20,6 +20,7 @@ export const ConsultantIconLinks = ({ consultant }: ConsultantProps) => {
         size={1}
         style={{ color: 'grey', marginRight: 8 }}
         onClick={() => setModal(true)}
+        className="tst-icon-link"
         fa="fa fa-external-link-alt"
       />
       <Link to={`/consultants/${consultant.slug}`} className="icon-link">

diff --git a/frontend/src/components/consultant/controls/ConsultantLinkWithModal.tsx b/frontend/src/components/consultant/controls/ConsultantLinkWithModal.tsx
@@ -39,6 +39,7 @@ export const ConsultantLinkWithModal = ({ consultant, showType }: ConsultantLink
       )}
 
       <Icon
+        className="tst-icon-link"
         title={t('consultant.openEditModal')}
         size={1}
         style={{ marginLeft: 8, color: 'grey', visibility: hover ? 'unset' : 'hidden' }}

diff --git a/frontend/src/components/consultant/controls/ConsultantSelect.tsx b/frontend/src/components/consultant/controls/ConsultantSelect.tsx
@@ -32,6 +32,7 @@ const ConsultantSelectComponent = ({value, onChange}: ConsultantSelectProps) =>
       onChange={((item: SelectItem) => onChange(item && item.value as string, item && getModel(item.value as string))) as any}
       isClearable
       placeholder={t('controls.selectPlaceholder')}
+      className="react-select-control"
       classNamePrefix="react-select"
     />
   );

diff --git a/frontend/src/components/controls/Icon.tsx b/frontend/src/components/controls/Icon.tsx
@@ -100,27 +100,27 @@ const IconComponent = ({fa, onClick, href, dispatch, className, label, labelStyl
 
 
 export const SpinnerIcon = ({...props}: IconProps) => (
-  <Icon fa="fa fa-spinner fa-pulse fa-fw" {...props} />
+  <Icon className="tst-icon-spinner" fa="fa fa-spinner fa-pulse fa-fw" {...props} />
 );
 
-export const AddIcon = ({...props}: IconProps) => <Icon fa="fa fa-plus" {...props} />;
+export const AddIcon = ({...props}: IconProps) => <Icon className="tst-icon-add" fa="fa fa-plus" {...props} />;
 
-export const DragAndDropIcon = ({...props}: IconProps) => <Icon fa="fa fa-arrows-alt" color="#EEE9E9" {...props} />;
+export const DragAndDropIcon = ({...props}: IconProps) => <Icon className="tst-icon-drag" fa="fa fa-arrows-alt" color="#EEE9E9" {...props} />;
 
-export const EditIcon = ({...props}: IconProps) => <Icon fa="far fa-edit" title={t('edit')} {...props} />;
+export const EditIcon = ({...props}: IconProps) => <Icon className="tst-icon-edit" fa="far fa-edit" title={t('edit')} {...props} />;
 
-export const ExpandIcon = ({...props}: IconProps) => <Icon fa="fa fa-expand-arrows-alt" {...props} />;
+export const ExpandIcon = ({...props}: IconProps) => <Icon className="tst-icon-expand" fa="fa fa-expand-arrows-alt" {...props} />;
 
 export const NotEmailedIcon = ({...props}) => (
   <span className="fa-stack fa-2x" {...props}>
-    <i className="fas fa-envelope fa-stack-1x" />
-    <Icon fa="fas fa-ban fa-stack-2x" size={1} title={t('email.notMailed')} color="#CC1100" />
+    <i className="fas fa-envelope fa-stack-1x tst-icon-not-emailed" />
+    <Icon className="tst-icon-fail" fa="fas fa-ban fa-stack-2x" size={1} title={t('email.notMailed')} color="#CC1100" />
   </span>
 );
 
 export const EmailedIcon = ({...props}) => (
   <Icon fa="fa-stack fa-2x" {...props}>
-    <i className="fas fa-envelope fa-stack-1x" />
-    <Icon fa="fas fa-check fa-stack-2x" size={1} color="green" />
+    <i className="fas fa-envelope fa-stack-1x tst-icon-emailed" />
+    <Icon className="tst-icon-check" fa="fas fa-check fa-stack-2x" size={1} color="green" />
   </Icon>
 );
diff --git a/frontend/src/components/controls/Popup.tsx b/frontend/src/components/controls/Popup.tsx
@@ -38,6 +38,7 @@ export class Popup extends Component<PopupProps> {
             const UsedButton = button.busy ? BusyButton : Button;
             return (
               <UsedButton
+                className="tst-btn-modal"
                 key={i}
                 variant={button.variant}
                 onClick={button.onClick}

diff --git a/frontend/src/components/controls/attachments/AttachmentDownloadIcon.tsx b/frontend/src/components/controls/attachments/AttachmentDownloadIcon.tsx
@@ -34,6 +34,7 @@ export const InvoicePreviewIcon = ({invoice, ...props}: InvoiceModelProps & Icon
       title={t(`${fileType}.viewPdf`)}
       href={url}
       fa="far fa-eye"
+      className="tst-icon-view"
       {...props}
     />
   );
@@ -63,5 +64,6 @@ export const AttachmentDownloadIcon = ({downloadUrl, attachment, ...props}: Atta
     {...props}
     href={downloadUrl}
     labelStyle={{fontSize: 16}}
+    className="tst-icon-file"
   />
 );
diff --git a/frontend/src/components/controls/attachments/AttachmentDropzone.tsx b/frontend/src/components/controls/attachments/AttachmentDropzone.tsx
@@ -46,7 +46,7 @@ export const AttachmentDropzone = (props: AttachmentDropzoneProps) => {
       {children || (
         <>
           <div className="icon">
-            <Icon fa="fa fa-file-upload" style={{marginRight: 8}} />
+            <Icon fa="fa fa-file-upload" className="tst-icon-dropzone" style={{marginRight: 8}} />
           </div>
           {file ? (
             <div className="info">

diff --git a/frontend/src/components/controls/email/EmailForm.tsx b/frontend/src/components/controls/email/EmailForm.tsx
@@ -42,7 +42,7 @@ export const EmailForm = ({value, onChange, attachmentsAvailable, textEditorRepl
         label={t('email.to')}
         placeholder={t('email.toPlaceholder')}
         suffix={(
-          <Button variant="outline-secondary" onClick={() => setShowAllTos(!showAllTos)} icon="fa fa-ellipsis-v" />
+          <Button variant="outline-secondary" className="tst-btn-toggle" onClick={() => setShowAllTos(!showAllTos)} icon="fa fa-ellipsis-v" />
         )}
         suffixOptions={{type: 'button'}}
       />
@@ -90,7 +90,7 @@ const EmailFormAttachments = ({expectedAttachments, attachmentsAvailable}: Email
       const isAvailable = attachmentsAvailable.some(a => a === attachment);
       return (
         <div key={attachment} className={isAvailable ? 'success' : 'danger'}>
-          <i className={isAvailable ? 'fa fa-check-circle' : 'fa fa-exclamation-circle'} />
+          <i className={isAvailable ? 'fa fa-check-circle tst-icon-check' : 'fa fa-exclamation-circle tst-icon-warning'} />
           <span>{attachment}</span>
         </div>
       );

diff --git a/frontend/src/components/controls/form-controls/button/LinkToButton.tsx b/frontend/src/components/controls/form-controls/button/LinkToButton.tsx
@@ -18,6 +18,6 @@ type LinkToButtonProps = EnhanceWithClaimProps & {
 export const LinkToButton = EnhanceWithClaim(({to, label, size, variant}: LinkToButtonProps) => (
   <Link to={to} className={`btn btn-${variant || 'light'} btn-${size || 'md'}`}>
     {t(label)}
-    <Icon fa="fa fa-arrow-right" size={1} style={{marginLeft: 8}} />
+    <Icon className="tst-btn-link" fa="fa fa-arrow-right" size={1} style={{marginLeft: 8}} />
   </Link>
 ));
diff --git a/frontend/src/components/controls/form-controls/button/NotesModalButton.tsx b/frontend/src/components/controls/form-controls/button/NotesModalButton.tsx
@@ -31,6 +31,7 @@ export const NotesModalButton = ({claim, value, onChange, title, variant, disabl
         title={text || t('projectMonth.addNote')}
         icon={icon}
         style={style}
+        className="tst-btn-note"
       />
       {open && (
         <Modal

diff --git a/frontend/src/components/controls/form-controls/button/UploadFileButton.tsx b/frontend/src/components/controls/form-controls/button/UploadFileButton.tsx
@@ -22,6 +22,7 @@ export const UploadFileButton = ({onUpload, title, buttonText, disabled, hasFile
       title={disabled ? undefined : title}
       icon="fa fa-upload"
       style={hasFile ? {borderTopRightRadius: 0, borderBottomRightRadius: 0} : undefined}
+      className="tst-btn-upload"
     >
       {buttonText && <span style={{marginLeft: 10}}>{buttonText}</span>}
     </Button>

diff --git a/frontend/src/components/controls/form-controls/button/ValidityToggleButton.tsx b/frontend/src/components/controls/form-controls/button/ValidityToggleButton.tsx
@@ -42,6 +42,7 @@ export const ValidityToggleButton = ({value, onChange, outline, title, disabled,
       icon={icon}
       title={tooltip}
       disabled={disabled}
+      className="tst-btn-validation"
       {...props}
     />
   );

diff --git a/frontend/src/components/controls/form-controls/inputs/ArrayInput.tsx b/frontend/src/components/controls/form-controls/inputs/ArrayInput.tsx
@@ -84,6 +84,7 @@ export const ArrayInput = ({config, model, onChange, tPrefix}: ArrayInputProps)
             onChange={(val: any) => realOnChange(val)}
             prefix={getAddix(prefix)}
             suffix={getAddix(suffix)}
+            className="tst-input-array"
             {...props}
             {...restProps}
           />

diff --git a/frontend/src/components/controls/form-controls/inputs/BaseInput.tsx b/frontend/src/components/controls/form-controls/inputs/BaseInput.tsx
@@ -19,14 +19,14 @@ export type BaseInputProps<T, TReturn = T> =
   & EnhanceInputWithLabelProps
   & EnhanceInputWithDisplayProps
   & {
-  type?: 'textarea' | 'text' | 'number',
-  onBlur?: (e: any) => void,
-  placeholder?: string,
-  style?: React.CSSProperties,
-  autoFocus?: boolean,
-  /** ATTN: Technical debt: leakage of the FormConfig */
-  updateOnly?: boolean,
-}
+    type?: 'textarea' | 'text' | 'number',
+    onBlur?: (e: any) => void,
+    placeholder?: string,
+    style?: React.CSSProperties,
+    autoFocus?: boolean,
+    /** ATTN: Technical debt: leakage of the FormConfig */
+    updateOnly?: boolean,
+  }
 
 // eslint-disable-next-line react/prefer-stateless-function
 export const BaseInput = EnhanceInputWithDisplay(EnhanceInputWithLabel(EnhanceInputWithAddons(class extends Component<BaseInputProps<any>> {
@@ -36,9 +36,11 @@ export const BaseInput = EnhanceInputWithDisplay(EnhanceInputWithLabel(EnhanceIn
       <FormControl
         type={type === 'textarea' ? 'text' : type}
         as={type === 'textarea' ? 'textarea' : undefined}
-        className={type === 'textarea' ? 'textarea' : undefined}
+        className={type === 'textarea' ? 'textarea' :'tst-input-base'}
         {...props}
       />
     );
   }
 })));
+
+
diff --git a/frontend/src/components/controls/form-controls/inputs/BtwInput.tsx b/frontend/src/components/controls/form-controls/inputs/BtwInput.tsx
@@ -93,11 +93,11 @@ const BtwInputComponent = ({value, onChange, onBtwChange, onFinalize, ...props}:
       label={undefined}
       value={inputValue}
       onChange={onInputChange}
-      prefix={<Icon fa={cn('fa', (loading ? 'fa-spinner fa-spin' : 'fa-building'), (valid ? 'success' : 'danger'))} size={1} />}
+      prefix={<Icon fa={cn('fa', (loading ? 'fa-spinner fa-spin tst-icon-spinner' : 'fa-building tst-icon-building'), (valid ? 'success' : 'danger'))} size={1} />}
       suffix={onFinalize && (
         <>
-          <Button variant="outline-secondary" onClick={() => onFinalize(BtwInRequest, btwRes)}>{BtwInRequest}</Button>
-          <Button variant="success" onClick={() => onFinalize(formattedBtw, btwRes)}>{t('client.createNewButton')}</Button>
+          <Button className="tst-btn-submitted" variant="outline-secondary" onClick={() => onFinalize(BtwInRequest, btwRes)}>{BtwInRequest}</Button>
+          <Button className="tst-btn-add" variant="success" onClick={() => onFinalize(formattedBtw, btwRes)}>{t('client.createNewButton')}</Button>
         </>
       )}
       suffixOptions={{type: 'button'}}

diff --git a/frontend/src/components/controls/form-controls/inputs/CheckboxInput.tsx b/frontend/src/components/controls/form-controls/inputs/CheckboxInput.tsx
@@ -12,6 +12,7 @@ export const CheckboxInput = ({value, label, onChange, ...props}: CheckboxInputP
       <input
         type="checkbox"
         checked={value || false}
+        className="tst-input-check"
         onChange={evt => onChange(evt.target.checked)}
         {...props}
       />

diff --git a/frontend/src/components/controls/form-controls/inputs/EmailInput.tsx b/frontend/src/components/controls/form-controls/inputs/EmailInput.tsx
@@ -14,7 +14,7 @@ export const EmailInput = ({value, onChange, ...props}: EmailInputProps) => (
     suffix={(
       <InputGroup.Text>
         <a href={`mailto:${value}`} target="_blank" rel="noopener noreferrer">
-          <Icon fa="fa fa-envelope" size={1} />
+          <Icon className="tst-icon-mail" fa="fa fa-envelope" size={1} />
         </a>
       </InputGroup.Text>
     )}

diff --git a/frontend/src/components/controls/form-controls/inputs/IbanInput.tsx b/frontend/src/components/controls/form-controls/inputs/IbanInput.tsx
@@ -16,7 +16,7 @@ export const IbanInput = ({value, onChange, ...props}: IbanInputProps) => {
       onBlur={() => onChange(Iban.printFormat(value || '', ' '))}
       {...props}
       suffix={(
-        <Icon fa="fa fa-piggy-bank" size={1} className={(isValid ? 'success' : 'danger')} />
+        <Icon fa="fa fa-piggy-bank" size={1} className={(isValid ? 'success' : 'danger') + ' tst-icon-validation'} />
       )}
       suffixOptions={{type: 'text'}}
     />

diff --git a/frontend/src/components/controls/form-controls/inputs/PhoneInput.tsx b/frontend/src/components/controls/form-controls/inputs/PhoneInput.tsx
@@ -14,7 +14,7 @@ export const PhoneInput = ({value, onChange, ...props}: PhoneInputProps) => (
     suffix={(
       <InputGroup.Text>
         <a href={`tel:${(value || '').replace(/[^0-9]/g, '')}`}>
-          <Icon fa="fa fa-phone" size={1} />
+          <Icon className="tst-icon-phone" fa="fa fa-phone" size={1} />
         </a>
       </InputGroup.Text>
       )}

diff --git a/frontend/src/components/controls/form-controls/inputs/SearchStringInput.tsx b/frontend/src/components/controls/form-controls/inputs/SearchStringInput.tsx
@@ -10,7 +10,7 @@ export const SearchStringInput = ({value, onChange, ...props}: SearchStringInput
   <StringInput
     value={value}
     onChange={(e: string) => onChange(e)}
-    suffix={<Icon fa="fa fa-search" size={1} />}
+    suffix={<Icon className="tst-icon-search" fa="fa fa-search" size={1} />}
     placeholder={t('search')}
     autoFocus
     {...props}

diff --git a/frontend/src/components/controls/form-controls/inputs/WebsiteInput.tsx b/frontend/src/components/controls/form-controls/inputs/WebsiteInput.tsx
@@ -22,7 +22,7 @@ export const WebsiteInput = ({value, onChange, ...props}: WebsiteInputProps) =>
     suffix={(
       <InputGroup.Text>
         <a href={addProtocol(value)} target="_blank" rel="noopener noreferrer">
-          <Icon fa="fa fa-globe" size={1} />
+          <Icon className="tst-icon-website" fa="fa fa-globe" size={1} />
         </a>
       </InputGroup.Text>
     )}