Toast fix

Author: PatrikMatiasko

src/common/services/fetch-api.js

@@ -1,7 +1,8 @@
 import axios from 'axios'
+import isFunction from 'lodash/isFunction'
+
 import { security } from './security'
 import { clientAppSettings } from './client-app-settings'
-import isFunction from 'lodash/isFunction'
 import { hasDifferentOwner } from './api-utils'
 
 // Time needed to cancel the request

src/components/Atomic/Editor/Editor.styles.ts

@@ -1,10 +1,11 @@
 import { css } from '@emotion/react'
+
 import { colors } from '../_utils/colors'
 import { ThemeType, get } from '../_theme'
 import { fontPrimary } from '../_utils/commonStyles'
 
 export const editor = (theme: ThemeType) => css`
-    //max-height: 80%;
+    position: relative;
 
     &.disabled:after {
         //display: none;
@@ -75,6 +76,8 @@ export const editor = (theme: ThemeType) => css`
 `
 
 export const fullSizeBtn = (theme: ThemeType) => css`
+    display: flex;
+    align-items: center;
     position: absolute;
     top: 12px;
     right: 12px;

src/components/Atomic/Editor/Editor.tsx

@@ -1,11 +1,12 @@
 // @ts-nocheck
 import React, { FC, MutableRefObject, useEffect, useRef, useState } from 'react'
-import { defaultProps, Props } from './Editor.types'
-import * as styles from './Editor.styles'
 import classNames from 'classnames'
 import JSONEditor from 'jsoneditor'
 import 'jsoneditor/dist/jsoneditor.css'
 import isFunction from 'lodash/isFunction'
+
+import { defaultProps, Props } from './Editor.types'
+import * as styles from './Editor.styles'
 import IconShowPassword from '../Icon/components/IconShowPassword'
 
 const Editor: FC<Props> = (props) => {

src/components/Atomic/FormSelect/FormSelect.types.ts

@@ -24,6 +24,7 @@ export type Props = {
     inlineStyle?: boolean
     isSearchable?: boolean
     menuIsOpen?: boolean
+    menuPortalTarget?: HTMLElement | null
     name?: string
     onChange?: (v: any) => void
     options: Option[]

src/components/Atomic/Notification/ToastContainer.styles.ts

@@ -1,9 +1,8 @@
 import { css } from '@emotion/react'
 import { get, ThemeType } from '../_theme'
 
-export const test = (theme: ThemeType) => css`
+export const toastGlobal = (theme: ThemeType) => css`
     .plgd-toast {
         background: ${get(theme, 'Toast.background')};
-        border: 1px solid ${get(theme, 'Toast.borderColor')};
     }
 `

src/components/Atomic/Notification/ToastContainer.tsx

@@ -13,7 +13,7 @@ const ToastContainer = (props: Props) => {
             hideProgressBar
             newestOnTop
             autoClose={TOAST_HIDE_TIME}
-            css={styles.test}
+            css={styles.toastGlobal}
             icon={false}
             limit={MAX_NUMBER_OF_VISIBLE_TOASTS}
             pauseOnFocusLoss={false}

src/components/Atomic/Notification/constants.ts

@@ -11,7 +11,6 @@ export const toastVariants = {
 } as const
 
 export const DEFAULT_CONTAINER_ID = 'default-container'
-export const ERROR_CONTAINER_ID = 'error-container'
 
 export const TOAST_HIDE_TIME = 5000
 

src/components/Atomic/PageLoader/PageLoader.scss

@@ -1,26 +1,7 @@
 @import '../../../common/styles/colors';
 @import '../../../common/styles/sizes';
 
-@keyframes increase {
-  from {
-    left: -5%;
-    width: 5%;
-  }
-  to {
-    left: 130%;
-    width: 100%;
-  }
-}
-@keyframes decrease {
-  from {
-    left: -80%;
-    width: 80%;
-  }
-  to {
-    left: 110%;
-    width: 10%;
-  }
-}
+
 
 #page-loader {
   position: fixed;

src/components/Atomic/PageLoader/PageLoader.styles.ts

@@ -0,0 +1,59 @@
+import { css, keyframes } from '@emotion/react'
+import { ThemeType, get } from '../_theme'
+
+const increase = keyframes`
+  from {
+    left: -5%;
+    width: 5%;
+  }
+  to {
+    left: 130%;
+    width: 100%;
+  }
+`
+
+const decrease = keyframes`
+  from {
+    left: -80%;
+    width: 80%;
+  }
+  to {
+    left: 110%;
+    width: 10%;
+  }
+`
+
+export const pageLoader = css`
+    position: fixed;
+    top: 85px;
+    right: 0;
+    width: 100%;
+    z-index: 9;
+`
+
+export const bar = css`
+    width: 100%;
+    height: 5px;
+    overflow: hidden;
+    position: relative;
+`
+
+export const progress = css`
+    width: 100%;
+    height: 5px;
+    background-color: transparent;
+`
+
+export const subline = (theme: ThemeType) => css`
+    position: absolute;
+    background-color: ${get(theme, `PageLoader.bar.background`)};
+    height: 5px;
+`
+
+export const inc = css`
+    animation: ${increase} 2s infinite;
+`
+
+export const dec = css`
+    animation: ${decrease} 2s 0.5s infinite;
+`

src/components/Atomic/PageLoader/PageLoader.tsx

@@ -1,13 +1,15 @@
 import { FC, memo } from 'react'
+
 import { Props } from './PageLoader.types'
+import * as styles from './PageLoader.styles'
 
 const PageLoader: FC<Props> = memo(({ loading, className }) =>
     loading ? (
-        <div id='page-loader' role='alert' aria-busy='true' className={className}>
-            <div className='bar'>
-                <div className='progress'>
-                    <div className='subline inc' />
-                    <div className='subline dec' />
+        <div aria-busy='true' className={className} css={styles.pageLoader} role='alert'>
+            <div css={styles.bar}>
+                <div css={styles.progress}>
+                    <div css={[styles.subline, styles.inc]} />
+                    <div css={[styles.subline, styles.dec]} />
                 </div>
             </div>
         </div>