theme get -> getThemeColor

plgd-dev · May 12, 2024 · 21f62d1 · 21f62d1
1 parent dad6c22
commit 21f62d1
Show file tree

Hide file tree

Showing 192 changed files with 2,608 additions and 977 deletions.
diff --git a/...tApp/Devices/Detail/IncompleteOnboardingDataModal/IncompleteOnboardingDataModal.styles.ts b/...tApp/Devices/Detail/IncompleteOnboardingDataModal/IncompleteOnboardingDataModal.styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@emotion/react'
-import { ThemeType, get } from '../../../../../components/Atomic/_theme'
+import { ThemeType, getThemeColor } from '../../../../../components/Atomic/_theme'
 
 export const topLine = css`
     display: flex;
@@ -9,7 +9,7 @@ export const topLine = css`
 
 export const row = (theme: ThemeType) => css`
     padding: 6px 0;
-    background: ${get(theme, `IncompleteOnboardingDataModal.row.background`)};
+    background: ${getThemeColor(theme, `IncompleteOnboardingDataModal.row.background`)};
 `
 
 export const inputWrapper = css`

diff --git a/src/common/styles/default.scss b/src/common/styles/default.scss
@@ -8,10 +8,8 @@ textarea,
 select,
 table,
 .tooltip-inner {
-  font-family: 'Mulish', sans-serif;
   font-size: $font_size;
   font-weight: 400;
-  color: $secondary_40;
 }
 
 a,

diff --git a/src/components/Atomic/ActionButton/ActionButton.styles.ts b/src/components/Atomic/ActionButton/ActionButton.styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@emotion/react'
-import { get, ThemeType } from '../_theme'
+import { getThemeColor, ThemeType } from '../_theme'
 
 export const actionButton = css`
     width: 20px;
@@ -8,8 +8,8 @@ export const actionButton = css`
 
 export const floatingMenu = (theme: ThemeType) => css`
     z-index: 10;
-    background: ${get(theme, `ActionButton.floatingMenu.background`)};
-    border: 1px solid ${get(theme, `ActionButton.floatingMenu.borderColor`)};
+    background: ${getThemeColor(theme, `ActionButton.floatingMenu.background`)};
+    border: 1px solid ${getThemeColor(theme, `ActionButton.floatingMenu.borderColor`)};
     box-shadow: 0 30px 40px rgba(28, 52, 99, 0.1);
     border-radius: 8px;
     padding: 8px 16px;
@@ -19,14 +19,14 @@ export const item = (theme: ThemeType) => css`
     display: flex;
     align-items: center;
     text-decoration: none;
-    color: ${get(theme, `ActionButton.item.color`)};
+    color: ${getThemeColor(theme, `ActionButton.item.color`)};
     transition: all 0.3s;
     padding: 8px 0;
     cursor: pointer;
-    border-bottom: 1px solid ${get(theme, `ActionButton.item.borderColor`)};
+    border-bottom: 1px solid ${getThemeColor(theme, `ActionButton.item.borderColor`)};
 
     &:hover {
-        color: ${get(theme, `ActionButton.item.hover.color`)};
+        color: ${getThemeColor(theme, `ActionButton.item.hover.color`)};
     }
 
     &:last-child {
@@ -49,15 +49,15 @@ export const icon = (theme: ThemeType) => css`
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    color: ${get(theme, `ActionButton.icon.color`)};
+    color: ${getThemeColor(theme, `ActionButton.icon.color`)};
     transition: all 0.3s;
     cursor: pointer;
 
     &:hover {
-        color: ${get(theme, `ActionButton.icon.hover.color`)};
+        color: ${getThemeColor(theme, `ActionButton.icon.hover.color`)};
     }
 `
 
 export const iconActive = (theme: ThemeType) => css`
-    color: ${get(theme, `ActionButton.icon.active.color`)};
+    color: ${getThemeColor(theme, `ActionButton.icon.active.color`)};
 `
diff --git a/src/components/Atomic/ActionButton/ActionButton.test.tsx b/src/components/Atomic/ActionButton/ActionButton.test.tsx
@@ -1,4 +1,6 @@
-import { render, waitFor } from '@testing-library/react'
+import { waitFor } from '@testing-library/react'
+
+import { render } from '../../../../test/jest-wrapper'
 import ActionButton from './ActionButton'
 import { IconEdit, IconPlus, IconTrash } from '../Icon'
 

diff --git a/src/components/Atomic/ActionButton/__snapshots__/ActionButton.test.tsx.snap b/src/components/Atomic/ActionButton/__snapshots__/ActionButton.test.tsx.snap
@@ -22,14 +22,21 @@ exports[`<ActionButton> render correctly - snapshot 1`] = `
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;
+  color: #81868C;
   -webkit-transition: all 0.3s;
   transition: all 0.3s;
   cursor: pointer;
