Merge pull request #666 from smiclea/folder-restructure

Move from “Atomic” to a “Modular” design pattern

.storybook/preview.js

@@ -2,24 +2,23 @@ import React from 'react'
 import { addDecorator } from '@storybook/react'
 import styled, { createGlobalStyle } from 'styled-components'
 
-import Palette from '../src/components/styleUtils/Palette'
-import StyleProps from '../src/components/styleUtils/StyleProps'
+import { ThemePalette, ThemeProps } from '../src/components/Theme'
 import Fonts from '../src/components/atoms/Fonts'
 import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
 
 const Wrapper = styled.div`
   display: inline-block;
-  background: ${Palette.grayscale[7]};
+  background: ${ThemePalette.grayscale[7]};
   padding: 32px;
 `
 
 const GlobalStyle = createGlobalStyle`
   ${Fonts}
   body {
-    color: ${Palette.black};
+    color: ${ThemePalette.black};
     font-family: Rubik;
     font-size: 14px;
-    font-weight: ${StyleProps.fontWeights.regular};
+    font-weight: ${ThemeProps.fontWeights.regular};
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }

src/@types/Field.ts

@@ -12,7 +12,7 @@ You should have received a copy of the GNU Affero General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { OptionsSchemaPlugin } from '../plugins/endpoint'
+import { OptionsSchemaPlugin } from '../plugins'
 import LabelDictionary from '../utils/LabelDictionary'
 import { ProviderTypes } from './Providers'
 

src/components/App.tsx

@@ -18,36 +18,35 @@ import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
 import styled, { createGlobalStyle } from 'styled-components'
 import { observe } from 'mobx'
 
-import Fonts from './atoms/Fonts'
-import Notifications from './organisms/Notifications'
-import LoginPage from './pages/LoginPage'
-import ReplicasPage from './pages/ReplicasPage'
-import MessagePage from './pages/MessagePage'
-import ReplicaDetailsPage from './pages/ReplicaDetailsPage'
-import MigrationsPage from './pages/MigrationsPage'
-import MigrationDetailsPage from './pages/MigrationDetailsPage'
-import EndpointsPage from './pages/EndpointsPage'
-import EndpointDetailsPage from './pages/EndpointDetailsPage'
-import WizardPage from './pages/WizardPage'
+import Fonts from './ui/Fonts'
+import NotificationsModule from './modules/NotificationsModule'
+import LoginPage from './smart/LoginPage'
+import ReplicasPage from './smart/ReplicasPage'
+import MessagePage from './smart/MessagePage'
+import ReplicaDetailsPage from './smart/ReplicaDetailsPage'
+import MigrationsPage from './smart/MigrationsPage'
+import MigrationDetailsPage from './smart/MigrationDetailsPage'
+import EndpointsPage from './smart/EndpointsPage'
+import EndpointDetailsPage from './smart/EndpointDetailsPage'
+import WizardPage from './smart/WizardPage'
 import userStore from '../stores/UserStore'
-import AssessmentsPage from './pages/AssessmentsPage'
-import AssessmentDetailsPage from './pages/AssessmentDetailsPage'
-import UsersPage from './pages/UsersPage'
-import UserDetailsPage from './pages/UserDetailsPage'
-import ProjectsPage from './pages/ProjectsPage'
-import ProjectDetailsPage from './pages/ProjectDetailsPage'
-import DashboardPage from './pages/DashboardPage'
-import LogsPage from './pages/LogsPage'
-import LogStreamPage from './pages/LogStreamPage'
-
-import Tooltip from './atoms/Tooltip/Tooltip'
+import AssessmentsPage from './smart/AssessmentsPage'
+import AssessmentDetailsPage from './smart/AssessmentDetailsPage'
+import UsersPage from './smart/UsersPage'
+import UserDetailsPage from './smart/UserDetailsPage'
+import ProjectsPage from './smart/ProjectsPage'
+import ProjectDetailsPage from './smart/ProjectDetailsPage'
+import DashboardPage from './smart/DashboardPage'
+import LogsPage from './smart/LogsPage'
+import LogStreamPage from './smart/LogStreamPage'
+
+import Tooltip from './ui/Tooltip/Tooltip'
 
 import { navigationMenu } from '../constants'
-import Palette from './styleUtils/Palette'
-import StyleProps from './styleUtils/StyleProps'
 import configLoader from '../utils/Config'
-import MinionPoolsPage from './pages/MinionPoolsPage/MinionPoolsPage'
-import MinionPoolDetailsPage from './pages/MinionPoolDetailsPage/MinionPoolDetailsPage'
+import MinionPoolsPage from './smart/MinionPoolsPage/MinionPoolsPage'
+import MinionPoolDetailsPage from './smart/MinionPoolDetailsPage/MinionPoolDetailsPage'
+import { ThemePalette, ThemeProps } from './Theme'
 
 const GlobalStyle = createGlobalStyle`
  ${Fonts}
@@ -59,10 +58,10 @@ const GlobalStyle = createGlobalStyle`
   }
   body {
     margin: 0;
-    color: ${Palette.black};
+    color: ${ThemePalette.black};
     font-family: Rubik;
     font-size: 14px;
-    font-weight: ${StyleProps.fontWeights.regular};
+    font-weight: ${ThemeProps.fontWeights.regular};
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
@@ -202,7 +201,7 @@ class App extends React.Component<{}, State> {
             <Route component={MessagePage} />
           </Switch>
         </Router>
-        <Notifications />
+        <NotificationsModule />
         <Tooltip />
       </Wrapper>
     )

src/components/styleUtils/StyleProps.ts → src/components/Theme.ts

@@ -1,5 +1,5 @@
 /*
-Copyright (C) 2017  Cloudbase Solutions SRL
+Copyright (C) 2021  Cloudbase Solutions SRL
 This program is free software: you can redistribute it and/or modify
 it under the terms of the GNU Affero General Public License as
 published by the Free Software Foundation, either version 3 of the
@@ -14,7 +14,39 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { css } from 'styled-components'
 
-const StyleProps = {
+const exactWidth = (width: string) => css`
+  min-width: ${width};
+  max-width: ${width};
+`
+
+const exactHeight = (height: string) => css`
+  min-height: ${height};
+  max-height: ${height};
+`
+
+export const ThemePalette = {
+  primary: '#0044CB',
+  primaryLight: '#000EA9',
+  secondary: '#D9DCE3',
+  secondaryLight: '#777A8B',
+  black: '#202134',
+  alert: '#F91661',
+  success: '#4CD964',
+  warning: '#FDC02F',
+  grayscale: [
+    '#D8DBE2', // 0
+    '#ECEDF1', // 1
+    '#C8CCD7', // 2
+    '#A4AAB5', // 3
+    '#616770', // 4
+    '#7F8795', // 5
+    '#1B2733', // 6
+    '#F2F3F4', // 7
+    '#858B93', // 8
+  ],
+}
+
+export const ThemeProps = {
   fontWeights: {
     extraLight: 200,
     light: 300,
@@ -36,37 +68,27 @@ const StyleProps = {
   animations: {
     swift: '.45s cubic-bezier(0.3, 1, 0.4, 1) 0s',
     rotation: css`
-      animation: rotate 2s infinite linear;
-      @keyframes rotate {
-        from {transform: rotate(0deg);}
-        to {transform: rotate(360deg);}
-      }
-    `,
+        animation: rotate 2s infinite linear;
+        @keyframes rotate {
+          from {transform: rotate(0deg);}
+          to {transform: rotate(360deg);}
+        }
+      `,
     disabledLoading: css`
-      animation: opacityToggle 750ms linear infinite alternate-reverse;
-      @keyframes opacityToggle {
-        0% {opacity: 1;}
-        100% {opacity: 0.3;}
-      }
-    `,
+        animation: opacityToggle 750ms linear infinite alternate-reverse;
+        @keyframes opacityToggle {
+          0% {opacity: 1;}
+          100% {opacity: 0.3;}
+        }
+      `,
   },
 
   mobileMaxWidth: 1350,
 
-  exactWidth: (width: string) => css`
-    min-width: ${width};
-    max-width: ${width};
-  `,
-
-  exactHeight: (height: string) => css`
-    min-height: ${height};
-    max-height: ${height};
-  `,
-
+  exactWidth,
+  exactHeight,
   exactSize: (size: string) => css`
-    ${StyleProps.exactWidth(size)}
-    ${StyleProps.exactHeight(size)}
-  `,
+      ${exactWidth(size)}
+      ${exactHeight(size)}
+    `,
 }
-
-export default StyleProps

src/components/molecules/AssessedVmListItem/AssessedVmListItem.tsx → src/components/modules/AssessmentModule/AssessedVmListItem/AssessedVmListItem.tsx

@@ -16,12 +16,11 @@ import React from 'react'
 import { observer } from 'mobx-react'
 import styled, { css } from 'styled-components'
 
-import Checkbox from '../../atoms/Checkbox'
-import InfoIcon from '../../atoms/InfoIcon'
-import DropdownLink from '../DropdownLink'
-import type { VmItem } from '../../../@types/Assessment'
-
-import Palette from '../../styleUtils/Palette'
+import Checkbox from '../../../ui/Checkbox/Checkbox'
+import InfoIcon from '../../../ui/InfoIcon/InfoIcon'
+import DropdownLink from '../../../ui/Dropdowns/DropdownLink/DropdownLink'
+import type { VmItem } from '../../../../@types/Assessment'
+import { ThemePalette } from '../../../Theme'
 
 const Wrapper = styled.div<any>`
   position: relative;
@@ -46,7 +45,7 @@ const DisplayName = styled.div<any>`
   ${(props: any) => columnWidth(props.width)}
 `
 const Value = styled.div<any>`
-  color: ${Palette.grayscale[4]};
+  color: ${ThemePalette.grayscale[4]};
   ${(props: any) => columnWidth(props.width)}
 `
 const DisplayNameLabel = styled.div<any>`

src/components/organisms/AssessmentDetailsContent/AssessmentDetailsContent.tsx → src/components/modules/AssessmentModule/AssessmentDetailsContent/AssessmentDetailsContent.tsx

@@ -17,25 +17,24 @@ import styled, { css } from 'styled-components'
 import moment from 'moment'
 import { observer } from 'mobx-react'
 
