style changes

client/src/styles/app.css

@@ -23,16 +23,23 @@ h1, h2, h3, h4 {
     margin: 0;
     padding: 0;
 }
-button {
-border: none;
-padding: 0.4em;
-}
-button.box-function, button.item-function {
-    font-size: 1em;
-}
+
+
 button:hover {
     cursor: pointer;
 }
+.box-header {
+    display: flex;
+    align-items: center;
+    padding: 0 16px;
+}
+.box-title-container {
+
+}
+.box-menu-container {
+    margin-right: 1em;
+    margin-left: auto;
+}
 .box-title {
     font-size: 1.25rem;
     line-height: 2rem;
@@ -51,10 +58,11 @@ ul.list-box {
     gap: 1em;
 }
 
-.box {
+li.box {
+    position: relative;
     height: min-content;
     width: 344px;
-    padding: 16px;
+    padding: 16px 0;
     background-color: white;
     border-radius: 4px;
     border-width: 1px;
@@ -67,52 +75,17 @@ ul.list-box {
     list-style: none;
 
 }
-.list-box-item {
-    margin: 1rem 0;
-    max-height: 200px;
-    overflow-y: scroll;
-}
-.list-box-item::-webkit-scrollbar {
-    width: 5px;
-}
-.list-box-item::-webkit-scrollbar-track {
-    background: #ddd;
-}
-.list-box-item::-webkit-scrollbar-thumb {
-    background: #666;
-}
-.item {
-    font-size: 0.75rem;
-    display: flex;
-    position: relative;
-    align-items: center;
-    justify-content: flex-start;
-    padding: 0.75rem;
-    list-style: none;
-}
 
-.head-divider {
-    margin: 1rem 0;
-    width: 100%;
-    height: 1px;
-    background-color: #e0e0e0;
+.item-menu-more-container {
+    z-index: 1;
 }
-
-.item-menu {
-    font-size: 1rem;
-    margin-right: 0;
-    margin-left: auto;
-}
-.item-menu:hover {
-    cursor: pointer;
-}
-.item-menu-more {
+.item-menu-more-list {
+    padding: 0;
+    width: 120px;
     position: absolute;
     margin: 0 10px 0 0;
     top: 2rem;
     right: 0;
-    height: 100px;
-    width: 75px;
     z-index: 1;
     background-color: white;
     border-radius: 4px;
@@ -123,8 +96,136 @@ ul.list-box {
         0px 0px 0px 0px rgba(0, 0, 0, 0.2), 
         0px 0px 0px 0px rgba(0, 0, 0, 0.14),
         0px 0px 0px 0px rgba(0,0,0,.12);
+}
+.box-menu-action {
+    list-style: none;
+    display: flex;
+    align-items: center;
+}
+
+.item-menu-action:hover {
+    cursor: pointer;
+    background-color: #F2F2F2;
+}
+.item-menu-action > .icon {
+    margin: 1rem 1rem;
+}
+.item-menu-action > .label {
+}
+
+
+
+.list-box-item {
+    padding: 0;
+    margin: 1rem 0;
+    max-height: 200px;
+    overflow-y: auto;
+}
+.list-box-item::-webkit-scrollbar {
+    width: 5px;
+}
+.list-box-item::-webkit-scrollbar-track {
+    background: #ddd;
+}
+.list-box-item::-webkit-scrollbar-thumb {
+    background: #666;
+}
+li.item {
+    font-size: 0.75rem;
+    display: flex;
+    position: relative;
+    align-items: center;
+    justify-content: flex-start;
+    padding: 0.75rem 0.75rem 0.75rem 1.25rem;
+    list-style: none;
+}
+li.item:hover {
+    background-color:#F2F2F2;
+}
+.head-divider {
+    margin: 16px;
+    width: auto;
+    height: 1px;
+    background-color: #e0e0e0;
+}
+.menu-more-container {
+    z-index: 1;
+}
+.menu-bottom {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-right: 1rem;
+}
+.add {
+    background-color: #f2f2f2;
+    padding: 0.75rem;
+    margin-right: 0;
+    margin-left: auto;
+    border-radius: 50%;
 
 }
-  .scroll1::-webkit-scrollbar-thumb {
-    background: #666; 
-  }
+.add:hover {
+    cursor: pointer;
+    background-color: #e0e0e0;
+}
+.menu-more {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0.1rem;
+    margin-right: 0;
+    margin-left: auto;
+    border-radius: 50%;
+}
+.menu-more:hover {
+    background-color: #e0e0e0;
+}
+.menu-more.box {
+    font-size: 1.25rem;
+}
+.menu-more.item {
+    font-size: 1rem;
+}
+.menu-more:hover {
+    cursor: pointer;
+}
+.menu-more-list {
+    padding: 0;
+    position: absolute;
+    z-index: 1;
+    background-color: white;
+    border-radius: 4px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: #e0e0e0;
+    box-shadow: 
+        0px 0px 0px 0px rgba(0, 0, 0, 0.2), 
+        0px 0px 0px 0px rgba(0, 0, 0, 0.14),
+        0px 0px 0px 0px rgba(0,0,0,.12);
+}
+.menu-more-list.box {
+    width: 120px;
+    margin: 0 10px 0 0;
+    top: 4rem;
+    right: 0;
+}
+.menu-more-list.item {
+    width: 120px;
+    margin: 0 10px 0 0;
+    top: 2rem;
+    right: 0;
+}
+.menu-action {
+    z-index: inherit;
+    list-style: none;
+    display: flex;
+    align-items: center;
+}
+.menu-action:hover {
+    cursor: pointer;
+    background-color: #F2F2F2;
+}
+.menu-action > .icon {
+    margin: 1rem 1rem;
+}