Feat: updating styles for custom colorScheme

scaleflex · Dec 22, 2020 · a16b880 · a16b880
1 parent 28396ad
commit a16b880
Show file tree

Hide file tree

Showing 9 changed files with 42 additions and 27 deletions.
diff --git a/projects/react/components/Header/Header.js b/projects/react/components/Header/Header.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import {
-  HeaderWrapper, HeaderTop, Title, ToolbarWrapper, CancelBtn, Button, FullscreenBtn
+  HeaderWrapper, HeaderTop, Title, ButtonsWrapper, ToolbarWrapper, CancelBtn, Button, FullscreenBtn
 } from '../../styledComponents';
 import { Toolbar } from '../';
 import { toggleModalFullscreen } from '../../utils/full-screen-handle';
@@ -24,23 +24,25 @@ export default class extends Component {
       <HeaderWrapper>
         <HeaderTop>
           <Title noCapitalStrs={noCapitalStrs}>{t[`toolbar.${filteredName}`] || t[`header.image_editor_title`]}</Title>
-          <CancelBtn
-            hide={!activeTab}
-            onClick={isOneTool ? cancelBtnClosingFn : onRevert}
-            noCapitalStrs={noCapitalStrs}
-            sm default fullSize
-          >
-            {t[`toolbar.cancel`]}
-          </CancelBtn>
-          <Button
-            themeColor
-            sm
-            success={!activeTab || activeTab === 'resize'}
-            themeBtn={activeTab}
-            onClick={isOneTool ? applyAndSave : !activeTab ? () => { handleSave(); } : () => { apply(); }}
-          >
-            {!activeTab || activeTab === 'resize' ? onFinishButtonLabel : t['toolbar.apply']}
-          </Button>
+          <ButtonsWrapper>
+            <CancelBtn
+              hide={!activeTab}
+              onClick={isOneTool ? cancelBtnClosingFn : onRevert}
+              noCapitalStrs={noCapitalStrs}
+              sm default fullSize
+            >
+              {t[`toolbar.cancel`]}
+            </CancelBtn>
+            <Button
+              themeColor
+              sm
+              success={!activeTab || activeTab === 'resize'}
+              themeBtn={activeTab}
+              onClick={isOneTool ? applyAndSave : !activeTab ? () => { handleSave(); } : () => { apply(); }}
+            >
+              {!activeTab || activeTab === 'resize' ? onFinishButtonLabel : t['toolbar.apply']}
+            </Button>
+          </ButtonsWrapper>
           <FullscreenBtn onClick={() => toggleModalFullscreen(elementId)} title={t[`header.toggle_fullscreen`]} />
         </HeaderTop>
 

diff --git a/projects/react/components/Modal.js b/projects/react/components/Modal.js
@@ -39,7 +39,6 @@ const ModalContent = styled.div`
   height: ${props => props.h || props.height || 'auto'};
   background: ${props => variables.colors.background.base || '#fff'};
   color: ${props => variables.colors.text || '#3d3d3d'};
-  filter: drop-shadow(0px 2px 4px rgba(77, 78, 78, 0.25));
 `;
 
 const ModalFullScreen = styled.div`
@@ -93,6 +92,7 @@ const ModalFullScreen = styled.div`
   display: block;
   animation: scaleflexFadeInAnimation 350ms ease-in-out both;
   font-family: 'Roboto', 'Arial', sans-serif;
+  filter: drop-shadow(0px 2px 4px rgba(77, 78, 78, 0.25));
   
   ${props => props.isTooSmall ? getSmallModalStyle() : ''};
   

diff --git a/projects/react/components/Shared/Select.js b/projects/react/components/Shared/Select.js
@@ -134,6 +134,7 @@ const SelectWrapper = styled.div`
   display: ${p => p.display ? p.display : p.width ? 'inline-block' : 'block'};
   width: ${p => p.width || 'auto'};
   text-align: ${p => p.styles.textAlign ? p.styles.textAlign : 'left'};
+  max-width: 400px;
 `;
 
 const SelectedItem = styled(FileInput).attrs()`

diff --git a/projects/react/styledComponents/Adjust.ui.js b/projects/react/styledComponents/Adjust.ui.js
@@ -5,7 +5,9 @@ const AdjustWrapper = styled.div`
   color: ${props => props.theme.colors.text};
   text-align: center;
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
+  width: fit-content;
+  margin: 0 auto;
 
   div {
     margin-left: 10px;

diff --git a/projects/react/styledComponents/Crop.ui.js b/projects/react/styledComponents/Crop.ui.js
@@ -50,6 +50,7 @@ const FieldInput = styled.input.attrs(props => ({
 }))`
   display: inline-block;
   width: ${props => props.fullSize ? '100%' : props.theme.fieldWidth};
+  ${props => !props.fullSize && 'max-width: 400px;'};
   height: 30px;
   padding: 6px 12px;
   font-size: 12px;

diff --git a/projects/react/styledComponents/FullscreenBtn.js b/projects/react/styledComponents/FullscreenBtn.js
@@ -7,7 +7,7 @@ const FullscreenBtn = styled.span.attrs(() => ({
   cursor: pointer;
   position: absolute;
   font-weight: normal;
-  top: ${props => props.t || '10px'};
+  top: ${props => props.t || '18px'};
   right: ${props => props.r || 'auto'};
   left: ${props => props.l || '20px'};
   bottom: ${props => props.b || 'auto'};

diff --git a/projects/react/styledComponents/Header.ui.js b/projects/react/styledComponents/Header.ui.js
@@ -10,17 +10,19 @@ const HeaderTop = styled.div`
   line-height: 35px;
   border-bottom: 1px solid ${props => props.theme.colors.primaryBg};
   background: ${props => props.theme.colors.primaryBg};
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 8px 12px;
+  padding: 8px 0;
 `;
 
 const Title = styled.div`
   text-align: center;
   text-transform: ${props => props.noCapitalStrs ? 'none' : 'capitalize'};
   color: ${props => props.theme.colors.text};
-  flex-grow: 1;
+`;
+
+const ButtonsWrapper = styled.div`
+  position: absolute;
+  right: 12px;
+  top: 8px;
 `;
 
 const CancelBtn = styled(Button)`
@@ -53,4 +55,4 @@ const ToolbarWrapper = styled.div`
   }
 `;
 
-export { HeaderWrapper, HeaderTop, Title, ToolbarWrapper, CancelBtn };
+export { HeaderWrapper, HeaderTop, Title, ButtonsWrapper, ToolbarWrapper, CancelBtn };
diff --git a/projects/react/styledComponents/Shapes.ui.js b/projects/react/styledComponents/Shapes.ui.js
@@ -40,6 +40,9 @@ const SettingsWrapper = styled.div`
   padding: 0 15px;
   display: flex;
   align-items: center;
+  justify-content: center;
+  width: fit-content;
+  margin: 0 auto;
 `;
 
 const ItemGroup = styled.div`

diff --git a/projects/react/styledComponents/Watermark.ui.js b/projects/react/styledComponents/Watermark.ui.js
@@ -6,6 +6,8 @@ const WatermarkWrapper = styled.div`
   color: ${props => props.theme.colors.text};
   text-align: left;
   white-space: normal;
+  width: fit-content;
+  margin: 0 auto;
   
   .image-editor-range {
     display: inline-block;
@@ -88,9 +90,11 @@ const WatermarkInputs = styled('div')`
   width: calc(100% - 200px);
   display: inline-block;
   vertical-align: top;
+  padding: 0 40px;
   
   @media (max-width: 768px) {
     width: 100%;
+    padding: 0;
   }
 `;