-import DetailsNavigation from '../../molecules/DetailsNavigation'
-import Button from '../../atoms/Button'
-import StatusImage from '../../atoms/StatusImage'
-import DropdownLink from '../../molecules/DropdownLink'
-import Table from '../../molecules/Table'
-import AssessedVmListItem from '../../molecules/AssessedVmListItem'
-import DropdownFilter from '../../molecules/DropdownFilter'
-import Checkbox from '../../atoms/Checkbox'
-import SmallLoading from '../../atoms/SmallLoading'
-
-import Palette from '../../styleUtils/Palette'
-import StyleProps from '../../styleUtils/StyleProps'
-import type { Assessment, VmItem, AzureLocation } from '../../../@types/Assessment'
-import type { Endpoint } from '../../../@types/Endpoint'
-import type { Instance, Nic } from '../../../@types/Instance'
-import type { Network, NetworkMap } from '../../../@types/Network'
+import DetailsNavigation from '../../NavigationModule/DetailsNavigation/DetailsNavigation'
+import Button from '../../../ui/Button/Button'
+import StatusImage from '../../../ui/StatusComponents/StatusImage/StatusImage'
+import DropdownLink from '../../../ui/Dropdowns/DropdownLink/DropdownLink'
+import Table from '../../../ui/Table/Table'
+import AssessedVmListItem from '../AssessedVmListItem/AssessedVmListItem'
+import DropdownFilter from '../../../ui/Dropdowns/DropdownFilter/DropdownFilter'
+import Checkbox from '../../../ui/Checkbox/Checkbox'
+import SmallLoading from '../../../ui/SmallLoading/SmallLoading'
+
+import type { Assessment, VmItem, AzureLocation } from '../../../../@types/Assessment'
+import type { Endpoint } from '../../../../@types/Endpoint'
+import type { Instance, Nic } from '../../../../@types/Instance'
+import type { Network, NetworkMap } from '../../../../@types/Network'
 
 import azureMigrateImage from './images/logo.svg'
 import arrowImage from './images/arrow.svg'
+import { ThemePalette, ThemeProps } from '../../../Theme'
 
 const Wrapper = styled.div<any>`
   display: flex;
@@ -51,7 +50,7 @@ const Buttons = styled.div<any>`
   }
 `
 const DetailsBody = styled.div<any>`
-  ${StyleProps.exactWidth(StyleProps.contentWidth)}
+  ${ThemeProps.exactWidth(ThemeProps.contentWidth)}
   margin-bottom: 32px;
 `
 const Columns = styled.div<any>`
@@ -71,8 +70,8 @@ const Field = styled.div<any>`
 `
 const Label = styled.div<any>`
   font-size: 10px;
-  color: ${Palette.grayscale[3]};
-  font-weight: ${StyleProps.fontWeights.medium};
+  color: ${ThemePalette.grayscale[3]};
+  font-weight: ${ThemeProps.fontWeights.medium};
   text-transform: uppercase;
 `
 const Value = styled.div<any>`

src/components/molecules/AssessmentListItem/AssessmentListItem.tsx → src/components/modules/AssessmentModule/AssessmentListItem/AssessmentListItem.tsx

@@ -16,27 +16,26 @@ import React from 'react'
 import { observer } from 'mobx-react'
 import styled from 'styled-components'
 
-import StatusPill from '../../atoms/StatusPill'
+import StatusPill from '../../../ui/StatusComponents/StatusPill/StatusPill'
 
-import Palette from '../../styleUtils/Palette'
-import StyleProps from '../../styleUtils/StyleProps'
-import type { Assessment } from '../../../@types/Assessment'
+import type { Assessment } from '../../../../@types/Assessment'
 
 import assessmentImage from './images/assessment.svg'
 import azureMigrateImage from './images/azure-migrate.svg'
+import { ThemePalette, ThemeProps } from '../../../Theme'
 
 const Content = styled.div<any>`
   display: flex;
   align-items: center;
-  border-top: 1px solid ${Palette.grayscale[1]};
+  border-top: 1px solid ${ThemePalette.grayscale[1]};
   padding: 8px 16px;
   cursor: pointer;
   flex-grow: 1;
-  transition: all ${StyleProps.animations.swift};
+  transition: all ${ThemeProps.animations.swift};
   min-width: 785px;
 
   &:hover {
-    background: ${Palette.grayscale[1]};
+    background: ${ThemePalette.grayscale[1]};
   }
 `
 const Wrapper = styled.div<any>`
@@ -44,7 +43,7 @@ const Wrapper = styled.div<any>`
   align-items: center;
 
   &:last-child ${Content} {
-    border-bottom: 1px solid ${Palette.grayscale[1]};
+    border-bottom: 1px solid ${ThemePalette.grayscale[1]};
   }
 `
 const Image = styled.div<any>`
@@ -70,7 +69,7 @@ const AssessmentType = styled.div<any>`
   justify-content: center;
   align-items: center;
   margin-right: 46px;
-  ${StyleProps.exactWidth('180px')}
+  ${ThemeProps.exactWidth('180px')}
 `
 const AssessmentImage = styled.div<any>`
   width: 48px;
