hunk.code_window:   */
     & [data-field-necessity-indicator-icon] {
       width: var(--inner-spacing-2);
       height: var(--inner-spacing-2);
       color: var(--color-fg-negative);
     }
     /**
     * ----------------------------------------------------------------------------
  
hunk.labels: keep keep keep keep add keep keep keep keep
hunk.after_edit:     margin-left: var(--inner-spacing-1);
  
hunk.file_path: app/client/packages/design-system/widgets/src/styles/src/field.module.css
hunk.type: add
file: import React from "react";
  import { hexToRgba } from "design-system-old";
  import { Button, Icon, Spinner, Text } from "design-system";
  import {
    getIsRestartFailed,
    getRestartingState,
  } from "selectors/settingsSelectors";
  import { useSelector } from "react-redux";
  import styled from "styled-components";
  import {
    createMessage,
    RETRY_BUTTON,
    RESTART_BANNER_BODY,
    RESTART_BANNER_HEADER,
    RESTART_ERROR_BODY,
    RESTART_ERROR_HEADER,
  } from "@appsmith/constants/messages";
  import { Colors } from "constants/Colors";
  import { retryServerRestart } from "@appsmith/actions/settingsAction";
  import { useDispatch } from "react-redux";
  
  const RestartBannerWrapper = styled.div`
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    z-index: 20;
    overflow: auto;
  `;
  
  const OverlayBackdrop = styled.div`
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    /* TODO: replaced hexToRgba (Albin) */
    background-color: ${hexToRgba(Colors.COD_GRAY, 0.7)};
    overflow: auto;
    pointer-events: none;
    user-select: none;
    z-index: 20;
  `;
  
  const RestartContainer = styled.div`
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: ${(props) => props.theme.settings.footerHeight}px;
    z-index: 20;
    padding: 0px ${(props) => props.theme.spaces[11]}px 0px 276px;
    background: var(--ads-v2-color-bg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    pointer-events: all;
    user-select: text;
  `;
  
  const RestartMessageWrapper = styled.div`
    display: flex;
    flex-direction: column;
    justify-content: center;
    pointer-events: none;
  `;
  
  const HeaderContents = styled.div`
    display: flex;
    align-items: center;
    padding-bottom: ${(props) => props.theme.spaces[3]}px;
    gap: 8px;
  `;
  
  const Heading = styled(Text)``;
  
  const AppIconWrapper = styled.div`
    background: var(--ads-v2-color-bg-error);
    border-radius: 50%;
    padding: 4px;
    margin-right: 12px;
  
    svg {
      width: 18px;
      height: 18px;
  
      path {
        fill: var(--ads-v2-color-fg-on-error);
      }
    }
  `;
  
  function Header() {
    const isRestartFailed = useSelector(getIsRestartFailed);
    return (
      <HeaderContents>
        {isRestartFailed ? (
          <AppIconWrapper>
            <Icon name="server-line" />
          </AppIconWrapper>
        ) : (
          <Spinner
            iconProps={{ color: "var(--ads-v2-color-bg-brand)" }}
            size="lg"
          />
        )}
        <Heading kind="heading-m" renderAs="p">
          {isRestartFailed
            ? createMessage(RESTART_ERROR_HEADER)
            : createMessage(RESTART_BANNER_HEADER)}
        </Heading>
      </HeaderContents>
    );
  }
  
  export default function RestartBanner() {
    const isRestartFailed = useSelector(getIsRestartFailed);
    const isRestarting = useSelector(getRestartingState);
    const dispatch = useDispatch();
    return isRestarting ? (
      <RestartBannerWrapper className="t--admin-settings-restart-notice">
        <OverlayBackdrop />
        <RestartContainer>
          <RestartMessageWrapper>
            <Header />
            <Text renderAs="p">
              {isRestartFailed
                ? createMessage(RESTART_ERROR_BODY)
                : createMessage(RESTART_BANNER_BODY)}
            </Text>
          </RestartMessageWrapper>
          {isRestartFailed && (
            <Button
              data-testid="btn-refresh"
              onClick={() => dispatch(retryServerRestart())}
              size="md"
            >
              {createMessage(RETRY_BUTTON)}
            </Button>
          )}
        </RestartContainer>
      </RestartBannerWrapper>
    ) : null;
  }
  