Make content readable with new bg color

ComPlat · Nov 4, 2024 · 2bbca4d · 2bbca4d
1 parent 2043060
commit 2bbca4d
Show file tree

Hide file tree

Showing 13 changed files with 55 additions and 33 deletions.
diff --git a/app/assets/stylesheets/components/ElementsTable.scss b/app/assets/stylesheets/components/ElementsTable.scss
@@ -12,14 +12,11 @@
 }
 
 .elements-table-header {
-  @extend .border;
-  @extend .border-top-0;
   @extend .p-2;
   @extend .d-flex;
   @extend .align-items-center;
   @extend .justify-content-between;
   min-height: 40px;
-  background-color: $gray-300;
 }
 
 @media (max-width: 600px) {

diff --git a/app/assets/stylesheets/components/Sheet.scss b/app/assets/stylesheets/components/Sheet.scss
@@ -1,5 +1,5 @@
 .sheet {
-  @extend .mb-2;
+  @extend .mb-1;
   @extend .p-3;
   @extend .bg-white;
 }
diff --git a/app/assets/stylesheets/global-styles/utilities.scss b/app/assets/stylesheets/global-styles/utilities.scss
@@ -6,5 +6,6 @@
 @import "utilities/tabs-container-with-borders";
 @import "utilities/tabs-container-with-full-height";
 @import "utilities/modal";
+@import "utilities/sheet-card";
 @import "utilities/sheet-tabs";
 @import "utilities/draggable-modal";
diff --git a/app/assets/stylesheets/global-styles/utilities/borders.scss b/app/assets/stylesheets/global-styles/utilities/borders.scss
@@ -1,3 +1,8 @@
 .border-dashed {
   border-style: dashed !important;
-}
+}
+
+.state-border {
+  border-width: 0 0 3px 0;
+  @extend .border-white;
+}
diff --git a/app/assets/stylesheets/global-styles/utilities/detail-card.scss b/app/assets/stylesheets/global-styles/utilities/detail-card.scss
@@ -1,4 +1,5 @@
 .detail-card {
+  @extend .sheet-card;
   @extend .h-100;
 
   > .card-header {
@@ -12,7 +13,7 @@
   }
 
   &.detail-card--unsaved .card-header {
-    @extend .text-bg-info;
+    @extend .border-warning;
   }
 }
 

diff --git a/app/assets/stylesheets/global-styles/utilities/sheet-card.scss b/app/assets/stylesheets/global-styles/utilities/sheet-card.scss
@@ -0,0 +1,12 @@
+.sheet-card {
+  @extend .border-0;
+
+  > .card-header {
+    @extend .sheet;
+    @extend .state-border;
+  }
+
+  > .card-body {
+    @extend .sheet;
+  }
+}
diff --git a/app/assets/stylesheets/global-styles/utilities/sheet-tabs.scss b/app/assets/stylesheets/global-styles/utilities/sheet-tabs.scss
@@ -1,17 +1,26 @@
 .nav-tabs.sheet-tabs {
-  @extend .mb-2;
+  @extend .mb-1;
   @extend .border-bottom-0;
+  @extend .gap-1;
+  --bs-nav-link-padding-x: 0.75rem;
+  --bs-nav-link-padding-y: 0.25rem;
   .nav-link {
     @extend .text-body;
-    border-width: 0 0 3px 0;
-    @extend .border-active;
-    --bs-border-opacity: 0;
+    @extend .state-border;
+    --bs-bg-opacity: 0.3;
+    --bs-border-opacity: 0.5;
+    @extend .bg-white;
     &.active {
+      @extend .border-active;
       --bs-border-opacity: 1;
-      @extend .bg-white;
+      --bs-bg-opacity: 1;
       i {
         @extend .text-active;
       }
     }
+    &:has(.unsaved) {
+      @extend .border-warning;
+      --bs-border-opacity: 1;
+    }
   }
 }
diff --git a/app/packs/src/apps/mydb/elements/details/ElementDetails.js b/app/packs/src/apps/mydb/elements/details/ElementDetails.js
@@ -179,24 +179,19 @@ export default class ElementDetails extends Component {
     }
   }
 
