Merge pull request #2367 from devtron-labs/feat/theming-v2

feat: theming v2

Author: eshankvaish

index.css

@@ -11,9 +11,9 @@
 
     /* TODO: Comment when theming goes live on production */
     /* @media (prefers-color-scheme: dark) {
-        --bg-tertiary: #0d0f1c;
-        --bg-devtron-loader: #172433;
-        --fill-devtron-loader: #74B5FF;
+        --bg-tertiary: #15161F;
+        --bg-devtron-loader: #28364c;
+        --fill-devtron-loader: #6195d2;
     } */
 }
 

package.json

@@ -4,7 +4,7 @@
     "private": true,
     "homepage": "/dashboard",
     "dependencies": {
-        "@devtron-labs/devtron-fe-common-lib": "1.5.1",
+        "@devtron-labs/devtron-fe-common-lib": "1.5.2",
         "@esbuild-plugins/node-globals-polyfill": "0.2.3",
         "@rjsf/core": "^5.13.3",
         "@rjsf/utils": "^5.13.3",

src/Pages/GlobalConfigurations/Authorization/Shared/components/AppPermissions/constants.ts

@@ -15,6 +15,7 @@
  */
 
 import { ACCESS_TYPE_MAP, EntityTypes, SelectPickerOptionType } from '@devtron-labs/devtron-fe-common-lib'
+import { StylesConfig } from 'react-select'
 import { SELECT_ALL_VALUE } from '../../../../../../config'
 import { ActionTypes, authorizationSelectStyles } from '../../../constants'
 import { getDefaultStatusAndTimeout } from '../../../libUtils'
@@ -72,10 +73,10 @@ export enum DirectPermissionFieldName {
     status = 'status',
 }
 
-export const roleSelectStyles = {
+export const roleSelectStyles: StylesConfig = {
     ...authorizationSelectStyles,
-    valueContainer: (base) => ({
-        ...authorizationSelectStyles.valueContainer(base),
+    valueContainer: (base, state) => ({
+        ...authorizationSelectStyles.valueContainer(base, state),
         display: 'flex',
         flexWrap: 'nowrap',
         textOverflow: 'ellipsis',

src/Pages/GlobalConfigurations/Authorization/constants.ts

@@ -76,8 +76,8 @@ export const authorizationSelectStyles = {
         ..._selectStyles.control(base, state),
         height: '36px',
     }),
-    valueContainer: (base) => ({
-        ..._selectStyles.valueContainer(base),
+    valueContainer: (base, state) => ({
+        ..._selectStyles.valueContainer(base, state),
         maxHeight: '100%',
     }),
     option: (base, state) => ({

src/Pages/GlobalConfigurations/DeploymentCharts/List/UploadButton.tsx

@@ -1,16 +1,14 @@
 import { ReactComponent as Upload } from '@Icons/ic-upload.svg'
+import { Button } from '@devtron-labs/devtron-fe-common-lib'
 import { UploadButtonProps } from '../types'
 
 const UploadButton = ({ handleOpenUploadChartModal }: UploadButtonProps) => (
-    <button
-        type="button"
+    <Button
+        text="Upload Chart"
+        startIcon={<Upload />}
         onClick={handleOpenUploadChartModal}
-        data-testid="upload-custom-chart-button"
-        className="cta h-32 flex"
-    >
-        <Upload className="icon-dim-14 dc__no-svg-fill mr-8" />
-        Upload Chart
-    </button>
+        dataTestId="upload-custom-chart-button"
+    />
 )
 
 export default UploadButton

src/Pages/Shared/LinkedCIDetailsModal/constants.ts

@@ -47,8 +47,8 @@ export const environmentFilterDropdownStyles = {
         height: 32,
         minHeight: 32,
     }),
-    menu: (base) => ({
-        ...commonStyles.menu(base),
+    menu: (base, state) => ({
+        ...commonStyles.menu(base, state),
         zIndex: 5,
     }),
 }

src/Pages/Shared/OrganizationFrame/OrganizationFrame.component.tsx

@@ -16,6 +16,7 @@
 
 import { getRandomColor } from '@devtron-labs/devtron-fe-common-lib'
 import { ReactComponent as ICDevtron } from '../../../assets/icons/ic-devtron-blue-outline.svg'
+import './organizationFrame.scss'
 
 const OrganizationFrame = () => (
     <div className="w-36 h-42 dc__no-shrink flexbox dc__position-rel dc__content-center">
@@ -30,7 +31,7 @@ const OrganizationFrame = () => (
             </span>
         </div>
 
-        <ICDevtron className="icon-dim-20 dc__no-shrink dc__position-abs dc__bottom-0" />
+        <ICDevtron className="icon-dim-20 dc__no-shrink dc__position-abs dc__bottom-0 organization-frame__logo" />
     </div>
 )
 

src/Pages/Shared/OrganizationFrame/organizationFrame.scss

@@ -0,0 +1,7 @@
+.organization-frame {
+    &__logo {
+        > path:first-child {
+            fill: var(--bg-sidebar);
+        }
+    }
+}