Final settings

SynCallServices · Jun 17, 2022 · 4932727 · 4932727
1 parent 47e79b1
commit 4932727
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 50 deletions.
diff --git a/amazon-solution/src/css/settings.css b/amazon-solution/src/css/settings.css
@@ -5,53 +5,55 @@
     padding: 0;
     box-sizing: border-box;
     font-family: Inter;
-
 }
 
 body {
     background-color: #6084a0;
     color: white;
+    position: relative;
+    min-height: 100vh;
+    width: 100%;
+    overflow: hidden;
 }
 
 .dashboard {
     display: flex;
-
-}
-
-.link {
-    display: flex;
-    text-decoration: none;
 }
 
 .menu {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 100vh;
-}
-
-.sub-menu {
+    position: absolute;
     flex-direction: column;
     justify-content: center;
-    align-items: center;
-    animation: fadeIn 2s;
-    width: 50%;
+    /*asi se centra todo*/
+    /* top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%); */
+    height: 1000px;
+    width: 1500px;
+    margin-left: 130px;
+    margin-top: 60px;
+    animation: fadeIn 5s;
 }
 
-.settings-card {
+.account,
+.information,
+.sound,
+.help,
+.s-account {
     background-color: #00274B;
     display: flex;
-    align-items: center;
     border-radius: 10px;
-    padding: 5%;
-    margin: 2%;
+    padding: 5px;
+    margin-right: 900px;
+    margin-left: 150px;
+    margin-bottom: 10px;
+    margin-top: 60px;
     cursor: pointer;
-    width: 100%;
 }
 
 .account:hover,
 .information:hover,
-{
+ {
     background-color: #00ABBA;
 }
 
@@ -72,30 +74,24 @@ body {
 .h_logo {
     color: white;
     margin: 10px;
-}
 
-.account-page{
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 90vw;
-    height: 90vh;
 }
 
+
 .acc-card {
     background-color: #00274B;
-    display: flex;
     width: 300px;
     height: 350px;
     justify-content: center;
+    display: flex;
     align-items: column;
     border-radius: 10px;
     padding: 5px;
     margin-right: 900px;
     margin-left: 500px;
     margin-bottom: 40px;
     margin-top: 60px;
-    animation: fadeIn 2s;
+    animation: fadeIn 5s;
 }
 
 .a_button {
@@ -110,35 +106,37 @@ body {
     font-weight: bold;
     padding: 5px 20px 5px 20px;
     width: 300px;
-    bottom: 0;
 }
 
 .a_button:hover {
     background-color: #00ABBA;
 }
 
-.a_button_help {
+.a_button_help, .a_button_info {
+    background-color: #00274B;
+    cursor: pointer;
+    border-radius: 10px;
+    color: white;
+    font-size: 24;
+    font-weight: bold;
+    padding: 5px 20px 5px 20px;
+}
+
+.a_button_info {
   position: absolute;
-  bottom: 20%;
-  right: 40%;
-  background-color: #00274B;
-  cursor: pointer;
-  border-radius: 10px;
-  padding: 5px 20px 5px 20px;
-  width: 300px;
-  color: white;
+  top: 10%;
+  left: 10%;
+
+}
+
+.a_button_help:hover {
+    background-color: #00ABBA;
 }
 
 .account-info {
     margin: 10px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
     justify-content: center;
-}
 
-.acc-info-inside{
-    margin: 2%;
 }
 
 @keyframes fadeIn {
@@ -153,7 +151,7 @@ body {
 
 .help {
     color: white;
-    animation: fadeIn 2s;
+    animation: fadeIn 5s;
     background: none;
 }
 

diff --git a/amazon-solution/src/views/Dashboard/components/Info.js b/amazon-solution/src/views/Dashboard/components/Info.js
@@ -1,4 +1,7 @@
+import { useNavigate } from 'react-router-dom'
+
 function Info() {
+  const navigate = useNavigate()
     return (
         <div className="info">
             <div className="info-title">
@@ -23,8 +26,12 @@ function Info() {
 
                 </a>
             </div>
+          <button onClick={() => {
+        navigate('/dashboard/settings')
+
+      }} className='a_button_info'>Back</button>
         </div>
     )
 }
 
-export default Info
+export default Info