From a1c165e216f7f0d4d1a6f9b939c2100e049fcc8e Mon Sep 17 00:00:00 2001 From: erenfn Date: Tue, 24 Dec 2024 22:42:18 +0300 Subject: [PATCH] Refactored styles to theme.jsx --- frontend/dist/index.html | 4 +- frontend/src/assets/theme.jsx | 70 +++++++++++++++++-- .../ColorTextField/ColorTextField.module.scss | 16 ----- .../components/DropdownList/DropdownList.css | 8 --- .../components/HeadingTabs/HeadingTabs.jsx | 25 ------- .../src/components/HeadingTabs/TabStyles.css | 36 ---------- .../CustomTextField/CustomTextFieldStyles.css | 12 +--- .../settings/TeamTab/TeamTab.module.css | 4 -- frontend/src/utils/constants.js | 4 +- 9 files changed, 71 insertions(+), 108 deletions(-) delete mode 100644 frontend/src/components/HeadingTabs/HeadingTabs.jsx delete mode 100644 frontend/src/components/HeadingTabs/TabStyles.css diff --git a/frontend/dist/index.html b/frontend/dist/index.html index 282748a1..8d42b4b9 100644 --- a/frontend/dist/index.html +++ b/frontend/dist/index.html @@ -5,8 +5,8 @@ Bluewave Onboarding - - + + diff --git a/frontend/src/assets/theme.jsx b/frontend/src/assets/theme.jsx index 15742d75..7332de6d 100644 --- a/frontend/src/assets/theme.jsx +++ b/frontend/src/assets/theme.jsx @@ -29,6 +29,24 @@ export const lightTheme = createTheme({ }, }, }, + MuiTabPanel: { + styleOverrides: { + root: { + padding: 0, + }, + }, + }, + MuiMenuItem: { + styleOverrides: { + root: { + margin: "0px 5px !important", + "&.Mui-selected": { + backgroundColor: "#F9FAFB !important", + borderRadius: "8px !important", + }, + }, + }, + }, MuiDrawer: { styleOverrides: { paper: { @@ -38,6 +56,19 @@ export const lightTheme = createTheme({ }, }, }, + MuiOutlinedInput: { + styleOverrides: { + root: { + borderRadius: "8px", + "&:hover .MuiOutlinedInput-notchedOutline": { + borderColor: "var(--main-purple)", + }, + "&.Mui-focused .MuiOutlinedInput-notchedOutline": { + borderColor: "var(--main-purple)", + }, + }, + }, + }, MuiButtonBase: { defaultProps: { disableRipple: true, @@ -69,6 +100,33 @@ export const darkTheme = createTheme({ }, }, }, + MuiTab: { + styleOverrides: { + root: { + textTransform: "none", + fontSize: "14px", + padding: "3px 9px", + }, + }, + }, + MuiTabPanel: { + styleOverrides: { + root: { + padding: 0, + }, + }, + }, + MuiMenuItem: { + styleOverrides: { + root: { + margin: "0px 5px !important", + "&.Mui-selected": { + backgroundColor: "#F9FAFB !important", + borderRadius: "8px !important", + }, + }, + }, + }, MuiDrawer: { styleOverrides: { paper: { @@ -78,12 +136,16 @@ export const darkTheme = createTheme({ }, }, }, - MuiTab: { + MuiOutlinedInput: { styleOverrides: { root: { - textTransform: "none", - fontSize: "14px", - padding: "3px 9px", + borderRadius: "8px", + "&:hover .MuiOutlinedInput-notchedOutline": { + borderColor: "var(--main-purple)", + }, + "&.Mui-focused .MuiOutlinedInput-notchedOutline": { + borderColor: "var(--main-purple)", + }, }, }, }, diff --git a/frontend/src/components/ColorTextField/ColorTextField.module.scss b/frontend/src/components/ColorTextField/ColorTextField.module.scss index 05932322..39c2eaf6 100644 --- a/frontend/src/components/ColorTextField/ColorTextField.module.scss +++ b/frontend/src/components/ColorTextField/ColorTextField.module.scss @@ -2,22 +2,6 @@ .colorTextField { - :global { - .MuiOutlinedInput-root { - &:hover fieldset { - border-color: var(--main-purple); - } - - &.Mui-focused fieldset { - border-color: var(--main-purple); - } - - } - .MuiOutlinedInput-root { - border-radius: 8px; - } - } - input { font-size: var(--font-regular); height: 34px; diff --git a/frontend/src/components/DropdownList/DropdownList.css b/frontend/src/components/DropdownList/DropdownList.css index 5eb41c45..9774f5a5 100644 --- a/frontend/src/components/DropdownList/DropdownList.css +++ b/frontend/src/components/DropdownList/DropdownList.css @@ -13,11 +13,3 @@ font-size: var(--font-regular) !important; } -.MuiMenuItem-root.Mui-selected { - background-color: #F9FAFB !important; - border-radius: 8px !important; -} - -.MuiMenuItem-root { - margin: 0px 5px !important; -} \ No newline at end of file diff --git a/frontend/src/components/HeadingTabs/HeadingTabs.jsx b/frontend/src/components/HeadingTabs/HeadingTabs.jsx deleted file mode 100644 index 245aff79..00000000 --- a/frontend/src/components/HeadingTabs/HeadingTabs.jsx +++ /dev/null @@ -1,25 +0,0 @@ -import React, { useState } from 'react'; -import { Tab, Tabs } from '@mui/material'; -import DataTable from "../Table/Table"; -import { demoData } from '../../data/demoData'; -import './TabStyles.css'; - -const HeadingTabs = () => { - const [value, setValue] = useState(0); - - const handleChange = (event, newValue) => { - setValue(newValue); - }; - - return ( -
- - - - - -
- ); -}; - -export default HeadingTabs; diff --git a/frontend/src/components/HeadingTabs/TabStyles.css b/frontend/src/components/HeadingTabs/TabStyles.css deleted file mode 100644 index bc966f45..00000000 --- a/frontend/src/components/HeadingTabs/TabStyles.css +++ /dev/null @@ -1,36 +0,0 @@ -.MuiTab-root { - font-family: 'Inter', sans-serif; - font-size: var(--font-regular); - font-style: normal; - font-weight: 400; - line-height: 20px; - } -.MuiTabs-root .MuiTab-root.Mui-selected { - color: var(--main-purple); - } - -.MuiTabs-root .MuiTab-root:not(.Mui-selected) { -color: var(--main-text-color); -border-bottom: 1px solid var(--Colors-Foreground-fg-brand-primary_alt, #EAECF0); -} - -.MuiTabs-root .MuiTabs-indicator { -background-color: var(--main-purple); -} -.container-tabs{ - padding: 45px; - width: 980px; - height: 1067px; - flex-shrink: 0; - border-radius: 5px; - border: 1px solid #EBEBEB; - background: #FFF; -} -.tabs-row{ - display: flex; -width: 980px; -flex-direction: column; -align-items: flex-start; -gap: var(--spacing-md, 8px); -border-bottom: 1px solid var(--Colors-Border-border-secondary, #EAECF0); -} \ No newline at end of file diff --git a/frontend/src/components/TextFieldComponents/CustomTextField/CustomTextFieldStyles.css b/frontend/src/components/TextFieldComponents/CustomTextField/CustomTextFieldStyles.css index f1458a3c..78e43269 100644 --- a/frontend/src/components/TextFieldComponents/CustomTextField/CustomTextFieldStyles.css +++ b/frontend/src/components/TextFieldComponents/CustomTextField/CustomTextFieldStyles.css @@ -24,14 +24,4 @@ } border-radius: 8px !important; -} - -.textField .MuiButton-root { - font-size: var(--font-regular); - color: var(--second-text-color); -} - -.MuiBox-root .MuiInputLabel-root { - font-size: var(--font-regular); - color: var(--second-text-color); -} +} \ No newline at end of file diff --git a/frontend/src/scenes/settings/TeamTab/TeamTab.module.css b/frontend/src/scenes/settings/TeamTab/TeamTab.module.css index 07935243..d8e2ae43 100644 --- a/frontend/src/scenes/settings/TeamTab/TeamTab.module.css +++ b/frontend/src/scenes/settings/TeamTab/TeamTab.module.css @@ -39,10 +39,6 @@ h6 { font-weight: 600; } -.MuiTabPanel-root { - padding: 0 -} - .pencil { cursor: pointer; } diff --git a/frontend/src/utils/constants.js b/frontend/src/utils/constants.js index 2189a1ee..d3fafe5d 100644 --- a/frontend/src/utils/constants.js +++ b/frontend/src/utils/constants.js @@ -1,9 +1,9 @@ // API constants //local environment -// export const API_BASE_URL = 'http://localhost:3000/api/'; +export const API_BASE_URL = 'http://localhost:3000/api/'; //staging environment -export const API_BASE_URL = 'https://onboarding-demo.bluewavelabs.ca/api/'; +// export const API_BASE_URL = 'https://onboarding-demo.bluewavelabs.ca/api/'; // Other constants export const APP_TITLE = 'Bluewave Onboarding'; export const SUPPORT_EMAIL = 'support@bluewave.com';