Updated / redesign started

package-lock.json

@@ -3803,34 +3803,11 @@
       "integrity": "sha512-arU1h31OGFu+LPrOLGZ7nB45v940NMDMEJeNmbutu57P+UFDVnkZg3e+J1I2HJRZ9hT7gO8J91dn/PMrAiKakA=="
     },
     "axios": {
-      "version": "0.19.2",
+      "version": "0.21.1",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz",
-      "integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==",
+      "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==",
       "requires": {
-        "follow-redirects": "1.5.10"
+        "follow-redirects": "^1.10.0"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
-          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "follow-redirects": {
-          "version": "1.5.10",
-          "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
-          "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
-          "requires": {
-            "debug": "=3.1.0"
-          }
-        },
-        "ms": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
-        }
       }
     },
     "axobject-query": {
@@ -8707,9 +8684,9 @@
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
     "ini": {
-      "version": "1.3.5",
+      "version": "1.3.8",
-      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
-      "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw=="
+      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew=="
     },
     "inquirer": {
       "version": "7.3.3",

package.json

@@ -11,7 +11,7 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
-    "axios": "^0.19.2",
+    "axios": "^0.21.1",
     "connected-react-router": "^6.8.0",
     "node-sass": "^4.14.1",
     "notistack": "^1.0.0",

src/App.scss

@@ -35,6 +35,7 @@
 
 .logo {
   width: 20vw;
+  max-width: 300px;
   margin: 16px;
 }
 
@@ -80,10 +81,11 @@ p {
   position: fixed;
   bottom: 24px;
   background-color: #262626;
-  border-radius: 15px;
+  border-radius: 24px;
   z-index: 5;
   h5 {
-    font-weight: 400;
+    font-weight: 500;
+    color: $gray;
     padding-left: 18px;
   }
 }

src/Design.scss

@@ -1,16 +1,9 @@
-$main-color: #d68000;
+$main-color: #ff9800;
-$secondary-color: #b46c00;
+$secondary-color: #fb8c00;
-$darker-color: #494949;
+$darker-color: #9e9e9e;
 $bg-color: #fafafa;
 $accents-color: #af6900;
 $lighter-color: #b46c00;
-$gray: #bbbbbb;
+$gray:#eeeeee;
-$dark-gray: #2b2b2b;
+$dark-gray:#2e2e2e;
 $mint: #01c3a9;
-/* $main-color: #01c3a9;
-$secondary-color: #01c3a9;
-$darker-color: #234f53;
-$bg-color: #ffffff;
-$accents-color: #0e8496;
-$lighter-color: #00d1b5;
- */

src/components/Dialogs/Cookies.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import ButtonPrimary from '../Input/ButtonPrimary';
+import ButtonSecondary from '../Input/ButtonSecondary';
 import UniversalCookies from "universal-cookie";
 
 export default function Cookies(props){
@@ -24,7 +24,7 @@ export default function Cookies(props){
         return(
             <div className="cookies-container">
                 <h5 className="cookies-text">Menui korzysta z ciasteczek (cookies). Dalsze korzystanie z serwisu oznacza zgodę na ich użycie.</h5>
-                <ButtonPrimary text="W porządku" onClick={setCookiesConsent}/>
+                <ButtonSecondary text="W porządku" onClick={setCookiesConsent}/>
             </div>
         )
     } else {

src/components/Dialogs/EditDish.js

@@ -38,6 +38,7 @@ const useStyles = makeStyles((theme) => ({
       backgroundColor: "#262626",
       color: "#bbbbbb",
       overflow: "visible",
+      borderRadius: "24px"
     },
   },
   closeButton: {
@@ -50,6 +51,7 @@ const useStyles = makeStyles((theme) => ({
     margin: theme.spacing(2),
     "& .MuiInputBase-root": {
       color: "#bbbbbb",
+      borderRadius: "14px"
     },
     "& .MuiInputLabel-root": {
       color: "#bbbbbb",
@@ -61,6 +63,7 @@ const useStyles = makeStyles((theme) => ({
     color: "#bbbbbb",
     "& .MuiInputBase-root": {
       color: "#bbbbbb",
+      borderRadius: "14px"
     },
     "& .MuiInputLabel-root": {
       color: "#bbbbbb",
@@ -74,6 +77,7 @@ const useStyles = makeStyles((theme) => ({
     minWidth: 100,
     "& .MuiInputBase-root": {
       color: "#bbbbbb",
+      borderRadius: "14px"
     },
     "$ .MuiSelect-root": {
       color: "#bbbbbb",

src/components/Dialogs/ForgotPassword.js

@@ -34,6 +34,7 @@ export default function ForgotPassword(props) {
       "& .MuiPaper-root": {
         backgroundColor: "#262626",
         color: "#bbbbbb",
+        borderRadius: "24px"
       },
     },
     closeButton: {
@@ -48,6 +49,7 @@ export default function ForgotPassword(props) {
       width: "90%",
       "& .MuiInputBase-root": {
         color: "#01c3a9",
+        borderRadius: "14px"
       },
       "& .MuiInputLabel-root": {
         color: "#bbbbbb",

src/components/Dialogs/LoginDialog.js

@@ -37,6 +37,7 @@ export default function LoginDialog(props) {
       "& .MuiPaper-root": {
         backgroundColor: "#262626",
         color: "#bbbbbb",
+        borderRadius: "24px"
       },
     },
     closeButton: {
@@ -51,6 +52,7 @@ export default function LoginDialog(props) {
       width: "90%",
       "& .MuiInputBase-root": {
         color: "#01c3a9",
+        borderRadius: "14px"
       },
       "& .MuiInputLabel-root": {
         color: "#bbbbbb",

src/components/Dialogs/NewDish.js

@@ -44,6 +44,7 @@ const useStyles = makeStyles((theme) => ({
       backgroundColor: "#262626",
       color: "#bbbbbb",
       overflow: "visible",
+      borderRadius: "24px"
     },
   },
   h4: {
@@ -61,6 +62,7 @@ const useStyles = makeStyles((theme) => ({
     margin: theme.spacing(2),
     "& .MuiInputBase-root": {
       color: "#bbbbbb",
+      borderRadius: "14px"
     },
     "& .MuiInputLabel-root": {
       color: "#bbbbbb",
@@ -72,6 +74,7 @@ const useStyles = makeStyles((theme) => ({
     color: "#bbbbbb",
     "& .MuiInputBase-root": {
       color: "#bbbbbb",
+      borderRadius: "14px"
     },
     "& .MuiInputLabel-root": {
       color: "#bbbbbb",
@@ -85,6 +88,7 @@ const useStyles = makeStyles((theme) => ({
     minWidth: 100,
     "& .MuiInputBase-root": {
       color: "#bbbbbb",
+      borderRadius: "14px"
     },
     "$ .MuiSelect-root": {
       color: "#bbbbbb",

src/components/Dialogs/NewRestaurant.js

@@ -50,6 +50,7 @@ const useStyles = makeStyles((theme) => ({
       width: "auto",
       backgroundColor: "#262626",
       color: "#bbbbbb",
+      borderRadius: "24px"
     },
   },
   closeButton: {
@@ -62,6 +63,7 @@ const useStyles = makeStyles((theme) => ({
     margin: theme.spacing(2),
     "& .MuiInputBase-root": {
       color: "#bbbbbb",
+      borderRadius: "14px"
     },
     "& .MuiInputLabel-root": {
       color: "#bbbbbb",
@@ -72,6 +74,7 @@ const useStyles = makeStyles((theme) => ({
     marginBottom: theme.spacing(2),
     "& .MuiInputBase-root": {
       color: "#bbbbbb",
+      borderRadius: "14px"
     },
     "& .MuiInputLabel-root": {
       color: "#bbbbbb",
@@ -95,6 +98,7 @@ const useStyles = makeStyles((theme) => ({
     maxHeight: 400,
     "& .MuiInputBase-root": {
       color: "#bbbbbb",
+      borderRadius: "14px"
     },
     "$ .MuiSelect-root": {
       color: "#bbbbbb",

src/components/Dialogs/RegisterDialog.js

@@ -54,6 +54,7 @@ export default function RegisterDialog(props) {
       "& .MuiPaper-root": {
         backgroundColor: "#262626",
         color: "#bbbbbb",
+        borderRadius: "24px"
       },
       "& .MuiFormHelperText-root": {
         color: "#606060",
@@ -72,6 +73,7 @@ export default function RegisterDialog(props) {
       width: "90%",
       "& .MuiInputBase-root": {
         color: "#01c3a9",
+        borderRadius: "14px"
       },
       "& .MuiInputLabel-root": {
         color: "#bbbbbb",

src/components/Dialogs/RegulaminDialog.js

@@ -21,6 +21,7 @@ export default function RegulaminDialog(props) {
       "& .MuiPaper-root": {
         backgroundColor: "#262626",
         color: "#bbbbbb",
+        borderRadius: "24px"
       },
       "& .MuiFormHelperText-root": {
         color: "#606060",

src/components/Dialogs/Settings.js

@@ -9,8 +9,14 @@ import ButtonPrimary from "../Input/ButtonPrimary";
 import IconButton from "@material-ui/core/IconButton";
 import TextField from "@material-ui/core/TextField";
 import CloseIcon from "@material-ui/icons/Close";
+import PersonIcon from '@material-ui/icons/Person';
 import { useSelector } from "react-redux";
 import { useHistory } from "react-router-dom";
+import InputAdornment from "@material-ui/core/InputAdornment";
+import AlternateEmailIcon from '@material-ui/icons/AlternateEmail';
+import BusinessIcon from '@material-ui/icons/Business';
+import FingerprintIcon from '@material-ui/icons/Fingerprint';
+import RoomIcon from '@material-ui/icons/Room';
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -19,6 +25,7 @@ const useStyles = makeStyles((theme) => ({
       minWidth: "30%",
       backgroundColor: "#262626",
       color: "#bbbbbb",
+      borderRadius: "24px"
     },
   },
   closeButton: {
@@ -31,6 +38,7 @@ const useStyles = makeStyles((theme) => ({
     margin: theme.spacing(2),
     "& .MuiInputBase-root": {
       color: "#bbbbbb",
+      borderRadius: "14px"
     },
     "& .MuiInputLabel-root": {
       color: "#bbbbbb",
@@ -89,7 +97,7 @@ export default function Settings() {
       <DialogTitle id="settings-title">Ustawienia konta</DialogTitle>
       <IconButton
         className={style.closeButton}
-        onClick={() => {}}
+        onClick={() => history.goBack()}
         aria-label="close"
       >
         <CloseIcon />
@@ -104,6 +112,13 @@ export default function Settings() {
           }
           label="Imię"
           variant="outlined"
+          InputProps={{
+            startAdornment: (
+              <InputAdornment position="start">
+                <PersonIcon color="primary"/>
+              </InputAdornment>
+            )
+          }}
         />
         <TextField
           className={style.textInput}
@@ -113,6 +128,13 @@ export default function Settings() {
           }
           label="Nazwisko"
           variant="outlined"
+          InputProps={{
+            startAdornment: (
+              <InputAdornment position="start">
+                <PersonIcon color="primary"/>
+              </InputAdornment>
+            )
+          }}
         />
         <TextField
           className={style.textInput}
@@ -122,6 +144,13 @@ export default function Settings() {
           }
           label="Email"
           variant="outlined"
+          InputProps={{
+            startAdornment: (
+              <InputAdornment position="start">
+                <AlternateEmailIcon color="primary"/>
+              </InputAdornment>
+            )
+          }}
         />
         <TextField
           className={style.textInput}
@@ -131,6 +160,13 @@ export default function Settings() {
           }
           label="Nazwa firmy"
           variant="outlined"
+          InputProps={{
+            startAdornment: (
+              <InputAdornment position="start">
+                <BusinessIcon color="primary"/>
+              </InputAdornment>
+            )
+          }}
         />
         <TextField
           className={style.textInput}
@@ -138,6 +174,13 @@ export default function Settings() {
           onChange={(event) => setState({ ...state, NIP: event.target.value })}
           label="NIP"
           variant="outlined"
+          InputProps={{
+            startAdornment: (
+              <InputAdornment position="start">
+                <FingerprintIcon color="primary"/>
+              </InputAdornment>
+            )
+          }}
         />
         <TextField
           className={style.textInput}
@@ -147,8 +190,16 @@ export default function Settings() {
           }
           label="Adres firmy"
           variant="outlined"
+          InputProps={{
+            startAdornment: (
+              <InputAdornment position="start">
+                <RoomIcon color="primary"/>
+              </InputAdornment>
+            )
+          }}
         />
-        <ButtonPrimary onClick={() => history.push("/")} text="Anuluj" />
+        <Divider />
+        <ButtonPrimary onClick={() => history.goBack()} text="Anuluj" />
         <ButtonSecondary text="Zapisz" />
       </DialogContent>
     </Dialog>

src/components/EditRestaurant/EditRestaurantInfo.js

@@ -35,6 +35,7 @@ const useStyles = makeStyles((theme) => ({
     margin: theme.spacing(2),
     "& .MuiInputBase-root": {
       color: "#bbbbbb",
+      borderRadius: "14px"
     },
     "& .MuiInputLabel-root": {
       color: "#bbbbbb",
@@ -45,6 +46,7 @@ const useStyles = makeStyles((theme) => ({
     marginBottom: theme.spacing(2),
     "& .MuiInputBase-root": {
       color: "#bbbbbb",
+      borderRadius: "14px"
     },
     "& .MuiInputLabel-root": {
       color: "#bbbbbb",
@@ -63,6 +65,7 @@ const useStyles = makeStyles((theme) => ({
     maxHeight: 400,
     "& .MuiInputBase-root": {
       color: "#bbbbbb",
+      borderRadius: "14px"
     },
     "$ .MuiSelect-root": {
       color: "#bbbbbb",

src/components/EditRestaurant/EditRestaurantMenu.js

@@ -22,6 +22,9 @@ const useStyles = makeStyles((theme) => ({
     backgroundColor: "#262626",
     color: "#bbbbbb",
     width: "100%",
+    maxWidth: "800px",
+    marginTop: "24px",
+    borderRadius: "24px"
   },
   expandIcon: {
     color: "#bbbbbb",
@@ -33,6 +36,7 @@ const useStyles = makeStyles((theme) => ({
     flexGrow: 5,
     "& .MuiInputBase-root": {
       color: "#bbbbbb",
+      borderRadius: "14px"
     },
     "& .MuiInputLabel-root": {
       color: "#bbbbbb",

src/components/EditRestaurant/LunchMenu.js

@@ -26,7 +26,8 @@ const useStyles = makeStyles((theme) => ({
     backgroundColor: "#262626",
     color: "#bbbbbb",
     width: "100%",
-    marginBottom: "24px",
+    maxWidth: "800px",
+    borderRadius: "24px"
   },
   expandIcon: {
     color: "#bbbbbb",
@@ -36,6 +37,7 @@ const useStyles = makeStyles((theme) => ({
     marginBottom: theme.spacing(2),
     "& .MuiInputBase-root": {
       color: "#bbbbbb",
+      borderRadius: "14px"
     },
     "& .MuiInputLabel-root": {
       color: "#bbbbbb",
@@ -52,6 +54,7 @@ const useStyles = makeStyles((theme) => ({
     flexGrow: 5,
     "& .MuiInputBase-root": {
       color: "#bbbbbb",
+      borderRadius: "14px"
     },
     "& .MuiInputLabel-root": {
       color: "#bbbbbb",
@@ -174,7 +177,7 @@ export default function EditCategoriesList(props) {
   // COMPONENT
 
   return (
-    <div style={{ width: "100%" }}>
+    <div style={{ width: "100%", display: "flex", flexFlow: "column", alignItems: "center"  }}>
       <YesNo open={open} cancel={onCancel} accept={onAccept} />
       {props.lunchMenu.length === 0 ? <p>Lunch menu puste</p> : SetList}
       <Accordion className={classes.root}>

src/components/Input/ButtonPrimary.js

@@ -4,7 +4,8 @@ import Button from "@material-ui/core/Button";
 
 const StyledButton = withStyles({
   root: {
-    backgroundColor: "#696969",
+    backgroundColor: "#9e9e9e",
+    borderRadius: "14px",
     color: "#262626",
     margin: "16px 16px 16px 16px",
     padding: "8px 12px 8px 12px",

src/components/Input/ButtonSecondary.js

@@ -5,6 +5,7 @@ import Button from "@material-ui/core/Button";
 const StylizedButton = withStyles({
   root: {
     background: "#d68000",
+    borderRadius: "14px",
     color: "#262626",
     margin: "16px 16px 16px 16px",
     padding: "8px 16px 8px 16px",

src/components/Input/Checkboxes.js

@@ -22,7 +22,7 @@ const useStyles = makeStyles((theme) => ({
       display: "inline",
     },
     border: "1px solid #1c1c1c",
-    borderRadius: "6px",
+    borderRadius: "24px",
     marginBottom: theme.spacing(2),
   },
   formControl: {

src/components/Input/InputLunchMenuHours.js

@@ -8,6 +8,7 @@ const useStyles = makeStyles((theme) => ({
   timePicker: {
     "& .MuiInputBase-root": {
       color: "#bbbbbb",
+      borderRadius: "14px"
     },
     "& .MuiInputLabel-root": {
       color: "#bbbbbb",

src/components/Input/InputPrices.js

@@ -18,6 +18,7 @@ const useStyles = makeStyles((theme) => ({
         },
     "& .MuiInputBase-root": {
       color: "#bbbbbb",
+      borderRadius: "14px"
     },
     "& .MuiInputLabel-root": {
       color: "#bbbbbb",

src/components/Input/InputWorkingHoursSingle.js

@@ -8,6 +8,7 @@ const useStyles = makeStyles((theme) => ({
   timePicker: {
     "& .MuiInputBase-root": {
       color: "#bbbbbb",
+      borderRadius: "14px"
     },
     "& .MuiInputLabel-root": {
       color: "#bbbbbb",

src/components/Input/SearchPanel.js

@@ -15,6 +15,7 @@ const useStyles = makeStyles((theme) => ({
     },
     "& .MuiInputBase-root": {
       color: "#bbbbbb",
+      borderRadius: "16px"
     },
     "& .MuiInputLabel-root": {
       color: "#bbbbbb",

src/components/Output/Contact.js

@@ -26,7 +26,7 @@ export default function Contact() {
   });
   const style = useStyles();
   return (
-    <Paper style={{ backgroundColor: "#262626", color: "#bbbbbb" }}>
+    <Paper style={{ backgroundColor: "#262626", color: "#bbbbbb", borderRadius: "24px" }}>
       <List className={style.root}>
         <ListItem>
           <LogoMain />
@@ -43,18 +43,10 @@ export default function Contact() {
         <ListItem>
           <ListItemText
             className={style.secondary}
-            primary="Biuro"
+            primary="Email"
             secondary="menui@menui.pl"
           />
         </ListItem>
-        <Divider />
-        <ListItem>
-          <ListItemText
-            className={style.secondary}
-            primary="Wsparcie techniczne"
-            secondary="support@menui.pl"
-          />
-        </ListItem>
       </List>
     </Paper>
   );

src/components/Output/EditCategoriesList.js

@@ -16,6 +16,8 @@ const useStyles = makeStyles((theme) => ({
     backgroundColor: "#262626",
     color: "#bbbbbb",
     width: "100%",
+    maxWidth: "800px",
+    borderRadius: "24px"
   },
   expandIcon: {
     color: "#bbbbbb",
@@ -25,6 +27,7 @@ const useStyles = makeStyles((theme) => ({
     marginBottom: theme.spacing(2),
     "& .MuiInputBase-root": {
       color: "#bbbbbb",
+      borderRadius: "14px"
     },
     "& .MuiInputLabel-root": {
       color: "#bbbbbb",
@@ -97,7 +100,7 @@ export default function EditCategoriesList(props) {
   });
 
   return (
-    <div style={{ width: "100%" }}>
+    <div style={{ width: "100%", display: "flex", flexFlow: "column", alignItems: "center" }}>
       <YesNo open={open} cancel={onCancel} accept={onAccept} />
       {CategoriesList}
     </div>

src/styles/Dialogs.scss

@@ -1,6 +1,3 @@
-.dialog-login {
-}
-
 .login-dialog-buttons {
   display: flex;
   justify-content: center;
@@ -27,6 +24,3 @@
     font-size: 0.8rem;
   }
 }
-
-.regulamin {
-}

src/styles/EditRestaurant.scss

@@ -1,8 +1,8 @@
 .editRestaurant-container {
-  min-width: 70%;
+  min-width: 60%;
   min-height: 600px;
   max-height: 80vh;
-  max-width: 80%;
+  max-width: 1000px;
   background-color: $dark-gray;
   border-radius: 15px;
   display: flex;
@@ -58,7 +58,7 @@
 
 .workingHours-container {
   border: 1px solid #1f1f1f;
-  border-radius: 6px;
+  border-radius: 24px;
   padding-top: 12px;
   padding-bottom: 12px;
   padding-left: 8px;
@@ -102,7 +102,7 @@
   justify-content: space-between;
   margin: 0px 8px 0px 8px;
   padding: 4px;
-  border-radius: 5px;
+  border-radius: 18px;
   h3 {
     font-size: 15px;
     margin-left: 14px;
@@ -112,7 +112,7 @@
 .editRestaurant-dishImg {
   height: 60px;
   width: 60px;
-  border-radius: 5px;
+  border-radius: 14px;
   background-size: cover;
 }
 
@@ -140,7 +140,6 @@
   display: flex;
   background-color: #242424;
   width: 100%;
-  justify-content: space-between;
   border-radius: 8px;
   h3 {
     font-weight: 300;
@@ -149,7 +148,7 @@
   h5 {
     color: #c0c0c0;
     font-weight: 400;
-    padding-right: 14px;
+    padding-left: 14px;
     font-size: 14px;
   }
 }

src/styles/Home.scss

@@ -13,7 +13,7 @@
   justify-content: center;
   background-color: rgba(0, 0, 0, 0.315);
   color: rgb(184, 184, 184);
-  border-radius: 8px;
+  border-radius: 24px;
   h5 {
     font-weight: 500;
     margin-left: 18px;

src/styles/NewRestaurant.scss

@@ -63,6 +63,7 @@
 .image-upload-container-wide {
   display: flex;
   width: 100%;
+  max-width: 600px;
   flex-direction: column;
   align-items: flex-end;
 }
@@ -70,8 +71,8 @@
 .image-preview-wide {
   width: 100%;
   height: 300px;
-  border-radius: 6px;
+  border-radius: 24px;
-  box-shadow: (5px 5px 15px rgba(0, 0, 0, 0.151));
+  box-shadow: (0px 5px 15px rgba(0, 0, 0, 0.151));
   display: flex;
   align-items: center;
   justify-content: center;
@@ -94,7 +95,7 @@
   font-size: 0.9rem;
   font-weight: 500;
   padding: 14px;
-  border-radius: 6px;
+  border-radius: 14px;
   color: #262626;
   background-color: #d68000;
   cursor: pointer;