layout adjustments

openforis · Sep 15, 2023 · 8be94d8 · 8be94d8
1 parent a29b9c4
commit 8be94d8
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 11 deletions.
diff --git a/webapp/components/Table/Header/VisibleColumnsMenu/VisibleColumnsMenu.js b/webapp/components/Table/Header/VisibleColumnsMenu/VisibleColumnsMenu.js
@@ -28,6 +28,7 @@ export const VisibleColumnsMenu = (props) => {
 
   return (
     <ButtonMenu
+      className="btn-s"
       closeMenuOnItemClick={false}
       iconClassName="icon-cog"
       items={availableColumns.map((column) => {

diff --git a/webapp/style/table.scss b/webapp/style/table.scss
@@ -1,6 +1,6 @@
 @import 'webapp/style/vars';
 
-$tableHeaderHeight: 30px;
+$tableHeaderHeight: 40px;
 $tableFooterHeight: 30px;
 
 .table {
@@ -10,7 +10,6 @@ $tableFooterHeight: 30px;
 }
 
 .table__header {
-  height: $tableHeaderHeight;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -25,7 +24,6 @@ $tableFooterHeight: 30px;
 }
 
 .table__footer {
-  height: $tableFooterHeight;
   display: flex;
   justify-content: flex-end;
 }

diff --git a/webapp/views/App/views/Data/Records/HeaderLeft/HeaderLeft.js b/webapp/views/App/views/Data/Records/HeaderLeft/HeaderLeft.js
@@ -77,7 +77,6 @@ const HeaderLeft = ({ handleSearch, navigateToRecord, onRecordsUpdate, search, s
         <Button
           testId={TestId.records.addBtn}
           onClick={() => dispatch(RecordActions.createRecord(navigate))}
-          className="btn-s"
           iconClassName="icon-plus icon-12px icon-left"
           label="common.new"
         />

diff --git a/webapp/views/App/views/Data/Records/HeaderLeft/HeaderLeft.scss b/webapp/views/App/views/Data/Records/HeaderLeft/HeaderLeft.scss
@@ -1,16 +1,22 @@
 @import 'webapp/style/vars';
 
-$tableHeaderHeight: 40px;
+$tableHeaderHeight: 30px;
 
 .records__header-left {
   display: flex;
+  align-items: center;
   height: $tableHeaderHeight;
   column-gap: 1rem;
-}
 
-.records__header-left__input-search {
-  padding: 0px 5px;
-  border: 1px solid $greyBorder;
-  background: white;
-  width: 15rem;
+  button,
+  .btn {
+    padding: 0.5rem 0.8rem;
+  }
+
+  .records__header-left__input-search {
+    padding: 5px 5px;
+    border: 1px solid $greyBorder;
+    background: white;
+    width: 15rem;
+  }
 }