@@ -80,22 +79,22 @@ const AssessmentImage = styled.div<any>`
 `
 const AssessmentLabel = styled.div<any>`
   font-size: 15px;
-  color: ${Palette.grayscale[4]};
+  color: ${ThemePalette.grayscale[4]};
   width: 64px;
 `
 const TotalVms = styled.div<any>`
-  ${StyleProps.exactWidth('96px')}
+  ${ThemeProps.exactWidth('96px')}
   margin-right: 48px;
 `
 const Project = styled.div<any>`
-  ${StyleProps.exactWidth('175px')}
+  ${ThemeProps.exactWidth('175px')}
   margin-right: 48px;
 `
 const ItemLabel = styled.div<any>`
-  color: ${Palette.grayscale[4]};
+  color: ${ThemePalette.grayscale[4]};
 `
 const ItemValue = styled.div<any>`
-  color: ${Palette.primary};
+  color: ${ThemePalette.primary};
 `
 
 type Props = {

src/components/organisms/AssessmentMigrationOptions/AssessmentMigrationOptions.tsx → src/components/modules/AssessmentModule/AssessmentMigrationOptions/AssessmentMigrationOptions.tsx

@@ -16,14 +16,15 @@ import * as React from 'react'
 import { observer } from 'mobx-react'
 import styled from 'styled-components'
 
-import Button from '../../atoms/Button'
-import FieldInput from '../../molecules/FieldInput'
-import ToggleButtonBar from '../../atoms/ToggleButtonBar'
+import Button from '../../../ui/Button/Button'
+import FieldInput from '../../../ui/FieldInput/FieldInput'
+import ToggleButtonBar from '../../../ui/ToggleButtonBar/ToggleButtonBar'
 
-import type { Field } from '../../../@types/Field'
+import type { Field } from '../../../../@types/Field'
 
-import StyleProps from '../../styleUtils/StyleProps'
-import LabelDictionary from '../../../utils/LabelDictionary'
+import { ThemeProps } from '../../../Theme'
+
+import LabelDictionary from '../../../../utils/LabelDictionary'
 
 import assessmentImage from './images/assessment.svg'
 
@@ -51,7 +52,7 @@ const Fields = styled.div<any>`
   min-height: 0;
 `
 const FieldStyled = styled(FieldInput)`
-  ${StyleProps.exactWidth(`${StyleProps.inputSizes.large.width}px`)}
+  ${ThemeProps.exactWidth(`${ThemeProps.inputSizes.large.width}px`)}
   margin-bottom: 16px;
 `
 const Row = styled.div<any>`
@@ -236,7 +237,7 @@ class AssessmentMigrationOptions extends React.Component<Props, State> {
 
       const currentField = (
         <FieldStyled
-          width={StyleProps.inputSizes.large.width}
+          width={ThemeProps.inputSizes.large.width}
           // eslint-disable-next-line react/jsx-props-no-spreading
           {...field}
           // eslint-disable-next-line react/jsx-props-no-spreading

src/components/organisms/DashboardContent/modules/ActivityModule/ActivityModule.tsx → src/components/modules/DashboardModule/DashboardActivity/DashboardActivity.tsx

@@ -17,33 +17,31 @@ import { observer } from 'mobx-react'
 import styled from 'styled-components'
 import { Link } from 'react-router-dom'
 
-import StatusIcon from '../../../../atoms/StatusIcon'
-import StatusImage from '../../../../atoms/StatusImage'
-import Button from '../../../../atoms/Button'
+import StatusIcon from '../../../ui/StatusComponents/StatusIcon/StatusIcon'
+import StatusImage from '../../../ui/StatusComponents/StatusImage/StatusImage'
+import Button from '../../../ui/Button/Button'
 import {
   InfoColumn, MainItemInfo, ItemReplicaBadge, ItemTitle, ItemDescription,
-} from '../../../../molecules/NotificationDropdown'
+} from '../../../ui/Dropdowns/NotificationDropdown/NotificationDropdown'
 
-import Palette from '../../../../styleUtils/Palette'
-import StyleProps from '../../../../styleUtils/StyleProps'
-
-import type { NotificationItemData } from '../../../../../@types/NotificationItem'
+import type { NotificationItemData } from '../../../../@types/NotificationItem'
 
 import replicaImage from './images/replica.svg'
+import { ThemePalette, ThemeProps } from '../../../Theme'
 
 const Wrapper = styled.div<any>`
   flex-grow: 1;
 `
 const Title = styled.div<any>`
   font-size: 24px;
-  font-weight: ${StyleProps.fontWeights.light};
+  font-weight: ${ThemeProps.fontWeights.light};
   margin-bottom: 12px;
 `
 const Module = styled.div<any>`
-  background: ${Palette.grayscale[0]};
+  background: ${ThemePalette.grayscale[0]};
   display: flex;
   overflow: hidden;
-  border-radius: ${StyleProps.borderRadius};
+  border-radius: ${ThemeProps.borderRadius};
   height: 273px;
 `
 const LoadingWrapper = styled.div<any>`
@@ -66,10 +64,10 @@ const ListItem = styled(Link)`
   text-decoration: none;
   color: inherit;
   display: block;
-  transition: all ${StyleProps.animations.swift};
+  transition: all ${ThemeProps.animations.swift};
 
   &:hover {
-    background: ${Palette.grayscale[1]};
+    background: ${ThemePalette.grayscale[1]};
   }
 `
 const NoItems = styled.div<any>`
@@ -79,7 +77,7 @@ const NoItems = styled.div<any>`
   width: 100%;
 `
 const ReplicaImage = styled.div<any>`
-  ${StyleProps.exactSize('148px')}
+  ${ThemeProps.exactSize('148px')}
   background: url('${replicaImage}') center no-repeat;
 `
 const Message = styled.div<any>`
@@ -95,7 +93,7 @@ type Props = {
   onNewClick: () => void,
 }
 @observer
-class ActivityModule extends React.Component<Props> {
+class DashboardActivity extends React.Component<Props> {
   renderList() {
     return (
       <List>
@@ -168,4 +166,4 @@ class ActivityModule extends React.Component<Props> {
   }
 }
 
-export default ActivityModule
+export default DashboardActivity

src/components/modules/DashboardModule/DashboardActivity/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "DashboardActivity",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./DashboardActivity.tsx"
+}

src/components/organisms/DashboardContent/charts/BarChart/NiceScale.ts → src/components/modules/DashboardModule/DashboardBarChart/BarChartNiceScale.ts

@@ -1,4 +1,4 @@
-class NiceScale {
+class BarChartNiceScale {
   minPoint: number
 
   maxPoint: number
@@ -67,4 +67,4 @@ class NiceScale {
   }
 }
 
-export default NiceScale
+export default BarChartNiceScale

src/components/organisms/DashboardContent/charts/BarChart/BarChart.tsx → src/components/modules/DashboardModule/DashboardBarChart/DashboardBarChart.tsx

@@ -16,9 +16,8 @@ import * as React from 'react'
 import { observer } from 'mobx-react'
 import styled from 'styled-components'
 
-import StyleProps from '../../../../styleUtils/StyleProps'
-
-import NiceScale from './NiceScale'
+import BarChartNiceScale from './BarChartNiceScale'
+import { ThemeProps } from '../../../Theme'
 
 const Wrapper = styled.div<any>`
   position: relative;
@@ -34,7 +33,7 @@ const YTick = styled.div<any>`
   position: absolute;
   top: ${props => 100 - props.bottom}%;
   font-size: 9px;
-  font-weight: ${StyleProps.fontWeights.medium};
+  font-weight: ${ThemeProps.fontWeights.medium};
   width: 24px;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -85,7 +84,7 @@ const StackedBar = styled.div<any>`
 `
 const BarLabel = styled.div<any>`
   font-size: 9px;
-  font-weight: ${StyleProps.fontWeights.medium};
+  font-weight: ${ThemeProps.fontWeights.medium};
   margin-top: 8px;
 `
 type DataItem = {
@@ -105,7 +104,7 @@ type Props = {
 }
 
 @observer
-class BarChart extends React.Component<Props> {
+class DashboardBarChart extends React.Component<Props> {
   barsRef: HTMLElement | null | undefined
 
   ticks: { value: number }[] = []
@@ -124,7 +123,7 @@ class BarChart extends React.Component<Props> {
     this.range = props.data.reduce((max, item) => Math.max(
       max, item.values.reduce((sum, value) => sum + value, 0),
     ), 1)
-    const niceScale = new NiceScale(0, this.range, props.yNumTicks)
+    const niceScale = new BarChartNiceScale(0, this.range, props.yNumTicks)
     this.ticks = []
     const numTicks = Math.floor(this.range / niceScale.tickSpacing) + 1
     for (let i = 0; i < numTicks; i += 1) {
@@ -229,4 +228,4 @@ class BarChart extends React.Component<Props> {
   }
 }
 
-export default BarChart
+export default DashboardBarChart

src/components/modules/DashboardModule/DashboardBarChart/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "DashboardBarChart",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./DashboardBarChart.tsx"
+}

src/components/organisms/DashboardContent/DashboardContent.tsx → src/components/modules/DashboardModule/DashboardContent/DashboardContent.tsx

@@ -17,20 +17,20 @@ import { observer } from 'mobx-react'
 import styled from 'styled-components'
 import autobind from 'autobind-decorator'
 
-import InfoCountModule from './modules/InfoCountModule'
-import LicenceModule from './modules/LicenceModule'
-import ActivityModule from './modules/ActivityModule'
-import TopEndpointsModule from './modules/TopEndpointsModule'
-import ExecutionsModule from './modules/ExecutionsModule'
+import DashboardInfoCount from '../DashboardInfoCount/DashboardInfoCount'
+import DashboardLicence from '../DashboardLicence/DashboardLicence'
+import DashboardActivity from '../DashboardActivity/DashboardActivity'
+import DashboardTopEndpoints from '../DashboardTopEndpoints/DashboardTopEndpoints'
+import DashboardExecutions from '../DashboardExecutions/DashboardExecutions'
 
-import Palette from '../../styleUtils/Palette'
+import { ThemePalette } from '../../../Theme'
 
-import type { Endpoint } from '../../../@types/Endpoint'
-import type { Project } from '../../../@types/Project'
-import type { User } from '../../../@types/User'
-import type { Licence, LicenceServerStatus } from '../../../@types/Licence'
-import type { NotificationItemData } from '../../../@types/NotificationItem'
-import { ReplicaItem, MigrationItem } from '../../../@types/MainItem'
+import type { Endpoint } from '../../../../@types/Endpoint'
+import type { Project } from '../../../../@types/Project'
+import type { User } from '../../../../@types/User'
+import type { Licence, LicenceServerStatus } from '../../../../@types/Licence'
+import type { NotificationItemData } from '../../../../@types/NotificationItem'
+import { ReplicaItem, MigrationItem } from '../../../../@types/MainItem'
 
 const MIDDLE_WIDTHS = ['264px', '264px', '450px']
 
@@ -109,7 +109,7 @@ class DashboardContent extends React.Component<Props, State> {
 
   renderMiddleModules() {
     const modules = [
-      <ActivityModule
+      <DashboardActivity
         large={this.state.useMobileLayout || this.state.useLargeActivity}
         notificationItems={this.props.notificationItems}
         loading={this.props.notificationItemsLoading}
@@ -119,7 +119,7 @@ class DashboardContent extends React.Component<Props, State> {
         }}
         onNewClick={this.props.onNewReplicaClick}
       />,
-      <TopEndpointsModule
+      <DashboardTopEndpoints
         replicas={this.props.replicas}
         migrations={this.props.migrations}
         endpoints={this.props.endpoints}
@@ -131,7 +131,7 @@ class DashboardContent extends React.Component<Props, State> {
         }}
         onNewClick={this.props.onNewEndpointClick}
       />,
-      <LicenceModule
+      <DashboardLicence
         licence={this.props.licence}
         loading={this.props.licenceLoading}
         licenceServerStatus={this.props.licenceServerStatus}
@@ -170,21 +170,21 @@ class DashboardContent extends React.Component<Props, State> {
       {
         label: 'Replicas',
         value: this.props.replicas.length,
-        color: Palette.alert,
+        color: ThemePalette.alert,
         link: '/replicas',
         loading: this.props.replicasLoading,
       },
       {
         label: 'Migrations',
         value: this.props.migrations.length,
-        color: Palette.primary,
+        color: ThemePalette.primary,
         link: '/migrations',
         loading: this.props.migrationsLoading,
       },
       {
         label: 'Endpoints',
         value: this.props.endpoints.length,
-        color: Palette.black,
+        color: ThemePalette.black,
         link: '/endpoints',
         loading: this.props.endpointsLoading,
       },
@@ -195,14 +195,14 @@ class DashboardContent extends React.Component<Props, State> {
         {
           label: 'Users',
           value: this.props.users.length,
-          color: Palette.grayscale[3],
+          color: ThemePalette.grayscale[3],
           link: '/users',
           loading: this.props.usersLoading,
         },
         {
           label: 'Projects',
           value: this.props.projects.length,
-          color: Palette.grayscale[3],
+          color: ThemePalette.grayscale[3],
           link: '/projects',
           loading: this.props.projectsLoading,
         },
@@ -211,11 +211,11 @@ class DashboardContent extends React.Component<Props, State> {
 
     return (
       <Wrapper>
-        <InfoCountModule
+        <DashboardInfoCount
           data={infoCountData}
         />
         {this.renderMiddleModules()}
-        <ExecutionsModule
+        <DashboardExecutions
           replicas={this.props.replicas}
           migrations={this.props.migrations}
           loading={this.props.replicasLoading || this.props.migrationsLoading}

src/components/organisms/DashboardContent/modules/ExecutionsModule/ExecutionsModule.tsx → src/components/modules/DashboardModule/DashboardExecutions/DashboardExecutions.tsx

@@ -17,15 +17,14 @@ import { observer } from 'mobx-react'
 import styled from 'styled-components'
 import moment from 'moment'
 
-import StatusImage from '../../../../atoms/StatusImage'
-import DropdownLink from '../../../../molecules/DropdownLink'
-import BarChart from '../../charts/BarChart'
+import StatusImage from '../../../ui/StatusComponents/StatusImage/StatusImage'
+import DropdownLink from '../../../ui/Dropdowns/DropdownLink/DropdownLink'
+import DashboardBarChart from '../DashboardBarChart/DashboardBarChart'
 
-import Palette from '../../../../styleUtils/Palette'
-import StyleProps from '../../../../styleUtils/StyleProps'
+import { ThemePalette, ThemeProps } from '../../../Theme'
 
 import emptyBackgroundImage from './images/empty-background.svg'
-import { ReplicaItem, MigrationItem, TransferItem } from '../../../../../@types/MainItem'
+import { ReplicaItem, MigrationItem, TransferItem } from '../../../../@types/MainItem'
 
 const INTERVALS = [
   { label: 'Last {x} days', value: '30-days' },
@@ -35,14 +34,14 @@ const INTERVALS = [
 const Wrapper = styled.div<any>``
 const Title = styled.div<any>`
   font-size: 24px;
-  font-weight: ${StyleProps.fontWeights.light};
+  font-weight: ${ThemeProps.fontWeights.light};
   margin-bottom: 12px;
 `
 const Module = styled.div<any>`
   position: relative;
   display: flex;
-  background: ${Palette.grayscale[0]};
-  border-radius: ${StyleProps.borderRadius};
+  background: ${ThemePalette.grayscale[0]};
+  border-radius: ${ThemeProps.borderRadius};
   height: 240px;
 `
 const ChartWrapper = styled.div<any>`
@@ -73,16 +72,16 @@ const Tooltip = styled.div<any>`
   position: absolute;
   bottom: ${props => props.position.y}px;
   left: ${props => props.position.x}px;
-  background: ${Palette.black};
+  background: ${ThemePalette.black};
   padding: 8px 16px 16px 16px;
-  border-radius: ${StyleProps.borderRadius};
+  border-radius: ${ThemeProps.borderRadius};
   color: white;
-  ${StyleProps.exactWidth('174px')}
+  ${ThemeProps.exactWidth('174px')}
   box-shadow: rgba(0,0,0,0.1) 0 0 6px 1px;
 `
 const TooltipHeader = styled.div<any>`
   font-size: 24px;
-  font-weight: ${StyleProps.fontWeights.light};
+  font-weight: ${ThemeProps.fontWeights.light};
   text-align: center;
   border-bottom: 1px solid;
   padding-bottom: 4px;
@@ -101,7 +100,7 @@ const TooltipTip = styled.div<any>`
   width: 16px;
   height: 16px;
   bottom: -8px;
-  background: ${Palette.black};
+  background: ${ThemePalette.black};
   left: calc(50% - 16px);
   transform: rotate(45deg);
 `
@@ -112,7 +111,7 @@ const NoData = styled.div<any>`
 const NoDataMessage = styled.div<any>`
   position: absolute;
   font-size: 17px;
-  color: ${Palette.grayscale[4]};
+  color: ${ThemePalette.grayscale[4]};
   display: flex;
   top: 0;
   bottom: 0;
@@ -153,7 +152,7 @@ type State = {
 const COLORS = ['#F91661', '#0044CB']
 
 @observer
-class ExecutionsModule extends React.Component<Props, State> {
+class DashboardExecutions extends React.Component<Props, State> {
   state: State = {
     selectedPeriod: INTERVALS[0].value,
     groupedData: [],
@@ -281,7 +280,7 @@ class ExecutionsModule extends React.Component<Props, State> {
   renderBarChart() {
     return (
       <BarChartWrapper>
-        <BarChart
+        <DashboardBarChart
           style={{ height: '164px' }}
           yNumTicks={3}
           data={this.state.groupedData}
@@ -333,4 +332,4 @@ class ExecutionsModule extends React.Component<Props, State> {
   }
 }
 
-export default ExecutionsModule
+export default DashboardExecutions

src/components/modules/DashboardModule/DashboardExecutions/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "DashboardExecutions",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./DashboardExecutions.tsx"
+}

src/components/organisms/DashboardContent/modules/InfoCountModule/InfoCountModule.tsx → src/components/modules/DashboardModule/DashboardInfoCount/DashboardInfoCount.tsx

@@ -17,16 +17,15 @@ import { observer } from 'mobx-react'
 import styled from 'styled-components'
 import { Link } from 'react-router-dom'
 
-import StatusImage from '../../../../atoms/StatusImage'
+import StatusImage from '../../../ui/StatusComponents/StatusImage/StatusImage'
 
-import Palette from '../../../../styleUtils/Palette'
-import StyleProps from '../../../../styleUtils/StyleProps'
+import { ThemePalette, ThemeProps } from '../../../Theme'
 
 const Wrapper = styled.div<any>`
-  background: ${Palette.grayscale[0]};
+  background: ${ThemePalette.grayscale[0]};
   display: flex;
   overflow: auto;
-  border-radius: ${StyleProps.borderRadius};
+  border-radius: ${ThemeProps.borderRadius};
 `
 const CountBlock = styled.div<any>`
   flex-grow: 1;
@@ -39,7 +38,7 @@ const CountBlock = styled.div<any>`
   height: 96px;
   justify-content: center;
   &:first-child {
-    border-left: 1px solid ${Palette.grayscale[0]};
+    border-left: 1px solid ${ThemePalette.grayscale[0]};
   }
 
   @media (max-width: 832px) {
@@ -52,13 +51,13 @@ const LoadingWrapper = styled.div<any>`
 `
 const CountBlockValue = styled(Link)`
   font-size: 53px;
-  font-weight: ${StyleProps.fontWeights.extraLight};
+  font-weight: ${ThemeProps.fontWeights.extraLight};
   text-decoration: none;
   color: inherit;
 `
 const CountBlockLabel = styled(Link)`
   font-size: 12px;
-  font-weight: ${StyleProps.fontWeights.medium};
+  font-weight: ${ThemeProps.fontWeights.medium};
   text-transform: uppercase;
   color: ${props => props.color};
   text-decoration: none;
@@ -73,7 +72,7 @@ type Props = {
   }[],
 }
 @observer
-class InfoCountModule extends React.Component<Props> {
+class DashboardInfoCount extends React.Component<Props> {
   render() {
     return (
       <Wrapper>
@@ -91,4 +90,4 @@ class InfoCountModule extends React.Component<Props> {
   }
 }
 
-export default InfoCountModule
+export default DashboardInfoCount

src/components/modules/DashboardModule/DashboardInfoCount/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "DashboardInfoCount",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./DashboardInfoCount.tsx"
+}

src/components/organisms/DashboardContent/modules/LicenceModule/LicenceModule.tsx → src/components/modules/DashboardModule/DashboardLicence/DashboardLicence.tsx

@@ -17,31 +17,30 @@ import { observer } from 'mobx-react'
 import styled from 'styled-components'
 import moment from 'moment'
 
-import StatusImage from '../../../../atoms/StatusImage'
-import InfoIcon from '../../../../atoms/InfoIcon'
+import StatusImage from '../../../ui/StatusComponents/StatusImage/StatusImage'
+import InfoIcon from '../../../ui/InfoIcon/InfoIcon'
 
-import Palette from '../../../../styleUtils/Palette'
-import StyleProps from '../../../../styleUtils/StyleProps'
+import { ThemePalette, ThemeProps } from '../../../Theme'
 
-import type { Licence, LicenceServerStatus } from '../../../../../@types/Licence'
-import CopyValue from '../../../../atoms/CopyValue/CopyValue'
-import Button from '../../../../atoms/Button/Button'
+import type { Licence, LicenceServerStatus } from '../../../../@types/Licence'
+import CopyValue from '../../../ui/CopyValue/CopyValue'
+import Button from '../../../ui/Button/Button'
 
-import licenceImage from '../../../Licence/images/licence'
+import licenceImage from '../../LicenceModule/images/licence'
 
 const Wrapper = styled.div<any>`
   flex-grow: 1;
 `
 const Title = styled.div<any>`
   font-size: 24px;
-  font-weight: ${StyleProps.fontWeights.light};
+  font-weight: ${ThemeProps.fontWeights.light};
   margin-bottom: 12px;
 `
 const Module = styled.div<any>`
-  background: ${Palette.grayscale[0]};
+  background: ${ThemePalette.grayscale[0]};
   display: flex;
   overflow: auto;
-  border-radius: ${StyleProps.borderRadius};
+  border-radius: ${ThemeProps.borderRadius};
   padding: 24px 16px 16px 16px;
   height: 232px;
 `
@@ -71,13 +70,13 @@ const TopInfoText = styled.div<any>`
   flex-grow: 1;
 `
 const TopInfoDate = styled.div<any>`
-  ${StyleProps.exactWidth('76px')}
-  ${StyleProps.exactHeight('80px')}
+  ${ThemeProps.exactWidth('76px')}
+  ${ThemeProps.exactHeight('80px')}
   display: flex;
   flex-direction: column;
   margin-left: 24px;
-  ${StyleProps.boxShadow}
-  border-radius: ${StyleProps.borderRadius};
+  ${ThemeProps.boxShadow}
+  border-radius: ${ThemeProps.borderRadius};
   overflow: hidden;
 `
 const TopInfoDateTop = styled.div<any>`
@@ -94,9 +93,9 @@ const TopInfoDateBottom = styled.div<any>`
   display: flex;
   justify-content: center;
   align-items: center;
-  color: ${Palette.primary};
+  color: ${ThemePalette.primary};
   font-size: 37px;
-  font-weight: ${StyleProps.fontWeights.extraLight};
+  font-weight: ${ThemeProps.fontWeights.extraLight};
 `
 const Charts = styled.div<any>`
   margin-top: -8px;
@@ -116,12 +115,12 @@ const ChartHeader = styled.div<any>`
 `
 const ChartHeaderCurrent = styled.div<any>``
 const ChartHeaderTotal = styled.div<any>`
-  color: ${Palette.grayscale[4]};
+  color: ${ThemePalette.grayscale[4]};
 `
 const ChartBodyWrapper = styled.div<any>`
   height: 8px;
-  background: ${Palette.grayscale[2]};
-  border-radius: ${StyleProps.borderRadius};
+  background: ${ThemePalette.grayscale[2]};
+  border-radius: ${ThemeProps.borderRadius};
   margin-top: 4px;
   overflow: hidden;
 `
@@ -155,7 +154,7 @@ type Props = {
   onAddClick: () => void,
 }
 @observer
-class LicenceModule extends React.Component<Props> {
+class DashboardLicence extends React.Component<Props> {
   renderExpiration(date: Date) {
     const dateMoment = moment(date)
     const days = dateMoment.diff(new Date(), 'days')
@@ -173,7 +172,7 @@ class LicenceModule extends React.Component<Props> {
     const graphDataRows = [
       [
         {
-          color: Palette.alert,
+          color: ThemePalette.alert,
           current: info.currentPerformedReplicas,
           total: info.currentAvailableReplicas,
           label: 'Current Replicas',
@@ -181,7 +180,7 @@ class LicenceModule extends React.Component<Props> {
           all currently active licences (including non-activated floating licences)`,
         },
         {
-          color: Palette.alert,
+          color: ThemePalette.alert,
           current: info.lifetimePerformedReplicas,
           total: info.lifetimeAvailableReplicas,
           label: 'Lifetime Replicas',
@@ -190,7 +189,7 @@ class LicenceModule extends React.Component<Props> {
       ],
       [
         {
-          color: Palette.primary,
+          color: ThemePalette.primary,
           current: info.currentPerformedMigrations,
           total: info.currentAvailableMigrations,
           label: 'Current Migrations',
@@ -198,7 +197,7 @@ class LicenceModule extends React.Component<Props> {
           all currently active licences (including non-activated floating licences)`,
         },
         {
-          color: Palette.primary,
+          color: ThemePalette.primary,
           current: info.lifetimePerformedMigrations,
           total: info.lifetimeAvailableMigrations,
           label: 'Lifetime Migrations',
@@ -268,7 +267,7 @@ class LicenceModule extends React.Component<Props> {
         <AddLicenceButtonWrapper>
           <Logo
             dangerouslySetInnerHTML={
-              { __html: licenceImage(Palette.grayscale[5]) }
+              { __html: licenceImage(ThemePalette.grayscale[5]) }
             }
           />
           <Button primary onClick={this.props.onAddClick}>Add Licence</Button>
@@ -311,4 +310,4 @@ class LicenceModule extends React.Component<Props> {
   }
 }
 
-export default LicenceModule
+export default DashboardLicence

src/components/modules/DashboardModule/DashboardLicence/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "DashboardLicence",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./DashboardLicence.tsx"
+}

src/components/organisms/DashboardContent/charts/PieChart/PieChart.tsx → src/components/modules/DashboardModule/DashboardPieChart/DashboardPieChart.tsx

@@ -16,8 +16,8 @@ import * as React from 'react'
 import { observer } from 'mobx-react'
 import styled from 'styled-components'
 import autobind from 'autobind-decorator'
+import { ThemeProps } from '../../../Theme'
 
-import StyleProps from '../../../../styleUtils/StyleProps'
 
 const Wrapper = styled.div<any>`
   position: relative;
@@ -27,16 +27,16 @@ const OuterShadow = styled.div<any>`
   position: absolute;
   top: 0;
   left: 0;
-  ${props => StyleProps.exactSize(`${props.size}px`)}
+  ${props => ThemeProps.exactSize(`${props.size}px`)}
   border-radius: 50%;
-  ${StyleProps.boxShadow}
+  ${ThemeProps.boxShadow}
   pointer-events: none;
 `
 const InnerShadow = styled.div<any>`
   position: absolute;
   top: calc(50% - ${props => props.size}px);
   left: calc(50% - ${props => props.size}px);
-  ${props => StyleProps.exactSize(`${props.size * 2}px`)}
+  ${props => ThemeProps.exactSize(`${props.size * 2}px`)}
   border-radius: 50%;
   box-shadow: inset rgba(0, 0, 0, 0.1) 0 0 6px 2px;
   pointer-events: none;
@@ -58,7 +58,7 @@ type Props = {
 }
 
 @observer
-class PieChart extends React.Component<Props> {
+class DashboardPieChart extends React.Component<Props> {
   canvas: HTMLCanvasElement | null | undefined
 
   angles: number[] = []
@@ -219,4 +219,4 @@ class PieChart extends React.Component<Props> {
   }
 }
 
-export default PieChart
+export default DashboardPieChart

src/components/organisms/DashboardContent/modules/TopEndpointsModule/TopEndpointsModule.tsx → src/components/modules/DashboardModule/DashboardTopEndpoints/DashboardTopEndpoints.tsx

@@ -17,30 +17,29 @@ import { observer } from 'mobx-react'
 import styled from 'styled-components'
 import { Link } from 'react-router-dom'
 
-import Button from '../../../../atoms/Button'
-import StatusImage from '../../../../atoms/StatusImage'
-import EndpointLogos from '../../../../atoms/EndpointLogos'
-import PieChart from '../../charts/PieChart'
+import Button from '../../../ui/Button/Button'
+import StatusImage from '../../../ui/StatusComponents/StatusImage/StatusImage'
+import EndpointLogos from '../../EndpointModule/EndpointLogos/EndpointLogos'
+import DashboardPieChart from '../DashboardPieChart/DashboardPieChart'
 
-import Palette from '../../../../styleUtils/Palette'
-import StyleProps from '../../../../styleUtils/StyleProps'
+import { ThemePalette, ThemeProps } from '../../../Theme'
 
-import type { Endpoint } from '../../../../../@types/Endpoint'
+import type { Endpoint } from '../../../../@types/Endpoint'
 
 import endpointImage from './images/endpoint.svg'
-import { ReplicaItem, MigrationItem, TransferItem } from '../../../../../@types/MainItem'
+import { ReplicaItem, MigrationItem, TransferItem } from '../../../../@types/MainItem'
 
 const Wrapper = styled.div<any>`
   flex-grow: 1;
 `
 const Title = styled.div<any>`
   font-size: 24px;
-  font-weight: ${StyleProps.fontWeights.light};
+  font-weight: ${ThemeProps.fontWeights.light};
   margin-bottom: 12px;
 `
 const Module = styled.div<any>`
-  background: ${Palette.grayscale[0]};
-  border-radius: ${StyleProps.borderRadius};
+  background: ${ThemePalette.grayscale[0]};
+  border-radius: ${ThemeProps.borderRadius};
   height: 224px;
   padding: 32px 16px 16px 16px;
 `
@@ -62,11 +61,11 @@ const Tooltip = styled.div<any>`
   position: absolute;
   width: 208px;
   overflow: hidden;
-  border-radius: ${StyleProps.borderRadius};
+  border-radius: ${ThemeProps.borderRadius};
   box-shadow: rgba(0,0,0,0.1) 0 0 6px 1px;
 `
 const TooltipHeader = styled.div<any>`
-  background: ${Palette.grayscale[3]};
+  background: ${ThemePalette.grayscale[3]};
   height: 24px;
   display: flex;
   align-items: center;
@@ -74,7 +73,7 @@ const TooltipHeader = styled.div<any>`
   padding: 0 14px;
 `
 const TooltipBody = styled.div<any>`
-  background: ${Palette.black};
+  background: ${ThemePalette.black};
   height: 54px;
   display: flex;
   align-items: center;
@@ -99,7 +98,7 @@ const LegendItem = styled.div<any>`
   width: calc(33% - 8px);
 `
 const LegendBullet = styled.div<any>`
-  ${StyleProps.exactSize('8px')}
+  ${ThemeProps.exactSize('8px')}
   border: 2px solid ${props => props.color};
   border-radius: 50%;
 `
@@ -121,7 +120,7 @@ const NoItems = styled.div<any>`
   width: 100%;
 `
 const EndpointImage = styled.div<any>`
-  ${StyleProps.exactSize('148px')}
+  ${ThemeProps.exactSize('148px')}
   background: url('${endpointImage}') center no-repeat;
 `
 const Message = styled.div<any>`
@@ -153,7 +152,7 @@ type State = {
 }
 const COLORS = ['#280E4C', '#FF2D55', '#FDC02F', '#0044CA', '#39DA55', '#A4AAB5']
 @observer
-class TopEndpointsModule extends React.Component<Props, State> {
+class DashboardTopEndpoints extends React.Component<Props, State> {
   state: State = {
     tooltipPosition: { x: 0, y: 0 },
     groupedEndpoint: null,
@@ -247,12 +246,12 @@ class TopEndpointsModule extends React.Component<Props, State> {
   renderChart() {
     return (
       <ChartWrapper>
-        <PieChart
+        <DashboardPieChart
           customRef={ref => { this.chartRef = ref }}
           size={144}
           data={this.state.groupedEndpoints}
           colors={COLORS}
-          holeStyle={{ radius: 57, color: Palette.grayscale[0] }}
+          holeStyle={{ radius: 57, color: ThemePalette.grayscale[0] }}
           onMouseOver={(item, x, y) => { this.handleMouseOver(item, x, y) }}
           onMouseLeave={() => { this.handleMouseLeave() }}
         />
@@ -294,4 +293,4 @@ class TopEndpointsModule extends React.Component<Props, State> {
   }
 }
 
-export default TopEndpointsModule
+export default DashboardTopEndpoints

src/components/modules/DashboardModule/DashboardTopEndpoints/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "DashboardTopEndpoints",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./DashboardTopEndpoints.tsx"
+}

src/components/organisms/DetailsContentHeader/DetailsContentHeader.tsx → src/components/modules/DetailsModule/DetailsContentHeader/DetailsContentHeader.tsx

@@ -17,17 +17,16 @@ import { observer } from 'mobx-react'
 import styled from 'styled-components'
 import { Link } from 'react-router-dom'
 
-import StatusPill from '../../atoms/StatusPill'
-import ActionDropdown from '../../molecules/ActionDropdown'
-import type { Action as DropdownAction } from '../../molecules/ActionDropdown'
+import StatusPill from '../../../ui/StatusComponents/StatusPill/StatusPill'
+import ActionDropdown from '../../../ui/Dropdowns/ActionDropdown/ActionDropdown'
+import type { Action as DropdownAction } from '../../../ui/Dropdowns/ActionDropdown/ActionDropdown'
 
-import Palette from '../../styleUtils/Palette'
-import StyleProps from '../../styleUtils/StyleProps'
+import { ThemePalette, ThemeProps } from '../../../Theme'
 
 import backArrowImage from './images/back-arrow.svg'
 
 const Wrapper = styled.div<any>`
-  background: ${Palette.grayscale[0]};
+  background: ${ThemePalette.grayscale[0]};
   height: 96px;
   display: flex;
   align-items: center;
@@ -35,7 +34,7 @@ const Wrapper = styled.div<any>`
   margin-left: -72px;
 `
 const BackButton = styled(Link)`
-  ${StyleProps.exactSize('33px')}
+  ${ThemeProps.exactSize('33px')}
   background: url('${backArrowImage}') no-repeat center;
   cursor: pointer;
   margin-right: 32px;
@@ -49,11 +48,11 @@ const TypeImage = styled.div<any>`
 const Title = styled.div<any>`
   display: flex;
   align-items: center;
-  ${StyleProps.exactWidth(StyleProps.contentWidth)}
+  ${ThemeProps.exactWidth(ThemeProps.contentWidth)}
 `
 const Text = styled.div<any>`
   font-size: 30px;
-  font-weight: ${StyleProps.fontWeights.light};
+  font-weight: ${ThemeProps.fontWeights.light};
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -71,11 +70,11 @@ const StatusPills = styled.div<any>`
   }
 `
 const Description = styled.div<any>`
-  color: ${Palette.grayscale[4]};
+  color: ${ThemePalette.grayscale[4]};
   margin-top: 3px;
 `
 const MockButton = styled.div<any>`
-  ${StyleProps.exactWidth(`${StyleProps.inputSizes.regular.width}px`)}
+  ${ThemeProps.exactWidth(`${ThemeProps.inputSizes.regular.width}px`)}
 `
 
 type Props = {

src/components/organisms/DetailsPageHeader/DetailsPageHeader.tsx → src/components/modules/DetailsModule/DetailsPageHeader/DetailsPageHeader.tsx

@@ -17,14 +17,14 @@ import { Link } from 'react-router-dom'
 import styled from 'styled-components'
 import { observer } from 'mobx-react'
 
-import NavigationMini from '../../molecules/NavigationMini'
-import NotificationDropdown from '../../molecules/NotificationDropdown'
-import UserDropdown from '../../molecules/UserDropdown'
-import AboutModal from '../../pages/AboutModal'
+import NavigationMini from '../../NavigationModule/NavigationMini/NavigationMini'
+import NotificationDropdown from '../../../ui/Dropdowns/NotificationDropdown/NotificationDropdown'
+import UserDropdown from '../../../ui/Dropdowns/UserDropdown/UserDropdown'
+import AboutModal from '../../../smart/AboutModal/AboutModal'
 
-import type { User as UserType } from '../../../@types/User'
+import type { User as UserType } from '../../../../@types/User'
 
-import notificationStore from '../../../stores/NotificationStore'
+import notificationStore from '../../../../stores/NotificationStore'
 
 import backgroundImage from './images/star-bg.jpg'
 import logoImage from './images/logo.svg'

src/components/organisms/DetailsPageHeader/test.tsx → src/components/modules/DetailsModule/DetailsPageHeader/test.tsx

@@ -16,7 +16,7 @@ import React from 'react'
 import { shallow } from 'enzyme'
 import sinon from 'sinon'
 import TW from '../../../utils/TestWrapper'
-import type { User } from '../../../@types/User'
+import type { User } from '../../../../@types/User'
 import DetailsPageHeader from '.'
 
 type Props = {

src/components/organisms/ChooseProvider/ChooseProvider.tsx → src/components/modules/EndpointModule/ChooseProvider/ChooseProvider.tsx

@@ -16,23 +16,22 @@ import React from 'react'
 import { observer } from 'mobx-react'
 import styled from 'styled-components'
 
-import notificationStore from '../../../stores/NotificationStore'
+import notificationStore from '../../../../stores/NotificationStore'
 
-import EndpointLogos from '../../atoms/EndpointLogos'
-import Button from '../../atoms/Button'
-import StatusImage from '../../atoms/StatusImage'
+import EndpointLogos from '../EndpointLogos/EndpointLogos'
+import Button from '../../../ui/Button/Button'
+import StatusImage from '../../../ui/StatusComponents/StatusImage/StatusImage'
 
-import StyleProps from '../../styleUtils/StyleProps'
-import Palette from '../../styleUtils/Palette'
-import FileUtils from '../../../utils/FileUtils'
-import configLoader from '../../../utils/Config'
+import { ThemePalette, ThemeProps } from '../../../Theme'
+import FileUtils from '../../../../utils/FileUtils'
+import configLoader from '../../../../utils/Config'
 
-import type { FileContent } from '../../../utils/FileUtils'
-import type { Endpoint, MultiValidationItem } from '../../../@types/Endpoint'
+import type { FileContent } from '../../../../utils/FileUtils'
+import type { Endpoint, MultiValidationItem } from '../../../../@types/Endpoint'
 
 import MultipleUploadedEndpoints from './MultipleUploadedEndpoints'
-import { ProviderTypes } from '../../../@types/Providers'
-import { Region } from '../../../@types/Region'
+import { ProviderTypes } from '../../../../@types/Providers'
+import { Region } from '../../../../@types/Region'
 
 const Wrapper = styled.div<any>`
   display: flex;
@@ -54,15 +53,15 @@ const Logos = styled.div<any>`
   flex-grow: 1;
 `
 const Upload = styled.div<any>`
-  border: 1px dashed ${props => (props.highlight ? Palette.primary : 'white')};
+  border: 1px dashed ${props => (props.highlight ? ThemePalette.primary : 'white')};
   margin: 0 32px 16px 32px;
   padding: 16px;
 `
 const UploadMessage = styled.div<any>`
-  color: ${Palette.grayscale[3]};
+  color: ${ThemePalette.grayscale[3]};
 `
 const UploadMessageButton = styled.span`
-  color: ${Palette.primary};
+  color: ${ThemePalette.primary};
   cursor: pointer;
 `
 const FakeFileInput = styled.input`
@@ -72,7 +71,7 @@ const FakeFileInput = styled.input`
 `
 const EndpointLogosStyled = styled(EndpointLogos)`
   transform: scale(0.67);
-  transition: all ${StyleProps.animations.swift};
+  transition: all ${ThemeProps.animations.swift};
   cursor: pointer;
   &:hover {
     transform: scale(0.7);

src/components/organisms/ChooseProvider/MultipleUploadedEndpoints.tsx → src/components/modules/EndpointModule/ChooseProvider/MultipleUploadedEndpoints.tsx

@@ -16,19 +16,19 @@ import React from 'react'
 import { observer } from 'mobx-react'
 import styled from 'styled-components'
 
-import type { Endpoint, MultiValidationItem } from '../../../@types/Endpoint'
+import type { Endpoint, MultiValidationItem } from '../../../../@types/Endpoint'
 
-import StatusIcon from '../../atoms/StatusIcon'
-import Button from '../../atoms/Button'
-import EndpointLogos from '../../atoms/EndpointLogos'
-import LoadingButton from '../../molecules/LoadingButton'
+import StatusIcon from '../../../ui/StatusComponents/StatusIcon/StatusIcon'
+import Button from '../../../ui/Button/Button'
+import EndpointLogos from '../EndpointLogos/EndpointLogos'
+import LoadingButton from '../../../ui/LoadingButton/LoadingButton'
 
 import deleteImage from './images/delete.svg'
 import deleteHoverImage from './images/delete-hover.svg'
-import DomUtils from '../../../utils/DomUtils'
-import notificationStore from '../../../stores/NotificationStore'
-import DropdownLink from '../../molecules/DropdownLink/DropdownLink'
-import { Region } from '../../../@types/Region'
+import DomUtils from '../../../../utils/DomUtils'
+import notificationStore from '../../../../stores/NotificationStore'
+import DropdownLink from '../../../ui/Dropdowns/DropdownLink/DropdownLink'
+import { Region } from '../../../../@types/Region'
 
 const Wrapper = styled.div`
   width: 100%;

src/components/organisms/EndpointDetailsContent/EndpointDetailsContent.tsx → src/components/modules/EndpointModule/EndpointDetailsContent/EndpointDetailsContent.tsx

@@ -17,28 +17,27 @@ import { Link } from 'react-router-dom'
 import { observer } from 'mobx-react'
 import styled from 'styled-components'
 
-import EndpointLogos from '../../atoms/EndpointLogos'
-import PasswordValue from '../../atoms/PasswordValue'
-import Button from '../../atoms/Button'
-import CopyValue from '../../atoms/CopyValue'
-import CopyMultilineValue from '../../atoms/CopyMultilineValue'
-import StatusImage from '../../atoms/StatusImage'
+import EndpointLogos from '../EndpointLogos/EndpointLogos'
+import PasswordValue from '../../../ui/PasswordValue/PasswordValue'
+import Button from '../../../ui/Button/Button'
+import CopyValue from '../../../ui/CopyValue/CopyValue'
+import CopyMultilineValue from '../../../ui/CopyMultilineValue/CopyMultilineValue'
+import StatusImage from '../../../ui/StatusComponents/StatusImage/StatusImage'
 
-import type { Endpoint } from '../../../@types/Endpoint'
-import StyleProps from '../../styleUtils/StyleProps'
-import Palette from '../../styleUtils/Palette'
-import DateUtils from '../../../utils/DateUtils'
-import LabelDictionary from '../../../utils/LabelDictionary'
-import configLoader from '../../../utils/Config'
-import { Region } from '../../../@types/Region'
+import type { Endpoint } from '../../../../@types/Endpoint'
+import { ThemePalette, ThemeProps } from '../../../Theme'
+import DateUtils from '../../../../utils/DateUtils'
+import LabelDictionary from '../../../../utils/LabelDictionary'
+import configLoader from '../../../../utils/Config'
+import { Region } from '../../../../@types/Region'
 import {
   getTransferItemTitle, MigrationItem, ReplicaItem, TransferItem,
-} from '../../../@types/MainItem'
-import { Field as FieldType } from '../../../@types/Field'
-import DomUtils from '../../../utils/DomUtils'
+} from '../../../../@types/MainItem'
+import { Field as FieldType } from '../../../../@types/Field'
+import DomUtils from '../../../../utils/DomUtils'
 
 const Wrapper = styled.div<any>`
-  ${StyleProps.exactWidth(StyleProps.contentWidth)}
+  ${ThemeProps.exactWidth(ThemeProps.contentWidth)}
   margin: 0 auto;
   padding-left: 126px;
 `
@@ -49,14 +48,14 @@ const Info = styled.div<any>`
   margin-left: -32px;
 `
 const Field = styled.div<any>`
-  ${StyleProps.exactWidth('calc(50% - 32px)')}
+  ${ThemeProps.exactWidth('calc(50% - 32px)')}
   margin-bottom: 32px;
   margin-left: 32px;
 `
 const Label = styled.div<any>`
   font-size: 10px;
-  font-weight: ${StyleProps.fontWeights.medium};
-  color: ${Palette.grayscale[3]};
+  font-weight: ${ThemeProps.fontWeights.medium};
+  color: ${ThemePalette.grayscale[3]};
   text-transform: uppercase;
   margin-bottom: 3px;
 `
@@ -75,7 +74,7 @@ const LoadingWrapper = styled.div<any>`
   margin: 32px 0 64px 0;
 `
 const LinkStyled = styled(Link)`
-  color: ${Palette.primary};
+  color: ${ThemePalette.primary};
   text-decoration: none;
   cursor: pointer;
 `
@@ -89,7 +88,7 @@ const TransferItemWrapper = styled.div`
 
 const DownloadLink = styled.div`
   display: inline-block;
-  color: ${Palette.primary};
+  color: ${ThemePalette.primary};
   cursor: pointer;
   :hover {
     text-decoration: underline;

src/components/organisms/EndpointDetailsContent/test.tsx → src/components/modules/EndpointModule/EndpointDetailsContent/test.tsx

@@ -19,10 +19,10 @@ import moment from 'moment'
 import TW from '../../../utils/TestWrapper'
 import EndpointDetailsContent from '.'
 
-import configLoader from '../../../utils/Config'
+import configLoader from '../../../../utils/Config'
 
 const wrap = props => new TW(shallow(
-  
+
   <EndpointDetailsContent usage={{ replicas: [], migrations: [] }}{...props} />
 ), 'edContent')
 
@@ -47,7 +47,7 @@ let connectionInfo = {
 
 describe('EndpointDetailsContent Component', () => {
   beforeAll(() => {
-    
+
     configLoader.config = { passwordFields: [] }
   })
 

src/components/organisms/EndpointDuplicateOptions/EndpointDuplicateOptions.tsx → src/components/modules/EndpointModule/EndpointDuplicateOptions/EndpointDuplicateOptions.tsx

@@ -16,13 +16,13 @@ import React from 'react'
 import { observer } from 'mobx-react'
 import styled from 'styled-components'
 
-import StatusImage from '../../atoms/StatusImage'
-import Button from '../../atoms/Button'
-import FieldInput from '../../molecules/FieldInput'
+import StatusImage from '../../../ui/StatusComponents/StatusImage/StatusImage'
+import Button from '../../../ui/Button/Button'
+import FieldInput from '../../../ui/FieldInput/FieldInput'
 
-import KeyboardManager from '../../../utils/KeyboardManager'
-import type { Project } from '../../../@types/Project'
-import Palette from '../../styleUtils/Palette'
+import KeyboardManager from '../../../../utils/KeyboardManager'
+import type { Project } from '../../../../@types/Project'
+import { ThemePalette } from '../../../Theme'
 
 import duplicateImage from './images/duplicate.svg'
 
@@ -54,7 +54,7 @@ const Title = styled.div<any>`
   margin-bottom: 8px;
 `
 const Subtitle = styled.div<any>`
-  color: ${Palette.grayscale[4]};
+  color: ${ThemePalette.grayscale[4]};
 `
 const Form = styled.div<any>`
   margin-bottom: 128px;

src/components/organisms/EndpointDuplicateOptions/test.tsx → src/components/modules/EndpointModule/EndpointDuplicateOptions/test.tsx

@@ -16,7 +16,7 @@ import React from 'react'
 import { shallow } from 'enzyme'
 import sinon from 'sinon'
 import TW from '../../../utils/TestWrapper'
-import type { Project } from '../../../@types/Project'
+import type { Project } from '../../../../@types/Project'
 import EndpointDuplicateOptions from '.'
 
 type Props = {

src/components/molecules/EndpointListItem/EndpointListItem.tsx → src/components/modules/EndpointModule/EndpointListItem/EndpointListItem.tsx

@@ -16,32 +16,31 @@ import React from 'react'
 import styled from 'styled-components'
 import { observer } from 'mobx-react'
 
-import type { Endpoint } from '../../../@types/Endpoint'
-import Checkbox from '../../atoms/Checkbox'
-import EndpointLogos from '../../atoms/EndpointLogos'
-import Palette from '../../styleUtils/Palette'
-import StyleProps from '../../styleUtils/StyleProps'
-import DateUtils from '../../../utils/DateUtils'
+import type { Endpoint } from '../../../../@types/Endpoint'
+import Checkbox from '../../../ui/Checkbox/Checkbox'
+import EndpointLogos from '../EndpointLogos/EndpointLogos'
+import { ThemePalette, ThemeProps } from '../../../Theme'
+import DateUtils from '../../../../utils/DateUtils'
 
 import endpointImage from './images/endpoint.svg'
 
 const CheckboxStyled = styled(Checkbox)`
   opacity: ${props => (props.checked ? 1 : 0)};
-  transition: all ${StyleProps.animations.swift};
+  transition: all ${ThemeProps.animations.swift};
 `
 const Content = styled.div<any>`
   display: flex;
   align-items: center;
   margin-left: 16px;
-  border-top: 1px solid ${Palette.grayscale[1]};
+  border-top: 1px solid ${ThemePalette.grayscale[1]};
   padding: 8px 16px;
   cursor: pointer;
   flex-grow: 1;
-  transition: all ${StyleProps.animations.swift};
+  transition: all ${ThemeProps.animations.swift};
   min-width: 785px;
 
   &:hover {
-    background: ${Palette.grayscale[1]};
+    background: ${ThemePalette.grayscale[1]};
   }
 `
 const Wrapper = styled.div<any>`
@@ -53,7 +52,7 @@ const Wrapper = styled.div<any>`
   }
 
   &:last-child ${Content} {
-    border-bottom: 1px solid ${Palette.grayscale[1]};
+    border-bottom: 1px solid ${ThemePalette.grayscale[1]};
   }
 `
 const Image = styled.div<any>`
@@ -75,14 +74,14 @@ const TitleLabel = styled.div<any>`
   text-overflow: ellipsis;
 `
 const Subtitle = styled.div<any>`
-  color: ${Palette.grayscale[4]};
+  color: ${ThemePalette.grayscale[4]};
   margin-top: 3px;
 `
 const ItemLabel = styled.div<any>`
-  color: ${Palette.grayscale[4]};
+  color: ${ThemePalette.grayscale[4]};
 `
 const ItemValue = styled.div<any>`
-  color: ${Palette.primary};
+  color: ${ThemePalette.primary};
 `
 const Created = styled.div<any>`
   margin: 0 48px;

src/components/atoms/EndpointLogos/EndpointLogos.tsx → src/components/modules/EndpointModule/EndpointLogos/EndpointLogos.tsx

@@ -17,7 +17,7 @@ import { observer } from 'mobx-react'
 import styled, { css } from 'styled-components'
 
 import Generic from './resources/Generic'
-import configLoader from '../../../utils/Config'
+import configLoader from '../../../../utils/Config'
 
 const Wrapper = styled.div<any>``
 const Logo = styled.div<any>`

src/components/atoms/EndpointLogos/resources/Generic.tsx → src/components/modules/EndpointModule/EndpointLogos/resources/Generic.tsx

@@ -15,8 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React from 'react'
 import styled from 'styled-components'
 
-import Palette from '../../../styleUtils/Palette'
-import StyleProps from '../../../styleUtils/StyleProps'
+import { ThemePalette, ThemeProps } from '../../../../Theme'
 import generic64Image from './generic-64.svg'
 import generic128Image from './generic-128.svg'
 import generic128DisabledImage from './generic-128-disabled.svg'
@@ -31,8 +30,8 @@ const Wrapper = styled.div<any>`
   letter-spacing: -1px;
 `
 const Logo = styled.div<any>`
-  ${(props: any) => StyleProps.exactWidth(`${props.width}px`)}
-  ${(props: any) => StyleProps.exactHeight(`${props.height}px`)}
+  ${(props: any) => ThemeProps.exactWidth(`${props.width}px`)}
+  ${(props: any) => ThemeProps.exactHeight(`${props.height}px`)}
   background: url(${(props: any) => props.image}) center no-repeat;
 `
 
@@ -47,7 +46,7 @@ class Generic extends React.Component<Props> {
     return (
       <Wrapper style={{
         fontSize: '14px',
-        color: white ? 'white' : Palette.grayscale[4],
+        color: white ? 'white' : ThemePalette.grayscale[4],
       }}
       >
         {this.props.name}
@@ -59,7 +58,7 @@ class Generic extends React.Component<Props> {
     return (
       <Wrapper style={{
         fontSize: '18px',
-        color: Palette.grayscale[4],
+        color: ThemePalette.grayscale[4],
       }}
       >
         {this.props.name}
@@ -71,7 +70,7 @@ class Generic extends React.Component<Props> {
     return (
       <Wrapper style={{
         fontSize: '22px',
-        color: Palette.black,
+        color: ThemePalette.black,
         textAlign: 'left',
       }}
       >
@@ -85,7 +84,7 @@ class Generic extends React.Component<Props> {
     return (
       <Wrapper style={{
         fontSize: '22px',
-        color: disabled ? Palette.grayscale[3] : Palette.black,
+        color: disabled ? ThemePalette.grayscale[3] : ThemePalette.black,
         textAlign: 'left',
         flexDirection: 'column',
       }}

src/components/organisms/Endpoint/Endpoint.tsx → src/components/modules/EndpointModule/EndpointModal/EndpointModal.tsx

@@ -17,25 +17,25 @@ import styled from 'styled-components'
 import { observer } from 'mobx-react'
 import { observe } from 'mobx'
 
-import EndpointLogos from '../../atoms/EndpointLogos'
-import StatusIcon from '../../atoms/StatusIcon'
-import CopyButton from '../../atoms/CopyButton'
-import StatusImage from '../../atoms/StatusImage'
-import Button from '../../atoms/Button'
-import LoadingButton from '../../molecules/LoadingButton'
-
-import type { Endpoint as EndpointType } from '../../../@types/Endpoint'
-import type { Field } from '../../../@types/Field'
-import notificationStore from '../../../stores/NotificationStore'
-import endpointStore from '../../../stores/EndpointStore'
-import providerStore from '../../../stores/ProviderStore'
-import ObjectUtils from '../../../utils/ObjectUtils'
-import Palette from '../../styleUtils/Palette'
-import DomUtils from '../../../utils/DomUtils'
-import { ContentPlugin } from '../../../plugins/endpoint'
-import DefaultContentPlugin from '../../../plugins/endpoint/default/ContentPlugin'
-import KeyboardManager from '../../../utils/KeyboardManager'
-import { ProviderTypes } from '../../../@types/Providers'
+import EndpointLogos from '../EndpointLogos/EndpointLogos'
+import StatusIcon from '../../../ui/StatusComponents/StatusIcon/StatusIcon'
+import CopyButton from '../../../ui/CopyButton/CopyButton'
+import StatusImage from '../../../ui/StatusComponents/StatusImage/StatusImage'
+import Button from '../../../ui/Button/Button'
+import LoadingButton from '../../../ui/LoadingButton/LoadingButton'
+
+import type { Endpoint as EndpointType } from '../../../../@types/Endpoint'
+import type { Field } from '../../../../@types/Field'
+import notificationStore from '../../../../stores/NotificationStore'
+import endpointStore from '../../../../stores/EndpointStore'
+import providerStore from '../../../../stores/ProviderStore'
+import ObjectUtils from '../../../../utils/ObjectUtils'
+import { ThemePalette } from '../../../Theme'
+import DomUtils from '../../../../utils/DomUtils'
+import { ContentPlugin } from '../../../../plugins'
+import DefaultContentPlugin from '../../../../plugins/default/ContentPlugin'
+import KeyboardManager from '../../../../utils/KeyboardManager'
+import { ProviderTypes } from '../../../../@types/Providers'
 
 const Wrapper = styled.div<any>`
   padding: 48px 0 32px 0;
@@ -62,7 +62,7 @@ const StatusMessage = styled.div<any>`
 `
 const ShowErrorButton = styled.span`
   font-size: 10px;
-  color: ${Palette.primary};
+  color: ${ThemePalette.primary};
   margin-left: 8px;
   cursor: pointer;
 `
@@ -122,7 +122,7 @@ type State = {
   isNew: boolean | null,
 }
 @observer
-class Endpoint extends React.Component<Props, State> {
+class EndpointModal extends React.Component<Props, State> {
   static defaultProps = {
     cancelButtonText: 'Cancel',
   }
@@ -504,4 +504,4 @@ class Endpoint extends React.Component<Props, State> {
   }
 }
 
-export default Endpoint
+export default EndpointModal

src/components/organisms/EndpointValidation/EndpointValidation.tsx → src/components/modules/EndpointModule/EndpointValidation/EndpointValidation.tsx

@@ -16,15 +16,15 @@ import React from 'react'
 import { observer } from 'mobx-react'
 import styled, { css } from 'styled-components'
 
-import Button from '../../atoms/Button'
-import CopyButton from '../../atoms/CopyButton'
-import StatusImage from '../../atoms/StatusImage'
+import Button from '../../../ui/Button/Button'
+import CopyButton from '../../../ui/CopyButton/CopyButton'
+import StatusImage from '../../../ui/StatusComponents/StatusImage/StatusImage'
 
-import Palette from '../../styleUtils/Palette'
-import type { Validation as ValidationType } from '../../../@types/Endpoint'
+import { ThemePalette } from '../../../Theme'
+import type { Validation as ValidationType } from '../../../../@types/Endpoint'
 
-import notificationStore from '../../../stores/NotificationStore'
-import DomUtils from '../../../utils/DomUtils'
+import notificationStore from '../../../../stores/NotificationStore'
+import DomUtils from '../../../../utils/DomUtils'
 
 const Wrapper = styled.div<any>`
   padding: 48px 32px 32px 32px;
@@ -51,7 +51,7 @@ const Title = styled.div<any>`
   margin-bottom: 8px;
 `
 const Subtitle = styled.div<any>`
-  color: ${Palette.grayscale[4]};
+  color: ${ThemePalette.grayscale[4]};
 `
 const Buttons = styled.div<any>`
   margin-top: 48px;

src/components/organisms/Licence/Licence.tsx → src/components/modules/LicenceModule/LicenceModule.tsx

@@ -17,14 +17,13 @@ import { observer } from 'mobx-react'
 import styled, { css } from 'styled-components'
 import moment from 'moment'
 
-import Button from '../../atoms/Button'
-import LoadingButton from '../../molecules/LoadingButton'
-import StatusImage from '../../atoms/StatusImage'
-import TextArea from '../../atoms/TextArea'
-import CopyValue from '../../atoms/CopyValue'
-
-import StyleProps from '../../styleUtils/StyleProps'
-import Palette from '../../styleUtils/Palette'
+import Button from '../../ui/Button/Button'
+import LoadingButton from '../../ui/LoadingButton/LoadingButton'
+import StatusImage from '../../ui/StatusComponents/StatusImage/StatusImage'
+import TextArea from '../../ui/TextArea/TextArea'
+import CopyValue from '../../ui/CopyValue/CopyValue'
+
+import { ThemePalette, ThemeProps } from '../../Theme'
 import FileUtils from '../../../utils/FileUtils'
 
 import type { Licence, LicenceServerStatus } from '../../../@types/Licence'
@@ -38,7 +37,7 @@ const Wrapper = styled.div<any>`
 `
 const TextAreaStyled = styled(TextArea)`
   ${props => (props.dropzone ? css`
-    border: 1px dashed ${Palette.primary};
+    border: 1px dashed ${ThemePalette.primary};
   ` : '')}
 `
 const LicenceInfoWrapper = styled.div<any>`
@@ -55,15 +54,15 @@ const LicenceRow = styled.div<any>`
 const LicenceRowLabel = styled.div<any>`
   display: flex;
   align-items: center;
-  font-weight: ${StyleProps.fontWeights.medium};
+  font-weight: ${ThemeProps.fontWeights.medium};
   font-size: 10px;
   text-transform: uppercase;
-  color: ${Palette.grayscale[3]};
+  color: ${ThemePalette.grayscale[3]};
 `
 const LicenceLink = styled.span`
   text-transform: initial;
-  color: ${Palette.primary};
-  font-weight: ${StyleProps.fontWeights.regular};
+  color: ${ThemePalette.primary};
+  font-weight: ${ThemeProps.fontWeights.regular};
   cursor: pointer;
 `
 const LicenceRowContent = styled.div<any>`
@@ -93,7 +92,7 @@ const LicenceAddWrapper = styled.div<any>`
   padding: 0 32px;
 `
 const Description = styled.div<any>`
-  color: ${Palette.grayscale[3]};
+  color: ${ThemePalette.grayscale[3]};
 `
 const FakeFileInput = styled.input`
   position: absolute;
@@ -120,7 +119,7 @@ type State = {
 }
 
 @observer
-class LicenceC extends React.Component<Props, State> {
+class LicenceModule extends React.Component<Props, State> {
   state = {
     licence: '',
     isValid: false,
@@ -341,7 +340,7 @@ class LicenceC extends React.Component<Props, State> {
       <LicenceAddWrapper>
         <Logo
           dangerouslySetInnerHTML={
-            { __html: licenceImage(this.state.isValid ? Palette.primary : Palette.grayscale[5]) }
+            { __html: licenceImage(this.state.isValid ? ThemePalette.primary : ThemePalette.grayscale[5]) }
           }
         />
         <LicenceRowLabel style={{ marginTop: '32px' }}>Licence</LicenceRowLabel>
@@ -389,4 +388,4 @@ class LicenceC extends React.Component<Props, State> {
   }
 }
 
-export default LicenceC
+export default LicenceModule

src/components/organisms/DashboardContent/modules/LicenceModule/package.json → src/components/modules/LicenceModule/package.json

@@ -4,4 +4,3 @@
   "private": true,
   "main": "./LicenceModule.tsx"
 }
-

src/components/organisms/LoginForm/LoginForm.tsx → src/components/modules/LoginModule/LoginForm/LoginForm.tsx

@@ -16,17 +16,17 @@ import React, { FormEvent } from 'react'
 import { observer } from 'mobx-react'
 import styled, { css } from 'styled-components'
 
-import Button from '../../atoms/Button'
-import LoginOptions from '../../molecules/LoginOptions'
-import LoadingButton from '../../molecules/LoadingButton'
-import LoginFormField from '../../molecules/LoginFormField'
+import Button from '../../../ui/Button/Button'
+import LoginOptions from '../LoginOptions/LoginOptions'
+import LoadingButton from '../../../ui/LoadingButton/LoadingButton'
+import LoginFormField from '../LoginFormField/LoginFormField'
 
-import StyleProps from '../../styleUtils/StyleProps'
 
 import errorIcon from './images/error.svg'
 
-import { loginButtons } from '../../../constants'
-import notificationStore from '../../../stores/NotificationStore'
+import { loginButtons } from '../../../../constants'
+import notificationStore from '../../../../stores/NotificationStore'
+import { ThemeProps } from '../../../Theme'
 
 const Form = styled.form`
   background: rgba(221, 224, 229, 0.5);
@@ -77,7 +77,7 @@ const LoginErrorText = styled.div<any>`
   color: white;
   font-size: 12px;
   margin-top: 4px;
-  width: ${StyleProps.inputSizes.regular.width}px;
+  width: ${ThemeProps.inputSizes.regular.width}px;
   text-align: center;
 `
 

src/components/molecules/LoginFormField/LoginFormField.tsx → src/components/modules/LoginModule/LoginFormField/LoginFormField.tsx

@@ -14,9 +14,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from 'react'
 import styled from 'styled-components'
+import { ThemeProps } from '../../../Theme'
 
-import TextInput from '../../atoms/TextInput'
-import StyleProps from '../../styleUtils/StyleProps'
+import TextInput from '../../../ui/TextInput/TextInput'
 
 const Wrapper = styled.div<any>`
   margin-bottom: 16px;
@@ -26,11 +26,11 @@ const FormFieldLabel = styled.div<any>`
   color: white;
   text-transform: uppercase;
   margin-bottom: 6px;
-  font-weight: ${StyleProps.fontWeights.medium};
+  font-weight: ${ThemeProps.fontWeights.medium};
   font-size: 9px;
 `
 const StyledTextInput = styled(TextInput)<any>`
-  width: ${StyleProps.inputSizes.regular.width}px;
+  width: ${ThemeProps.inputSizes.regular.width}px;
 `
 
 type Props = {

src/components/molecules/LoginOptions/LoginOptions.tsx → src/components/modules/LoginModule/LoginOptions/LoginOptions.tsx

@@ -15,9 +15,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React from 'react'
 import styled, { css } from 'styled-components'
 
-import StyleProps from '../../styleUtils/StyleProps'
-import Palette from '../../styleUtils/Palette'
-import { loginButtons } from '../../../constants'
+import { ThemePalette, ThemeProps } from '../../../Theme'
+import { loginButtons } from '../../../../constants'
 import googleLogo from './images/google-logo.svg'
 import microsoftLogo from './images/microsoft-logo.svg'
 import facebookLogo from './images/facebook-logo.svg'
@@ -37,8 +36,8 @@ const buttonStyle = (id: any, isLogo?: boolean) => {
       return isLogo
         ? css`background-image: url('${googleLogo}');`
         : css`
-          color: ${Palette.grayscale[4]};
-          border-color: ${Palette.grayscale[2]};
+          color: ${ThemePalette.grayscale[4]};
+          border-color: ${ThemePalette.grayscale[2]};
           background-color: white;
         `
     case 'microsoft':
@@ -63,8 +62,8 @@ const buttonStyle = (id: any, isLogo?: boolean) => {
       return isLogo
         ? css`background-image: url('${githubLogo}');`
         : css`
-          border-color: ${Palette.grayscale[4]};
-          background-color: ${Palette.grayscale[4]};
+          border-color: ${ThemePalette.grayscale[4]};
+          background-color: ${ThemePalette.grayscale[4]};
         `
     default:
       return ''
@@ -72,12 +71,12 @@ const buttonStyle = (id: any, isLogo?: boolean) => {
 }
 
 const Button = styled.div<any>`
-  width: ${StyleProps.inputSizes.large.width - 2}px;
-  height: ${StyleProps.inputSizes.large.height - 2}px;
+  width: ${ThemeProps.inputSizes.large.width - 2}px;
+  height: ${ThemeProps.inputSizes.large.height - 2}px;
   display: flex;
   align-items: center;
   border: 1px solid;
-  border-radius: ${StyleProps.borderRadius};
+  border-radius: ${ThemeProps.borderRadius};
   color: white;
   cursor: pointer;
   margin-left: 16px;