+  color: #007BBF;
+}
+
+.emotion-1:hover {
+  color: #007BBF;
 }
 
 .emotion-2 {
   z-index: 10;
-  border: 1px solid;
+  background: #FFFFFF;
+  border: 1px solid #E6E9ED;
   box-shadow: 0 30px 40px rgba(28, 52, 99, 0.1);
   border-radius: 8px;
   padding: 8px 16px;
@@ -46,11 +53,16 @@ exports[`<ActionButton> render correctly - snapshot 1`] = `
   align-items: center;
   -webkit-text-decoration: none;
   text-decoration: none;
+  color: #81868C;
   -webkit-transition: all 0.3s;
   transition: all 0.3s;
   padding: 8px 0;
   cursor: pointer;
-  border-bottom: 1px solid;
+  border-bottom: 1px solid #E6E9ED;
+}
+
+.emotion-3:hover {
+  color: #2261AE;
 }
 
 .emotion-3:last-child {

diff --git a/src/components/Atomic/Alert/Alert.styles.ts b/src/components/Atomic/Alert/Alert.styles.ts
@@ -1,15 +1,15 @@
 import { css } from '@emotion/react'
 import { colors } from '../_utils/colors'
 import { hexToRgbA } from '../_utils/commonStyles'
-import { ThemeType, get } from '../_theme'
+import { ThemeType, getThemeColor } from '../_theme'
 
 export const alert = (theme: ThemeType) => css`
     display: inline-grid;
     padding: 12px 20px;
     border-radius: 8px;
-    background: ${get(theme, 'Alert.background')};
+    background: ${getThemeColor(theme, 'Alert.background')};
     box-shadow: 0 30px 40px 0 rgba(28, 52, 99, 0.1);
-    border: 1px solid ${get(theme, 'Alert.borderColor')};
+    border: 1px solid ${getThemeColor(theme, 'Alert.borderColor')};
     position: relative;
     overflow: hidden;
     grid: auto / auto auto auto;
@@ -23,56 +23,56 @@ export const alert = (theme: ThemeType) => css`
         bottom: 0;
         width: 4px;
         height: 100%;
-        background: ${get(theme, 'Alert.line.background')};
+        background: ${getThemeColor(theme, 'Alert.line.background')};
     }
 `
 
 export const success = (theme: ThemeType) => css`
-    background: ${hexToRgbA(get(theme, 'Alert.success.background', colors.green), 0.15)};
+    background: ${hexToRgbA(getThemeColor(theme, 'Alert.success.background', colors.green), 0.15)};
 
     &:before {
-        background: ${get(theme, 'Alert.success.line.background')};
+        background: ${getThemeColor(theme, 'Alert.success.line.background')};
     }
 `
 
 export const iconSuccess = (theme: ThemeType) => css`
-    color: ${get(theme, 'Alert.success.icon.color')};
+    color: ${getThemeColor(theme, 'Alert.success.icon.color')};
 `
 
 export const warning = (theme: ThemeType) => css`
-    background: ${hexToRgbA(get(theme, 'Alert.warning.background', colors.yellow), 0.15)};
+    background: ${hexToRgbA(getThemeColor(theme, 'Alert.warning.background', colors.yellow), 0.15)};
 
     &:before {
-        background: ${get(theme, 'Alert.warning.line.background')};
+        background: ${getThemeColor(theme, 'Alert.warning.line.background')};
     }
 `
 
 export const iconWarning = (theme: ThemeType) => css`
-    color: ${get(theme, 'Alert.warning.icon.color')};
+    color: ${getThemeColor(theme, 'Alert.warning.icon.color')};
 `
 
 export const error = (theme: ThemeType) => css`
-    background: ${hexToRgbA(get(theme, 'Alert.error.background', colors.red), 0.15)};
+    background: ${hexToRgbA(getThemeColor(theme, 'Alert.error.background', colors.red), 0.15)};
 
     &:before {
-        background: ${get(theme, 'Alert.error.line.background')};
+        background: ${getThemeColor(theme, 'Alert.error.line.background')};
     }
 `
 
 export const iconError = (theme: ThemeType) => css`
-    color: ${get(theme, 'Alert.error.icon.color')};
+    color: ${getThemeColor(theme, 'Alert.error.icon.color')};
 `
 
 export const icon = (theme: ThemeType) => css`
     flex: 0 0 24px;
-    color: ${get(theme, 'Alert.icon.color')};
+    color: ${getThemeColor(theme, 'Alert.icon.color')};
     position: relative;
     top: 2px;
 `
 
 export const label = (theme: ThemeType) => css`
     padding-left: 12px;
-    color: ${get(theme, 'Alert.label.color')};
+    color: ${getThemeColor(theme, 'Alert.label.color')};
     line-height: 18px;
     display: flex;
     align-items: center;
@@ -82,17 +82,17 @@ export const iconClose = (theme: ThemeType) => css`
     flex: 0 0 32px;
     width: 32px;
     padding-left: 12px;
-    color: ${get(theme, 'Alert.close.color')};
+    color: ${getThemeColor(theme, 'Alert.close.color')};
     cursor: pointer;
     position: relative;
     top: 4px;
     transition: all 0.3s;
 
     &:hover {
-        color: ${get(theme, 'Alert.close.hover.color')};
+        color: ${getThemeColor(theme, 'Alert.close.hover.color')};
     }
 `
 
 export const noSeverityBg = (theme: ThemeType) => css`
-    background: ${get(theme, 'Alert.background')}!important;
+    background: ${getThemeColor(theme, 'Alert.background')}!important;
 `
diff --git a/src/components/Atomic/Alert/Alert.test.tsx b/src/components/Atomic/Alert/Alert.test.tsx
@@ -1,5 +1,7 @@
 import React from 'react'
-import { render, screen } from '@testing-library/react'
+import { screen } from '@testing-library/react'
+
+import { render } from '../../../../test/jest-wrapper'
 import Alert from './Alert'
 
 describe('<Alert>', () => {

diff --git a/src/components/Atomic/Alert/__snapshots__/Alert.test.tsx.snap b/src/components/Atomic/Alert/__snapshots__/Alert.test.tsx.snap
@@ -6,8 +6,9 @@ exports[`<Alert> snapshot 1`] = `
   display: inline-grid;
   padding: 12px 20px;
   border-radius: 8px;
+  background: #FFFFFF;
   box-shadow: 0 30px 40px 0 rgba(28, 52, 99, 0.1);
-  border: 1px solid;
+  border: 1px solid #E6E9ED;
   position: relative;
   overflow: hidden;
   grid: auto/auto auto auto;
@@ -22,18 +23,21 @@ exports[`<Alert> snapshot 1`] = `
   bottom: 0;
   width: 4px;
   height: 100%;
+  background: #0A2965;
 }
 
 .emotion-1 {
   -webkit-flex: 0 0 24px;
   -ms-flex: 0 0 24px;
   flex: 0 0 24px;
+  color: #0A2965;
   position: relative;
   top: 2px;
 }
 
 .emotion-2 {
   padding-left: 12px;
+  color: #757676;
   line-height: 18px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -51,13 +55,18 @@ exports[`<Alert> snapshot 1`] = `
   flex: 0 0 32px;
   width: 32px;
   padding-left: 12px;
+  color: #81868C;
   cursor: pointer;
   position: relative;
   top: 4px;
   -webkit-transition: all 0.3s;
   transition: all 0.3s;
 }
 
