more

src/Components/Document/DocumentListPage.js

@@ -190,12 +190,15 @@ const DocumentListPage = ({ perPage }) => {
             {allDocs.length > 0 ? (
               <div className="document-list-upper-wrapper">
                 <div className="list-upper-left">
+                  <div className="toggle-outer">
+                    <div className="toggle-header"> Response Verbosity</div>
+                    <div className="toggle-box">
                       <p className="select-billing-text">Min</p>
-
                       <Toggle onClick={handleToggle} />
-
                       <p className="select-billing-text">Max</p>
                     </div>
+                  </div>
+                </div>
                 <div className="list-upper-right">
                   <div className="d-flex justify-content-end mb-3">
                     <SelectDropdown

src/styles/doclist-page.scss

@@ -56,16 +56,38 @@
   display: flex;
   flex-direction: row;
   width: 100%;
-  background-color: yellow;
 }
 
 .list-upper-left {
-  background-color: blue;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
   width: 95%;
 }
 
+.toggle-outer {
+  display: flex;
+  flex-direction: column;
+}
+
+.toggle-box {
+  display: flex;
+  flex-direction: row;
+  width: 200px;
+  height: 15px;
+  justify-content: space-evenly;
+}
+
+.toggle-header {
+  display: flex;
+  justify-content: center;
+  padding-right: 16px;
+  margin-top: -8px;
+  height: 28px;
+}
+
 .list-upper-right {
-  background-color: red;
+  //
 }
 
 .document-list-lower-wrapper {
@@ -85,3 +107,9 @@
 .content-container {
   padding: 0rem 1rem;
 }
+
+@media only screen and (max-width: 1120px) {
+  .list-upper-left {
+    width: 980px;
+  }
+}