Merge pull request #21 from myroslav111/myroslav_branche_12

restyle buttons
myroslav111 · Sep 19, 2022 · 621ceb6 · 621ceb6
2 parents 39442ca + 8a8339c
commit 621ceb6
Show file tree

Hide file tree

Showing 10 changed files with 144 additions and 70 deletions.
diff --git a/src/components/App.jsx b/src/components/App.jsx
@@ -14,7 +14,7 @@ export const App = () => {
       <Navigation />
       <AnimateRoutes />
       {email ? <FooterMobileUser /> : <AuthForm />}
-      <ToastContainer autoClose={3000} />
+      <ToastContainer autoClose={1500} />
     </div>
   );
 };
diff --git a/src/components/AuthForm/AuthForm.jsx b/src/components/AuthForm/AuthForm.jsx
@@ -31,14 +31,18 @@ function AuthForm() {
     <>
       <FooterContainer>
         {/* иконка инфо */}
-        <HelpCenterIcon
-          color="secondary"
-          fontSize="large"
-          onClick={handleOpenModal}
-        />
+        <div className="footer__icon">
+          <HelpCenterIcon
+            color="secondary"
+            fontSize="large"
+            onClick={handleOpenModal}
+          />
+        </div>
         {/* icon translation link to page*/}
         <NavLink to="/translate">
-          <GTranslateIcon fontSize="large" color="primary" />
+          <div className="footer__icon">
+            <GTranslateIcon fontSize="large" color="primary" />
+          </div>
         </NavLink>
         {!email ? (
           <ButtonGoogleAuth

diff --git a/src/components/Card/Card.css b/src/components/Card/Card.css
@@ -41,11 +41,49 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 50px;
+  /* width: 50px;
   height: 50px;
   border-radius: 50%;
   background-color: white;
+  cursor: pointer; */
+
+  align-self: center;
+  background-color: #fff;
+  background-image: none;
+  background-position: 0 90%;
+  background-repeat: repeat no-repeat;
+  background-size: 4px 3px;
+  border-radius: 15px 225px 255px 15px 15px 255px 225px 15px;
+  border-style: solid;
+  border-width: 2px;
+  box-shadow: rgba(0, 0, 0, 0.2) 15px 28px 25px -18px;
+  box-sizing: border-box;
+  color: #41403e;
   cursor: pointer;
+  /* display: inline-block; */
+  font-family: Neucha, sans-serif;
+  font-size: 1rem;
+  line-height: 23px;
+  outline: none;
+  padding: 0.75rem;
+  text-decoration: none;
+  transition: all 235ms ease-in-out;
+  border-bottom-left-radius: 15px 255px;
+  border-bottom-right-radius: 225px 15px;
+  border-top-left-radius: 255px 15px;
+  border-top-right-radius: 15px 225px;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: manipulation;
+}
+
+.paginator__btn:hover {
+  box-shadow: rgba(0, 0, 0, 0.3) 2px 8px 8px -5px;
+  transform: translate3d(0, 2px, 0);
+}
+
+.paginator__btn:focus {
+  box-shadow: rgba(0, 0, 0, 0.3) 2px 8px 4px -6px;
 }
 
 .description__wrap {

diff --git a/src/components/DeleteWord/DeleteWord.jsx b/src/components/DeleteWord/DeleteWord.jsx
@@ -28,7 +28,6 @@ const DeleteWord = ({ onWord, onSetWord, onIndexWord, onUserObj }) => {
         onSetWord(
           onWord.filter(word => word.idCard !== onWord[+onIndexWord].idCard)
         );
-        console.log(onUserObj);
         apiForRegisteredUsers.addWordAuth(onUserObj.id, onUserObj);
       } catch (error) {
         console.log(error);

diff --git a/src/components/FooterMobileUser/FooterMobileUser.css b/src/components/FooterMobileUser/FooterMobileUser.css
@@ -23,4 +23,49 @@
 
 .footer__icon {
   cursor: pointer;
+
+  align-items: center;
+  appearance: none;
+  background-color: #fcfcfd;
+  border-radius: 4px;
+  border-width: 0;
+  box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,
+    rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #d6d6e7 0 -3px 0 inset;
+  box-sizing: border-box;
+  color: #36395a;
+  cursor: pointer;
+  /* display: inline-flex; */
+  /* justify-content: center; */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  line-height: 1;
+  list-style: none;
+  overflow: hidden;
+  position: relative;
+  text-align: left;
+  text-decoration: none;
+  transition: box-shadow 0.15s, transform 0.15s;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: manipulation;
+  white-space: nowrap;
+  will-change: box-shadow, transform;
+  font-size: 18px;
+}
+
+.footer__icon:focus {
+  box-shadow: #d6d6e7 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px,
+    rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #d6d6e7 0 -3px 0 inset;
+}
+
+.footer__icon:hover {
+  box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px,
+    rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #d6d6e7 0 -3px 0 inset;
+  transform: translateY(-2px);
+}
+
+.footer__icon:active {
+  box-shadow: #d6d6e7 0 3px 7px inset;
+  transform: translateY(2px);
 }
diff --git a/src/components/FooterMobileUser/FooterMobileUser.jsx b/src/components/FooterMobileUser/FooterMobileUser.jsx
@@ -42,42 +42,43 @@ const FooterMobileUser = () => {
     <>
       {email && (
         <FooterContainer>
-          <HelpCenterIcon
-            className="footer__icon"
-            color="secondary"
-            fontSize="large"
-            onClick={handleOpenModal}
-          />
+          <div className="footer__icon">
+            <HelpCenterIcon
+              color="secondary"
+              fontSize="large"
+              onClick={handleOpenModal}
+            />
+          </div>
           {/* icon translation link to page*/}
-          <NavLink to="/translate">
-            <GTranslateIcon fontSize="large" color="primary" />
-          </NavLink>
-
-          <HomeIcon
-            className="footer__icon"
-            color="primary"
-            fontSize="large"
-            onClick={handleClick}
-          />
+          <div className="footer__icon">
+            <NavLink to="/translate">
+              <GTranslateIcon fontSize="large" color="primary" />
+            </NavLink>
+            {/* sx={{ fontSize: 30 }} */}
+          </div>
+          <div className="footer__icon">
+            <HomeIcon
+              // className="footer__icon"
+              color="primary"
+              fontSize="large"
+              onClick={handleClick}
+            />
+          </div>
           <Popper id={id} open={openPoper} anchorEl={anchorEl}>
             <Box sx={{ border: 1, p: 1, bgcolor: 'background.paper' }}>
               поки-що в розробці
             </Box>
           </Popper>
-
-          <TopicIcon
-            className="footer__icon"
-            color="success"
-            fontSize="large"
-            onClick={handleClick}
-          />
-
-          <ExitToAppIcon
-            className="footer__icon"
-            sx={{ color: red[500] }}
-            fontSize="large"
-            onClick={handleExitFromAccount}
-          />
+          <div className="footer__icon">
+            <TopicIcon color="success" fontSize="large" onClick={handleClick} />
+          </div>
+          <div className="footer__icon">
+            <ExitToAppIcon
+              sx={{ color: red[500] }}
+              fontSize="large"
+              onClick={handleExitFromAccount}
+            />
+          </div>
         </FooterContainer>
       )}
       <ModalInfo onOpen={isOpen} onSetOpen={setIsOpen} />

diff --git a/src/components/Form/Form.css b/src/components/Form/Form.css
@@ -20,30 +20,10 @@
   padding-left: 10px;
 }
 
-.button__add {
-  background: none;
-  color: inherit;
-  border: none;
-  padding: 0;
-  font: inherit;
-  cursor: pointer;
-  outline: inherit;
-  width: 60px;
-  height: 60px;
-  border-radius: 50%;
-  cursor: pointer;
-  color: #f57c00;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-top: 40px;
-  box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset,
-    rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset,
-    rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px,
-    rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px,
-    rgba(0, 0, 0, 0) 0px 16px 8px, rgba(0, 0, 0, 0) 0px 32px 16px;
-}
-
 label {
   font-size: 26px;
 }
+
+.paginator__btn.btn {
+  margin-top: 40px;
+}
diff --git a/src/components/Form/Form.jsx b/src/components/Form/Form.jsx
@@ -35,6 +35,7 @@ function Form() {
   const handleSubmitNewWord = async () => {
     if (!en || !ru) return toast.warn('🦄 Ви повинні додати слово.');
     setIsSuccess(true);
+
     let idCard = nanoid();
     if (!email) {
       apiForUnregisteredUsers.addWord({ en, ru });
@@ -80,9 +81,10 @@ function Form() {
       </label>
 
       <button
+        disabled={isSuccess}
         onClick={handleSubmitNewWord}
         type="submit"
-        className="button__add"
+        className="paginator__btn btn"
       >
         {!isSuccess ? (
           <AddCircleOutlineIcon />

diff --git a/src/components/Navigation/Navigation.css b/src/components/Navigation/Navigation.css
@@ -32,3 +32,9 @@
   color: green;
   transform: scale(1.3);
 }
+
+.icon-link {
+  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px,
+    rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
+  border-radius: 50%;
+}
diff --git a/src/components/Navigation/Navigation.jsx b/src/components/Navigation/Navigation.jsx
@@ -7,12 +7,10 @@ import LibraryAddIcon from '@mui/icons-material/LibraryAdd';
 import 'animate.css';
 import './Navigation.css';
 
-
 const Navigation = () => {
   const [name] = useState(localStorage.getItem('name') || '');
   const [image] = useState(localStorage.getItem('profilePic') || '');
 
-
   return (
     <div className="header">
       <div className="header__wrap">
@@ -29,7 +27,9 @@ const Navigation = () => {
             alignItems: 'center',
           }}
         >
-          <Avatar alt={name} src={image} />
+          <div className="icon-link">
+            <Avatar alt={name} src={image} />
+          </div>
           <span className="name">{name}</span>
         </Stack>
         <NavLink to="/cards" className="link ">
@@ -38,7 +38,6 @@ const Navigation = () => {
       </div>
     </div>
   );
-}
-
+};
 
-export default Navigation;
+export default Navigation;