Changeset fd5b100 for phonelux-frontend/src/components/FiltersComponents

Timestamp:

10/01/22 22:56:40 (2 years ago)

Author:

Marko <Marko@…>

Branches:

master

Children:

ffd50db

Parents:

895cd87

Message:

Edited filter components

Location:

phonelux-frontend/src/components/FiltersComponents

Files:

• SpecificationsFilterComponent.css (modified) (2 diffs)
• SpecificationsFilterComponent.js (modified) (3 diffs)

phonelux-frontend/src/components/FiltersComponents/SpecificationsFilterComponent.css

@@ -6 +6 @@
     padding: 5px;
     margin-right: auto;
-    margin-left: 10px;
     height: fit-content;
     margin-top: 0px;
     padding-top: 5px;
-    width: 100%;
+    width: 50%;
     text-align: center;
     display: flex;
     justify-content: center;
+    word-break:break-all;
 }
 
@@ -36 +36 @@
 }
 
+.specifications-filter-icon-header{
+   margin-top: -3px;
+}
+
 .specifications-filter-popover{
     text-align: center;
 }
+
+
+.pick-specifications-header{
+    background-color: #B6E2C8;
+    border: 1px solid black;
+    width: fit-content;
+    border-radius: 20px;
+    padding: 5px;
+    margin-right: auto;
+    margin-left: 10px;
+    height: fit-content;
+    margin-top: 0px;
+    padding-top: 5px;
+    width: 50%;
+    text-align: center;
+    display: flex;
+    justify-content: center;
+    word-break:break-all;
+}
+
+.pick-specifications-header:hover{
+    cursor: pointer;
+    background-color: rgb(166, 201, 171);
+    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
+    transition: box-shadow 0.5s, background-color 0.5s ;
+}
+
+
+.specifications-filter-main{
+    width: 45%;
+}

phonelux-frontend/src/components/FiltersComponents/SpecificationsFilterComponent.js

@@ -11 +11 @@
 import axios from 'axios';
 import UserContext from '../../context/UserContext';
+import SettingsIcon from '@mui/icons-material/Settings';
 export class SpecificationsFilterComponent extends Component {
 
@@ -53 +54 @@
     return (
       <div className='specifications-filter-main'>
-        <h4 aria-describedby={id} className='specifications-filter-header' onClick={this.handleClick}>Спецификации
+        <h4 aria-describedby={id} className='specifications-filter-header' onClick={this.handleClick}>
+          <FilterAltIcon className='specifications-filter-icon-header'/>Филтер за спецификации
         <ArrowDropDownIcon style={{marginTop:'-2px'}}/>
         </h4>
@@ -98 +100 @@
         </div>
       </Popover>
-      <Tippy className='tippy-pick-specifications-icon' placement='bottom' content='Изберете спецификации за приказ'>
-        <FilterAltIcon onClick={this.handleModalOpen} style={{fontSize: '35px'}} className='pick-specifications-icon'></FilterAltIcon>
-        </Tippy>
+        <h4 aria-describedby={id} className='pick-specifications-header' onClick={this.handleModalOpen}>
+          <SettingsIcon className='specifications-filter-icon-header'/>Спецификации за приказ
+        </h4>
         { this.context.userId != '' && <PickSpecificationComponent
         openModal={this.state.openModal}