sample-ui-component-library 0.0.14-dev → 0.0.16-dev

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sample-ui-component-library",
-  "version": "0.0.14-dev",
+  "version": "0.0.16-dev",
   "description": "A library which contains sample UI elements that can be used for populating layouts.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/components/Editor/Tabs/Tab/Tab.jsx

@@ -65,9 +65,18 @@ export const Tab = ({ id, parentId, node }) => {
             {...listeners}
             {...attributes}
         >
-            <FileEarmark className="icon" style={{ pointerEvents: "none" }} />
-            <span className="tab-name">{node.name}</span>
-            <XLg onMouseDown={clickClose} className="close-icon"/>
+            <div className="tab-content">
+                <div className="icon">
+                    <FileEarmark size={14} style={{ pointerEvents: "none" }} />
+                </div>
+                <div className="tab-name">
+                    <span>{node.name}</span>
+                </div>
+                <div className="close-icon" onMouseDown={clickClose}>
+                    <XLg size={18} />
+                </div>
+                
+            </div>
         </div>
     );
 }
@@ -84,9 +93,17 @@ Tab.propTypes = {
 export const TabPreview = ({node}) => {
     return (
         <div className="tab" style={{ backgroundColor: ACTIVE_TAB_BG_COLOR, color: ACTIVE_TAB_FG_COLOR, opacity:0.5 }}>
-            <FileEarmark className="icon" />
-            <span className="tab-name">{node.name}</span>
-            <XLg className="close-icon"/>
+            <div className="tab-content">
+                <div className="icon">
+                    <FileEarmark size={14} style={{ pointerEvents: "none" }} />
+                </div>
+                <div className="tab-name">
+                    <span>{node.name}</span>
+                </div>
+                <div className="close-icon">
+                    <XLg size={18} />
+                </div>
+            </div>
         </div>
     );
 }

package/src/components/Editor/Tabs/Tab/Tab.scss

@@ -1,28 +1,39 @@
 .tab {
-    padding: 0px 15px;
-    cursor: pointer;
+    padding: 0px 18px;
+    cursor: default !important;
     height: 40px;
     width: auto;
+}
+
+.tab-content {
+    width:auto;
+    height:36px;
     display:flex;
     align-items: center;
+    vertical-align: middle;
+    overflow-y: hidden;
 }
 
-.tab > .icon {
-    padding-right: 7px;
+.tab > .tab-content > .icon {
+    padding-right: 2px;
     display:flex;
-    align-self: center;
+    align-items: center;
     width:20px;
 }
 
-.tab > .tab-name {
+.tab > .tab-content> .tab-name {
+    display:flex;
+    align-items: center;
     width: auto;
     font-size:13px;
 }
 
-.tab > .close-icon {
-    margin-left:7px;
-    margin-right:7px;
+.tab > .tab-content> .close-icon {
     display:flex;
-    align-self: center;
+    margin-left:7px;
+    padding-top:3px;
+    align-items: center;
+    vertical-align: middle;
     width:10px;
+    cursor: pointer;
 }

package/src/components/Editor/Tabs/Tabs.jsx

@@ -34,14 +34,14 @@ export const Tabs = () => {
         const list = [];
         tabs.forEach((tab, index) => {
             list.push(<Gutter key={tab.uid + "-gutter"} id={tabGroupId + "-" + index} index={index} parentId={tabGroupId} />);
-            list.push(<Tab key={tab.uid} id={"tab-" + tabGroupId + "-" + tab.uid} parentId={tabGroupId} node={tab} />);
+            list.push(<Tab key={tab.uid} id={tab.uid} parentId={tabGroupId} node={tab} />);
         });
         list.push(<Gutter key="last-gutter" id={tabGroupId + "-" + tabs.length} index={tabs.length} parentId={tabGroupId} />);
         setTabsList(list);
     };
 
     return (
-        <div className="tabs" style={{background: TABS_CONTAINER_BG_COLOR }}>{tabsList}</div>
+        <div className="tabs-container" style={{background: TABS_CONTAINER_BG_COLOR }}>{tabsList}</div>
     );
 };
 

package/src/components/Editor/Tabs/Tabs.scss

@@ -1,15 +1,25 @@
-.tabs {
+.tabs-container {
     display: flex;
     flex-direction: row;
     height: 40px;
     width: 100%;
+    position: relative;
     overflow-x: auto;
     overflow-y: hidden;
-    flex-wrap: nowrap;
-    scrollbar-width: none;
-    -ms-overflow-style: none;
+    white-space: nowrap;
+    scrollbar-width: thin;
+    scrollbar-color: rgba(255,255,255,0.2) transparent;
 }
 
-.tabs::-webkit-scrollbar {
-  display: none;
+.tabs-container::-webkit-scrollbar {
+    height: 4px;
+}
+
+.tabs-container::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.tabs-container::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 4px;
 }

package/src/components/FileBrowser/FileBrowser.scss

@@ -1,7 +1,11 @@
 .file-browser{
     width: 100%;
     height:100%;
-    padding:5px;
     color:white;
+    overflow-y: auto;
+    scrollbar-gutter: stable;
+    scrollbar-color: #47474766 #252526;
+    scrollbar-width: thin;
+    background-color: #1e1e1e;
 }
 

package/src/components/FileBrowser/TreeNode/TreeNode.scss

@@ -2,32 +2,30 @@
     width:100%;
     min-width: 200px;
     display:flex;
-    padding: 5px 0;
     font-size:13px;
     font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
     cursor: pointer;
+    height:32px;
 }
 
 .indent {
     height:100%;
+    margin-left:10px;
 }
 
-.center {
-    display:flex;
-    align-self: center;
-}
-
-
 .folder-icon {
     display:flex;
     margin-right: 5px;
+    align-self: center;
 }
 
 .file-icon {
+    display:flex;
     margin-right: 5px;
     font-size:16px;
+    align-self: center;
 }
 
 .file-name {
-    color: #CCC;
+    color: #DDD;
 }

package/src/stories/FileBrowserStories.scss

@@ -7,13 +7,4 @@
     display:flex;
     align-items: center;
     justify-content: center;
-}
-
-.viewerStoryWrapper > .file-browser{
-    height: 300px;
-    background-color: #333;
-    overflow: auto;
-    scrollbar-gutter: stable;
-    scrollbar-color: #47474766 #252526;
-    scrollbar-width: thin;
 }