Untitled
/* Container for the entire filter section */ .logs-filters-container { padding: 1.5em 2em; background-color: white; border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 4px; display: flex; align-items: center; gap: 1.5em; flex-wrap: wrap; } /* Filter labels and headers */ .logs-filters-header { font-weight: bold; font-size: 1.1rem; color: #333; margin-bottom: 1em; } .filters { display: flex; gap: 1em; align-items: center; flex-wrap: wrap; } /* Dropdown and input fields */ .filter-box, .react-select-container, .search-bar-filters, .styled-date-picker { background-color: #f5f5f5; border-radius: 6px; border: 1px solid #ddd; padding: 0.6em 1em; box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px; font-size: 1rem; width: 220px; display: flex; align-items: center; justify-content: space-between; } /* Ensure the select dropdowns are consistent */ .react-select-container { width: auto; /* Let width adjust based on content */ } .react-select__control { border: none; background-color: transparent; } .react-select__single-value { display: flex; align-items: center; } .react-select__menu { border-radius: 6px; box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 12px; border: 1px solid #ddd; } /* Style the tagging system (for User selection) */ .selected-users { display: flex; gap: 0.5em; } .user-tag { display: inline-flex; align-items: center; background-color: #e0e0e0; border-radius: 4px; padding: 0.5em 0.8em; font-size: 0.9rem; } .remove-user { margin-left: 5px; cursor: pointer; color: #888; } .remove-user:hover { color: #555; } /* Styling for timestamp fields and labels */ .datetime-pickers { display: flex; gap: 1em; } .date-picker-container label { font-weight: bold; color: #333; margin-bottom: 0.5em; } .styled-date-picker { width: 220px; padding: 0.6em 1em; background-color: #f5f5f5; border-radius: 6px; box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px; border: 1px solid #ddd; font-size: 1rem; } .filter-box svg, .styled-date-picker svg { width: 1em; height: 1em; fill: #888; margin-left: 0.5em; } /* Buttons inside timestamp filter */ .quick-access-buttons button { padding: 0.5em 1em; background-color: #007bff; color: white; border: none; border-radius: 5px; font-size: 0.9rem; cursor: pointer; box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 4px; } .quick-access-buttons button:hover { background-color: #0056b3; } .quick-access-buttons button:active { background-color: #004094; } /* Focus state for input fields */ .search-bar-filters:focus, .filter-box input:focus, .styled-date-picker:focus { outline: 0.2em solid #f5b62e; } <div className="logs-filters-container"> <div className="logs-filters-header"> <h2>Filters</h2> <span>Select filters to search for specific data</span> </div> <div className="filters"> <div className="filter-box"> <Select options={actionOptions} className="react-select-container" placeholder="Action" /> </div> <div className="filter-box"> <Select options={timestampOptions} className="react-select-container" placeholder="Timestamp" /> </div> <div className="filter-box"> <Select options={ipAddressOptions} className="react-select-container" placeholder="IP Address" /> </div> <div className="datetime-pickers"> <div className="date-picker-container"> <label>Start Timestamp:</label> <DatePicker selected={startDate} onChange={handleStartDateChange} placeholderText="Select Start Date" className="styled-date-picker" /> </div> <div className="date-picker-container"> <label>End Timestamp:</label> <DatePicker selected={endDate} onChange={handleEndDateChange} placeholderText="Select End Date" className="styled-date-picker" /> </div> </div> </div> <div className="filter-box"> <input type="text" placeholder="Enter Document ID" className="search-bar-filters" /> </div> <div className="selected-users"> <div className="user-tag">@ivan74</div> <div className="user-tag">@mariaOCR</div> </div> </div> .logs-filters-container { padding: 1.5em 2em; background-color: white; border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 4px; display: flex; align-items: flex-start; /* Adjusted to start alignment */ gap: 1.5em; flex-wrap: wrap; flex-direction: column; /* Ensure elements are stacked vertically */ } /* Filter labels and headers */ .logs-filters-header { font-weight: bold; font-size: 1.1rem; color: #333; margin-bottom: 1em; } .filters { display: flex; gap: 1em; align-items: center; flex-wrap: wrap; flex-direction: row; /* This keeps the filters on the same line */ } /* Timestamp fields and labels */ .datetime-pickers { display: flex; gap: 1em; flex-wrap: nowrap; /* Prevents the timestamp pickers from wrapping */ margin-top: 1em; /* Adds some spacing above the timestamp section */ } /* Other styles remain unchanged */
Leave a Comment