Change up the custom block modal a bit

* Update custom-procedures.jsx

* Update custom-procedures.css

Author: SharkPool-SP

src/components/custom-procedures/custom-procedures.css

@@ -27,6 +27,12 @@
     display: flex;
     flex-direction: column;
     align-items: center;
+    justify-content: center;
+
+    margin-top: 15px;
+    margin-bottom: 15px;
+    border-radius: 10px;
+    border: 2px solid var(--ui-black-transparent, hsla(0, 0%, 0%, 0.15));
 }
 .color-picker-area > div:nth-child(1),
 .color-picker-area > div:nth-child(2) {
@@ -35,12 +41,6 @@
     flex-direction: row;
     justify-content: space-evenly;
 }
-/* .color-picker-area div:nth-child(1) {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
-}
-[theme="dark"] .color-picker-area div:nth-child(1) {
-    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
-} */
 
 /* Color inputs & color swatch */
 .body input[type="color"] {
@@ -90,7 +90,7 @@
 
 /* Preset color options */
 .preset-color {
-    border: 2px solid rgba(0, 0, 0, 0.2);
+    border: 2.5px solid rgba(0, 0, 0, 0.13);
     box-shadow: 0 0 0 2px hsla(0, 0%, 0%, 0.2);
     margin: 4px;
     border-radius: 100%;
@@ -99,7 +99,7 @@
 }
 /* prevent soft-looking colors */
 [theme="dark"] .preset-color {
-    box-shadow: 0 0 0 2px hsl(0deg 0% 40%);
+    box-shadow: rgb(52, 52, 52) 0px 0px 0px 2.5px;
 }
 
 .parent-custom {

src/components/custom-procedures/custom-procedures.jsx

@@ -230,7 +230,6 @@ const CustomProcedures = props => (
                     role="button"
                     tabIndex="0"
                     onClick={props.onAddCommand}
-                    style={{display: "none"}} //shhh
                 >
                     <img
                         className={styles.optionIcon}
@@ -418,4 +417,4 @@ CustomProcedures.propTypes = {
     onOutputTypeChanged: PropTypes.func.isRequired
 };
 
-export default injectIntl(CustomProcedures);
+export default injectIntl(CustomProcedures);