restyled alerting upper row

dashboard/src/components/date-time-picker/DateTimePicker.tsx

@@ -13,7 +13,6 @@ type Props = {
 const DateTimePicker: React.FC<Props> = ({ startDate, setStartDate }) => {
   return (
     <DateTimePickerWrapper>
-      <TimeIcon src={time} />
       <link
         rel="stylesheet"
         href="https://cdnjs.cloudflare.com/ajax/libs/react-datepicker/2.14.1/react-datepicker.min.css"
@@ -53,13 +52,7 @@ const DateTimePickerWrapper = styled.div`
   align-items: center;
   justify-content: center;
   padding-right: 42px;
-  margin-right: 10px;
-  padding-left: 8px;
-  height: 30px;
-  border-radius: 5px;
-  border: 1px solid #494b4f;
-  height: 30px;
-  background: #26292e;
+  margin-left: 2px;
 `;
 
 const StyledDatePicker = styled(DatePicker)`
@@ -67,7 +60,6 @@ const StyledDatePicker = styled(DatePicker)`
   width: calc(100% + 42px);
   position: relative;
   border: none;
-  margin-bottom: 3px;
   outline-width: 0;
   background: transparent;
   text-align: center;

dashboard/src/components/porter-form/PorterFormWrapper.tsx

@@ -78,7 +78,7 @@ const PorterFormWrapper: React.FC<PropsType> = ({
   };
 
   // Lifted into PorterFormWrapper to allow tab to be remembered on re-render (e.g., on revision select)
-  const [currentTab, setCurrentTab] = useState(getInitialTab());
+  const [currentTab, setCurrentTab] = useState(getInitialTab);
 
   useEffect(() => {
     if (overrideCurrentTab) {

dashboard/src/main/home/cluster-dashboard/expanded-chart/ExpandedChart.tsx

@@ -440,6 +440,15 @@ const ExpandedChart: React.FC<Props> = (props) => {
       case "metrics":
         return <MetricsSection currentChart={chart} />;
       case "events":
+        return (
+          <LogsSection
+            currentChart={chart}
+            isFullscreen={isFullscreen}
+            setIsFullscreen={setIsFullscreen}
+            initData={logData}
+            setInitData={setLogData}
+          />
+        );
         if (DisabledNamespacesForIncidents.includes(currentChart.namespace)) {
           return null;
         }

dashboard/src/main/home/cluster-dashboard/expanded-chart/logs-section/LogsSection.tsx

@@ -32,7 +32,7 @@ type Props = {
   isFullscreen: boolean;
   setIsFullscreen: (x: boolean) => void;
   initData?: InitLogData;
-  setInitData: (initData: InitLogData) => void;
+  setInitData?: (initData: InitLogData) => void;
 };
 
 const escapeRegExp = (str: string) => {
@@ -58,21 +58,7 @@ const QueryModeSelectionToggle = (props: QueryModeSelectionToggleProps) => {
           onClick={() => props.setSelectedDate(undefined)}
           selected={!props.selectedDate}
         >
-          <span
-            style={{
-              display: "inline-black",
-              width: "0.5rem",
-              height: "0.5rem",
-              marginRight: "5px",
-              borderRadius: "20px",
-              backgroundColor: "#ed5f85",
-              border: "0px",
-              outline: "none",
-              boxShadow: props.selectedDate
-                ? "none"
-                : "0px 0px 5px 1px #ed5f85",
-            }}
-          ></span>
+          <Dot selected={!props.selectedDate} />
           Live
         </ToggleOption>
         <ToggleOption
@@ -80,19 +66,34 @@ const QueryModeSelectionToggle = (props: QueryModeSelectionToggleProps) => {
           onClick={() => props.setSelectedDate(dayjs().toDate())}
           selected={!!props.selectedDate}
         >
-          <TimeIcon src={time} />
+          <TimeIcon 
+            src={time} 
+            selected={!!props.selectedDate}
+          />
+          {props.selectedDate && (
+            <DateTimePicker
+              startDate={props.selectedDate}
+              setStartDate={props.setSelectedDate}
+            />
+          )}
         </ToggleOption>
       </ToggleButton>
-      {props.selectedDate && (
-        <DateTimePicker
-          startDate={props.selectedDate}
-          setStartDate={props.setSelectedDate}
-        />
-      )}
     </div>
   );
 };
 
+const Dot = styled.div<{ selected?: boolean }>`
+  display: inline-black;
+  width: 8px;
+  height: 8px;
+  margin-right: 9px;
+  border-radius: 20px;
+  background: ${props => props.selected ? "#ed5f85" : "#ffffff22"};
+  border: 0px;
+  outline: none;
+  box-shadow: ${props => props.selected ? "0px 0px 5px 1px #ed5f85" : ""};
+`;
+
 const LogsSection: React.FC<Props> = ({
   currentChart,
   isFullscreen,
@@ -134,7 +135,7 @@ const LogsSection: React.FC<Props> = ({
           cluster_id: currentCluster.id,
         }
       )
-      .then((res) => {
+      .then((res: any) => {
         setPodFilterOpts(_.uniq(res.data ?? []));
 
         // only set pod filter if the current pod is not found in the resulting data
@@ -606,8 +607,9 @@ const ToggleButton = styled.div`
   cursor: pointer;
 `;
 
-const TimeIcon = styled.img`
+const TimeIcon = styled.img<{ selected?: boolean }>`
   width: 16px;
   height: 16px;
   z-index: 999;
+  opacity: ${props => props.selected ? "" : "50%"}
 `;