-  tabTitle(el, elKey) {
-    const { activeKey } = this.state;
-    const focusing = elKey === activeKey;
-    const variant = el.isPendingToSave ? 'info' : 'primary';
+  tabTitle(el) {
 
     const tab = tabInfoHash[el.type] ?? {};
     const title = tab.title ?? el.title();
 
-    const iconElement = el.element_klass
-      ? (<i className={`${el.element_klass.icon_name}`} />)
-      : tab.iconEl ?? (<i className={`icon-${el.type}`} />);
-    const icon = focusing ? iconElement : (<Badge bg={variant}>{iconElement}</Badge>);
+    const spanClassName = el.isPendingToSave ? 'unsaved' : '';
+    const iconClassName = 'me-1 ' + (el.element_klass ? el.element_klass.icon_name : tab.iconEl ?? 'icon-' + el.type);
 
     return (
-      <div className="d-flex align-items-baseline gap-2">
-        {icon}
+      <span className={spanClassName}>
+        <i className={iconClassName} />
         {title}
-      </div>
+      </span>
     );
   }
 
@@ -210,7 +205,7 @@ export default class ElementDetails extends Component {
           key={`${el.type}-${el.id}`}
           eventKey={i}
           unmountOnExit
-          title={this.tabTitle(el, i)}
+          title={this.tabTitle(el)}
         >
           {this.content(el)}
         </Tab>
@@ -222,6 +217,7 @@ export default class ElementDetails extends Component {
           id="elements-tabs"
           activeKey={activeKey}
           onSelect={DetailActions.select}
+          className="sheet-tabs"
         >
           {selectedElements}
         </Tabs>

diff --git a/app/packs/src/apps/mydb/elements/list/ElementsList.js b/app/packs/src/apps/mydb/elements/list/ElementsList.js
@@ -284,6 +284,7 @@ export default class ElementsList extends React.Component {
               id="tabList"
               activeKey={currentTab}
               onSelect={(eventKey) => this.handleTabSelect(parseInt(eventKey, 10))}
+              className="sheet-tabs"
             >
               {tabItems}
             </Tabs>

diff --git a/app/packs/src/apps/mydb/elements/list/ElementsTable.js b/app/packs/src/apps/mydb/elements/list/ElementsTable.js
@@ -26,6 +26,7 @@ import PropTypes from 'prop-types';
 import CellLineGroup from 'src/models/cellLine/CellLineGroup';
 import CellLineContainer from 'src/apps/mydb/elements/list/cellLine/CellLineContainer';
 import ChevronIcon from 'src/components/common/ChevronIcon';
+import Sheet from 'src/components/common/Sheet';
 
 export default class ElementsTable extends React.Component {
   constructor(props) {
@@ -570,8 +571,8 @@ export default class ElementsTable extends React.Component {
     const filterIcon = <i className={`fa ${filterIconClass}`} />;
 
     return (
-      <div className="elements-table-header">
-        <div className="select-all">
+      <Sheet className="elements-table-header">
+        <div className="d-flex gap-1 align-items-center">
           <ElementAllCheckbox
             type={type}
             checkedAll={checkedAll}
@@ -613,7 +614,7 @@ export default class ElementsTable extends React.Component {
           </div>
           {typeSpecificHeader}
         </div>
-      </div>
+      </Sheet>
     );
   };
 
@@ -676,10 +677,10 @@ export default class ElementsTable extends React.Component {
     return (
       <div ref={this.elementRef} className="elements-list flex-grow-1 h-0 overflow-y-auto pb-3">
         {elementsTableEntries}
-        <div className="mt-2 d-flex flex-row-reverse justify-content-between">
-          {this.renderNumberOfResultsInput()}
+        <Sheet className="mt-2 d-flex justify-content-between">
           {this.renderPagination()}
-        </div>
+          {this.renderNumberOfResultsInput()}
+        </Sheet>
       </div>
     );
   }

diff --git a/app/packs/src/apps/mydb/elements/list/ElementsTableSampleEntries.js b/app/packs/src/apps/mydb/elements/list/ElementsTableSampleEntries.js
@@ -131,7 +131,6 @@ function MoleculeHeader({ sample, show, showPreviews, showDragColumn, onClick, t
 
   return (
     <tr
-      className="bg-gray-100"
       role="button"
       onClick={onClick}
     >
@@ -413,7 +412,7 @@ export default class ElementsTableSampleEntries extends Component {
     const showGroup = !moleculeGroupsShown.includes(moleculeName) && !collapseAll;
 
     return (
-      <tbody key={index}>
+      <tbody key={index} className="sheet">
         <MoleculeHeader
           sample={moleculeGroup[0]}
           show={showGroup}

diff --git a/app/packs/src/apps/mydb/layout/Sidebar.js b/app/packs/src/apps/mydb/layout/Sidebar.js
@@ -23,7 +23,7 @@ export default function Sidebar() {
   }, []);
 
   return (
-    <div className={"sidebar" + (isCollapsed ? " sidebar--collapsed" : "")} >
+    <div className={"bg-white sidebar" + (isCollapsed ? " sidebar--collapsed" : "")} >
       <div className="sidebar-collapse-button-container">
         <Button
           onClick={UIActions.toggleSidebar}

diff --git a/app/packs/src/apps/mydb/layout/Topbar.js b/app/packs/src/apps/mydb/layout/Topbar.js
@@ -8,7 +8,7 @@ import UserAuth from 'src/components/navigation/UserAuth';
 
 export default function Topbar() {
   return (
-    <div className="d-flex justify-content-between p-3 text-bg-light">
+    <div className="d-flex justify-content-between p-3 bg-white">
       <div className="d-flex align-items-center gap-2">
         <Search />
         <ScanCodeButton />