hunk.code_window:     icon: "fluid",
     },
   ];
   const LayoutControlWrapper = styled.div`
     position: absolute;
     height: ${(props) => props.theme.spaces[15]}px;
     width: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     .bp3-popover-target {
  
hunk.labels: keep keep keep keep keep replace replace replace keep keep keep keep
hunk.after_edit:   height: 40px;
  
hunk.file_path: app/client/src/pages/Editor/MainContainerLayoutControl.tsx
hunk.type: replace
file: import React from "react";
  import styled from "styled-components";
  
  const LetterIconWrapper = styled.div`
    height: 28px;
    width: 28px;
    border-radius: ${(props) => props.theme.radii[1]}px;
    background: ${(props) => props.theme.colors.navBG};
    font-size: ${(props) => props.theme.fontSizes[5]}px;
    font-weight: ${(props) => props.theme.fontWeights[3]};
    display: flex;
    justify-content: center;
    align-items: center;
  `;
  
  function LetterIcon(props: { text: string }) {
    return <LetterIconWrapper>{props.text.toUpperCase()}</LetterIconWrapper>;
  }
  
  export default LetterIcon;
  