h3n3/cadhub
1
0
Fork 0
Code Issues 35 Pull Requests Packages Projects Releases Wiki Activity

side-tray-styles-patch #514

Merged
Irev-Dev merged 1 commits from side-tray-styles-patch into main 2021-09-18 09:33:41 +02:00
Conversation 3 Commits 1 Files Changed 2 +6 -17
2 changed files with 6 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
app/web/src/components/IdeSideBar/IdeSideBar.tsx
View File

@@ -1,4 +1,4 @@
import { useState } from 'react' import { getActiveClasses } from 'get-active-classes'
import Svg from 'src/components/Svg/Svg' import Svg from 'src/components/Svg/Svg'
import { import {
sidebarTopConfig, sidebarTopConfig,
@@ -10,9 +10,11 @@ import { useIdeContext } from 'src/helpers/hooks/useIdeContext'
function TabToggle({ item, className = '', active, onChange, onClick }) { function TabToggle({ item, className = '', active, onChange, onClick }) {
return ( return (
<label <label
className={`tabToggle${item.disabled ? ' disabled' : ''}${ className={getActiveClasses({
active ? ' active' : '' 'bg-ch-pink-800 text-ch-pink-300 bg-opacity-30': active,
} ${className}`} 'text-ch-gray-550 cursor-not-allowed': item.disabled,
[`text-ch-gray-300 p-3 mb-1 flex justify-center ${className}`]: true,
})}
> >
<input <input
name="sidebar-tabs" name="sidebar-tabs"

13
app/web/src/index.css
View File

@@ -32,19 +32,6 @@
} }
@layer components {
.tabToggle {
@apply text-ch-gray-300 p-3 mb-1 flex justify-center;
}
.tabToggle.active {
@apply bg-ch-pink-800 text-ch-pink-300 bg-opacity-30;
}
.tabToggle.disabled {
@apply text-ch-gray-550 cursor-not-allowed;
}
}
.three-debug-panel-1 { .three-debug-panel-1 {
Irev-Dev commented 2021-09-18 09:33:24 +02:00 (Migrated from github.com)
Review
Copy Link

Don't know why these didn't work.

Not sure I 100% love the pattern anyway since these styles are are very specific to one component and now completely seperate. I to optimize for delete-ability, and this would make it tricky to clean up app/web/src/components/IdeSideBar/IdeSideBar.tsx should we delete it down the track.

Do you think it would be better to add these classes into a new css file in app/web/src/components/IdeSideBar/IdeSideBar.css and import that directly into app/web/src/components/IdeSideBar/IdeSideBar.tsx instead @franknoirot?

Don't know why these didn't work. Not sure I 100% love the pattern anyway since these styles are are very specific to one component and now completely seperate. I to optimize for delete-ability, and this would make it tricky to clean up `app/web/src/components/IdeSideBar/IdeSideBar.tsx` should we delete it down the track. Do you think it would be better to add these classes into a new css file in `app/web/src/components/IdeSideBar/IdeSideBar.css` and import that directly into `app/web/src/components/IdeSideBar/IdeSideBar.tsx` instead @franknoirot?
franknoirot commented 2021-09-18 13:19:54 +02:00 (Migrated from github.com)
Review
Copy Link

Yeah that's a good point, I think you're right having it local to the components directory is best.

Yeah that's a good point, I think you're right having it local to the components directory is best.
position: fixed; position: fixed;
padding-top: 300px; padding-top: 300px;