Feature/EPMUII-5022 Responsiveness - Global layout (#166)

* create mobile size for start screen

* create mobile size for start screen

* create mobile size for start screen

* add resize depends on screen

* add bottom menu

* add response to canvas for devices

* removed background for buttons into start screen

* worked with settings component and states into main mobile screen

* removed prior version of mobile bottom menu as new component;
created new mobile menu using css;

* add span to render text into buttons;
changed canvas styles

* add responsive for canvas

* add additional render for canvas

* add changes according to rendering canvas on screens

* clean up unnecessary styles from recently files

* moved styled to new file; unlocked slider work

* added styles with aspect ratio;

* added styles with aspect ratio depend on devices ;

* added @copyright;

src/engine/Graphics2d.js

@@ -21,6 +21,8 @@ import Segm2d from './Segm2d';
 
 import { getPalette256 } from './loaders/RoiPalette256';
 
+import css from './Graphics2d.module.css';
+
 class Graphics2d extends React.Component {
   constructor(props) {
     super(props);
@@ -690,28 +692,15 @@ class Graphics2d extends React.Component {
     // const volSet = store.volumeSet;
     this.m_sliceRatio = this.props.sliderValue;
     this.m_mode2d = this.props.mode2d;
-
-    const wrapperStyles = {
-      display: 'flex',
-      justifyContent: 'flex-start',
-      width: `calc(100% - 110px)`,
-      height: `calc(100% - 110px)`,
-      margin: '100px 125px',
-    };
-    const canvasStyles = {
-      maxWidth: '100%',
-      border: '2px solid #dc5e47',
-      borderRadius: '10px',
-    };
     return (
-      <div style={wrapperStyles}>
+      <div className={css.wrapperStyles}>
         <canvas
           ref={this.m_mount}
-          style={canvasStyles}
           onMouseDown={this.onMouseDown}
           onMouseUp={this.onMouseUp}
           onMouseMove={this.onMouseMove}
           onWheel={this.onMouseWheel}
+          className={css.canvasStyles}
         />
       </div>
     );

src/engine/Graphics2d.module.css

@@ -0,0 +1,117 @@
+/*!
+* Copyright 2021 EPAM Systems, Inc. (https://www.epam.com/)
+* SPDX-License-Identifier: Apache-2.0
+*/
+
+ .wrapperStyles {
+    width: 100%;
+     height: 100vh;
+     justify-content: center;
+     overflow: scroll;
+ }
+
+.canvasStyles {
+    display: block;
+    width: 150vw;
+}
+
+@media screen and (min-width: 768px )  and (max-width: 1023px) {
+
+    .wrapperStyles {
+        height: calc(100% - 2.5rem);
+        width: calc(100% - 3rem);
+        border: 2px solid #dc5e47;
+        border-radius: 10px;
+        box-sizing: border-box;
+    }
+
+    .canvasStyles {
+        aspect-ratio: 1 / 1;
+    }
+}
+
+@media screen and (orientation: landscape) and (min-width: 768px) and (max-width: 1023px) {
+
+    .wrapperStyles {
+        height: calc(100% - 2.5rem);
+        width: calc(100%- 3rem);
+    }
+
+    .canvasStyles {
+        aspect-ratio: 1 / 1;
+    }
+
+}
+
+
+@media screen and (min-width: 1024px) and (orientation: landscape) {
+
+    .wrapperStyles {
+        height: calc(100% - 0.5rem);
+        width: 80%;
+        border: 2px solid #dc5e47;
+        border-radius: 10px;
+    }
+
+    .canvasStyles {
+        margin: 0 auto;
+        box-sizing: border-box;
+    }
+
+}
+
+@media screen and (min-width: 1024px) and (orientation: landscape) and (max-width: 2559px) {
+
+    .wrapperStyles {
+            display: block;
+            height: calc(100% - 0.5rem);
+            width: 80%;
+            border: 2px solid #dc5e47;
+            border-radius: 10px;
+
+    }
+
+    .canvasStyles {
+            width: 150vw;
+            margin: 0 auto;
+            box-sizing: border-box;
+    }
+
+}
+
+@media screen and (min-width: 1024px) and (max-width: 2559px) and (orientation: portrait) {
+
+    .wrapperStyles {
+        width: 90%;
+        height: calc(100% - 0.5rem);
+        border: 2px solid #dc5e47;
+        border-radius: 10px;
+        display: block;
+    }
+
+    .canvasStyles {
+        aspect-ratio: 1/1;
+        width:150vw;
+    }
+
+}
+
+@media screen and (min-width: 2560px) {
+    .wrapperStyles {
+        width: 90%;
+        border: 2px solid #dc5e47;
+        border-radius: 10px;
+        display: flex;
+        align-items: center;
+    }
+
+   .canvasStyles {
+       aspect-ratio: 1/1;
+
+   }
+}
+
+
+
+
+

src/index.css

@@ -11,6 +11,7 @@ body {
   margin: 0;
   padding: 0;
   font-family: 'Inter', sans-serif;
+  font-size: 15px;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   height: 100vh;
@@ -28,6 +29,7 @@ code {
   --black: #18191b;
 
   /* Additional colors */
+  --beige: #f4f2ea;
   --gray: #636666;
   --dark-gray: #282a2d;
   --dark-gray2: #46494e;

src/ui/Button/Button.jsx

@@ -30,7 +30,7 @@ export const UIButton = ({ icon, caption, handler, active, rounded, type, mode,
       caption={icon && caption}
     >
       {icon ? <SVG name={icon} title={caption} /> : caption}
-      {text ? text : ''}
+      {text ? <span>{text}</span> : ''}
     </ButtonContainer>
   );
 };