Minor UI improvements (#333)

* Minor UI improvements * Fix styles for modal --------- Co-authored-by: Elizaveta Selyukovich <[email protected]>
veraPDF · Mar 12, 2024 · 201a7da · 201a7da
1 parent d4abb24
commit 201a7da
Show file tree

Hide file tree

Showing 10 changed files with 98 additions and 25 deletions.
diff --git a/landing/assets/css/style.css b/landing/assets/css/style.css
@@ -87,13 +87,13 @@ main {
 .read-more {
     display: inline-flex;
     text-decoration: none;
-    color: #0771F2;
+    color: #ac4a49;
     align-items: center;
     margin-bottom: 100px;
 }
 
 .read-more:hover {
-    color: #054ba1;
+    color: #773332;
 }
 
 .read-more img {
@@ -186,3 +186,14 @@ footer a:hover {
     }
 }
 
+@media screen and (max-width: 450px) {
+    .main-content {
+        align-items: center;
+        justify-content: center;
+    }
+    .info {
+        width: 90%;
+        margin-bottom: 30px;
+    }
+}
+
diff --git a/landing/assets/img/arrow.svg b/landing/assets/img/arrow.svg
diff --git a/src/common/components/App.scss b/src/common/components/App.scss
@@ -14,7 +14,7 @@
   width: 100%;
   height: 100%;
   margin: 0 auto;
-  padding: 85px 0 50px 0;
+  padding: 60px 0 50px 0;
   box-sizing: border-box;
 }
 

diff --git a/src/common/components/layouts/header/Header.scss b/src/common/components/layouts/header/Header.scss
@@ -3,12 +3,12 @@
 .app-header {
   position: fixed;
   top: 0;
-  height: 85px;
+  height: 60px;
   z-index: 1;
   width: 100%;
   box-shadow: $box-shadow--basic;
   background: $bg-color--primary;
-  padding: 10px 20px;
+  padding: 0 20px;
   box-sizing: border-box;
 
   display: flex;

diff --git a/src/common/components/layouts/pages/about/About.scss b/src/common/components/layouts/pages/about/About.scss
@@ -1,3 +1,14 @@
 .about {
   padding: 0 20px;
+
+  a {
+    color: 	#914148;
+    font-weight: 500;
+    text-decoration: none;
+
+    &:hover {
+      color: #673346;
+    }
+  }
 }
+
diff --git a/src/common/components/layouts/pages/inspect/Inspect.scss b/src/common/components/layouts/pages/inspect/Inspect.scss
@@ -7,7 +7,7 @@
   position: absolute;
   left: 0;
   bottom: 50px;
-  top: 85px;
+  top: 60px;
 
   display: grid;
   grid: "toolbar toolbar toolbar toolbar" 40px

diff --git a/src/common/components/layouts/pages/inspect/pane/Pane.js b/src/common/components/layouts/pages/inspect/pane/Pane.js
@@ -4,6 +4,7 @@ import { makeStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 import ArrowRightIcon from '@material-ui/icons/ArrowRight';
 import ArrowLeftIcon from '@material-ui/icons/ArrowLeft';
+import { Tooltip } from '@material-ui/core';
 
 import './Pane.scss';
 
@@ -17,18 +18,20 @@ const paneClasses = makeStyles({
 function Pane({ isShow, setIsShow, isDisable }) {
     const classes = paneClasses();
     return (
-        <Button
-            className="pane"
-            classes={{
-                root: classes.root,
-            }}
-            variant="outlined"
-            color="primary"
-            onClick={() => setIsShow(!isShow)}
-            disabled={isDisable || false}
-        >
-            {isShow ? <ArrowRightIcon /> : <ArrowLeftIcon />}
-        </Button>
+        <Tooltip title="Structure tree" placement="left">
+            <Button
+                className="pane"
+                classes={{
+                    root: classes.root,
+                }}
+                variant="outlined"
+                color="primary"
+                onClick={() => setIsShow(!isShow)}
+                disabled={isDisable || false}
+            >
+                {isShow ? <ArrowRightIcon /> : <ArrowLeftIcon />}
+            </Button>
+        </Tooltip>
     );
 }
 

diff --git a/src/common/components/layouts/pages/privacyPolicy/PrivacyPolicy.scss b/src/common/components/layouts/pages/privacyPolicy/PrivacyPolicy.scss
@@ -1,3 +1,13 @@
 .privacy-policy {
   padding: 0 20px;
+
+  a {
+    color: 	#914148;
+    font-weight: 500;
+    text-decoration: none;
+
+    &:hover {
+      color: #673346;
+    }
+  }
 }
diff --git a/src/common/components/shared/dialog/Dialog.js b/src/common/components/shared/dialog/Dialog.js
@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-
+import { Box } from '@material-ui/core';
 import MaterialDialog from '@material-ui/core/Dialog';
 import DialogTitle from '@material-ui/core/DialogTitle';
 import DialogContent from '@material-ui/core/DialogContent';
@@ -10,8 +10,9 @@ import DialogActions from '@material-ui/core/DialogActions';
 import Paper from '@material-ui/core/Paper';
 import Tooltip from '@material-ui/core/Tooltip';
 import Chip from '@material-ui/core/Chip';
-import Button from '../button/Button';
+import CloseIcon from '@material-ui/icons/Close';
 
+import Button from '../button/Button';
 import { TAGS } from '../../layouts/pages/inspect/constants';
 
 import './Dialog.scss';
@@ -38,12 +39,30 @@ function Dialog({ title, tagsNames, actions, open, onClose, children }) {
             aria-describedby="alert-dialog-description"
             className="dialog"
         >
-            {title && <DialogTitle id="alert-dialog-title">{title}</DialogTitle>}
-            <DialogContent>
+            {title && (
+                <DialogTitle id="alert-dialog-title" className="dialog-title">
+                    {title}
+                </DialogTitle>
+            )}
+            <Tooltip title="Close">
+                <Box
+                    sx={{
+                        position: 'absolute',
+                        right: 12,
+                        top: 12,
+                        cursor: 'pointer',
+                        width: 20,
+                        height: 20,
+                    }}
+                >
+                    <CloseIcon className="close-icon" aria-label="close" onClick={onClose} />
+                </Box>
+            </Tooltip>
+            <DialogContent className="dialog-content-main">
                 <DialogContentText id="alert-dialog-description">{children}</DialogContentText>
             </DialogContent>
             {!!tagsNames?.length && (
-                <DialogContent>
+                <DialogContent className="dialog-content-footer">
                     <Paper component="ul" className="dialog__tags">
                         {tagsArray}
                     </Paper>

diff --git a/src/common/components/shared/dialog/Dialog.scss b/src/common/components/shared/dialog/Dialog.scss
@@ -18,4 +18,23 @@
 
 .dialog .dialog__tags__tag {
   margin: 3px;
-}
+}
+
+.dialog-title {
+  & > .MuiTypography-h6 {
+    padding-right: 20px;
+  }
+}
+
+.dialog .MuiSvgIcon-root.close-icon {
+  width: 20px;
+  height: 20px;
+}
+
+.dialog-content-main.MuiDialogContent-root  {
+  padding-bottom: 0;
+}
+
+.dialog-content-footer.MuiDialogContent-root  {
+  padding: 0 24px 16px 24px;
+}