fix(frontend): replace styled-components/macro with styled-components (…

…#130)

nesis/frontend/client/src/App.js

@@ -1,4 +1,4 @@
-import styled from 'styled-components/macro';
+import styled from 'styled-components';
 import './App.css';
 import { Route, Switch } from 'react-router-dom';
 import SignInPage from './pages/SignInPage';

nesis/frontend/client/src/components/FormControls.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import SquareButton, { LightSquareButton } from './inputs/SquareButton';
-import styled from 'styled-components/macro';
+import styled from 'styled-components';
 import { device } from '../utils/breakpoints';
 
 const Container = styled.div`

nesis/frontend/client/src/components/Menu.js

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import styled from 'styled-components/macro';
+import styled from 'styled-components';
 import { NavLink } from 'react-router-dom';
 import { device } from '../utils/breakpoints';
 import { useSignOut } from '../SessionContext';

nesis/frontend/client/src/components/MenuHeader.js

@@ -4,7 +4,7 @@ import { PersonCircle, QuestionSquare } from 'react-bootstrap-icons';
 import { useCurrentSession, useSignOut } from '../SessionContext';
 import { ReactComponent as Hamburger } from '../images/Hamburger.svg';
 import { ReactComponent as Logo } from '../images/Nesis.svg';
-import styled from 'styled-components/macro';
+import styled from 'styled-components';
 import { device } from '../utils/breakpoints';
 import client from '../utils/httpClient';
 import { useConfig } from '../ConfigContext';

nesis/frontend/client/src/components/MessageRow.js

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import styled from 'styled-components/macro';
+import styled from 'styled-components';
 import { ReactComponent as AttentionSign } from '../images/AttentionSign.svg';
 import { ReactComponent as CloseMessageIcon } from '../images/CloseMessageIcon.svg';
 import { device } from '../utils/breakpoints';

nesis/frontend/client/src/components/Modal.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactModal from 'react-modal';
-import styled from 'styled-components/macro';
+import styled from 'styled-components';
 import { ReactComponent as CloseIcon } from '../images/CloseIcon.svg';
 import { device } from '../utils/breakpoints';
 

nesis/frontend/client/src/components/PaginationRow.js

@@ -1,4 +1,4 @@
-import styled from 'styled-components/macro';
+import styled from 'styled-components';
 import { ReactComponent as ChevronRight } from '../images/ChevronRight.svg';
 import React, { useMemo, useRef, useState } from 'react';
 import { countTotalPages, paginateList } from '../utils/paginationUtils';

nesis/frontend/client/src/components/Spinner.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'styled-components/macro';
+import styled from 'styled-components';
 
 const Wrapper = styled.div`
   display: flex;

nesis/frontend/client/src/components/StatusIcon.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'styled-components/macro';
+import styled from 'styled-components';
 
 const Main = styled.span`
   margin-right: 4px;

nesis/frontend/client/src/components/Table.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'styled-components/macro';
+import styled from 'styled-components';
 import Spinner from './Spinner';
 import SortIndicator from './table/SortIndicator';
 import { ReactComponent as BinIcon } from '../images/BinIcon.svg';

nesis/frontend/client/src/components/form/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'styled-components/macro';
+import styled from 'styled-components';
 import { ErrorMessage, Field } from 'formik';
 import TextInput from '../inputs/TextInput';
 import ReactSelectStyled from '../inputs/Select';

nesis/frontend/client/src/components/inputs/Checkbox.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'styled-components/macro';
+import styled from 'styled-components';
 
 const Wrapper = styled.div`
   display: flex;

nesis/frontend/client/src/components/inputs/Select.js

@@ -1,4 +1,4 @@
-import styled from 'styled-components/macro';
+import styled from 'styled-components';
 import Select from 'react-select';
 import React from 'react';
 

nesis/frontend/client/src/components/inputs/SquareButton.js

@@ -1,4 +1,4 @@
-import styled from 'styled-components/macro';
+import styled from 'styled-components';
 
 const SquareButton = styled.button`
   color: ${(props) => props.theme.white};

nesis/frontend/client/src/components/inputs/TextInput.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import styled, { css } from 'styled-components/macro';
+import styled, { css } from 'styled-components';
 
 export const LabelPosition = {
   ON_INPUT_BORDER: 'ON_INPUT_BORDER',

nesis/frontend/client/src/components/layout/AttributeField.js

@@ -1,4 +1,4 @@
-import styled from 'styled-components/macro';
+import styled from 'styled-components';
 import React from 'react';
 
 const ResourceFieldTitle = styled.div`

nesis/frontend/client/src/components/layout/FormRow.js

@@ -1,4 +1,4 @@
-import styled from 'styled-components/macro';
+import styled from 'styled-components';
 import { device } from '../../utils/breakpoints';
 
 const FormRow = styled.span`

nesis/frontend/client/src/components/layout/FullPageFormContainer.js

@@ -1,4 +1,4 @@
-import styled from 'styled-components/macro';
+import styled from 'styled-components';
 import { device } from '../../utils/breakpoints';
 
 const FullPageFormContainer = styled.div`

nesis/frontend/client/src/components/layout/MobileListItem.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import styled, { css } from 'styled-components/macro';
+import styled, { css } from 'styled-components';
 import useStateToggle from '../../utils/useStateToggle';
 import { ReactComponent as ChevronRight } from '../../images/ChevronRight.svg';
 import { device } from '../../utils/breakpoints';

nesis/frontend/client/src/components/layout/ResponsiveAddButton.js

@@ -1,4 +1,4 @@
-import styled from 'styled-components/macro';
+import styled from 'styled-components';
 import { ReactComponent as AddIcon } from '../../images/AddIcon.svg';
 import { device } from '../../utils/breakpoints';
 import SquareButton, { LightSquareButton } from '../inputs/SquareButton';

nesis/frontend/client/src/components/layout/Tabs.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'styled-components/macro';
+import styled from 'styled-components';
 import { useHistory, matchPath } from 'react-router-dom';
 
 const Main = styled.div`

nesis/frontend/client/src/components/layout/TwoColumnsContent.js

@@ -1,4 +1,4 @@
-import styled from 'styled-components/macro';
+import styled from 'styled-components';
 import { device } from '../../utils/breakpoints';
 
 const TwoColumnsContent = styled.div`

nesis/frontend/client/src/components/table/SearchInput.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'styled-components/macro';
+import styled from 'styled-components';
 import TextInput from '../inputs/TextInput';
 import { ReactComponent as SearchIcon } from './SearchIcon.svg';
 

nesis/frontend/client/src/components/table/SortIndicator.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'styled-components/macro';
+import styled from 'styled-components';
 import { ReactComponent as Ascending } from './Ascending.svg';
 import { ReactComponent as Descending } from './Descending.svg';
 import { ReactComponent as NoSortedBy } from './NoSortedBy.svg';

nesis/frontend/client/src/components/useConfirmationModal.js

@@ -4,7 +4,7 @@ import SquareButton, { DangerSquareButton } from './inputs/SquareButton';
 import Modal, { ButtonsContainer, ModalTitle } from './Modal';
 import parseApiErrorMessage from '../utils/parseApiErrorMessage';
 import MessageRow from '../components/MessageRow';
-import styled from 'styled-components/macro';
+import styled from 'styled-components';
 
 const CancelButton = styled(SquareButton)`
   background-color: ${(props) => props.theme.primaryLight};

nesis/frontend/client/src/index.js

@@ -3,7 +3,7 @@ import { createRoot } from 'react-dom/client';
 import './index.css';
 import App from './App';
 import { BrowserRouter as Router, Route } from 'react-router-dom';
-import { ThemeProvider } from 'styled-components/macro';
+import { ThemeProvider } from 'styled-components';
 import theme from './utils/theme';
 import { SessionProvider } from './SessionContext';
 import { ToasterContextProvider } from './ToasterContext';

nesis/frontend/client/src/pages/DocumentGPT/ChatPage.js

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { useHistory, Route, Switch, useRouteMatch } from 'react-router-dom';
 import Nesis from '../../components/Menu';
-import styled from 'styled-components/macro';
+import styled from 'styled-components';
 import { FileEarmarkPost } from 'react-bootstrap-icons';
 import {
   Box,

nesis/frontend/client/src/pages/Settings/Apps/AppDetailPage.js

@@ -11,7 +11,7 @@ import { useAddToast } from '../../../ToasterContext';
 import { ModalTitle } from '../../../components/Modal';
 import MessageRow from '../../../components/MessageRow';
 import Table from '../../../components/Table';
-import styled from 'styled-components/macro';
+import styled from 'styled-components';
 
 const StyledTable = styled(Table)``;
 

nesis/frontend/client/src/pages/Settings/Apps/AppsPage.js

@@ -4,7 +4,7 @@ import {
   OutlinedSquareButton,
   EditOutlinedSquareButton,
 } from '../../../components/inputs/SquareButton';
-import styled from 'styled-components/macro';
+import styled from 'styled-components';
 import { device } from '../../../utils/breakpoints';
 import Table, { DeleteItemButton } from '../../../components/Table';
 import { useHistory, useRouteMatch, useLocation } from 'react-router-dom';

nesis/frontend/client/src/pages/Settings/Datasources/DatasourcesDetailPage.js

@@ -11,7 +11,7 @@ import { ModalTitle } from '../../../components/Modal';
 import MessageRow from '../../../components/MessageRow';
 import FormRow, { Column } from '../../../components/layout/FormRow';
 import Table, { DeleteItemButton } from '../../../components/Table';
-import styled from 'styled-components/macro';
+import styled from 'styled-components';
 import { device } from '../../../utils/breakpoints';
 import { func } from 'prop-types';
 

nesis/frontend/client/src/pages/Settings/Datasources/DatasourcesPage.js

@@ -4,7 +4,7 @@ import {
   OutlinedSquareButton,
   EditOutlinedSquareButton,
 } from '../../../components/inputs/SquareButton';
-import styled from 'styled-components/macro';
+import styled from 'styled-components';
 import { device } from '../../../utils/breakpoints';
 import Table, { DeleteItemButton } from '../../../components/Table';
 import { useHistory, useRouteMatch } from 'react-router-dom';

nesis/frontend/client/src/pages/Settings/Documents/DocumentsDetailPage.js

@@ -11,7 +11,7 @@ import { ModalTitle } from '../../../components/Modal';
 import MessageRow from '../../../components/MessageRow';
 import FormRow, { Column } from '../../../components/layout/FormRow';
 import Table, { DeleteItemButton } from '../../../components/Table';
-import styled from 'styled-components/macro';
+import styled from 'styled-components';
 import { device } from '../../../utils/breakpoints';
 
 const EngineOptions = [

nesis/frontend/client/src/pages/Settings/Documents/DocumentsPage.js

@@ -3,7 +3,7 @@ import {
   LightSquareButton,
   OutlinedSquareButton,
 } from '../../../components/inputs/SquareButton';
-import styled from 'styled-components/macro';
+import styled from 'styled-components';
 import { device } from '../../../utils/breakpoints';
 import Table, { DeleteItemButton } from '../../../components/Table';
 import { useHistory, useRouteMatch } from 'react-router-dom';

nesis/frontend/client/src/pages/Settings/Roles/RoleDetailPage.js

@@ -12,7 +12,7 @@ import { ModalTitle } from '../../../components/Modal';
 import MessageRow from '../../../components/MessageRow';
 import FormRow, { Column } from '../../../components/layout/FormRow';
 import Table, { DeleteItemButton } from '../../../components/Table';
-import styled from 'styled-components/macro';
+import styled from 'styled-components';
 import { device } from '../../../utils/breakpoints';
 
 const EngineOptions = [

nesis/frontend/client/src/pages/Settings/Roles/RolesPage.js

@@ -4,7 +4,7 @@ import {
   OutlinedSquareButton,
   EditOutlinedSquareButton,
 } from '../../../components/inputs/SquareButton';
-import styled from 'styled-components/macro';
+import styled from 'styled-components';
 import { device } from '../../../utils/breakpoints';
 import Table, { DeleteItemButton } from '../../../components/Table';
 import { useHistory, useRouteMatch, useLocation } from 'react-router-dom';

nesis/frontend/client/src/pages/Settings/SettingPage.js

@@ -7,7 +7,7 @@ import UsersPage from './Users/UsersPage';
 import RolesPage from './Roles/RolesPage';
 import AppsPage from './Apps/AppsPage';
 import Nesis from '../../components/Menu';
-import styled from 'styled-components/macro';
+import styled from 'styled-components';
 
 const Heading = styled.h1`
   background-image: linear-gradient(to right, #089fdf 21%, #5dd375 100%);

nesis/frontend/client/src/pages/Settings/Users/UserDetailPage.js

@@ -11,7 +11,7 @@ import { ModalTitle } from '../../../components/Modal';
 import MessageRow from '../../../components/MessageRow';
 import FormRow, { Column } from '../../../components/layout/FormRow';
 import Table, { DeleteItemButton } from '../../../components/Table';
-import styled from 'styled-components/macro';
+import styled from 'styled-components';
 import { device } from '../../../utils/breakpoints';
 import { Field } from 'formik';
 

nesis/frontend/client/src/pages/Settings/Users/UsersPage.js

@@ -4,7 +4,7 @@ import {
   OutlinedSquareButton,
   EditOutlinedSquareButton,
 } from '../../../components/inputs/SquareButton';
-import styled from 'styled-components/macro';
+import styled from 'styled-components';
 import { device } from '../../../utils/breakpoints';
 import Table, { DeleteItemButton } from '../../../components/Table';
 import { useHistory, useRouteMatch, useLocation } from 'react-router-dom';

nesis/frontend/client/src/utils/buttonStyles.js

@@ -1,5 +1,5 @@
 import { device } from './breakpoints';
-import { css } from 'styled-components/macro';
+import { css } from 'styled-components';
 
 export const ButtonColor = {
   Primary: {