Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-23 17:08:34 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

[ Bug fix ] : dark theme fixes (#5164)

Browse source 
* Close button for filter is not visible in dark mode.

* fixed : Hovering on dark mode selector is showing cursor instead of mouse pointer

* bug fixed

* bug fixes : dark theme

* fix : dark theme issue in search box and add page field in Pages

* bug fixed : serachbox in pages remains in dark theme only

* fixed properties and style tab bg in dark theme for the widget inspector
This commit is contained in:
Manish Kushare 2023-01-04 14:47:16 +05:30 committed by GitHub
parent dd9c929ff3
commit 164028ae14
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 60 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
frontend/src/Editor/Inspector/Inspector.jsx
View file

@ -349,12 +349,17 @@ export const Inspector = ({
</div>
</div>
<div style={{ padding: '16px 8px', borderRadius: 6 }}>
<div className="d-flex p-1" style={{ background: '#ECEEF0' }} role="tablist" aria-orientation="horizontal">
<div
className="d-flex p-1"
style={{ background: darkMode ? '#2F3C4C' : '#ECEEF0' }}
role="tablist"
aria-orientation="horizontal"
>
<button
className={cx('btn w-50 inspector-nav-item', {
'bg-white': selectedTab === 'properties' && !darkMode,
'bg-black': selectedTab === 'properties' && darkMode,
'color-white': selectedTab === 'properties' && darkMode,
'color-white': darkMode,
'opacity-100': selectedTab === 'properties',
})}
role="tab"
@ -369,7 +374,7 @@ export const Inspector = ({
className={cx('btn w-50 inspector-nav-item', {
'bg-white': selectedTab === 'styles',
'bg-black': selectedTab === 'styles' && darkMode,
'color-white': selectedTab === 'styles' && darkMode,
'color-white': darkMode,
'opacity-100': selectedTab === 'styles',
})}
role="tab"

2
frontend/src/Editor/LeftSidebar/SidebarItem.jsx
View file

@ -28,7 +28,7 @@ export const LeftSidebarItem = ({
data-cy={`left-sidebar-${icon.toLowerCase()}-button`}
>
{icon && (
<div className="sidebar-svg-icon position-relative">
<div className={`sidebar-svg-icon position-relative ${displayIcon === 'settings' && 'img-invert'}`}>
<Icon.default />
{commentBadge && <LeftSidebarItem.CommentBadge />}
</div>

4
frontend/src/Editor/LeftSidebar/SidebarPageSelector/PageHandler.jsx
View file

@ -185,7 +185,7 @@ export const PageHandler = ({
);
};
export const AddingPageHandler = ({ addNewPage, setNewPageBeingCreated }) => {
export const AddingPageHandler = ({ addNewPage, setNewPageBeingCreated, darkMode }) => {
const handleAddingNewPage = (pageName) => {
if (pageName.trim().length === 0) {
toast('Page name should have atleast 1 character', {
@ -204,7 +204,7 @@ export const AddingPageHandler = ({ addNewPage, setNewPageBeingCreated }) => {
<div className="col-12">
<input
type="text"
className="form-control page-name-input"
className={`form-control page-name-input ${darkMode && 'bg-transparent'}`}
autoFocus
onBlur={(event) => {
const name = event.target.value;

8
frontend/src/Editor/LeftSidebar/SidebarPageSelector/index.jsx
View file

@ -93,7 +93,12 @@ const LeftSidebarPageSelector = ({
</div>
</HeaderSection.PanelHeader>
{showSearch && (
<HeaderSection.SearchBoxComponent onChange={filterPages} placeholder={'Search'} placeholderIcon={''} />
<HeaderSection.SearchBoxComponent
onChange={filterPages}
placeholder={'Search'}
placeholderIcon={''}
darkMode={darkMode}
/>
)}
</HeaderSection>
@ -139,6 +144,7 @@ const LeftSidebarPageSelector = ({
addNewPage={addNewPage}
setNewPageBeingCreated={setNewPageBeingCreated}
switchPage={switchPage}
darkMode={darkMode}
/>
</div>
)}

2
frontend/src/OrganizationSettingsPage/index.jsx
View file

@ -111,7 +111,7 @@ export function OrganizationSettings(props) {
})}
>
<div className="w-100 mb-5">
{selectedTab === 'users' && <ManageOrgUsers />}
{selectedTab === 'users' && <ManageOrgUsers darkMode={props.darkMode} />}
{selectedTab === 'manageGroups' && <ManageGroupPermissions darkMode={props.darkMode} />}
{selectedTab === 'manageSSO' && <ManageSSO />}
{selectedTab === 'manageEnvVars' && <ManageOrgVars darkMode={props.darkMode} />}

6
frontend/src/_components/NotificationCenter/index.jsx
View file

@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next';
import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
import { ToolTip } from '@/_components/ToolTip';
export const NotificationCenter = () => {
export const NotificationCenter = ({ darkMode }) => {
const [loading, setLoading] = React.useState(false);
const [isRead, setIsRead] = React.useState(false);
const [commentNotifications, setCommentNotifications] = React.useState([]);
@ -41,7 +41,9 @@ export const NotificationCenter = () => {
const overlay = (
<div
className="notification-center dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card"
className={`notification-center dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card ${
darkMode && 'theme-dark'
}`}
data-bs-popper="static"
>
<div className="card">

2
frontend/src/_components/Profile.jsx
View file

@ -94,7 +94,7 @@ export const Profile = function Header({ switchDarkMode, darkMode }) {
return (
<OverlayTrigger trigger="click" placement={'right'} rootClose={true} overlay={getOverlay()}>
<div className="user-avatar-nav-item">
<div className="user-avatar-nav-item cursor-pointer">
<ToolTip message="Profile">
<div className="d-xl-block" data-cy="user-menu">
<Avatar avatarId={avatar_id} text={`${first_name ? first_name[0] : ''}${last_name ? last_name[0] : ''}`} />

12
frontend/src/_styles/onboarding.scss
View file

@ -1154,7 +1154,7 @@
.tj-text-input,
.onboard-input {
color: #fff;
color: #fff ;
border-color: #787F85;
::placeholder {
@ -1162,7 +1162,7 @@
}
p {
color: #697177;
color: white !important;
}
&:hover {
@ -1400,6 +1400,14 @@
.active-onboarding-tab {
color: #111827 !important;
}
.theme-dark{
.active-onboarding-tab{
color: $color-dark-slate-12 !important;
img{
filter: brightness(0) invert(1);
}
}
}
.navigation-wrap {
display: flex;

8
frontend/src/_styles/popover.scss
View file

@ -9,7 +9,7 @@
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
will-change: transform, opacity;
box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
border-radius: 8px;
border-radius: 0 8px 8px 0;
overflow: auto;
}
@ -101,4 +101,8 @@
.card-body{
color: #C0C8CC !important;
}
}
&::-webkit-scrollbar {
width: 0;
background: transparent;
}
}

14
frontend/src/_styles/theme.scss
View file

@ -7263,7 +7263,8 @@ tbody {
}
.modal-backdrop {
background-color: hsla(0, 0%, 0%, 0.439);
// background-color: hsla(0, 0%, 0%, 0.439);
opacity: 0.5;
}
.ds-delete-btn {
@ -7315,4 +7316,13 @@ tbody {
}
}
}
}
.icon-tabler-x{
stroke: white ;
}
}
.img-invert{
img{
filter: invert(1);
}
}

4
frontend/src/_ui/JSONTreeViewer/JSONNode.jsx
View file

@ -335,7 +335,9 @@ export const JSONNode = ({ data, ...restProps }) => {
<div
style={{ width: 'inherit' }}
className={`${shouldDisplayIntendedBlock && 'group-border'} ${applySelectedNodeStyles && 'selected-node'}`}
className={`${shouldDisplayIntendedBlock && 'group-border'} ${applySelectedNodeStyles && 'selected-node'} ${
shouldDisplayIntendedBlock && !applySelectedNodeStyles && 'border-0'
}`}
>
<div
className={cx('d-flex', {

2
frontend/src/_ui/Layout/index.jsx
View file

@ -138,7 +138,7 @@ function Layout({ children, switchDarkMode, darkMode }) {
</Link>
</li>
<li className="m-auto">
<NotificationCenter />
<NotificationCenter darkMode={darkMode} />
<Profile switchDarkMode={switchDarkMode} darkMode={darkMode} />
</li>
</ul>

3
frontend/src/_ui/LeftSidebar/Header.jsx
View file

@ -17,7 +17,7 @@ const PanelHeader = ({ children, settings, title }) => {
);
};
const SearchContainer = ({ onChange, placeholder, placeholderIcon, callBack = null }) => {
const SearchContainer = ({ onChange, placeholder, placeholderIcon, callBack = null, darkMode }) => {
return (
<div className="panel-search-container">
<SearchBoxComponent
@ -25,6 +25,7 @@ const SearchContainer = ({ onChange, placeholder, placeholderIcon, callBack = nu
callback={callBack}
placeholder={placeholder}
placeholderIcon={placeholderIcon}
customClass={`${darkMode ? 'theme-dark' : ''}`}
/>
</div>
);

4
frontend/src/_ui/Search/Search.jsx
View file

@ -2,7 +2,7 @@ import React from 'react';
import { useTranslation } from 'react-i18next';
export const SearchBox = ({ onChange, ...restProps }) => {
const { callback, placeholder, placeholderIcon = null } = restProps;
const { callback, placeholder, placeholderIcon = null, customClass = '' } = restProps;
const [searchText, setSearchText] = React.useState('');
const { t } = useTranslation();
@ -29,7 +29,7 @@ export const SearchBox = ({ onChange, ...restProps }) => {
}, [searchText]);
return (
<div className="searchbox-wrapper">
<div className={`searchbox-wrapper ${customClass}`}>
<div style={{ height: '32px' }} className="input-icon d-flex">
<span className="search-icon mx-2" onClick={clearSearch}>
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">