feat: History page(Add dropdown function) (#250)

* style: History)style.css - Add style for dropdown(#211) Signed-off-by: ByunJeongHeum <[email protected]> Co-authored-by: Han Kyuhyun <[email protected]> Co-authored-by: June Saehwan <[email protected]> Co-authored-by: jongmin Lee <[email protected]> * feat: History.jsx - Add function for flexible amount of Scan(#211) Signed-off-by: ByunJeongHeum <[email protected]> Co-authored-by: Han Kyuhyun <[email protected]> Co-authored-by: June Saehwan <[email protected]> Co-authored-by: jongmin Lee <[email protected]> * style: History)style.css - Add style for dropdown(#211) Signed-off-by: ByunJeongHeum <[email protected]> Co-authored-by: Han Kyuhyun <[email protected]> Co-authored-by: June Saehwan <[email protected]> Co-authored-by: jongmin Lee <[email protected]> * edit minor bug Signed-off-by: ByunJeongHeum <[email protected]> Co-authored-by: Han Kyuhyun <[email protected]> Co-authored-by: June Saehwan <[email protected]> Co-authored-by: jongmin Lee <[email protected]> * Include review, Correct navigation bar errors. Signed-off-by: Han Kyuhyun <[email protected]> Co-authored-by: ByunJeongHeum <[email protected]> Co-authored-by: June Saehwan <[email protected]> Co-authored-by: jongmin Lee <[email protected]> * Include Review, Move DropBox. Signed-off-by: Han Kyuhyun <[email protected]> Co-authored-by: ByunJeongHeum <[email protected]> Co-authored-by: June Saehwan <[email protected]> Co-authored-by: jongmin Lee <[email protected]> * Remove unnessary svg File. Signed-off-by: Han Kyuhyun <[email protected]> Co-authored-by: ByunJeongHeum <[email protected]> Co-authored-by: June Saehwan <[email protected]> Co-authored-by: jongmin Lee <[email protected]> * Remove unnessary empty space. Signed-off-by: Han Kyuhyun <[email protected]> Co-authored-by: ByunJeongHeum <[email protected]> Co-authored-by: June Saehwan <[email protected]> Co-authored-by: jongmin Lee <[email protected]> --------- Signed-off-by: ByunJeongHeum <[email protected]> Signed-off-by: Han Kyuhyun <[email protected]> Co-authored-by: Han Kyuhyun <[email protected]> Co-authored-by: June Saehwan <[email protected]> Co-authored-by: jongmin Lee <[email protected]>
Samsung · Oct 17, 2023 · 2619f06 · 2619f06
1 parent 7cdaac7
commit 2619f06
Show file tree

Hide file tree

Showing 3 changed files with 227 additions and 275 deletions.
diff --git a/frontend/public/image/svg/OptionBoxStroke.svg b/frontend/public/image/svg/OptionBoxStroke.svg
diff --git a/frontend/src/css/History_style.css b/frontend/src/css/History_style.css
@@ -10,29 +10,21 @@
   display: flex;
   flex-direction: row;
   justify-content: center;
-  width: 100%;
-  position: relative;
 }
 
 .history-send .div {
   background-color: #ffffff;
   border: 1px none;
-  height: 1080px;
   position: relative;
   width: 1920px;
 }
 
 .history-send .overlap {
-  background-image: url(../../public/image/svg/OptionBoxStroke.svg);
-  background-size: 100% 100%;
   height: 882px;
   left: 34px;
   position: absolute;
   top: 133px;
   width: 572px;
-  border-radius: 30px;
-  box-shadow: 0px 4px 4px #00000040, 2px 2px 2px 1px gray;
-  border: 1px solid gray;
 }
 
 .history-send .option-menu {
@@ -209,7 +201,6 @@
   display: block;
 }
 
-
 .history-send .text-wrapper-3 {
   color: #000000;
   font-family: "Inter-Bold", Helvetica;
@@ -218,25 +209,24 @@
   left: 10px;
   letter-spacing: 0;
   line-height: normal;
-  position: absolute;
+  position: relative;
   top: 0;
   white-space: nowrap;
 }
 
 .history-send .page-move-tool-bar {
   height: 30px;
-  left: 845px;
+  left: 900px;
   position: absolute;
-  top: 1027px;
   width: 286px;
 }
 
 .history-send .page-number {
   align-items: flex-start;
+  margin-top: 20px;
   display: inline-flex;
   gap: 33px;
   left: 35px;
-  position: absolute;
   top: 0;
 }
 