+.emotion-3:hover {
+  color: #2261AE;
+}
+
 <div
     class="emotion-0"
     style="opacity: 1; transform: none;"

diff --git a/src/components/Atomic/App/App.styles.ts b/src/components/Atomic/App/App.styles.ts
@@ -1,16 +1,16 @@
 import { css } from '@emotion/react'
 import { fontPrimary } from '../_utils/commonStyles'
-import { ThemeType, get } from '../_theme'
+import { ThemeType, getTheme } from '../_theme'
 
 export const global = (theme: ThemeType) => css`
     * {
         box-sizing: border-box;
     }
     body {
         margin: 0;
-        font-family: ${get(theme, `Global.fontPrimary`, fontPrimary)};
-        font-size: ${get(theme, `Global.fontSize`, '14px')};
-        line-height: ${get(theme, `Global.lineHeight`, '22px')};
+        font-family: ${getTheme(theme, `Global.fontPrimary`, fontPrimary)};
+        font-size: ${getTheme(theme, `Global.fontSize`, '14px')};
+        line-height: ${getTheme(theme, `Global.lineHeight`, '22px')};
         font-weight: 400;
     }
 `
diff --git a/src/components/Atomic/Button/Button.styles.ts b/src/components/Atomic/Button/Button.styles.ts
@@ -1,14 +1,15 @@
 import { css } from '@emotion/react'
 import { ButtonIconPositionType, ButtonVariantsType } from './Button.types'
 import { iconPositions } from './constants'
