maintenance

src/components/modal/style.ts

@@ -0,0 +1,80 @@
+/**
+ * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
+ */
+import * as styled from 'styled-components';
+
+import {theme, paddings} from 'components/shared/theme';
+import {ConfirmButton} from 'components/buttons';
+
+const {colors} = theme;
+
+export const ModalOverlay = styled.default.div`
+  position: fixed;
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: ${colors.halfTransparentBlack};
+  top: 0;
+  left: 0;
+  z-index: 9999;
+`;
+
+export const ModalContainer = styled.default.div`
+  width: 60%;
+  max-width: 800px;
+  border-radius: 4px;
+  padding: ${paddings.xlarge};
+  background-color: ${colors.white};
+  position: relative;
+  max-height: 90%;
+  overflow: auto;
+
+  &.full-width {
+    width: auto;
+    max-width: 100%;
+    overflow-x: hidden;
+  }
+
+  &.dark {
+    background-color: ${colors.gray1000}
+  }
+`;
+
+export const CloseButton = styled.default.span`
+  cursor: pointer;
+  height: 1rem;
+  width: 1rem;
+  color: ${colors.gray700};
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+
+  &:before,
+  &:after {
+    position: absolute;
+    left: 0.4rem;
+    content: ' ';
+    height: 1rem;
+    width: 0.2rem;
+    background-color: ${colors.gray700};
+  }
+  &:before {
+    transform: rotate(45deg);
+  }
+  &:after {
+    transform: rotate(-45deg);
+  }
+`;
+
+export const ModalButtonsContaier = styled.default.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 24px 0 0;
+
+  ${ConfirmButton} {
+    margin: 0 0.5rem;
+  }
+`;