updates

Author: JustDeveloper1

lib/ui/select.js

@@ -34,7 +34,7 @@ const GoogleFonts_Icons_ArrowDropUp = (props) => (
 const Img = ({ item }) => (<img src={item[1]} title={item[0]} alt="" className='fi r2px ow' />);
 
 let selectID = 0;
-const ArrowDropUp_Translate = ['none', '0px 10px'];
+const ArrowDropUp_Translate = ['none', '0px -2px'];
 
 const Select = ({
     titles,
@@ -55,7 +55,7 @@ const Select = ({
             <button 
                 title={switch_ ? titles[1] : titles[0]} 
                 type='button' 
-                className='bb cw sb scp cp' 
+                className='bb cw sb scp cp t' 
                 onClick={() => setSwitch(!switch_)}
                 onMouseEnter={() => setHover(true)}
                 onMouseLeave={() => setHover(false)}
@@ -67,7 +67,7 @@ const Select = ({
                 <Img item={items[id]} />
                 {items[id][0]}
             </button>
-            {switch_ ? <div className='du'>{
+            {switch_ ? <div className='du r5px ob'>{
                 items.map((item, iid) => (
                     <button
                         key={iid}

pages/style.css

@@ -155,6 +155,8 @@ button {
     flex-direction: row;
     align-items: center;
     gap: 10px;
+    position: relative;
+    padding: 1px 6px;
 }
 
 .aic { /* Align Items - Center */
@@ -164,9 +166,15 @@ button {
 .r2px { /* border Radius - 2PX */
     border-radius: 2px;
 }
+.r5px { /* border Radius - 5PX */ 
+    border-radius: 5px;
+}
 .ow { /* Outline - White */
     outline: 4px solid white;
 }
+.ob { /* Outline - Black */ 
+    outline: 4px solid black;
+}
 
 .cp { /* Cursor - Pointer */
     cursor: pointer;
@@ -176,3 +184,13 @@ button {
     transition: 300ms;
     -webkit-transition: 300ms;
 }
+
+.du { /* Drop-Up */
+    position: absolute;
+    flex-direction: column;
+    bottom: 100%;
+    left: calc(24px + 10px);
+    padding: 2px 0px;
+    gap: 2px;
+    background-color: black;
+}