@@ -311,11 +301,9 @@
 }
 
 .history-send .overlap-2 {
-  height: 882px;
-  left: 635px;
-  position: absolute;
-  top: 134px;
   width: 1236px;
+  position: relative;
+  margin: 140px 0 0 630px;
 }
 
 .history-send .history-box {
@@ -329,16 +317,15 @@
 .history-send .history {
   height: 158px;
   left: 0;
-  position: absolute;
   top: 724px;
   width: 1242px;
 }
 
 .history-send .overlap-3 {
+  margin-top: 22px;
   background-image: url(../../public/image/png/Stroke.png);
   background-size: 100% 100%;
   height: 166px;
-  left: -4px;
   position: relative;
   width: 1244px;
 }
@@ -371,8 +358,6 @@
   position: absolute;
   top: 65px;
   white-space: nowrap;
-
-
 }
 
 .history-send .text-wrapper-8 ::after {
@@ -755,7 +740,7 @@
   letter-spacing: 0;
   line-height: normal;
   position: absolute;
-  top: 43px;
+  top: 42px;
   white-space: nowrap;
   width: 167px;
 }
@@ -769,7 +754,7 @@
 }
 
 .history-send .menu-line {
-  background-color: #0057b8;
+  background-color: #000000;
   height: 3px;
   left: 0;
   position: absolute;
@@ -778,6 +763,7 @@
 }
 
 .history-send .menu {
+  background-color: white;
   height: 96px;
   left: 0;
   position: absolute;
@@ -812,7 +798,7 @@
   letter-spacing: 0;
   line-height: normal;
   position: absolute;
-  top: 43px;
+  top: 42px;
   width: 115px;
 }
 
@@ -855,6 +841,34 @@
   width: 71px;
 }
 
+.history-send .text-wrapper-24 {
+  color: #000000;
+  font-family: "Inter-Regular", Helvetica;
+  font-size: 30px;
+  font-weight: 400;
+  left: 1395px;
+  letter-spacing: 0;
+  line-height: normal;
+  position: absolute;
+  top: 43px;
+  white-space: nowrap;
+  width: 167px;
+}
+
+.history-send .text-wrapper-25 {
+  color: #000000;
+  font-family: "Inter-Regular", Helvetica;
+  font-size: 30px;
+  font-weight: 400;
+  left: 1270px;
+  letter-spacing: 0;
+  line-height: normal;
+  position: absolute;
+  top: 43px;
+  white-space: nowrap;
+  width: 104px;
+}
+
 .history-send .LPVS {
   height: 96px;
   left: 0;
@@ -874,23 +888,9 @@
   top: 0px;
   white-space: nowrap;
   width: 100%;
-  margin-left: 10px;  
-  position: static;
-  z-index: 1;
-}
-
-.history-send .text-wrapper-998 {
-  color: #000000;
-  font-family: "Inter-Medium", Helvetica;
-  font-size: 20px;
-  font-weight: 500;
-  letter-spacing: 0;
-  line-height: normal;
-  top: 0;
-  width: 100%;
   margin-left: 10px;
   position: static;
-  right: 0;
+  z-index: 1;
 }
 
 .history-send .status-label {
@@ -1003,3 +1003,32 @@
   top: 3px;
   width: 100%;
 }
+
+.history-send .dropdown {
+  left: 53%;
+  margin-top: -25px;
+  position: absolute;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.history-send .dropdown span {
+  justify-content: start;
+  width: 160px;
+  font-size: 20px;
+  font-weight: bold;
+  margin-right: -20px;
+}
+
+.history-send .dropdown select {
+  padding: 5px;
+  width: 85px;
+  border: 0.1px solid black;
+  border-radius: 8px;
+  background-color: white;
+  font-size: 16px;
+  text-align: center;
+  outline: none;
+  transition: border-color 0.3s ease;
+}