Merge pull request #360 from seatable/opt-field-setting-style2

Opt field setting style2

Author: LJHAAAAA

public/media/seatable-ui.css

@@ -10,11 +10,6 @@
 
 .collapsible-setting-layout-header .dtable-font {
   font-size: 10px;
-  color: #999;
-}
-
-.collapsible-setting-layout-header .dtable-font:hover {
-  color: #555;
 }
 
 .collapsible-setting-layout-header .dtable-font.dtable-icon-spin {

src/CollapsibleSettingLayout/index.css

@@ -11,7 +11,7 @@ const CollapsibleSettingLayout = (props) => {
   return (
     <div className={classnames('collapsible-setting-layout', className)}>
       <div
-        className="collapsible-setting-layout-header w-100 d-flex align-items-center"
+        className="collapsible-setting-layout-header seatable-collapse-header w-100 d-flex align-items-center"
         onClick={() => setIsShowSettings(!isShowSettings)}
       >
         <span className="collapsible-setting-layout-title">{title}</span>

src/CollapsibleSettingLayout/index.jsx

@@ -4,7 +4,6 @@
 }
 
 .field-setting .field-setting-header .expand-button {
-  color: #999;
   font-size: 10px;
   cursor: pointer;
   transition: transform .3s cubic-bezier(.645,.045,.355,1);
@@ -14,11 +13,6 @@
   transform: rotate(90deg);
 }
 
-.field-setting .field-setting-header .expand-button:hover {
-  color: #555;
-  cursor: pointer;
-}
-
 .field-setting .field-setting-banner .show-all-button {
   color: #ed7109;
   cursor: pointer;

src/FieldDisplaySetting/index.css

@@ -40,7 +40,7 @@ function FieldDisplaySetting({ fields, textProperties, fieldAllShown, onClickFie
 
   return (
     <div className="field-setting">
-      <div className="field-setting-header d-flex align-items-center justify-content-between" onClick={expandAllFields} >
+      <div className="field-setting-header seatable-collapse-header d-flex align-items-center justify-content-between" onClick={expandAllFields} >
         <Label className="mb-0">{textProperties.titleValue}</Label>
         <span className={`dtable-font dtable-icon-right expand-button ${isCollapsed ? '' : 'revolving'}`} />
       </div>