Actions style done

public/css/index.css

@@ -596,6 +596,83 @@ header .redirect-button:hover {
   margin: 0px 0.5vw;
   font-size: 1vw;
 }
+.control-panel .action-form {
+  box-sizing: border-box;
+  padding: 0px 16.5vw;
+}
+.control-panel .action-form form {
+  height: 100%;
+  max-width: 742px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  padding-top: 3vh;
+}
+.control-panel .action-form form select {
+  height: 4vh;
+  outline: none;
+}
+.control-panel .action-form form textarea {
+  resize: none;
+  outline: none;
+  font-family: Arial, Helvetica, sans-serif;
+}
+.control-panel .action-form form input[type=submit] {
+  font-size: 12pt;
+  margin-top: 1vh;
+  height: 5vh;
+  background-color: #2f71d5;
+  color: #fff;
+  border: none;
+  border: 1px solid #5597fc;
+}
+.control-panel .action-form form input[type=submit]:hover {
+  background-color: #397de5;
+}
+.control-panel .action-form form input[type=text] {
+  height: 5vh;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 2vw;
+  border: none;
+  border-bottom: 1px solid #a2a2a2;
+}
+.control-panel .action-form.add-word form select {
+  margin-bottom: 0.5vh;
+}
+.control-panel .action-form.add-word form textarea {
+  margin-top: 2vh;
+}
+.control-panel .action-form.add-category form input[type=text] {
+  margin-bottom: 1vh;
+}
+.control-panel .action-form.delete-word form select {
+  margin-bottom: 0.5vh;
+}
+.control-panel .action-form.edit-word form select {
+  margin-bottom: 0.5vh;
+}
+@media (max-width: 991.98px) {
+  .control-panel .action-form form input[type=submit] {
+    font-size: 2.4vw;
+  }
+}
+@media (max-width: 576px) {
+  .control-panel .action-form {
+    padding-left: 0;
+    padding-right: 0;
+  }
+  .control-panel .action-form form select {
+    border: none;
+    border-bottom: 1px solid #a2a2a2;
+    background-color: #fff;
+  }
+  .control-panel .action-form form input[type=submit] {
+    font-size: 12pt;
+  }
+  .control-panel .action-form form input[type=text] {
+    font-size: 12pt;
+  }
+}
 
 @media (max-width: 991.98px) {
   .control-panel .buttons-container {
@@ -622,10 +699,11 @@ header .redirect-button:hover {
     align-content: stretch;
   }
   .control-panel .buttons-container.nav-mode button {
+    transition: 0.4 ease-in-out;
     box-sizing: border-box;
     height: 8vh;
     border-radius: 0;
-    min-width: 50vw;
+    width: 50vw;
     flex-grow: 1;
     align-self: stretch;
     margin: 0;
@@ -637,10 +715,6 @@ header .redirect-button:hover {
     -webkit-transform: none;
     transform: none;
     box-shadow: none;
-    -webkit-transition-duration: none;
-    transition-duration: none;
-    -webkit-transition-property: none;
-    transition-property: none;
   }
   .control-panel .buttons-container.nav-mode button:hover, .control-panel .buttons-container.nav-mode button:focus, .control-panel .buttons-container.nav-mode button:active {
     -webkit-transform: none;
@@ -650,5 +724,13 @@ header .redirect-button:hover {
     transform: none;
   }
 }
+@media (max-width: 576px) {
+  .control-panel .buttons-container button {
+    font-size: 12pt;
+  }
+  .control-panel .buttons-container.nav-mode button {
+    font-size: 12pt;
+  }
+}
 
 /*# sourceMappingURL=index.css.map */

public/css/index.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../sass/index.scss","../sass/_header.scss","../sass/_game-container.scss","../sass/_hangman.scss","../sass/_word.scss","../sass/_current-score.scss","../sass/_categories.scss","../sass/_defeat-victory.scss","../sass/_loading.scss","../sass/_letters-registered.scss","../sass/_letter-input.scss","../sass/_form.scss","../sass/_message.scss","../sass/_control-panel.scss"],"names":[],"mappings":"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","file":"index.css"}
+{"version":3,"sourceRoot":"","sources":["../sass/index.scss","../sass/_header.scss","../sass/_game-container.scss","../sass/_hangman.scss","../sass/_word.scss","../sass/_current-score.scss","../sass/_categories.scss","../sass/_defeat-victory.scss","../sass/_loading.scss","../sass/_letters-registered.scss","../sass/_letter-input.scss","../sass/_form.scss","../sass/_message.scss","../sass/control-panel/_control-panel.scss","../sass/control-panel/_action-form.scss"],"names":[],"mappings":"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","file":"index.css"}

public/sass/control-panel/_action-form.scss

@@ -0,0 +1,157 @@
+.action-form {
+    //height: 40vh;
+
+    box-sizing: border-box;
+    padding: 0px 16.5vw;
+
+    form {
+
+        height: 100%;
+        max-width: 742px;
+
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+
+        //margin-top: 2.5vh;
+        padding-top: 3vh;
+
+        //border-top: 1px solid rgb(163, 163, 163);
+
+        select {
+            height: 4vh;
+            outline: none;
+        }
+
+        textarea {
+            resize: none;
+            outline: none;
+
+            font-family: Arial, Helvetica, sans-serif;
+        }
+
+        input[type="submit"] {
+
+            $background-color: #2f71d5; 
+
+            font-size: 12pt;
+
+            margin-top: 1vh;
+            height: 5vh;
+
+            background-color: $background-color;
+            color: #fff;
+
+            border: none;
+            border: 1px solid adjust-color($color: $background-color, $saturation: 30%, $lightness: 15%, $alpha: 1.0);
+
+            &:hover {
+                background-color: adjust-color($color: $background-color, $saturation: 10%, $lightness: 5%, $alpha: 1.0);
+
+            }
+        }
+
+        input[type="text"] {
+
+            height: 5vh;
+            font-family: Arial, Helvetica, sans-serif;
+            font-size: 2vw;
+
+            border: none;
+            border-bottom: 1px solid rgb(162, 162, 162);
+        }
+        
+    }
+
+    &.add-word {
+
+        form {
+            
+            select {
+                margin-bottom: 0.5vh;
+            }
+
+            textarea {
+
+                margin-top: 2vh;
+            }
+        }
+    }
+
+    &.add-category {
+
+        form {
+
+            input[type="text"] {
+
+                margin-bottom: 1vh;
+            }
+        }
+    }
+
+    &.delete-word {
+
+        form {
+
+            select {
+
+                margin-bottom: 0.5vh;
+            }
+        }
+    }
+
+    &.edit-word {
+
+        form {
+
+            select {
+
+                margin-bottom: 0.5vh;
+            }
+        }
+    }
+
+}
+
+@media (max-width: 991.98px) {
+
+    .action-form {
+
+        form {
+            
+            input[type="submit"] {
+                font-size: 2.4vw;
+
+            }
+        }
+    }
+}
+
+@media (max-width: 576px) {
+
+    .action-form {
+
+        padding-left: 0;
+        padding-right: 0;
+
+        form {
+
+            select {
+
+                border: none;
+                border-bottom: 1px solid rgb(162, 162, 162);
+                background-color: #fff;
+            }
+            
+            input[type="submit"] {
+                font-size: 12pt;
+
+            }
+
+            input[type="text"] {
+                font-size: 12pt;
+
+            }
+        }
+    }
+}

public/sass/control-panel/_control-panel.scss

@@ -1,5 +1,7 @@
 .control-panel {
 
+   // height: 80vh;
+
     .buttons-container {
 
         height: 60vh;
@@ -125,6 +127,8 @@
             font-size: 1vw;
         }
     }
+
+    @import 'action-form';
 }
 
 @mixin normalizeButton() {
@@ -134,10 +138,10 @@
         -webkit-transform: none;
         transform:none;
         box-shadow:none;
-        -webkit-transition-duration:none;
+        //-webkit-transition-duration:none;
-        transition-duration: none;
+        //transition-duration: none;
-        -webkit-transition-property:none;
+        //-webkit-transition-property:none;
-        transition-property: none;
+        //transition-property: none;
     }
     
     &:hover, &:focus, &:active {
@@ -186,12 +190,14 @@
             
             button {
                 @include normalizeButton();
+                transition: 0.4 ease-in-out;
+
                 box-sizing: border-box;
                 
                 height: 8vh;
                 border-radius: 0;
                 
-                min-width: 50vw;
+                width: 50vw;
 
                 flex-grow: 1;
                 align-self: stretch;
@@ -211,4 +217,22 @@
 
 @media (max-width: 576px) {
 
+    .control-panel {
+
+        .buttons-container {
+            
+            button {
+
+                font-size: 12pt;
+            }
+        }
+
+        .buttons-container.nav-mode {
+
+            button {
+
+                font-size: 12pt;
+            }
+        }
+    }
 }

public/sass/index.scss

@@ -28,4 +28,4 @@ html, body {
 @import 'letter-input';
 @import 'form';
 @import 'message';
-@import 'control-panel';
+@import './control-panel/control-panel';

src/components/Admin/Control Panel/Actions/AddCategory/AddCategory.jsx

@@ -7,7 +7,8 @@ const AddCategory = () => {
     return (
         <div className="action-form add-category">
             <form>
-                <input type="text"/>
+                <input type="text" placeholder="Add the new category [English]" required/>
+                <input type="text" placeholder="Add the new category [Spanish]" required/>
                 <input type="submit"/>
             </form>
         </div>

src/components/Admin/Control Panel/Actions/AddWord/AddWord.jsx

@@ -7,6 +7,12 @@ const AddWord = () => {
     return (
         <div className="action-form add-word">
             <form>
+                <select>
+                    <option>Select language</option>
+                </select>
+                <select>
+                    <option>Select category</option>
+                </select>
                 <textarea placeholder="Add the word/words separated by commas" cols="30" rows="10"></textarea>
                 <input type="submit" value="Add Word(s)" />
             </form>