From 6e2cb8e564259809abb2f89b81990f935b8f71e7 Mon Sep 17 00:00:00 2001 From: MTeresaMB Date: Wed, 18 Oct 2023 16:19:41 +0200 Subject: [PATCH] change styles design modal settings --- .../public/assets/arrow_down_select.svg | 6 ++ .../select/customSelect.component.tsx | 9 +-- .../components/select/customSelect.styles.ts | 15 ++-- .../customSelectColor.component.tsx | 74 +++++++++++++++++++ .../customSelectColor.styles.ts | 51 +++++++++++++ .../components => customSelectColor}/index.ts | 0 .../customSelectColor.component.tsx | 26 ------- .../components/customSelectColor.styles.ts | 26 ------- .../export-config/export-config.component.tsx | 56 +------------- .../export-config/export-config.styles.ts | 28 +------ 10 files changed, 143 insertions(+), 148 deletions(-) create mode 100644 apps/react-app/public/assets/arrow_down_select.svg create mode 100644 apps/react-app/src/pods/template-export/components/customSelectColor/customSelectColor.component.tsx create mode 100644 apps/react-app/src/pods/template-export/components/customSelectColor/customSelectColor.styles.ts rename apps/react-app/src/pods/template-export/components/{export-config/components => customSelectColor}/index.ts (100%) delete mode 100644 apps/react-app/src/pods/template-export/components/export-config/components/customSelectColor.component.tsx delete mode 100644 apps/react-app/src/pods/template-export/components/export-config/components/customSelectColor.styles.ts diff --git a/apps/react-app/public/assets/arrow_down_select.svg b/apps/react-app/public/assets/arrow_down_select.svg new file mode 100644 index 00000000..e95f9707 --- /dev/null +++ b/apps/react-app/public/assets/arrow_down_select.svg @@ -0,0 +1,6 @@ + + + diff --git a/apps/react-app/src/common-app/components/select/customSelect.component.tsx b/apps/react-app/src/common-app/components/select/customSelect.component.tsx index 498a1e86..1e5b09f1 100644 --- a/apps/react-app/src/common-app/components/select/customSelect.component.tsx +++ b/apps/react-app/src/common-app/components/select/customSelect.component.tsx @@ -12,16 +12,11 @@ export const CustomSelect: React.FC = ({ listOptions, label }) => {
{label} - - - + arrow down select{' '}
{isOpen && (
    - {listOptions && listOptions.map((list, index) =>
  • {list}
    • )} + {listOptions && listOptions.map((option, index) =>
  • {option}
    • )}
)}
diff --git a/apps/react-app/src/common-app/components/select/customSelect.styles.ts b/apps/react-app/src/common-app/components/select/customSelect.styles.ts index b789b327..2445e83d 100644 --- a/apps/react-app/src/common-app/components/select/customSelect.styles.ts +++ b/apps/react-app/src/common-app/components/select/customSelect.styles.ts @@ -9,7 +9,7 @@ export const selectContainer = css` `; export const selectContent = css` display: flex; - padding: 12px 16px; + padding: ${theme.spacing(3)} ${theme.spacing(4)}; align-items: flex-start; gap: ${theme.spacing(2)}; align-self: stretch; @@ -23,7 +23,7 @@ export const selectContent = css` font-size: 16px; font-style: normal; font-weight: 400; - line-height: 22px; /* 137.5% */ + line-height: 22px; letter-spacing: 0.15px; } `; @@ -31,16 +31,15 @@ export const selectContent = css` export const listContainer = css` display: flex; flex-direction: column; - padding: 8px 0px; - gap: 8px; + padding: ${theme.spacing(2)} ${theme.spacing(0)}; + gap: ${theme.spacing(2)}; border-radius: 4px; - //border: 1px solid blue; background: ${theme.palette.info[50]}; box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.3); li { display: flex; - height: 32px; - padding: 0px 16px; + height: ${theme.spacing(8)}; + padding: ${theme.spacing(0)} ${theme.spacing(4)}; justify-content: flex-start; align-items: center; @@ -49,7 +48,7 @@ export const listContainer = css` font-size: 14px; font-style: normal; font-weight: 400; - line-height: 20px; /* 142.857% */ + line-height: 20px; letter-spacing: 0.25px; :hover { diff --git a/apps/react-app/src/pods/template-export/components/customSelectColor/customSelectColor.component.tsx b/apps/react-app/src/pods/template-export/components/customSelectColor/customSelectColor.component.tsx new file mode 100644 index 00000000..00281ef3 --- /dev/null +++ b/apps/react-app/src/pods/template-export/components/customSelectColor/customSelectColor.component.tsx @@ -0,0 +1,74 @@ +import React from 'react'; +import { theme } from '@/core/theme'; +import * as classes from './customSelectColor.styles'; + +interface Props { + label: string; + onChange: (event: React.ChangeEvent) => void; +} + +export const CustomSelectColor: React.FC = ({ label, onChange }) => { + const [isOpen, setIsOpen] = React.useState(false); + const toggleIsOpen = () => setIsOpen(!isOpen); + return ( +
+
+ {label} + arrow down select +
+ {isOpen && ( +
+ + + + + + +
+ )} +
+ ); +}; diff --git a/apps/react-app/src/pods/template-export/components/customSelectColor/customSelectColor.styles.ts b/apps/react-app/src/pods/template-export/components/customSelectColor/customSelectColor.styles.ts new file mode 100644 index 00000000..32e1cbd4 --- /dev/null +++ b/apps/react-app/src/pods/template-export/components/customSelectColor/customSelectColor.styles.ts @@ -0,0 +1,51 @@ +import { css } from '@emotion/css'; +import { theme } from '@/core/theme'; + +export const root = css` + border-bottom: 1px solid ${theme.palette.info[600]}; +`; +export const container = css` + display: flex; + min-width: 100%; + height: 48px; + padding: ${theme.spacing(3)} ${theme.spacing(4)}; + align-items: flex-start; + gap: ${theme.spacing(2)}; + align-self: stretch; + border-radius: 8px; + background: ${theme.palette.info[50]}; + + span { + flex: 1 0 0; + color: ${theme.palette.info[900]}; + font-family: Sanchez; + font-size: 18px; + font-style: normal; + font-weight: 400; + line-height: 24px; + } +`; +export const colorFieldset = css` + display: flex; + padding: ${theme.spacing(8)} ${theme.spacing(0)}; + flex-wrap: wrap; + justify-content: center; + align-items: flex-start; + align-content: flex-start; + gap: ${theme.spacing(8)}; + align-self: stretch; +`; +export const inputRadioButton = (color: string) => css` + appearance: none; + width: 82px; + height: 82px; + box-shadow: 8px 8px 16px 0px rgba(0, 0, 0, 0.25); + border-radius: 50%; + background-color: ${color}; + cursor: pointer; + outline: none; + border: 15px solid ${theme.palette.info[50]}; + &[type='radio']:checked { + box-shadow: 0px 0px 0px 4px ${theme.palette.dark[200]}; + } +`; diff --git a/apps/react-app/src/pods/template-export/components/export-config/components/index.ts b/apps/react-app/src/pods/template-export/components/customSelectColor/index.ts similarity index 100% rename from apps/react-app/src/pods/template-export/components/export-config/components/index.ts rename to apps/react-app/src/pods/template-export/components/customSelectColor/index.ts diff --git a/apps/react-app/src/pods/template-export/components/export-config/components/customSelectColor.component.tsx b/apps/react-app/src/pods/template-export/components/export-config/components/customSelectColor.component.tsx deleted file mode 100644 index 8dd82f06..00000000 --- a/apps/react-app/src/pods/template-export/components/export-config/components/customSelectColor.component.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react'; -import * as classes from './customSelectColor.styles'; - -interface Props { - label: string; - children: React.ReactNode; -} - -export const CustomSelectColor: React.FC = ({ label, children }) => { - const [isOpen, setIsOpen] = React.useState(false); - const toggleIsOpen = () => setIsOpen(!isOpen); - return ( - <> -
- {label} - - - -
- {isOpen && <>{children}} - - ); -}; diff --git a/apps/react-app/src/pods/template-export/components/export-config/components/customSelectColor.styles.ts b/apps/react-app/src/pods/template-export/components/export-config/components/customSelectColor.styles.ts deleted file mode 100644 index bd83323d..00000000 --- a/apps/react-app/src/pods/template-export/components/export-config/components/customSelectColor.styles.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { css } from '@emotion/css'; -import { theme } from '@/core/theme'; - -export const selectColor = css` - display: flex; - min-width: 100%; - height: 48px; - padding: ${theme.spacing(3)} ${theme.spacing(4)}; - padding-right: 0; - align-items: flex-start; - gap: ${theme.spacing(2)}; - align-self: stretch; - border-radius: 8px; - border-bottom: 1px solid ${theme.palette.info[600]}; - background: ${theme.palette.info[50]}; - - span { - flex: 1 0 0; - color: ${theme.palette.info[900]}; - font-family: Sanchez; - font-size: 18px; - font-style: normal; - font-weight: 400; - line-height: 24px; - } -`; diff --git a/apps/react-app/src/pods/template-export/components/export-config/export-config.component.tsx b/apps/react-app/src/pods/template-export/components/export-config/export-config.component.tsx index 4918ed95..007a2a27 100644 --- a/apps/react-app/src/pods/template-export/components/export-config/export-config.component.tsx +++ b/apps/react-app/src/pods/template-export/components/export-config/export-config.component.tsx @@ -3,7 +3,7 @@ import { ExportHTMLSettings } from '@lemoncode/manfred2html'; import { theme } from '@/core/theme'; import { Button, CustomSelect } from '@/common-app/components'; import { useUserChoiceContext } from '@/core/user-choice'; -import { CustomSelectColor } from './components/customSelectColor.component'; +import { CustomSelectColor } from '../customSelectColor/customSelectColor.component'; import * as classes from './export-config.styles'; interface Props { htmlTemplate: string; @@ -55,59 +55,7 @@ export const ExportConfig: React.FC = props => {
- -
- - - - - - -
- +
diff --git a/apps/react-app/src/pods/template-export/components/export-config/export-config.styles.ts b/apps/react-app/src/pods/template-export/components/export-config/export-config.styles.ts index 78e8446b..06695969 100644 --- a/apps/react-app/src/pods/template-export/components/export-config/export-config.styles.ts +++ b/apps/react-app/src/pods/template-export/components/export-config/export-config.styles.ts @@ -22,37 +22,12 @@ export const content = css` @media (min-width: 1024px) { ${theme.typography.desktop.h5}; align-items: flex-center; - gap: 32px; + gap: ${theme.spacing(8)}; align-self: stretch; padding: ${theme.spacing(8)}; } `; -export const colorFieldset = css` - display: flex; - padding: 32px 0px; - flex-wrap: wrap; - justify-content: center; - align-items: flex-start; - align-content: flex-start; - gap: ${theme.spacing(8)}; - align-self: stretch; -`; -export const inputRadioButton = (color: string) => css` - appearance: none; - width: 82px; - height: 82px; - box-shadow: 8px 8px 16px 0px rgba(0, 0, 0, 0.25); - border-radius: 50%; - background-color: ${color}; - cursor: pointer; - outline: none; - border: 15px solid ${theme.palette.info[50]}; - &[type='radio']:checked { - box-shadow: 0px 0px 0px 4px ${theme.palette.dark[200]}; - } -`; - export const title = css` width: 100%; padding-bottom: ${theme.spacing(2)}; @@ -121,7 +96,6 @@ export const optionsContainer = css` flex-direction: row; align-items: flex-start; align-self: stretch; - height: 512px; } `;