Refactor UI folder (#2016)

* Added Overview page

* Revised Getting Started page

* Minor revision

* Edited readme, minor modifications to docs

* Removed sweep.yaml, .devcontainer, .ergomake

* Moved security.md to .github, added contributing.md

* changes as per code review

* updated contributing.md

* fixed broken links & added missing links in doc, improved structure

* fixed link in wsl setup

* fixed server link, added https cloning in yarn-setup

* removed package-lock.json

* added doc card, admonitions

* removed underline from nav buttons

* refactoring modules/ui

* refactoring modules/ui

* Change folder case

* Fix theme location

* Fix case 2

* Fix storybook

---------

Co-authored-by: Nimra Ahmed <nimra1408@gmail.com>
Co-authored-by: Nimra Ahmed <50912134+nimraahmed@users.noreply.github.com>

front/src/modules/ui/layout/top-bar/TopBar.tsx

@@ -0,0 +1,57 @@
+import { ReactNode } from 'react';
+import styled from '@emotion/styled';
+
+type TopBarProps = {
+  className?: string;
+  leftComponent?: ReactNode;
+  rightComponent?: ReactNode;
+  bottomComponent?: ReactNode;
+  displayBottomBorder?: boolean;
+};
+
+const StyledContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const StyledTopBar = styled.div<{ displayBottomBorder: boolean }>`
+  align-items: center;
+  border-bottom: ${({ displayBottomBorder, theme }) =>
+    displayBottomBorder ? `1px solid ${theme.border.color.light}` : 'none'};
+  box-sizing: border-box;
+  color: ${({ theme }) => theme.font.color.secondary};
+  display: flex;
+  flex-direction: row;
+  font-weight: ${({ theme }) => theme.font.weight.medium};
+  height: 39px;
+  justify-content: space-between;
+  padding-left: ${({ theme }) => theme.spacing(2)};
+  padding-right: ${({ theme }) => theme.spacing(2)};
+  z-index: 5;
+`;
+
+const StyledLeftSection = styled.div`
+  display: flex;
+`;
+
+const StyledRightSection = styled.div`
+  display: flex;
+  font-weight: ${({ theme }) => theme.font.weight.regular};
+  gap: ${({ theme }) => theme.betweenSiblingsGap};
+`;
+
+export const TopBar = ({
+  className,
+  leftComponent,
+  rightComponent,
+  bottomComponent,
+  displayBottomBorder = true,
+}: TopBarProps) => (
+  <StyledContainer className={className}>
+    <StyledTopBar displayBottomBorder={displayBottomBorder}>
+      <StyledLeftSection>{leftComponent}</StyledLeftSection>
+      <StyledRightSection>{rightComponent}</StyledRightSection>
+    </StyledTopBar>
+    {bottomComponent}
+  </StyledContainer>
+);