-import { get, ThemeType } from '../_theme'
+import { getTheme, getThemeColor, ThemeType } from '../_theme'
+import { fontPrimary } from '../_utils/commonStyles'
 
-export const button = css`
+export const button = (theme: ThemeType) => css`
     display: inline-flex;
     align-items: center;
     justify-content: center;
     transition: all 0.25s;
-    font-family: 'Poppins', sans-serif;
+    font-family: ${getTheme(theme, `Global.fontPrimary`, fontPrimary)};
     font-style: normal;
     font-weight: 600;
     text-align: center;
@@ -19,27 +20,27 @@ export const button = css`
 `
 
 export const variant = (variant: ButtonVariantsType | undefined, theme: ThemeType) => css`
-    background: ${get(theme, `Button.${variant}.background`)};
-    border: 1px solid ${get(theme, `Button.${variant}.borderColor`)};
-    color: ${get(theme, `Button.${variant}.color`)};
+    background: ${getThemeColor(theme, `Button.${variant}.background`)};
+    border: 1px solid ${getThemeColor(theme, `Button.${variant}.borderColor`)};
+    color: ${getThemeColor(theme, `Button.${variant}.color`)};
 
     &:hover {
-        background: ${get(theme, `Button.${variant}.hover.background`)};
-        border-color: ${get(theme, `Button.${variant}.hover.borderColor`)};
-        color: ${get(theme, `Button.${variant}.hover.color`)};
+        background: ${getThemeColor(theme, `Button.${variant}.hover.background`)};
+        border-color: ${getThemeColor(theme, `Button.${variant}.hover.borderColor`)};
+        color: ${getThemeColor(theme, `Button.${variant}.hover.color`)};
     }
 `
 
 export const variantDisabled = (variant: ButtonVariantsType | undefined, theme: ThemeType) => css`
-    background: ${get(theme, `Button.${variant}.disabled.background`)};
-    border: 1px solid ${get(theme, `Button.${variant}.disabled.borderColor`)};
-    color: ${get(theme, `Button.${variant}.disabled.color`)};
+    background: ${getThemeColor(theme, `Button.${variant}.disabled.background`)};
+    border: 1px solid ${getThemeColor(theme, `Button.${variant}.disabled.borderColor`)};
+    color: ${getThemeColor(theme, `Button.${variant}.disabled.color`)};
     cursor: not-allowed !important;
 
     &:hover {
-        background: ${get(theme, `Button.${variant}.disabled.background`)};
-        border-color: ${get(theme, `Button.${variant}.disabled.borderColor`)};
-        color: ${get(theme, `Button.${variant}.disabled.color`)};
+        background: ${getThemeColor(theme, `Button.${variant}.disabled.background`)};
+        border-color: ${getThemeColor(theme, `Button.${variant}.disabled.borderColor`)};
+        color: ${getThemeColor(theme, `Button.${variant}.disabled.color`)};
     }
 `
 

diff --git a/src/components/Atomic/Button/Button.test.tsx b/src/components/Atomic/Button/Button.test.tsx
@@ -1,8 +1,10 @@
 import React from 'react'
+import { forEach } from 'lodash'
+import { fireEvent, waitFor } from '@testing-library/react'
+
 import Button from './Button'
-import { fireEvent, render, waitFor } from '@testing-library/react'
+import { render } from '../../../../test/jest-wrapper'
 import { buttonVariants, buttonSizes } from './constants'
-import { forEach } from 'lodash'
 
 describe('<Button>', () => {
     it('render correctly - snapshot', () => {